/* ===== LA GRISOUTIÈRE — Styles globaux ===== */

/* Skip-link a11y — visible uniquement au focus clavier */
.skip-link {
  position: absolute;
  left: 0;
  top: -100px;
  z-index: 10000;
  padding: 0.75rem 1rem;
  background: #1a3018;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  border-radius: 0 0 4px 0;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid #ffd966;
  outline-offset: -3px;
}
/* WCAG 2.2 — 2.4.11 Focus Not Obscured + 2.4.7 Focus Visible */
.nav-links a:focus-visible,
.nav-cta:focus-visible,
.nav-dropdown-toggle:focus-visible,
.nav-theme-switcher > button:focus-visible,
.footer-subnav-link:focus-visible {
  outline: 3px solid #ffd966;
  outline-offset: 2px;
  border-radius: 4px;
}
/* Préserver le focus naturel sur #main-content quand utilisateur Tab vers skip-link */
#main-content:focus-visible {
  outline: 2px dashed #3a5a2e;
  outline-offset: 4px;
}

:root {
  --hero-bg: url('images/structure/structure_1776755200_4699b3af.webp');
  --vert-fonce: #3a5a2e;
  --vert-moyen: #5a7f48;
  --vert-clair: #8fb87a;
  --vert-pale: #eef4ea;
  --terre: #8b5e3c;
  --terre-claire: #c49a6c;
  --creme: #f5f0e8;
  --blanc: #fffdf9;
  --gris-chaud: #6b6259;
  --texte: #2d2520;
  --texte-fonce: #1a1410;
  --ombre: rgba(58, 42, 30, 0.12);
}

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

img, video, iframe, table {
  max-width: 100%;
}

html {
  overflow-x: clip;
  max-width: 100vw;
}
body {
  overflow-x: clip;
  max-width: 100vw;
  scroll-behavior: smooth;
}

body {
  font-family: sans-serif;
  background-color: var(--creme);
  color: var(--texte);
  line-height: 1.7;
}

/* ===== NAVIGATION ===== */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: rgba(58, 90, 46, 0.92);
  backdrop-filter: blur(8px);
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  box-shadow: 0 2px 20px rgba(0,0,0,0.2);
}

/* Bannière centrale nav — lien cliquable limité à l'image */
.nav-banner {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 1;
}
.nav-banner img {
  height: 100%;
  width: auto;
  display: block;
}

.nav-logo {
  font-family: serif;
  color: var(--creme);
  font-size: 1.3rem;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-logo-img {
  height: 40px;
  width: auto;
  display: block;
}

.nav-logo span {
  font-size: 1.6rem;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 2rem;
  position: relative;
  z-index: 2;
}

.nav-links a {
  color: rgba(245, 240, 232, 0.85);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 0.2s;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--terre-claire);
}

.nav-cta {
  background: var(--terre);
  color: var(--creme) !important;
  padding: 0.45rem 1.1rem;
  border-radius: 20px;
  transition: background 0.2s !important;
}

.nav-cta:hover {
  background: var(--terre-claire) !important;
  color: var(--texte) !important;
}

/* Compteurs nav */
.nav-counters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px;
  padding: 0.3rem 0.9rem;
  margin-right: auto;
  margin-left: 0;
  position: relative;
  z-index: 2;
}

.nav-theme-switcher {
  position: relative;
  z-index: 3;
  margin: 0 0.5rem 0 0;
  display: flex;
  align-items: center;
}

.nav-theme-switcher > button {
  width: 2.75rem;     /* 44px — WCAG 2.5.8 Target Size */
  height: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.5rem;    /* centre l'icône sans la grossir */
  display: flex;
  align-items: center;
  justify-content: center;
}

#nav-theme-panel {
  top: calc(100% + 8px);
  left: 0;
  right: auto;
  width: min(230px, calc(100vw - 16px));
  max-width: min(230px, calc(100vw - 16px));
  max-height: min(72vh, calc(100dvh - 60px));
  overflow: auto;
  overscroll-behavior: contain;
}

#nav-theme-panel .gts-theme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
}
.nav-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}
.nav-counter > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.nav-counter-num {
  font-size: 1rem;
  font-weight: 700;
  color: var(--terre-claire);
}
.nav-counter-label {
  font-size: 0.62rem;
  color: rgba(245,240,232,0.65);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.nav-counter-sep {
  color: rgba(255,255,255,0.2);
  font-size: 1.2rem;
  line-height: 1;
}

/* Burger menu mobile */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: rgba(58, 90, 46, 0.75);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 8px;
  padding: 8px 10px;
  position: relative;
  z-index: 2;
  min-height: 44px;
  min-width: 44px;
  align-items: center;
  justify-content: center;
}
.burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--creme);
  border-radius: 2px;
  transition: all 0.3s;
}

/* Dropdown nav */
.nav-dropdown-toggle { display: none; }
.nav-dropdown {
  position: relative;
}
.nav-dropdown > a {
  display: flex;
  align-items: center;
  gap: 0.3em;
}
.nav-dropdown > a::after {
  content: '▾';
  font-size: 0.7em;
  opacity: 0.7;
  transition: transform 0.2s;
}
.nav-dropdown:hover > a::after {
  transform: rotate(180deg);
}
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--vert-fonce);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0 0 10px 10px;
  padding: 0.5rem 0;
  min-width: 170px;
  list-style: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  z-index: 100;
}
.nav-dropdown:hover .nav-dropdown-menu {
  display: block;
}
.nav-dropdown-menu li a {
  display: block;
  padding: 0.55rem 1.2rem;
  color: rgba(245,240,232,0.85);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.nav-dropdown-menu li a:hover,
.nav-dropdown-menu li a.active {
  color: var(--terre-claire);
  background: rgba(255,255,255,0.06);
}

/* ===== HERO ===== */
.hero {
  min-height: 100vh;
  background: linear-gradient(160deg, var(--vert-fonce) 0%, #2c4a22 40%, #1a3018 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 2rem 4rem;
  position: sticky;
  top: 0;
  z-index: 0;
  overflow: hidden;
}

/* Sticky-cover : les sections après .hero glissent par-dessus pendant le scroll */
:where(.hero ~ *) {
  position: relative;
  z-index: 1;
  background-color: var(--creme);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23f5f0e8' fill-opacity='0.04' d='M0,192L48,176C96,160,192,128,288,138.7C384,149,480,203,576,224C672,245,768,235,864,208C960,181,1056,139,1152,138.7C1248,139,1344,181,1392,202.7L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") bottom/cover no-repeat;
}

.hero-logo-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.hero-logo-bg img {
  width: min(115vw, 1500px);
  height: auto;
  opacity: 0.75;
  user-select: none;
}

.hero-content {
  position: relative;
  max-width: 750px;
  width: 100%;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(26, 48, 24, 0.82);
  border: 1.5px solid rgba(255,255,255,0.18);
  color: var(--terre-claire);
  padding: 0.55rem 1.2rem;
  border-radius: 30px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  max-width: 90vw;
  white-space: normal;
  word-break: break-word;
  margin-top: 2rem;
  margin-bottom: 0;
}

.hero h1 {
  font-family: serif;
  font-size: clamp(2.8rem, 7vw, 5rem);
  color: #fff;
  line-height: 1.1;
  margin-bottom: 0.3rem;
  text-shadow: 0 2px 20px rgba(0,0,0,0.6), 0 1px 5px rgba(0,0,0,0.5);
}

.hero h1 em {
  color: #f0d898;
  font-style: normal;
}

.hero-subtitle {
  font-size: clamp(1rem, min(1.8vw, 3vh), 1.5rem);
  color: rgba(255, 255, 255, 0.92);
  margin: 1.2rem 0 2.5rem;
  font-weight: 300;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 2px 16px rgba(0,0,0,0.7);
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Compensation ancres masquées sous la navbar fixe + TDB */
[id]:target { scroll-margin-top: 120px; }

/* ===== HERO SPLIT LAYOUT (Proposition B) ===== */
.hero-split {
  flex-direction: row;
  gap: clamp(2rem, 6vw, 8rem);
  text-align: left;
  padding: clamp(5rem, 8vh, 8rem) clamp(4%, 8%, 12%) clamp(3rem, 5vh, 5rem);
  align-items: center;
  justify-content: center;
  min-height: 100vh; min-height: 100dvh;
  position: sticky;
  top: 0;
  z-index: 0;
}

.hero-split .hero-content {
  flex: 1;
  max-width: clamp(320px, min(40vw, 70vh), 680px);
  text-align: left;
}

.hero-split .hero-buttons {
  justify-content: flex-start;
}

.hero-split .hero-badge {
  margin-top: 1.5rem;
}

@media (max-width: 750px) {
  .hero-split {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
    padding: 5rem 1.5rem 3rem;
    min-height: 100dvh;
  }
  .hero-split .hero-logo-wrap {
    width: clamp(160px, 50vw, 240px);
    padding: 0.5rem;
  }
  .hero-split .hero-content {
    max-width: 100%;
    text-align: center;
  }
  .hero-split .hero-buttons {
    justify-content: center;
  }
}
/* ===== BOUTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.8rem;
  border-radius: 30px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.25s;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: var(--terre);
  color: var(--creme);
}
.btn-primary:hover {
  background: var(--terre-claire);
  color: var(--texte);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(139, 94, 60, 0.4);
}

.btn-outline {
  background: rgba(90, 127, 72, 0.75);
  color: var(--creme);
  border: 2px solid var(--vert-moyen);
}
.btn-outline:hover {
  background: var(--vert-fonce);
  border-color: var(--vert-moyen);
  transform: translateY(-2px);
}

.btn-green {
  background: var(--vert-moyen);
  color: #ffffff;
}
.btn-green:hover {
  background: var(--vert-fonce);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(90, 127, 72, 0.4);
}

/* ===== SECTIONS ===== */
section {
  padding: 5rem 2rem;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
}

.section-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vert-moyen);
  margin-bottom: 0.5rem;
}

.section-title {
  font-family: serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--vert-fonce);
  margin-bottom: 1rem;
  line-height: 1.2;
}

.section-intro {
  font-size: 1.05rem;
  color: var(--gris-chaud);
  max-width: 640px;
  margin-bottom: 3rem;
}
#media-intro { max-width: none; }

/* ===== PRÉSENTATION ===== */
.presentation {
  background: var(--blanc);
  position: relative;
  z-index: 1;
}

.presentation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.presentation-text p {
  color: var(--gris-chaud);
  margin-bottom: 1.2rem;
  font-size: 1.05rem;
}

.presentation-visual {
  background: linear-gradient(135deg, var(--vert-fonce), var(--vert-moyen));
  border-radius: 20px;
  padding: 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.stat-card {
  background: rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 1.2rem;
  text-align: center;
  color: var(--creme);
}

.stat-card .number {
  font-family: serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--terre-claire);
  display: block;
}

.stat-card .label {
  font-size: 0.8rem;
  opacity: 0.8;
  margin-top: 0.2rem;
}

.stat-card .sublabel {
  font-size: 0.72rem;
  opacity: 0.55;
  margin-top: 0.15rem;
  font-style: italic;
}

.fondatrices {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--creme);
  border-radius: 12px;
  border-left: 4px solid var(--vert-moyen);
}

.fondatrices h3 {
  font-family: serif;
  color: var(--vert-fonce);
  margin-bottom: 0.5rem;
}

.fondatrices p {
  color: var(--gris-chaud);
  font-size: 0.95rem;
  margin: 0 !important;
}

/* ===== RÉSIDENTS APERÇU ===== */
.residents-preview {
  background: var(--creme);
  position: relative;
  z-index: 1;
}

.residents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.skeleton-card {
  min-height: 360px;
  pointer-events: none;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent),
    linear-gradient(180deg, rgba(196,154,108,0.16), rgba(58,90,46,0.08));
  background-size: 220px 100%, 100% 100%;
  background-position: -220px 0, 0 0;
  animation: skeleton-sheen 1.4s ease-in-out infinite;
}

@keyframes skeleton-sheen {
  to { background-position: calc(100% + 220px) 0, 0 0; }
}

.resident-card {
  background: var(--blanc);
  border-radius: 16px;
  padding: 1.8rem 1.5rem;
  text-align: center;
  box-shadow: 0 4px 20px var(--ombre);
  transition: transform 0.25s, box-shadow 0.25s;
}

.resident-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px var(--ombre);
}

/* Variante vedette (accueil) — fiche cliquable + actions internes */
.resident-card-vedette {
  padding: 0 0 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.resident-card-clickarea {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 0 1.5rem;
  cursor: pointer;
}
.resident-card-clickarea > div:first-child {
  margin: 0 -1.5rem 0.8rem;
  width: calc(100% + 3rem);
  height: 260px;
  overflow: hidden;
}
.resident-card-clickarea > div:first-child img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.resident-card-clickarea:hover > div:first-child img {
  transform: scale(1.05);
}
.resident-card-title {
  font-family: serif;
  color: var(--vert-fonce);
  font-size: 1.2rem;
  margin: 0.8rem 0 0.3rem;
  text-align: center;
}
.resident-card-specs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0.4rem 0;
}
.resident-card-specs .info-pill { font-size: 0.72rem; }
.resident-card-desc {
  font-size: 0.9rem;
  color: var(--gris-chaud);
  margin-bottom: 0.6rem;
}
.resident-card-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.6rem;
  padding: 0 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}
.resident-card-cta,
.resident-card-parrain-btn {
  display: inline-block;
  padding: 0.45rem 1rem;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.15s;
  cursor: pointer;
}
.resident-card-cta {
  background: var(--vert-moyen);
  color: #fff;
}
.resident-card-cta:hover { opacity: 0.85; transform: translateY(-1px); }
.resident-card-parrain-btn {
  background: var(--terre, #c49a6c);
  color: #fff;
}
.resident-card-parrain-btn:hover { opacity: 0.85; transform: translateY(-1px); }

.resident-card .emoji {
  font-size: 3rem;
  display: block;
  margin-bottom: 0.8rem;
}

.resident-card h3 {
  font-family: serif;
  color: var(--vert-fonce);
  font-size: 1.2rem;
  margin-bottom: 0.3rem;
}

.resident-card .espece {
  font-size: 0.8rem;
  color: var(--vert-moyen);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.resident-card p {
  font-size: 0.9rem;
  color: var(--gris-chaud);
}

.resident-card .badge {
  display: inline-block;
  background: var(--vert-fonce);
  color: var(--creme);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 10px;
  margin-top: 0.5rem;
}

/* ===== DON / SOUTIEN ===== */
.soutien {
  background: linear-gradient(135deg, var(--vert-fonce) 0%, #1a3018 100%);
  color: var(--creme);
  text-align: center;
  position: relative;
  z-index: 1;
}

.soutien .section-title {
  color: var(--creme);
}

.soutien .section-intro {
  color: rgba(245, 240, 232, 0.75);
  max-width: 580px;
  margin: 0 auto 1rem;
}

.soutien-detail {
  color: var(--terre-claire);
  font-size: 1.1rem;
  margin-bottom: 2.5rem;
}

.soutien-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 1.2rem;
  margin-bottom: 3rem;
}

.soutien-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 1.8rem 1.5rem;
  transition: background 0.2s;
}

.soutien-card:hover {
  background: rgba(255,255,255,0.12);
}

.soutien-card .icon {
  font-size: 2rem;
  margin-bottom: 0.8rem;
  display: block;
}

.soutien-card h3 {
  font-family: serif;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: var(--terre-claire);
}

.soutien-card p {
  font-size: 0.9rem;
  opacity: 0.75;
}

/* ===== ACTUALITÉS ===== */
.actualites {
  background: var(--blanc);
  position: relative;
  z-index: 1;
}

.actu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.actu-grid .skeleton-card {
  min-height: 250px;
}

.actu-card {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px var(--ombre);
  background: var(--blanc);
  transition: transform 0.25s;
  text-decoration: none;
  color: inherit;
  display: block;
  position: relative;
}

.actu-card:hover {
  transform: translateY(-4px);
}

.actu-card-top {
  padding: 1.1rem 1.3rem 0.9rem;
}
.actu-card-source-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.55rem;
}
.actu-card-source-row .source-logo {
  font-size: 1.3rem;
  line-height: 1;
}
.actu-card-source-row .source-name {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gris-chaud);
}
.actu-card-source-row .actu-card-date {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--terre);
  font-weight: 600;
}
.actu-card-top h3 {
  font-family: serif;
  color: var(--vert-fonce);
  font-size: 1rem;
  line-height: 1.4;
  margin: 0;
}
.actu-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  z-index: 0;
  transition: transform 0.35s;
}
.actu-card.has-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(245,240,232,0.06) 0%, rgba(245,240,232,0.78) 55%, rgba(245,240,232,0.96) 100%);
  z-index: 1;
}
.actu-card > *:not(.actu-card-bg) {
  position: relative;
  z-index: 2;
}
.actu-card:hover .actu-card-bg {
  transform: scale(1.04);
}

.actu-card-body {
  padding: 1rem 1.3rem 1.2rem;
}

.actu-card-body p {
  font-size: 0.9rem;
  color: var(--gris-chaud);
}

.actu-lien {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--vert-moyen);
  font-size: 0.85rem;
  font-weight: 700;
  margin-top: 0.8rem;
}

/* ===== CONTACT ===== */
.contact {
  background: var(--creme);
}

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

.contact-info h2 {
  font-family: serif;
  color: var(--vert-fonce);
  font-size: 2rem;
  margin-bottom: 1rem;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.contact-item .icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.contact-item strong {
  display: block;
  color: var(--vert-fonce);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.2rem;
}

.contact-item p,
.contact-item a {
  color: var(--gris-chaud);
  text-decoration: none;
  font-size: 0.95rem;
}

.contact-item a:hover {
  color: var(--vert-moyen);
}

.social-links {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  border-radius: 25px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s;
}

.social-facebook {
  background: #1877f2;
  color: white;
}
.social-facebook:hover {
  background: #0d65d9;
  transform: translateY(-2px);
}

.social-instagram {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: white;
}
.social-instagram:hover {
  opacity: 0.88;
  transform: translateY(-2px);
}

.social-messenger {
  background: linear-gradient(45deg, #0084ff, #a334fa);
  color: white;
}
.social-messenger:hover {
  opacity: 0.88;
  transform: translateY(-2px);
}

.social-helloasso {
  background: #49D38A;
  color: white;
}
.social-helloasso:hover {
  background: #38b874;
  transform: translateY(-2px);
}

.contact-label-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--vert-fonce);
  color: var(--creme);
  padding: 0.5rem 1rem;
  border-radius: 25px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-top: 1rem;
}
.social-logo {
  display: block;
  height: 38px;
  width: auto;
  vertical-align: middle;
}
/* ===== FOOTER ===== */
/* Réinitialiser les styles boutons des liens sociaux dans le footer */
footer nav a.social-facebook,
footer nav a.social-instagram,
footer nav a.social-messenger,
footer nav a.social-helloasso {
  background: none;
  color: rgba(245, 240, 232, 0.6);
  padding: 0;
  border-radius: 0;
  display: inline;
}
footer nav a.social-facebook:hover,
footer nav a.social-instagram:hover,
footer nav a.social-messenger:hover,
footer nav a.social-helloasso:hover {
  background: none;
  color: var(--terre-claire);
  transform: none;
  opacity: 1;
}

footer {
  background: #1a2e14;
  color: rgba(245, 240, 232, 0.6);
  text-align: center;
  padding: 2.5rem 2rem;
  font-size: 0.85rem;
  position: relative;
  z-index: 1;
}

footer a {
  color: var(--terre-claire);
  text-decoration: none;
}

footer .footer-logo {
  font-family: serif;
  font-size: 1.5rem;
  color: var(--creme);
  margin-bottom: 0.5rem;
  display: block;
}

footer nav {
  position: static;
  background: none;
  backdrop-filter: none;
  box-shadow: none;
  height: auto;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 1rem 0;
}

footer nav a {
  color: rgba(245, 240, 232, 0.6);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

footer nav a:hover {
  color: var(--terre-claire);
}

.nav-counter-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav-counter-num-highlight {
  color: var(--terre-claire);
}

.tdb-label {
  padding: 0 1rem;
  font-weight: 700;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,0.15);
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(0,0,0,0.2);
  flex-shrink: 0;
  letter-spacing: 0.04em;
  position: relative;
  z-index: 2;
}

.tdb-viewport {
  flex: 1;
  overflow: hidden;
  height: 100%;
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.tdb-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  will-change: transform;
}

.tdb-entry {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0 1.2rem;
}

.tdb-name {
  font-weight: 400;
}

.tdb-name-adherent {
  font-weight: 700;
}

.tdb-name-parrain {
  font-weight: 700;
  color: #f48fb1;
}

.tdb-amount {
  color: #f5c842;
}

.tdb-separator {
  opacity: 0.25;
  font-size: 0.7rem;
}

.tdb-message {
  display: inline-flex;
  align-items: center;
  padding: 0 1.5rem;
  font-style: italic;
}

.tdb-message-start {
  opacity: 0.9;
}

.tdb-message-end {
  opacity: 0.85;
}

.nav-theme-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  font-size: 1rem;
  line-height: 1;
  transform: translateY(-0.5px);
}

.gts-theme-panel-title {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #aaa;
  font-weight: 700;
  padding: 0 0.2rem 0.5rem;
  line-height: 1.2;
}

.gts-theme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
}

.gts-nav-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.38rem 0.5rem;
  border-radius: 8px;
  border: 2px solid transparent;
  background: #f5f5f5;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 600;
  color: #333;
  text-align: left;
}

.gts-nav-item.is-active {
  background: #fff;
}

.gts-theme-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.gts-nav-item.theme-key-default.is-active { border-color: #3a5a2e; }
.gts-nav-item.theme-key-printemps.is-active { border-color: #2d6a4f; }
.gts-nav-item.theme-key-ete.is-active { border-color: #c05010; }
.gts-nav-item.theme-key-automne.is-active { border-color: #6b2d1a; }
.gts-nav-item.theme-key-hiver.is-active { border-color: #1a2a4a; }
.gts-nav-item.theme-key-sakura.is-active { border-color: #5a2040; }
.gts-nav-item.theme-key-halloween.is-active { border-color: #1a0a2a; }
.gts-nav-item.theme-key-noel.is-active { border-color: #1a3a1a; }
.gts-nav-item.theme-key-anniversaire.is-active { border-color: #4a1a7a; }
.gts-nav-item.theme-key-normandie.is-active { border-color: #4a5830; }
.gts-nav-item.theme-key-prairie.is-active { border-color: #4a3090; }
.gts-nav-item.theme-key-etoiles.is-active { border-color: #20185a; }
.gts-nav-item.theme-key-paille.is-active { border-color: #7a5a10; }
.gts-nav-item.theme-key-manche.is-active { border-color: #0a6070; }
.gts-nav-item.theme-key-couchersoleil.is-active { border-color: #a02810; }
.gts-nav-item.theme-key-mernoire.is-active { border-color: #1a3848; }

.theme-key-default .gts-theme-swatch { background: #3a5a2e; }
.theme-key-printemps .gts-theme-swatch { background: #2d6a4f; }
.theme-key-ete .gts-theme-swatch { background: #c05010; }
.theme-key-automne .gts-theme-swatch { background: #6b2d1a; }
.theme-key-hiver .gts-theme-swatch { background: #1a2a4a; }
.theme-key-sakura .gts-theme-swatch { background: #5a2040; }
.theme-key-halloween .gts-theme-swatch { background: #1a0a2a; }
.theme-key-noel .gts-theme-swatch { background: #1a3a1a; }
.theme-key-anniversaire .gts-theme-swatch { background: #4a1a7a; }
.theme-key-normandie .gts-theme-swatch { background: #4a5830; }
.theme-key-prairie .gts-theme-swatch { background: #4a3090; }
.theme-key-etoiles .gts-theme-swatch { background: #20185a; }
.theme-key-paille .gts-theme-swatch { background: #7a5a10; }
.theme-key-manche .gts-theme-swatch { background: #0a6070; }
.theme-key-couchersoleil .gts-theme-swatch { background: #a02810; }
.theme-key-mernoire .gts-theme-swatch { background: #1a3848; }

.gts-nav-item.theme-key-moderne.is-active { border-color: #5b3df5; }
.gts-nav-item.theme-key-retro.is-active { border-color: #ce5b1d; }
.gts-nav-item.theme-key-brutalist.is-active { border-color: #000000; }
.gts-nav-item.theme-key-editorial.is-active { border-color: #8b1e1e; }
.gts-nav-item.theme-key-cyberpunk.is-active { border-color: #00f5ff; }
.gts-nav-item.theme-key-kawaii.is-active { border-color: #ff8eb3; }
.gts-nav-item.theme-key-vintage.is-active { border-color: #a85a30; }

.theme-key-moderne .gts-theme-swatch { background: #5b3df5; }
.theme-key-retro .gts-theme-swatch { background: #ce5b1d; }
.theme-key-brutalist .gts-theme-swatch { background: #000000; }
.theme-key-editorial .gts-theme-swatch { background: #8b1e1e; }
.theme-key-cyberpunk .gts-theme-swatch { background: #00f5ff; }
.theme-key-kawaii .gts-theme-swatch { background: #ff8eb3; }
.theme-key-vintage .gts-theme-swatch { background: #a85a30; }

.footer-contact-link {
  color: inherit;
  opacity: 0.7;
}

.footer-subnav {
  margin-top: 0.8rem;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  opacity: 0.7;
}

.footer-subnav-link {
  color: inherit;
}

.footer-copyright {
  margin-top: 1rem;
}

.footer-version {
  margin-top: 0.3rem;
  font-size: 0.78rem;
  opacity: 0.55;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  /* Base : texte plus grand sur mobile */
  html { font-size: 17px; }

  .nav-banner img {
    height: 60px;
    width: auto;
    max-width: unset;
  }
  nav {
    height: 60px;
    background-size: auto 85%;
    overflow: visible;
  }

  .nav-links {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    height: calc(100dvh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: var(--vert-fonce);
    flex-direction: column;
    padding: 1.5rem 2rem 3rem;
    gap: 1.2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    z-index: 999;
  }
  .nav-links.open {
    display: flex !important;
  }
  .nav-links a { font-size: 1rem; min-height: 44px; display: flex; align-items: center; }
  .burger { display: flex; }
  .nav-counters { display: none; }
  .nav-theme-switcher {
    position: absolute;
    top: calc(50% + 3px);
    right: 0.7rem;
    transform: translateY(-50%);
    margin: 0;
  }
  .nav-theme-switcher > button {
    width: 2.75rem;     /* 44px — WCAG 2.5.8 */
    height: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
  #nav-theme-panel {
    top: calc(100% + 6px);
    left: auto;
    right: 0;
    width: min(190px, calc(100vw - 0.75rem)) !important;
    max-width: calc(100vw - 0.75rem) !important;
    max-height: calc(100dvh - 56px) !important;
  }
  #nav-theme-panel .gts-theme-grid {
    grid-template-columns: 1fr !important;
    gap: 0.28rem !important;
  }
  #nav-theme-panel .gts-nav-item {
    font-size: 0.7rem !important;
    padding: 0.3rem 0.4rem !important;
    gap: 0.28rem !important;
  }
  /* Dropdown mobile */
  .nav-dropdown-menu {
    position: static;
    transform: none;
    display: none;
    background: rgba(0,0,0,0.15);
    border: none;
    border-radius: 6px;
    padding: 0.3rem 0 0.3rem 1rem;
    box-shadow: none;
    margin-top: 0.3rem;
    min-width: unset;
  }
  .nav-dropdown-menu.open { display: block; }
  .nav-dropdown:hover .nav-dropdown-menu { display: none; }
  .nav-dropdown-menu.open { display: block !important; }
  .nav-dropdown > a::after { display: none; }
  .nav-dropdown-toggle {
    display: inline-block;
    background: none;
    border: none;
    color: rgba(245,240,232,0.7);
    font-size: 1rem;
    cursor: pointer;
    padding: 0 0.3rem;
    line-height: 1;
    vertical-align: middle;
  }

  .presentation-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .hero h1 { font-size: 2.5rem; }

  /* Texte de corps */
  .presentation-text p,
  .contact-item p,
  .contact-item a,
  .actu-card-body p,
  .resident-card p,
  .soutien-card p { font-size: 1rem; }

  /* Titres sections */
  .actu-card-top h3 { font-size: 1.1rem; }
  .resident-card h3  { font-size: 1.2rem; }

  /* Labels & badges */
  .section-label    { font-size: 0.82rem; }
  .section-intro    { font-size: 1rem; }
  .resident-card .espece,
  .actu-card-source-row .source-name { font-size: 0.88rem; }

  /* Boutons sociaux et nav-app */
  .social-btn       { font-size: 0.95rem; padding: 0.65rem 1.1rem; }
  .social-links     { flex-wrap: wrap; gap: 0.7rem; }

  /* Contact */
  .contact-item strong { font-size: 0.92rem; }
  .contact-label-badge { font-size: 0.88rem; }

  /* Footer */
  footer            { font-size: 0.92rem; }
  footer nav a      { font-size: 0.9rem; }
  footer .footer-logo { font-size: 1.6rem; }

  /* Sections padding réduit */
  section           { padding: 3.5rem 1.2rem; }
  .page-hero        { padding: 6rem 1.2rem 3rem; }

  /* Fix critique : min-width: auto sur les grid items force le layout à dépasser 100vw */
  .presentation-grid > *,
  .contact-grid > *,
  .soutien-cards > *,
  .actu-grid > *,
  .residents-grid > *,
  .stat-card {
    min-width: 0;
  }

  /* Presentation visual : padding réduit + clip du contenu dépassant */
  .presentation-visual {
    padding: 1.2rem;
    overflow: hidden;
  }

  /* Stat numbers : taille réduite pour tenir dans les colonnes */
  .stat-card .number { font-size: 1.5rem; }
}

/* ===== PAGE INTÉRIEURE HERO ===== */
.page-hero {
  min-height: 100vh;
  background-color: #101a0c;
  background-image: linear-gradient(to bottom, rgba(10,18,6,0.05) 0%, rgba(10,18,6,0.0) 35%, rgba(6,12,3,0.45) 100%), var(--hero-bg);
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 2rem 4rem;
  position: sticky;
  top: 0;
  z-index: 0;
  overflow: hidden;
  color: var(--creme);
}

@supports (-webkit-touch-callout: none) {
  .page-hero { background-attachment: scroll; }
}

@media (max-width: 640px) {
  .page-hero { min-height: 80vh; }
}

/* Contenu défile par-dessus le hero fixe */
:where(.page-hero ~ *) {
  position: relative;
  z-index: 1;
  background-color: var(--creme);
}

.page-hero h1 {
  font-family: serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: 0.8rem;
}

.page-hero p {
  font-size: 1.1rem;
  opacity: 0.75;
  max-width: 560px;
  margin: 0 auto;
}

/* ===== HERO PHOTO (pages avec image de fond) ===== */
.photo-hero {
  background-color: #101a0c;
  background-image: linear-gradient(to bottom, rgba(10,18,6,0.05) 0%, rgba(10,18,6,0.0) 35%, rgba(6,12,3,0.45) 100%), var(--hero-bg);
  background-size: cover;
  background-position: center 30%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100vh; min-height: 100dvh;
  color: var(--creme);
  padding: 10rem 2rem 5rem;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
:where(.photo-hero ~ *) {
  position: relative;
  z-index: 1;
  background-color: var(--creme);
}
@supports (-webkit-touch-callout: none) {
  .photo-hero { background-attachment: scroll; }
}
@media (max-width: 640px) {
  .photo-hero { background-attachment: scroll; min-height: 100dvh; padding: 8rem 1.5rem 3.5rem; }
}
.photo-hero h1 {
  font-family: serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  margin-bottom: 1.2rem;
  line-height: 1.2;
  text-shadow: 0 2px 16px rgba(0,0,0,0.7), 0 1px 4px rgba(0,0,0,0.5);
}
.photo-hero .hero-sub {
  font-size: 1.1rem;
  opacity: 0.95;
  max-width: 620px;
  margin: 0 auto 2rem;
  line-height: 1.7;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
/* ===== FAQ MINI (sections inline) ===== */
.faq-list { display: flex; flex-direction: column; gap: 0.6rem; }
.faq-item { border: 1px solid rgba(0,0,0,0.1); border-radius: 10px; overflow: hidden; background: #fff; }
.faq-q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 1rem 1.2rem; font-size: 1rem; font-weight: 600; color: var(--vert-fonce);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq-q:hover { background: rgba(0,0,0,0.03); }
.faq-arrow { font-size: 1.1rem; transition: transform 0.25s; flex-shrink: 0; }
.faq-item.open .faq-arrow { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-item.open .faq-a { max-height: 600px; }
.faq-a p { padding: 0 1.2rem 1rem; margin: 0; color: var(--brun-chaud); line-height: 1.6; font-size: 0.95rem; }

/* Hero split -- H1 adapte a la colonne texte etroite */
.hero-split .hero-content h1 {
  font-size: clamp(2rem, min(5vw, 9vh), 6rem);
  line-height: 1.05;
}

/* Hero logo wrap (Prop B v3) */
.hero-logo-wrap {
  flex: 0 0 clamp(240px, min(40vw, 60vh), 680px);
  max-width: clamp(240px, min(40vw, 60vh), 680px);
  min-width: 200px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse 80% 80% at center, rgba(255,255,255,0.06) 0%, transparent 70%);
  padding: 0.5rem;
}

.hero-logo-wrap img {
  width: 100%;
  max-width: 100%;
  max-height: clamp(220px, 60vh, 640px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 48px rgba(0,0,0,0.6)) drop-shadow(0 4px 12px rgba(0,0,0,0.4));
  display: block;
  user-select: none;
  transition: transform 0.4s ease, filter 0.4s ease;
}

.hero-logo-wrap img:hover {
  transform: translateY(-4px) scale(1.02);
  filter: drop-shadow(0 24px 56px rgba(0,0,0,0.65)) drop-shadow(0 4px 12px rgba(0,0,0,0.45));
}

/* ===== TDB — Top Donateurs Bannière ===== */
@-webkit-keyframes tdb-scroll { from { -webkit-transform: translateX(0); } to { -webkit-transform: translateX(-50%); } }
@keyframes tdb-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =================================================================
   THÈMES SAISONNIERS — actifs via data-theme sur <html>
   Gérés par theme-switcher.js (test uniquement, transparent en prod)
   ================================================================= */

/* ── Sélecteur commun polices de titre par thème ──────────────────
   Couvre les titres et éléments graphiques */
html[data-theme="printemps"] h1,html[data-theme="printemps"] h2,html[data-theme="printemps"] h3,
html[data-theme="printemps"] .nav-logo,html[data-theme="printemps"] .section-title,
html[data-theme="printemps"] .stat-card .number,html[data-theme="printemps"] .page-hero h1,
html[data-theme="printemps"] footer .footer-logo { font-family:'Cormorant Garamond',serif; }
html[data-theme="printemps"] body { font-family:'Nunito',sans-serif; }

html[data-theme="ete"] h1,html[data-theme="ete"] h2,html[data-theme="ete"] h3,
html[data-theme="ete"] .nav-logo,html[data-theme="ete"] .section-title,
html[data-theme="ete"] .stat-card .number,html[data-theme="ete"] .page-hero h1,
html[data-theme="ete"] footer .footer-logo { font-family:'Josefin Sans',sans-serif; }
html[data-theme="ete"] body { font-family:'Karla',sans-serif; }

html[data-theme="automne"] h1,html[data-theme="automne"] h2,html[data-theme="automne"] h3,
html[data-theme="automne"] .nav-logo,html[data-theme="automne"] .section-title,
html[data-theme="automne"] .stat-card .number,html[data-theme="automne"] .page-hero h1,
html[data-theme="automne"] footer .footer-logo { font-family:'Lora',serif; }
html[data-theme="automne"] body { font-family:'Source Sans 3',sans-serif; }

html[data-theme="hiver"] h1,html[data-theme="hiver"] h2,html[data-theme="hiver"] h3,
html[data-theme="hiver"] .nav-logo,html[data-theme="hiver"] .section-title,
html[data-theme="hiver"] .stat-card .number,html[data-theme="hiver"] .page-hero h1,
html[data-theme="hiver"] footer .footer-logo { font-family:'Raleway',sans-serif; }
html[data-theme="hiver"] body { font-family:'Outfit',sans-serif; }

html[data-theme="sakura"] h1,html[data-theme="sakura"] h2,html[data-theme="sakura"] h3,
html[data-theme="sakura"] .nav-logo,html[data-theme="sakura"] .section-title,
html[data-theme="sakura"] .stat-card .number,html[data-theme="sakura"] .page-hero h1,
html[data-theme="sakura"] footer .footer-logo { font-family:'Cormorant',serif; font-style:italic; }
html[data-theme="sakura"] body { font-family:'Quicksand',sans-serif; }

html[data-theme="halloween"] h1,html[data-theme="halloween"] h2,html[data-theme="halloween"] h3,
html[data-theme="halloween"] .nav-logo,html[data-theme="halloween"] .section-title,
html[data-theme="halloween"] .stat-card .number,html[data-theme="halloween"] .page-hero h1,
html[data-theme="halloween"] footer .footer-logo { font-family:'Cinzel',serif; letter-spacing:0.04em; }
html[data-theme="halloween"] body { font-family:'Crimson Text',serif; font-size:1.05em; }

html[data-theme="noel"] h1,html[data-theme="noel"] h2,html[data-theme="noel"] h3,
html[data-theme="noel"] .nav-logo,html[data-theme="noel"] .section-title,
html[data-theme="noel"] .stat-card .number,html[data-theme="noel"] .page-hero h1,
html[data-theme="noel"] footer .footer-logo { font-family:'Mountains of Christmas',cursive; }
html[data-theme="noel"] body { font-family:sans-serif; }

html[data-theme="anniversaire"] h1,html[data-theme="anniversaire"] h2,html[data-theme="anniversaire"] h3,
html[data-theme="anniversaire"] .nav-logo,html[data-theme="anniversaire"] .section-title,
html[data-theme="anniversaire"] .stat-card .number,html[data-theme="anniversaire"] .page-hero h1,
html[data-theme="anniversaire"] footer .footer-logo { font-family:'Pacifico',cursive; }
html[data-theme="anniversaire"] body { font-family:'Nunito',sans-serif; }

/* ══════════════════════════════════════════════════════════════════
   🌸  PRINTEMPS  — menthe fraîche · rose poudré · champagne
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="printemps"] {
  --vert-fonce:   #2d6a4f;
  --vert-moyen:   #52a87a;
  --vert-clair:   #85d4a0;
  --terre:        #a84e6e;
  --terre-claire: #d4849e;
  --creme:        #fdf5f7;
  --blanc:        #fffafe;
  --gris-chaud:   #7a6068;
  --texte:        #2a2030;
  --ombre:        rgba(42,32,48,0.10);
}
html[data-theme="printemps"] nav { background-color: rgba(45,106,79,0.92); }
html[data-theme="printemps"] .burger { background: rgba(45,106,79,0.75); }
html[data-theme="printemps"] .hero { background: linear-gradient(160deg,#2d6a4f 0%,#1e4a32 40%,#0f2a1c 100%);
  background-attachment: fixed;
}
html[data-theme="printemps"] .hero-badge { background: rgba(20,52,32,0.82); }
html[data-theme="printemps"] .hero h1 em { color: #f4c0d0; }
/* Légère teinte pastel sur les cartes */
html[data-theme="printemps"] .resident-card,html[data-theme="printemps"] .soutien-card,
html[data-theme="printemps"] .actu-card { border-top: 3px solid var(--terre-claire); }
/* Italic élégant sur les titres de section */
html[data-theme="printemps"] .section-title em { font-style:italic; color:var(--terre); }

/* ══════════════════════════════════════════════════════════════════
   ☀️  ÉTÉ  — vert tropical · ambre doré · soleil vif
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="ete"] {
  --vert-fonce:   #c05010;
  --vert-moyen:   #e07020;
  --vert-clair:   #f0a048;
  --terre:        #1a7090;
  --terre-claire: #4098b8;
  --creme:        #fdf6ec;
  --blanc:        #fff8f0;
  --gris-chaud:   #806050;
  --texte:        #28100a;
  --ombre:        rgba(48,18,8,0.15);
}
html[data-theme="ete"] nav { background-color: rgba(192,80,16,0.92); }
html[data-theme="ete"] .burger { background: rgba(192,80,16,0.75); }
html[data-theme="ete"] .hero { background: linear-gradient(160deg,#c05010 0%,#802e08 40%,#3c1404 100%);
  background-attachment: fixed;
}
html[data-theme="ete"] .hero-badge { background: rgba(32,10,2,0.86); }
html[data-theme="ete"] .hero h1 em { color: #7dd8f8; }
/* Boutons CTA soleil brûlant */
html[data-theme="ete"] .btn-primary,html[data-theme="ete"] .nav-cta {
  box-shadow: 0 4px 20px rgba(224,112,32,0.40);
}
/* Texte majuscule géométrique pour Josefin Sans */
html[data-theme="ete"] .section-title { letter-spacing:0.06em; }

/* ══════════════════════════════════════════════════════════════════
   🍂  AUTOMNE  — rouille · ambre · parchemin chaud
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="automne"] {
  --vert-fonce:   #6b2d1a;
  --vert-moyen:   #9b4a22;
  --vert-clair:   #c97a3a;
  --terre:        #7a3520;
  --terre-claire: #d4813e;
  --creme:        #fdf0e4;
  --blanc:        #fff8f2;
  --gris-chaud:   #7a5a48;
  --texte:        #2a1a10;
  --ombre:        rgba(58,28,10,0.15);
}
html[data-theme="automne"] nav { background-color: rgba(107,45,26,0.92); }
html[data-theme="automne"] .burger { background: rgba(107,45,26,0.75); }
html[data-theme="automne"] .hero { background: linear-gradient(160deg,#6b2d1a 0%,#4a1e0e 40%,#280e04 100%);
  background-attachment: fixed;
}
html[data-theme="automne"] .hero-badge { background: rgba(58,18,6,0.82); }
html[data-theme="automne"] .hero h1 em { color: #f4a444; }
/* Texture "vieilli" sur les cartes */
html[data-theme="automne"] .resident-card,html[data-theme="automne"] .soutien-card {
  box-shadow: 3px 3px 12px var(--ombre), inset 0 0 0 1px rgba(201,122,58,0.15);
}
html[data-theme="automne"] .section-title { font-style:italic; }

/* ══════════════════════════════════════════════════════════════════
   ❄️  HIVER  — nuit bleue · acier · givre
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="hiver"] {
  --vert-fonce:   #1a2a4a;
  --vert-moyen:   #2a4070;
  --vert-clair:   #5878a8;
  --terre:        #384870;
  --terre-claire: #8aaad4;
  --creme:        #f2f5f8;
  --blanc:        #f8fafc;
  --gris-chaud:   #6a7888;
  --texte:        #1a2030;
  --ombre:        rgba(20,30,50,0.15);
}
html[data-theme="hiver"] nav { background-color: rgba(26,42,74,0.92); }
html[data-theme="hiver"] .burger { background: rgba(26,42,74,0.75); }
html[data-theme="hiver"] .hero { background: linear-gradient(160deg,#1a2a4a 0%,#0e1a30 40%,#060c1a 100%);
  background-attachment: fixed;
}
html[data-theme="hiver"] .hero-badge { background: rgba(8,14,28,0.82); }
html[data-theme="hiver"] .hero h1 em { color: #a0c4e8; }
/* Effet givre — backdrop-filter renforcé */
html[data-theme="hiver"] nav { backdrop-filter: blur(16px) saturate(1.4); }
html[data-theme="hiver"] .resident-card,html[data-theme="hiver"] .soutien-card {
  border: 1px solid rgba(138,170,212,0.25);
}
/* Titres légers (Raleway thin) */
html[data-theme="hiver"] .section-title { font-weight:300; letter-spacing:0.08em; text-transform:uppercase; }

/* ══════════════════════════════════════════════════════════════════
   🌸  SAKURA  — prune profond · rose pétale · ivoire
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="sakura"] {
  --vert-fonce:   #5a2040;
  --vert-moyen:   #8a3a62;
  --vert-clair:   #c87a9a;
  --terre:        #7a2850;
  --terre-claire: #d4a0b8;
  --creme:        #fdf4f7;
  --blanc:        #fff8fb;
  --gris-chaud:   #7a5868;
  --texte:        #2a1828;
  --ombre:        rgba(58,20,42,0.12);
}
html[data-theme="sakura"] nav { background-color: rgba(90,32,64,0.92); }
html[data-theme="sakura"] .burger { background: rgba(90,32,64,0.75); }
html[data-theme="sakura"] .hero { background: linear-gradient(160deg,#5a2040 0%,#3c1428 40%,#200a14 100%);
  background-attachment: fixed;
}
html[data-theme="sakura"] .hero-badge { background: rgba(38,8,25,0.82); }
html[data-theme="sakura"] .hero h1 em { color: #f4aac8; }
/* Pétales — bordure fleurie douce sur les cartes */
html[data-theme="sakura"] .resident-card,html[data-theme="sakura"] .soutien-card,
html[data-theme="sakura"] .actu-card { border-top: 2px solid rgba(200,122,154,0.4); }
/* Hero : léger reflet nacré */
html[data-theme="sakura"] .hero::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 60% 40% at 50% 40%, rgba(244,170,200,0.08) 0%, transparent 70%);
}

/* ══════════════════════════════════════════════════════════════════
   🎃  HALLOWEEN  — nuit violette · citrouille · os
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="halloween"] {
  --vert-fonce:   #1a0a2a;
  --vert-moyen:   #3a1050;
  --vert-clair:   #7a3a80;
  --terre:        #c45a0a;
  --terre-claire: #e87a20;
  --creme:        #f0e8e0;
  --blanc:        #faf5f0;
  --gris-chaud:   #5a4a58;
  --texte:        #1a1020;
  --ombre:        rgba(26,10,42,0.22);
}
html[data-theme="halloween"] nav { background-color: rgba(26,10,42,0.94); }
html[data-theme="halloween"] .burger { background: rgba(26,10,42,0.78); }
html[data-theme="halloween"] .hero { background: linear-gradient(160deg,#1a0a2a 0%,#0e0418 40%,#06020c 100%);
  background-attachment: fixed;
}
html[data-theme="halloween"] .hero-badge { background: rgba(15,3,25,0.88); }
html[data-theme="halloween"] .hero h1 em { color: #e87a20; }
/* Lueur orange sinistre sur les CTA */
html[data-theme="halloween"] .btn-primary,html[data-theme="halloween"] .nav-cta {
  box-shadow: 0 0 16px rgba(232,122,32,0.5), 0 0 32px rgba(232,122,32,0.2);
}
/* Titre gravé — Cinzel majuscule */
html[data-theme="halloween"] .section-title { letter-spacing:0.1em; text-shadow:0 0 12px rgba(232,122,32,0.3); }
/* Fond section légèrement assombri */
html[data-theme="halloween"] body { background-color: #f0e8e0; }

/* ══════════════════════════════════════════════════════════════════
   🎄  NOËL  — sapin profond · rouge cerise · or étoilé
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="noel"] {
  --vert-fonce:   #1a3a1a;
  --vert-moyen:   #2a5c2a;
  --vert-clair:   #4a8c4a;
  --terre:        #8b1a1a;
  --terre-claire: #c42828;
  --creme:        #fdf8f4;
  --blanc:        #fffcf8;
  --gris-chaud:   #6a5a4a;
  --texte:        #1a1a14;
  --ombre:        rgba(20,20,10,0.15);
}
html[data-theme="noel"] nav { background-color: rgba(26,58,26,0.93); }
html[data-theme="noel"] .burger { background: rgba(26,58,26,0.76); }
html[data-theme="noel"] .hero { background: linear-gradient(160deg,#1a3a1a 0%,#0e200e 40%,#060e06 100%);
  background-attachment: fixed;
}
html[data-theme="noel"] .hero-badge { background: rgba(10,25,10,0.88); }
html[data-theme="noel"] .hero h1 em { color: #f4d040; }
/* Scintillement doré sur les titres */
html[data-theme="noel"] .section-title { text-shadow:0 1px 0 rgba(244,208,64,0.3); }
/* Bordure rouge sur les CTA */
html[data-theme="noel"] .nav-cta { border: 1px solid rgba(196,40,40,0.4); }
/* Cartes : liseré or discret */
html[data-theme="noel"] .resident-card,html[data-theme="noel"] .soutien-card {
  border-top: 3px solid #f4d040;
}

/* ══════════════════════════════════════════════════════════════════
   🎉  ANNIVERSAIRE  — violet fête · or · confetti
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="anniversaire"] {
  --vert-fonce:   #4a1a7a;
  --vert-moyen:   #7a3aaa;
  --vert-clair:   #aa7ad4;
  --terre:        #c4780a;
  --terre-claire: #e8a820;
  --creme:        #fdf5ff;
  --blanc:        #fdf8ff;
  --gris-chaud:   #6a5878;
  --texte:        #2a1840;
  --ombre:        rgba(50,20,80,0.12);
}
html[data-theme="anniversaire"] nav { background-color: rgba(74,26,122,0.92); }
html[data-theme="anniversaire"] .burger { background: rgba(74,26,122,0.76); }
html[data-theme="anniversaire"] .hero { background: linear-gradient(160deg,#4a1a7a 0%,#2a0a4a 40%,#14042a 100%);
  background-attachment: fixed;
}
html[data-theme="anniversaire"] .hero-badge { background: rgba(30,5,55,0.88); }
html[data-theme="anniversaire"] .hero h1 em { color: #ffd700; }
/* Boutons festifs avec gradient arc-en-ciel subtil */
html[data-theme="anniversaire"] .btn-primary {
  background: linear-gradient(135deg, var(--terre) 0%, var(--vert-moyen) 100%);
}
/* Confetti en fond du hero — pseudo-element */
html[data-theme="anniversaire"] .hero::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(circle 2px at 15% 20%, rgba(255,215,0,0.5) 0%, transparent 50%),
    radial-gradient(circle 2px at 35% 65%, rgba(255,100,150,0.4) 0%, transparent 50%),
    radial-gradient(circle 2px at 55% 30%, rgba(100,180,255,0.4) 0%, transparent 50%),
    radial-gradient(circle 2px at 75% 70%, rgba(150,255,150,0.4) 0%, transparent 50%),
    radial-gradient(circle 2px at 90% 45%, rgba(255,180,80,0.4) 0%, transparent 50%);
  background-size:100% 100%;
}
/* Titres Pacifico — espacement ajusté */
html[data-theme="anniversaire"] .section-title { letter-spacing:-0.01em; }
html[data-theme="anniversaire"] .nav-logo { letter-spacing:0.02em; }

/* ── Polices par thème — refuge ──────────────────────────────────────────── */
html[data-theme="normandie"] h1,html[data-theme="normandie"] h2,html[data-theme="normandie"] h3,
html[data-theme="normandie"] .nav-logo,html[data-theme="normandie"] .section-title,
html[data-theme="normandie"] .stat-card .number,html[data-theme="normandie"] .page-hero h1,
html[data-theme="normandie"] footer .footer-logo { font-family:'Spectral',serif; }
html[data-theme="normandie"] body { font-family:'Nunito Sans',sans-serif; }

html[data-theme="prairie"] h1,html[data-theme="prairie"] h2,html[data-theme="prairie"] h3,
html[data-theme="prairie"] .nav-logo,html[data-theme="prairie"] .section-title,
html[data-theme="prairie"] .stat-card .number,html[data-theme="prairie"] .page-hero h1,
html[data-theme="prairie"] footer .footer-logo { font-family:'Cabin',sans-serif; font-weight:700; }
html[data-theme="prairie"] body { font-family:'Poppins',sans-serif; }

html[data-theme="etoiles"] h1,html[data-theme="etoiles"] h2,html[data-theme="etoiles"] h3,
html[data-theme="etoiles"] .nav-logo,html[data-theme="etoiles"] .section-title,
html[data-theme="etoiles"] .stat-card .number,html[data-theme="etoiles"] .page-hero h1,
html[data-theme="etoiles"] footer .footer-logo { font-family:'DM Serif Display',serif; }
html[data-theme="etoiles"] body { font-family:'DM Sans',sans-serif; }

html[data-theme="paille"] h1,html[data-theme="paille"] h2,html[data-theme="paille"] h3,
html[data-theme="paille"] .nav-logo,html[data-theme="paille"] .section-title,
html[data-theme="paille"] .stat-card .number,html[data-theme="paille"] .page-hero h1,
html[data-theme="paille"] footer .footer-logo { font-family:'Bitter',serif; }
html[data-theme="paille"] body { font-family:'Merriweather',serif; font-size:0.96em; line-height:1.8; }

html[data-theme="manche"] h1,html[data-theme="manche"] h2,html[data-theme="manche"] h3,
html[data-theme="manche"] .nav-logo,html[data-theme="manche"] .section-title,
html[data-theme="manche"] .stat-card .number,html[data-theme="manche"] .page-hero h1,
html[data-theme="manche"] footer .footer-logo { font-family:'Libre Baskerville',serif; }
html[data-theme="manche"] body { font-family:'Inter',sans-serif; }

html[data-theme="couchersoleil"] h1,html[data-theme="couchersoleil"] h2,html[data-theme="couchersoleil"] h3,
html[data-theme="couchersoleil"] .nav-logo,html[data-theme="couchersoleil"] .section-title,
html[data-theme="couchersoleil"] .stat-card .number,html[data-theme="couchersoleil"] .page-hero h1,
html[data-theme="couchersoleil"] footer .footer-logo { font-family:'Yeseva One',cursive; }
html[data-theme="couchersoleil"] body { font-family:'Mulish',sans-serif; }
html[data-theme="mernoire"] h1,html[data-theme="mernoire"] h2,html[data-theme="mernoire"] h3,
html[data-theme="mernoire"] .nav-logo,html[data-theme="mernoire"] .section-title,
html[data-theme="mernoire"] .stat-card .number,html[data-theme="mernoire"] .page-hero h1,
html[data-theme="mernoire"] footer .footer-logo { font-family:serif; }
html[data-theme="mernoire"] body { font-family:'IBM Plex Sans',sans-serif; }

/* ══════════════════════════════════════════════════════════════════
   🌊  MER NOIRE  — abysses · phosphorescence · vagues · mystère
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="mernoire"] {
  --vert-fonce:   #0c2030;
  --vert-moyen:   #1a3848;
  --vert-clair:   #3a6878;
  --terre:        #7aa8b8;
  --terre-claire: #a8ccd4;
  --creme:        #081018;
  --blanc:        #0d1822;
  --gris-chaud:   #8ba4ad;
  --texte:        #eef6f8;
  --ombre:        rgba(0,0,0,0.42);
  color-scheme: dark;
}
html[data-theme="mernoire"],
html[data-theme="mernoire"] body {
  background-color: #04070d;
  color: #eef6f8;
}
html[data-theme="mernoire"] body > section {
  background-color: #173041 !important;
}
html[data-theme="mernoire"] body > section:nth-of-type(even) {
  background-color: #08131d !important;
}
html[data-theme="mernoire"] .visages-grid-section,
html[data-theme="mernoire"] .partenaires-section,
html[data-theme="mernoire"] .don-section,
html[data-theme="mernoire"] .presse-section,
html[data-theme="mernoire"] .partenaires-card-section {
  background: #173041 !important;
}
html[data-theme="mernoire"] .join-us,
html[data-theme="mernoire"] .faq-section,
html[data-theme="mernoire"] .contact-section,
html[data-theme="mernoire"] .partenaires-section.alt {
  background: #08131d !important;
}
html[data-theme="mernoire"] main,
html[data-theme="mernoire"] .page-section,
html[data-theme="mernoire"] .section,
html[data-theme="mernoire"] .content-section {
  background: linear-gradient(180deg, rgba(5,10,16,0.96) 0%, rgba(7,14,22,0.98) 100%);
}
html[data-theme="mernoire"] .page-hero,
html[data-theme="mernoire"] .hero {
  background: linear-gradient(160deg,#09131c 0%,#050b12 40%,#02060a 100%);
  background-attachment: fixed;
}
html[data-theme="mernoire"] .hero-badge { background: rgba(2,8,16,0.90); }
html[data-theme="mernoire"] .hero h1 em { color: #60d8e8; }
html[data-theme="mernoire"] .burger { background: rgba(12,32,48,0.80); }
/* Profondeur — léger voile sombre en bas du hero */
html[data-theme="mernoire"] .hero::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(0deg, rgba(2,6,10,0.55) 0%, transparent 50%);
}
/* Nav — vitre sous-marine */
html[data-theme="mernoire"] nav { background-color: rgba(6,16,24,0.94) !important; backdrop-filter: blur(18px) brightness(0.78) saturate(1.15); }
html[data-theme="mernoire"] footer { background: #03070d !important; }
/* Titres serif — profondeur et élégance */
html[data-theme="mernoire"] .section-title { font-style:italic; letter-spacing:0.02em; color:#f4fbff; text-shadow:0 1px 0 rgba(0,0,0,0.45); }
html[data-theme="mernoire"] .section-heading,
html[data-theme="mernoire"] .hero-sub,
html[data-theme="mernoire"] .photo-hero p,
html[data-theme="mernoire"] .page-hero p {
  color: #dcecf1 !important;
}
/* Lueur phosphorescente sur les CTA */
html[data-theme="mernoire"] .btn-primary,html[data-theme="mernoire"] .nav-cta {
  box-shadow: 0 4px 20px rgba(60,200,220,0.18);
}
/* Bordure abyssale sur les cartes */
html[data-theme="mernoire"] .resident-card,html[data-theme="mernoire"] .soutien-card {
  border: 1px solid rgba(110,170,190,0.24);
  box-shadow: 0 4px 20px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(96,216,232,0.05);
}
html[data-theme="mernoire"] .actu-card,
html[data-theme="mernoire"] .page-card,
html[data-theme="mernoire"] .card,
html[data-theme="mernoire"] .panel,
html[data-theme="mernoire"] .skeleton-card {
  background: rgba(7,14,22,0.94);
  border-color: rgba(110,170,190,0.16);
  box-shadow: 0 4px 18px rgba(0,0,0,0.22);
}
html[data-theme="mernoire"] .section-label,
html[data-theme="mernoire"] .hero-badge,
html[data-theme="mernoire"] .contact-label-badge,
html[data-theme="mernoire"] .actu-card-source-row .source-name {
  color: #9ec7d4 !important;
  opacity: 1 !important;
}
html[data-theme="mernoire"] h1,
html[data-theme="mernoire"] h2,
html[data-theme="mernoire"] h3,
html[data-theme="mernoire"] h4,
html[data-theme="mernoire"] h5,
html[data-theme="mernoire"] h6,
html[data-theme="mernoire"] .hero h1,
html[data-theme="mernoire"] .page-hero h1,
html[data-theme="mernoire"] .photo-hero h1,
html[data-theme="mernoire"] .hero-split .hero-content h1,
html[data-theme="mernoire"] .nav-logo {
  color: #f4fbff !important;
  text-shadow: 0 6px 22px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.04);
}
html[data-theme="mernoire"] strong,
html[data-theme="mernoire"] b,
html[data-theme="mernoire"] em {
  color: inherit;
}
html[data-theme="mernoire"] .section-intro,
html[data-theme="mernoire"] .presentation-text p,
html[data-theme="mernoire"] .fondatrices p,
html[data-theme="mernoire"] .resident-card p,
html[data-theme="mernoire"] .actu-card-body p,
html[data-theme="mernoire"] .contact-item p,
html[data-theme="mernoire"] .contact-item a,
html[data-theme="mernoire"] .faq-a p,
html[data-theme="mernoire"] li,
html[data-theme="mernoire"] p {
  color: #d3e4ea;
}
html[data-theme="mernoire"] .actu-card-source-row .actu-card-date,
html[data-theme="mernoire"] .soutien .section-intro,
html[data-theme="mernoire"] .stat-card .label,
html[data-theme="mernoire"] .stat-card .sublabel {
  color: #b7d0d8 !important;
  opacity: 0.92 !important;
}
html[data-theme="mernoire"] .actu-card-top h3,
html[data-theme="mernoire"] .contact-info h2,
html[data-theme="mernoire"] .contact-item strong,
html[data-theme="mernoire"] .fondatrices h3,
html[data-theme="mernoire"] .resident-card h3,
html[data-theme="mernoire"] .soutien-card h3 {
  color: #f4fbff !important;
}
html[data-theme="mernoire"] .presse-card-body h3,
html[data-theme="mernoire"] .source-name-big,
html[data-theme="mernoire"] .tv-highlight-label,
html[data-theme="mernoire"] .visage-name,
html[data-theme="mernoire"] .visage-card h3,
html[data-theme="mernoire"] .visage-card-nom,
html[data-theme="mernoire"] .partenaire-card h3 {
  color: #f4fbff !important;
}
html[data-theme="mernoire"] .presse-card-body p,
html[data-theme="mernoire"] .presse-date,
html[data-theme="mernoire"] .presse-tag,
html[data-theme="mernoire"] .tv-highlight-text,
html[data-theme="mernoire"] .visage-card p,
html[data-theme="mernoire"] .visage-role,
html[data-theme="mernoire"] .visage-title,
html[data-theme="mernoire"] .visage-card-role,
html[data-theme="mernoire"] .partenaire-card p,
html[data-theme="mernoire"] .section-sub {
  color: #d3e4ea !important;
}
html[data-theme="mernoire"] .presse-type-badge,
html[data-theme="mernoire"] .nav-counter-label,
html[data-theme="mernoire"] .nav-counter-sep,
html[data-theme="mernoire"] .visage-card-num {
  color: #9ec7d4 !important;
}
html[data-theme="mernoire"] .actu-lien,
html[data-theme="mernoire"] .btn-outline,
html[data-theme="mernoire"] .presse-link,
html[data-theme="mernoire"] .visage-card a,
html[data-theme="mernoire"] .visage-card-btn,
html[data-theme="mernoire"] a {
  color: #79d7e6;
}
html[data-theme="mernoire"] .btn-outline {
  border-color: rgba(121,215,230,0.35);
}
html[data-theme="mernoire"] .actu-card-header {
  background: linear-gradient(135deg, #173246, #0f2432);
}
html[data-theme="mernoire"] .actu-card-header.has-img::after,
html[data-theme="mernoire"] .actu-card-header:has(.actu-card-header-img)::after {
  background: linear-gradient(135deg, rgba(9,24,36,0.72), rgba(4,12,20,0.82));
}
html[data-theme="mernoire"] .contact,
html[data-theme="mernoire"] .faq-item,
html[data-theme="mernoire"] .resident-card,
html[data-theme="mernoire"] .soutien-card,
html[data-theme="mernoire"] .animal-card,
html[data-theme="mernoire"] .adoption-card,
html[data-theme="mernoire"] .visage-card,
html[data-theme="mernoire"] .presse-card,
html[data-theme="mernoire"] .tv-highlight,
html[data-theme="mernoire"] .stat-card {
  background: rgba(10,18,28,0.94) !important;
  color: #eef6f8;
  border-color: rgba(110,170,190,0.16) !important;
}
html[data-theme="mernoire"] .partenaire-card {
  background: rgba(10,18,28,0.94) !important;
  border-color: rgba(110,170,190,0.16) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.22);
}
html[data-theme="mernoire"] .partenaire-card .p-icon {
  filter: brightness(1.08) saturate(1.05);
}
/* NOTE : position: sticky doit être préservé (effet sticky-cover).
   L'overlay ::before fonctionne déjà car .page-hero/.photo-hero sont
   "positioned" via sticky → ::before absolu se résout par rapport à eux. */
html[data-theme="mernoire"] .photo-hero::before,
html[data-theme="mernoire"] .page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,8,14,0.38) 0%, rgba(4,8,14,0.52) 45%, rgba(2,6,10,0.72) 100%);
  pointer-events: none;
}
html[data-theme="mernoire"] .photo-hero > *,
html[data-theme="mernoire"] .page-hero > * {
  position: relative;
  z-index: 1;
}
html[data-theme="mernoire"] input,
html[data-theme="mernoire"] textarea,
html[data-theme="mernoire"] select {
  background: #0d1822 !important;
  color: #eef6f8 !important;
  border-color: rgba(110,170,190,0.22) !important;
}
html[data-theme="mernoire"] input::placeholder,
html[data-theme="mernoire"] textarea::placeholder {
  color: #8ba4ad !important;
}
html[data-theme="mernoire"] [style*="background:white"],
html[data-theme="mernoire"] [style*="background: white"],
html[data-theme="mernoire"] [style*="background:#fff"],
html[data-theme="mernoire"] [style*="background: #fff"] {
  background: rgba(10,18,28,0.94) !important;
  color: #eef6f8 !important;
}
/* ══════════════════════════════════════════════════════════════════
   🌿  NORMANDIE  — bocage · pierre calcaire · brume douce
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="normandie"] {
  --vert-fonce:   #4a5830;
  --vert-moyen:   #6a7a50;
  --vert-clair:   #9aac7a;
  --terre:        #8a7860;
  --terre-claire: #b8a888;
  --creme:        #f0ede4;
  --blanc:        #f8f6f0;
  --gris-chaud:   #7a7868;
  --texte:        #1e1e18;
  --ombre:        rgba(30,30,20,0.12);
}
html[data-theme="normandie"] .hero { background: linear-gradient(160deg,#4a5830 0%,#2e381e 40%,#161c0e 100%);
  background-attachment: fixed;
}
html[data-theme="normandie"] .hero-badge { background: rgba(18,22,10,0.86); }
html[data-theme="normandie"] .hero h1 em { color: #d8c870; }
html[data-theme="normandie"] .burger { background: rgba(74,88,48,0.75); }
/* Brume — léger voile laiteux sur le hero */
html[data-theme="normandie"] .hero::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(242,237,230,0.07) 0%, transparent 60%);
}
/* Titres en italic élégant — caractère Spectral */
html[data-theme="normandie"] .section-title { font-style:italic; font-weight:600; }
/* Bordure calcaire sur les cartes */
html[data-theme="normandie"] .resident-card,html[data-theme="normandie"] .soutien-card {
  border-top: 3px solid rgba(184,168,136,0.45);
}

/* ══════════════════════════════════════════════════════════════════
   🌼  PRAIRIE  — fleurs des champs · lavande · coquelicots
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="prairie"] {
  --vert-fonce:   #4a3090;
  --vert-moyen:   #6a50b8;
  --vert-clair:   #9878d8;
  --terre:        #3a8028;
  --terre-claire: #68b048;
  --creme:        #f4f0f8;
  --blanc:        #faf8ff;
  --gris-chaud:   #706890;
  --texte:        #180e30;
  --ombre:        rgba(24,14,48,0.13);
}
html[data-theme="prairie"] .hero { background: linear-gradient(160deg,#4a3090 0%,#2e1c60 40%,#160c30 100%);
  background-attachment: fixed;
}
html[data-theme="prairie"] .hero-badge { background: rgba(14,8,28,0.86); }
html[data-theme="prairie"] .hero h1 em { color: #f8d8a8; }
html[data-theme="prairie"] .burger { background: rgba(74,48,144,0.75); }
/* Lueur florale sur les boutons CTA */
html[data-theme="prairie"] .btn-primary,html[data-theme="prairie"] .nav-cta {
  box-shadow: 0 4px 18px rgba(154,120,216,0.40);
}
/* Section title */
html[data-theme="prairie"] .section-title { letter-spacing:0.01em; font-style:italic; }
/* Badge nature sur les stats */
html[data-theme="prairie"] .stat-card .number { color: var(--vert-fonce); }

/* ══════════════════════════════════════════════════════════════════
   ✨  CIEL ÉTOILÉ  — nuit indigo · voûte céleste · sérénité
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="etoiles"] {
  --vert-fonce:   #20185a;
  --vert-moyen:   #382a90;
  --vert-clair:   #6858c0;
  --terre:        #6040a8;
  --terre-claire: #9878d8;
  --creme:        #f2f0f8;
  --blanc:        #f8f6ff;
  --gris-chaud:   #706898;
  --texte:        #140e30;
  --ombre:        rgba(20,14,50,0.16);
}
html[data-theme="etoiles"] .hero { background: linear-gradient(160deg,#20185a 0%,#140e3c 40%,#080620 100%);
  background-attachment: fixed;
}
html[data-theme="etoiles"] .hero-badge { background: rgba(8,6,28,0.88); }
html[data-theme="etoiles"] .hero h1 em { color: #d4c8f8; }
html[data-theme="etoiles"] .burger { background: rgba(32,24,90,0.78); }
/* Étoiles scintillantes en fond du hero */
html[data-theme="etoiles"] .hero::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at  8% 12%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1px   1px   at 18% 60%, rgba(255,255,255,0.70), transparent),
    radial-gradient(2px   2px   at 32% 28%, rgba(255,255,255,0.60), transparent),
    radial-gradient(1px   1px   at 48%  8%, rgba(210,190,255,0.90), transparent),
    radial-gradient(1.5px 1.5px at 60% 45%, rgba(255,255,255,0.75), transparent),
    radial-gradient(1px   1px   at 72% 18%, rgba(255,255,255,0.65), transparent),
    radial-gradient(2px   2px   at 82% 70%, rgba(255,255,255,0.50), transparent),
    radial-gradient(1px   1px   at 90% 35%, rgba(210,190,255,0.80), transparent),
    radial-gradient(1.5px 1.5px at 95% 85%, rgba(255,255,255,0.70), transparent);
}
/* Nav effet indigo nocturne */
html[data-theme="etoiles"] nav { backdrop-filter: blur(20px) brightness(0.9); }
/* Titres DM Serif — bel italic */
html[data-theme="etoiles"] .section-title { font-style:italic; }
/* Bordure subtile indigo */
html[data-theme="etoiles"] .resident-card,html[data-theme="etoiles"] .soutien-card {
  border: 1px solid rgba(104,88,192,0.25);
}

/* ══════════════════════════════════════════════════════════════════
   🌾  PAILLE & TERRE  — ambre doré · grange · foin · soleil
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="paille"] {
  --vert-fonce:   #7a5a10;
  --vert-moyen:   #a87c1a;
  --vert-clair:   #d8a82a;
  --terre:        #905a20;
  --terre-claire: #c08030;
  --creme:        #fef4d0;
  --blanc:        #fff8e8;
  --gris-chaud:   #8a7848;
  --texte:        #281808;
  --ombre:        rgba(50,28,8,0.16);
}
html[data-theme="paille"] .hero { background: linear-gradient(160deg,#7a5a10 0%,#503c0a 40%,#281e04 100%);
  background-attachment: fixed;
}
html[data-theme="paille"] .hero-badge { background: rgba(28,18,4,0.88); }
html[data-theme="paille"] .hero h1 em { color: #f0e080; }
html[data-theme="paille"] .burger { background: rgba(122,90,16,0.75); }
/* Liseré "paille dorée" sur les cartes */
html[data-theme="paille"] .resident-card,html[data-theme="paille"] .soutien-card,
html[data-theme="paille"] .actu-card {
  border-left: 4px solid rgba(216,168,42,0.50);
  box-shadow: 2px 4px 16px var(--ombre), inset 0 0 0 1px rgba(216,168,42,0.12);
}
/* Titres Bitter en italic — chaleur slab serif */
html[data-theme="paille"] .section-title { font-style:italic; letter-spacing:0.01em; }
/* Body Merriweather = lecture cozy */
html[data-theme="paille"] .hero h1 { font-style:normal; letter-spacing:-0.01em; }

/* ══════════════════════════════════════════════════════════════════
   🌊  CÔTE NORMANDE  — Manche · teal · écume · sable
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="manche"] {
  --vert-fonce:   #0a6070;
  --vert-moyen:   #1a8898;
  --vert-clair:   #40b8c8;
  --terre:        #6a9038;
  --terre-claire: #9ab858;
  --creme:        #e8f6f8;
  --blanc:        #f2feff;
  --gris-chaud:   #5a8898;
  --texte:        #0e2030;
  --ombre:        rgba(10,28,40,0.15);
}
html[data-theme="manche"] .hero { background: linear-gradient(160deg,#0a6070 0%,#063e4a 40%,#022028 100%);
  background-attachment: fixed;
}
html[data-theme="manche"] .hero-badge { background: rgba(4,18,24,0.88); }
html[data-theme="manche"] .hero h1 em { color: #c8f0f8; }
html[data-theme="manche"] .burger { background: rgba(10,96,112,0.75); }
/* Reflet marin — dégradé teal sur le hero */
html[data-theme="manche"] .hero::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(0deg, rgba(40,184,200,0.08) 0%, transparent 40%);
}
/* Effet givre maritime sur la nav */
html[data-theme="manche"] nav { backdrop-filter: blur(14px) saturate(1.3); }
/* Bordure "vague" — top teal sur les cartes */
html[data-theme="manche"] .resident-card,html[data-theme="manche"] .soutien-card {
  border-top: 3px solid rgba(64,184,200,0.45);
}
/* Titres Libre Baskerville — prestige normand */
html[data-theme="manche"] .section-title { font-weight:700; }

/* ══════════════════════════════════════════════════════════════════
   🌅  COUCHER DE SOLEIL  — cramoisi · violet crépuscule · or
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="couchersoleil"] {
  --vert-fonce:   #a02810;
  --vert-moyen:   #cc4c18;
  --vert-clair:   #f07828;
  --terre:        #702878;
  --terre-claire: #a050b0;
  --creme:        #fdf4e8;
  --blanc:        #fff8f2;
  --gris-chaud:   #806050;
  --texte:        #280e08;
  --ombre:        rgba(50,16,8,0.15);
}
html[data-theme="couchersoleil"] .hero { background: linear-gradient(160deg,#a02810 0%,#681808 40%,#300c04 100%);
  background-attachment: fixed;
}
html[data-theme="couchersoleil"] .hero-badge { background: rgba(28,6,2,0.88); }
html[data-theme="couchersoleil"] .hero h1 em { color: #f8d050; }
html[data-theme="couchersoleil"] .burger { background: rgba(160,40,16,0.78); }
/* Halo soleil couchant sur le hero */
html[data-theme="couchersoleil"] .hero::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 70% 50% at 50% 80%, rgba(255,140,20,0.14) 0%, transparent 70%);
}
/* Lueur chaude sur les titres */
html[data-theme="couchersoleil"] .section-title {
  text-shadow: 0 2px 16px rgba(240,120,40,0.30);
}
/* CTA chaleureux */
html[data-theme="couchersoleil"] .btn-primary,html[data-theme="couchersoleil"] .nav-cta {
  box-shadow: 0 4px 20px rgba(240,120,40,0.45);
}
/* Yeseva One — caractère et chaleur */
html[data-theme="couchersoleil"] .nav-logo { letter-spacing:0.02em; }
/* ── Overrides nav / footer / #tdb par thème ─────────────────────────────────
   Pattern : variables CSS définies par thème + 3 règles génériques avec
   !important (préserve la spécificité contre les blocs lifestyle qui suivent).
   Refactor 2026-05-08 : remplace 22 thèmes × 3 props éparpillés (~66 lignes)
   par 15 lignes de variables + 3 règles. Couleurs identiques à l'avant. */

html[data-theme="printemps"]    { --nav-bg: rgba(45,106,79,0.92);  --footer-bg: #0d2e1c; --tdb-bg: linear-gradient(90deg,#0d2e1c,#1a4a2c); }
html[data-theme="ete"]          { --nav-bg: rgba(192,80,16,0.92);  --footer-bg: #3c1404; --tdb-bg: linear-gradient(90deg,#3c1404,#c05010); }
html[data-theme="automne"]      { --nav-bg: rgba(107,45,26,0.92);  --footer-bg: #2a1008; --tdb-bg: linear-gradient(90deg,#1e0a04,#3a160a); }
html[data-theme="hiver"]        { --nav-bg: rgba(26,42,74,0.92);   --footer-bg: #080e1e; --tdb-bg: linear-gradient(90deg,#06080e,#0e1828); }
html[data-theme="sakura"]       { --nav-bg: rgba(90,32,64,0.92);   --footer-bg: #1c0818; --tdb-bg: linear-gradient(90deg,#140610,#2c0e22); }
html[data-theme="halloween"]    { --nav-bg: rgba(26,10,42,0.94);   --footer-bg: #080212; --tdb-bg: linear-gradient(90deg,#060006,#140618); }
html[data-theme="noel"]         { --nav-bg: rgba(26,58,26,0.93);   --footer-bg: #0a160a; --tdb-bg: linear-gradient(90deg,#060e06,#101e10); }
html[data-theme="anniversaire"] { --nav-bg: rgba(74,26,122,0.92);  --footer-bg: #180a30; --tdb-bg: linear-gradient(90deg,#100620,#200840); }
html[data-theme="normandie"]    { --nav-bg: rgba(74,88,48,0.92);   --footer-bg: #1e2418; --tdb-bg: linear-gradient(90deg,#1e2418,#4a5830); }
html[data-theme="prairie"]      { --nav-bg: rgba(74,48,144,0.92);  --footer-bg: #160c30; --tdb-bg: linear-gradient(90deg,#160c30,#4a3090); }
html[data-theme="etoiles"]      { --nav-bg: rgba(32,24,90,0.92);   --footer-bg: #100820; --tdb-bg: linear-gradient(90deg,#080620,#20185a); }
html[data-theme="paille"]       { --nav-bg: rgba(122,90,16,0.92);  --footer-bg: #201808; --tdb-bg: linear-gradient(90deg,#1c1408,#4a3808); }
html[data-theme="manche"]       { --nav-bg: rgba(10,96,112,0.92);  --footer-bg: #042028; --tdb-bg: linear-gradient(90deg,#022028,#0a6070); }
html[data-theme="couchersoleil"]{ --nav-bg: rgba(160,40,16,0.92);  --footer-bg: #200808; --tdb-bg: linear-gradient(90deg,#200404,#681808); }
html[data-theme="mernoire"]     { --nav-bg: rgba(12,32,48,0.95);   --footer-bg: #06141e; --tdb-bg: linear-gradient(90deg,#020810,#0c2030); }

/* Règles génériques : la valeur vient de --nav-bg / --footer-bg / --tdb-bg du
   thème actif, fallback sur le default theme si non défini. */
nav    { background-color: var(--nav-bg, rgba(58,90,46,0.92)) !important; }
footer { background: var(--footer-bg, #1a2e14) !important; }
#tdb   { background: var(--tdb-bg, linear-gradient(90deg,#1e2e16,#2a3e1e)); }

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  THÈMES LIFESTYLE — refonte design complète, pas juste des couleurs      ║
   ║  ─────────────────────────────────────────────────────────────────────── ║
   ║  Chaque thème ci-dessous redéfinit, en plus des couleurs/polices :       ║
   ║   • border-radius (carré, généreux, hairline…)                           ║
   ║   • box-shadow (dur décalé, soft diffuse, néon glow, aucun…)             ║
   ║   • transitions (instantanées, longues, easing custom)                   ║
   ║   • détails signature (texture, hover translate, drop-cap, glow, etc.)   ║
   ║                                                                          ║
   ║   moderne    — clean tech · Inter + Space Grotesk · monochrome + accent  ║
   ║   retro      — 70s revival · Fraunces + Bagel Fat One · ombres dures     ║
   ║   brutalist  — bordures épaisses · Archivo Black + JetBrains · noir/jaune║
   ║   editorial  — magazine · Playfair + Source Serif · drop-caps · noble    ║
   ║   cyberpunk  — néon dark · Orbitron + Share Tech Mono · glow #00f5ff     ║
   ║   kawaii     — pastel · Quicksand + Comfortaa · radius XXL · soft shadow ║
   ║   vintage    — carte postale · EB Garamond + Lora · grain SVG · sépia    ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── Polices titres + corps par thème lifestyle ─────────────────────────── */
html[data-theme="moderne"] h1, html[data-theme="moderne"] h2, html[data-theme="moderne"] h3,
html[data-theme="moderne"] .nav-logo, html[data-theme="moderne"] .section-title,
html[data-theme="moderne"] .stat-card .number, html[data-theme="moderne"] .page-hero h1,
html[data-theme="moderne"] footer .footer-logo { font-family: 'Space Grotesk', system-ui, sans-serif; letter-spacing: -0.02em; font-weight: 600; }
html[data-theme="moderne"] body { font-family: 'Inter', system-ui, sans-serif; }

html[data-theme="retro"] h1, html[data-theme="retro"] h2, html[data-theme="retro"] h3,
html[data-theme="retro"] .nav-logo, html[data-theme="retro"] .section-title,
html[data-theme="retro"] .stat-card .number, html[data-theme="retro"] .page-hero h1,
html[data-theme="retro"] footer .footer-logo { font-family: 'Bagel Fat One', 'Fraunces', serif; letter-spacing: 0.01em; }
html[data-theme="retro"] body { font-family: 'Fraunces', Georgia, serif; }

html[data-theme="brutalist"] h1, html[data-theme="brutalist"] h2, html[data-theme="brutalist"] h3,
html[data-theme="brutalist"] .nav-logo, html[data-theme="brutalist"] .section-title,
html[data-theme="brutalist"] .stat-card .number, html[data-theme="brutalist"] .page-hero h1,
html[data-theme="brutalist"] footer .footer-logo { font-family: 'Archivo Black', 'Helvetica Neue', sans-serif; text-transform: uppercase; letter-spacing: 0.02em; }
html[data-theme="brutalist"] body { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.95em; }

html[data-theme="editorial"] h1, html[data-theme="editorial"] h2, html[data-theme="editorial"] h3,
html[data-theme="editorial"] .nav-logo, html[data-theme="editorial"] .section-title,
html[data-theme="editorial"] .stat-card .number, html[data-theme="editorial"] .page-hero h1,
html[data-theme="editorial"] footer .footer-logo { font-family: 'Playfair Display', 'Times New Roman', serif; font-weight: 700; }
html[data-theme="editorial"] body { font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; font-size: 1.02em; }

html[data-theme="cyberpunk"] h1, html[data-theme="cyberpunk"] h2, html[data-theme="cyberpunk"] h3,
html[data-theme="cyberpunk"] .nav-logo, html[data-theme="cyberpunk"] .section-title,
html[data-theme="cyberpunk"] .stat-card .number, html[data-theme="cyberpunk"] .page-hero h1,
html[data-theme="cyberpunk"] footer .footer-logo { font-family: 'Orbitron', 'Arial Black', sans-serif; text-transform: uppercase; letter-spacing: 0.06em; }
html[data-theme="cyberpunk"] body { font-family: 'Share Tech Mono', 'Courier New', monospace; }

html[data-theme="kawaii"] h1, html[data-theme="kawaii"] h2, html[data-theme="kawaii"] h3,
html[data-theme="kawaii"] .nav-logo, html[data-theme="kawaii"] .section-title,
html[data-theme="kawaii"] .stat-card .number, html[data-theme="kawaii"] .page-hero h1,
html[data-theme="kawaii"] footer .footer-logo { font-family: 'Comfortaa', 'Quicksand', sans-serif; font-weight: 700; }
html[data-theme="kawaii"] body { font-family: 'Quicksand', system-ui, sans-serif; font-weight: 500; }

html[data-theme="vintage"] h1, html[data-theme="vintage"] h2, html[data-theme="vintage"] h3,
html[data-theme="vintage"] .nav-logo, html[data-theme="vintage"] .section-title,
html[data-theme="vintage"] .stat-card .number, html[data-theme="vintage"] .page-hero h1,
html[data-theme="vintage"] footer .footer-logo { font-family: 'EB Garamond', 'Garamond', serif; font-style: italic; font-weight: 500; }
html[data-theme="vintage"] body { font-family: 'Lora', Georgia, serif; }

/* ══════════════════════════════════════════════════════════════════
   ⚪ MODERNE — clean tech · monochrome + accent vif
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="moderne"] {
  --vert-fonce:   #0f1115;
  --vert-moyen:   #2a2f3a;
  --vert-clair:   #5a6478;
  --vert-pale:    #f4f5f7;
  --terre:        #5b3df5;            /* accent indigo vif */
  --terre-claire: #8b75ff;
  --creme:        #ffffff;
  --blanc:        #ffffff;
  --gris-chaud:   #6b7280;
  --texte:        #0f1115;
  --ombre:        rgba(15,17,21,0.06);
}
html[data-theme="moderne"] body { background-color:#fafbfc; }
html[data-theme="moderne"] nav { background-color: rgba(255,255,255,0.94); border-bottom: 1px solid rgba(15,17,21,0.06); box-shadow: none; backdrop-filter: blur(12px) saturate(1.6); }
html[data-theme="moderne"] nav .nav-logo, html[data-theme="moderne"] nav .nav-links a { color: #0f1115; }
html[data-theme="moderne"] nav .nav-links a:hover { color: #5b3df5; }
html[data-theme="moderne"] .burger { background: rgba(15,17,21,0.85); }
html[data-theme="moderne"] .hero { background: linear-gradient(180deg,#fafbfc 0%,#ffffff 100%); color:#0f1115;
  background-attachment: fixed;
}
html[data-theme="moderne"] .hero h1, html[data-theme="moderne"] .hero-subtitle { color:#0f1115; }
html[data-theme="moderne"] .hero-badge { background: rgba(91,61,245,0.08); color:#5b3df5; border:1px solid rgba(91,61,245,0.25); }
html[data-theme="moderne"] .hero h1 em { color:#5b3df5; font-style:normal; font-weight:700; }
html[data-theme="moderne"] .resident-card, html[data-theme="moderne"] .soutien-card,
html[data-theme="moderne"] .actu-card, html[data-theme="moderne"] .stat-card {
  border-radius: 6px; box-shadow: none; border: 1px solid rgba(15,17,21,0.08);
  transition: transform 0.15s ease-out, border-color 0.15s ease-out;
}
html[data-theme="moderne"] .resident-card:hover, html[data-theme="moderne"] .actu-card:hover {
  transform: translateY(-2px); border-color: rgba(91,61,245,0.4); box-shadow: none;
}
html[data-theme="moderne"] .btn-primary, html[data-theme="moderne"] .nav-cta {
  border-radius: 6px; box-shadow: none; background:#0f1115; color:#fff;
  transition: background 0.15s ease-out, transform 0.1s ease-out;
}
html[data-theme="moderne"] .btn-primary:hover, html[data-theme="moderne"] .nav-cta:hover { background:#5b3df5; transform: none; }
html[data-theme="moderne"] .section-title { font-weight:600; letter-spacing:-0.02em; }
html[data-theme="moderne"] footer { background: #0f1115; color: #d1d5db; }

/* ══════════════════════════════════════════════════════════════════
   🟠 RETRO — 70s revival · mustard · cream · ombres dures
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="retro"] {
  --vert-fonce:   #4a3520;
  --vert-moyen:   #8a5a2a;
  --vert-clair:   #d4a574;
  --vert-pale:    #f3ead0;
  --terre:        #ce5b1d;
  --terre-claire: #e8843a;
  --creme:        #f3ead0;
  --blanc:        #fbf3df;
  --gris-chaud:   #7a5e3e;
  --texte:        #2a1f10;
  --ombre:        #2a1f10;
}
html[data-theme="retro"] body { background-color:#f3ead0; }
html[data-theme="retro"] nav { background-color: rgba(74,53,32,0.95); border-bottom: 3px solid #ce5b1d; }
html[data-theme="retro"] .burger { background: rgba(74,53,32,0.78); }
html[data-theme="retro"] .hero { background: linear-gradient(160deg,#ce5b1d 0%,#a8431a 50%,#4a3520 100%);
  background-attachment: fixed;
}
html[data-theme="retro"] .hero-badge { background:#fbf3df; color:#4a3520; border:2px solid #4a3520; }
html[data-theme="retro"] .hero h1 em { color:#f3ead0; font-style:italic; }
html[data-theme="retro"] .resident-card, html[data-theme="retro"] .soutien-card,
html[data-theme="retro"] .actu-card {
  border-radius: 4px; background: #fbf3df; border: 2px solid #2a1f10;
  box-shadow: 5px 5px 0 #2a1f10;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
html[data-theme="retro"] .resident-card:hover, html[data-theme="retro"] .actu-card:hover {
  transform: translate(-2px,-2px); box-shadow: 7px 7px 0 #2a1f10;
}
html[data-theme="retro"] .btn-primary, html[data-theme="retro"] .nav-cta {
  border-radius: 4px; background:#ce5b1d; color:#fbf3df; border:2px solid #2a1f10;
  box-shadow: 4px 4px 0 #2a1f10; font-weight: 700;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
html[data-theme="retro"] .btn-primary:hover, html[data-theme="retro"] .nav-cta:hover {
  transform: translate(-2px,-2px); box-shadow: 6px 6px 0 #2a1f10;
}
html[data-theme="retro"] .section-title { font-weight: 400; }
html[data-theme="retro"] .section-label { color:#ce5b1d; letter-spacing:0.15em; }
html[data-theme="retro"] footer { background: #2a1f10; color:#f3ead0; border-top: 4px solid #ce5b1d; }

/* ══════════════════════════════════════════════════════════════════
   ⬛ BRUTALIST — bordures épaisses · noir/jaune · hover translate
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="brutalist"] {
  --vert-fonce:   #000000;
  --vert-moyen:   #1a1a1a;
  --vert-clair:   #404040;
  --vert-pale:    #f8f8f8;
  --terre:        #ffd400;            /* jaune signal */
  --terre-claire: #ffe04f;
  --creme:        #ffffff;
  --blanc:        #ffffff;
  --gris-chaud:   #404040;
  --texte:        #000000;
  --ombre:        #000000;
}
html[data-theme="brutalist"] body { background-color:#ffffff; }
html[data-theme="brutalist"] nav { background-color:#000000; border-bottom: 4px solid #ffd400; box-shadow:none; backdrop-filter:none; }
html[data-theme="brutalist"] nav .nav-logo, html[data-theme="brutalist"] nav .nav-links a { color:#ffffff; }
html[data-theme="brutalist"] nav .nav-links a:hover { color:#ffd400; background:none; }
html[data-theme="brutalist"] .burger { background:#ffd400; color:#000; border-radius:0; }
html[data-theme="brutalist"] .hero { background:#ffd400; color:#000;
  background-attachment: fixed;
}
html[data-theme="brutalist"] .hero h1, html[data-theme="brutalist"] .hero-subtitle { color:#000; }
html[data-theme="brutalist"] .hero-badge { background:#000; color:#ffd400; border:3px solid #000; border-radius:0; }
html[data-theme="brutalist"] .hero h1 em { color:#000; background:#fff; padding:0 0.2em; font-style:normal; }
html[data-theme="brutalist"] .resident-card, html[data-theme="brutalist"] .soutien-card,
html[data-theme="brutalist"] .actu-card, html[data-theme="brutalist"] .stat-card {
  border-radius: 0; background:#fff; border: 3px solid #000;
  box-shadow: 8px 8px 0 #000;
  transition: transform 0.08s linear, box-shadow 0.08s linear;
}
html[data-theme="brutalist"] .resident-card:hover, html[data-theme="brutalist"] .actu-card:hover {
  transform: translate(2px,2px); box-shadow: 4px 4px 0 #000;
}
html[data-theme="brutalist"] .btn-primary, html[data-theme="brutalist"] .nav-cta {
  border-radius: 0; background:#000; color:#ffd400; border:3px solid #000;
  box-shadow: 5px 5px 0 #ffd400; text-transform:uppercase; font-weight:900;
  transition: transform 0.08s linear, box-shadow 0.08s linear;
}
html[data-theme="brutalist"] .btn-primary:hover, html[data-theme="brutalist"] .nav-cta:hover {
  transform: translate(2px,2px); box-shadow: 2px 2px 0 #ffd400; background:#ffd400; color:#000;
}
html[data-theme="brutalist"] .section-title { text-transform:uppercase; letter-spacing:0.04em; }
html[data-theme="brutalist"] footer { background:#000; color:#ffd400; border-top: 4px solid #ffd400; }
html[data-theme="brutalist"] a { text-decoration: underline; text-underline-offset: 3px; }

/* ══════════════════════════════════════════════════════════════════
   📰 EDITORIAL — magazine · Playfair géant · drop-cap · neutre noble
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="editorial"] {
  --vert-fonce:   #1a1612;
  --vert-moyen:   #4a3f30;
  --vert-clair:   #8a7a60;
  --vert-pale:    #f4eee2;
  --terre:        #8b1e1e;
  --terre-claire: #b04848;
  --creme:        #faf6ee;
  --blanc:        #fffaf0;
  --gris-chaud:   #6b5e48;
  --texte:        #1a1612;
  --ombre:        rgba(26,22,18,0.08);
}
html[data-theme="editorial"] body { background-color:#faf6ee; line-height:1.75; }
html[data-theme="editorial"] nav { background-color: rgba(250,246,238,0.96); border-bottom: 1px solid rgba(26,22,18,0.15); box-shadow:none; }
html[data-theme="editorial"] nav .nav-logo, html[data-theme="editorial"] nav .nav-links a { color: #1a1612; }
html[data-theme="editorial"] nav .nav-links a:hover { color: #8b1e1e; }
html[data-theme="editorial"] .burger { background: rgba(26,22,18,0.85); }
html[data-theme="editorial"] .hero { background: linear-gradient(180deg,#1a1612 0%,#2a2418 100%);
  background-attachment: fixed;
}
html[data-theme="editorial"] .hero h1 { font-size: clamp(2.8rem, 7vw, 5.5rem); line-height: 1.05; font-weight: 900; }
html[data-theme="editorial"] .hero-badge { background: transparent; color:#faf6ee; border-bottom:1px solid rgba(250,246,238,0.4); border-radius: 0; padding: 0 0 0.3rem 0; letter-spacing: 0.18em; text-transform:uppercase; }
html[data-theme="editorial"] .hero h1 em { color:#d4a04a; font-style: italic; font-weight: 400; }
html[data-theme="editorial"] .section-title { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 700; line-height: 1.1; }
html[data-theme="editorial"] .section-intro::first-letter {
  font-family:'Playfair Display', serif; font-size: 3.6em; float: left; line-height: 0.85;
  padding: 0.1em 0.12em 0 0; font-weight: 900; color:#8b1e1e;
}
html[data-theme="editorial"] .resident-card, html[data-theme="editorial"] .soutien-card,
html[data-theme="editorial"] .actu-card {
  border-radius: 2px; box-shadow: none; border: none;
  border-top: 1px solid rgba(26,22,18,0.15); padding-top: 1.5rem;
  background: transparent;
}
html[data-theme="editorial"] .btn-primary, html[data-theme="editorial"] .nav-cta {
  border-radius: 0; background:#1a1612; color:#faf6ee; box-shadow:none;
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.82em;
  border-bottom: 2px solid #8b1e1e;
  transition: background 0.3s ease;
}
html[data-theme="editorial"] .btn-primary:hover, html[data-theme="editorial"] .nav-cta:hover {
  background:#8b1e1e; transform: none;
}
html[data-theme="editorial"] footer { background: #1a1612; color:#c8b890; border-top: none; }

/* ══════════════════════════════════════════════════════════════════
   💜 CYBERPUNK — néon dark · glow #00f5ff · radius 0
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="cyberpunk"] {
  --vert-fonce:   #0a0a14;
  --vert-moyen:   #1a1a2e;
  --vert-clair:   #16213e;
  --vert-pale:    #20203a;
  --terre:        #00f5ff;
  --terre-claire: #ff006e;
  --creme:        #0f0f1a;
  --blanc:        #14142a;
  --gris-chaud:   #8a8aa8;
  --texte:        #e8e8f8;
  --ombre:        rgba(0,245,255,0.15);
}
html[data-theme="cyberpunk"] body { background-color:#0a0a14; color:#e8e8f8; }
html[data-theme="cyberpunk"] nav { background-color: rgba(10,10,20,0.95); border-bottom: 1px solid #00f5ff; box-shadow: 0 0 20px rgba(0,245,255,0.25); }
html[data-theme="cyberpunk"] nav .nav-logo, html[data-theme="cyberpunk"] nav .nav-links a { color: #e8e8f8; }
html[data-theme="cyberpunk"] nav .nav-links a:hover { color: #00f5ff; text-shadow: 0 0 10px #00f5ff; }
html[data-theme="cyberpunk"] .burger { background: rgba(0,245,255,0.15); border:1px solid #00f5ff; }
html[data-theme="cyberpunk"] .hero {
  background: linear-gradient(135deg,#0a0a14 0%,#16213e 60%,#1a0a2a 100%);
  position: relative;
  background-attachment: fixed;
}
html[data-theme="cyberpunk"] .hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,245,255,0.03) 2px, rgba(0,245,255,0.03) 3px),
    radial-gradient(ellipse at 30% 50%, rgba(255,0,110,0.15) 0%, transparent 50%);
}
html[data-theme="cyberpunk"] .hero h1 { color:#fff; text-shadow: 0 0 20px rgba(0,245,255,0.6), 0 0 40px rgba(255,0,110,0.3); }
html[data-theme="cyberpunk"] .hero-badge { background: rgba(0,245,255,0.1); color:#00f5ff; border:1px solid #00f5ff; border-radius:0; box-shadow: 0 0 15px rgba(0,245,255,0.4); }
html[data-theme="cyberpunk"] .hero h1 em { color:#ff006e; font-style:normal; text-shadow: 0 0 18px rgba(255,0,110,0.7); }
html[data-theme="cyberpunk"] .resident-card, html[data-theme="cyberpunk"] .soutien-card,
html[data-theme="cyberpunk"] .actu-card, html[data-theme="cyberpunk"] .stat-card {
  border-radius: 0; background:#14142a; border: 1px solid rgba(0,245,255,0.3);
  box-shadow: 0 0 12px rgba(0,245,255,0.1);
  transition: border-color 0.2s, box-shadow 0.25s;
  color:#e8e8f8;
}
html[data-theme="cyberpunk"] .resident-card:hover, html[data-theme="cyberpunk"] .actu-card:hover {
  border-color: #00f5ff; box-shadow: 0 0 24px rgba(0,245,255,0.5), inset 0 0 12px rgba(0,245,255,0.08);
  transform: none;
}
html[data-theme="cyberpunk"] .btn-primary, html[data-theme="cyberpunk"] .nav-cta {
  border-radius: 0; background: transparent; color:#00f5ff; border:1px solid #00f5ff;
  box-shadow: 0 0 15px rgba(0,245,255,0.4), inset 0 0 8px rgba(0,245,255,0.15);
  text-transform: uppercase; letter-spacing: 0.08em;
  transition: background 0.2s, box-shadow 0.25s, color 0.2s;
}
html[data-theme="cyberpunk"] .btn-primary:hover, html[data-theme="cyberpunk"] .nav-cta:hover {
  background:#00f5ff; color:#0a0a14; box-shadow: 0 0 30px rgba(0,245,255,0.8), 0 0 60px rgba(0,245,255,0.3);
}
html[data-theme="cyberpunk"] .section-title { color:#fff; text-shadow: 0 0 12px rgba(0,245,255,0.4); }
html[data-theme="cyberpunk"] .section-label { color:#ff006e; letter-spacing: 0.2em; }
html[data-theme="cyberpunk"] footer { background:#0a0a14; color:#8a8aa8; border-top: 1px solid #00f5ff; }
html[data-theme="cyberpunk"] a { color:#00f5ff; }

/* ══════════════════════════════════════════════════════════════════
   🎀 KAWAII — pastel · Quicksand · radius XXL · soft shadow
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="kawaii"] {
  --vert-fonce:   #c8a2d8;
  --vert-moyen:   #d8b8e8;
  --vert-clair:   #fcd9e8;
  --vert-pale:    #fef5fa;
  --terre:        #ff8eb3;
  --terre-claire: #ffc1d4;
  --creme:        #fff8fa;
  --blanc:        #ffffff;
  --gris-chaud:   #a08aa8;
  --texte:        #5a4868;
  --ombre:        rgba(200,162,216,0.18);
}
html[data-theme="kawaii"] body { background-color:#fef5fa; color:#5a4868; }
html[data-theme="kawaii"] nav { background-color: rgba(252,217,232,0.92); border-bottom: 2px dotted #ff8eb3; box-shadow: 0 4px 20px rgba(255,142,179,0.2); }
html[data-theme="kawaii"] nav .nav-logo, html[data-theme="kawaii"] nav .nav-links a { color: #5a4868; }
html[data-theme="kawaii"] nav .nav-links a:hover { color: #a02a5a; }
html[data-theme="kawaii"] .burger { background: #ff8eb3; border-radius: 50%; }
html[data-theme="kawaii"] .hero { background: linear-gradient(135deg,#fcd9e8 0%,#d8b8e8 50%,#a8d4e8 100%); color:#5a4868;
  background-attachment: fixed;
}
html[data-theme="kawaii"] .hero h1, html[data-theme="kawaii"] .hero-subtitle { color:#5a4868; }
html[data-theme="kawaii"] .hero-badge { background: #fff; color:#a02a5a; border-radius: 999px; box-shadow: 0 4px 16px rgba(255,142,179,0.25); }
html[data-theme="kawaii"] .hero h1 em { color:#a02a5a; font-style:normal; }
html[data-theme="kawaii"] .resident-card, html[data-theme="kawaii"] .soutien-card,
html[data-theme="kawaii"] .actu-card, html[data-theme="kawaii"] .stat-card {
  border-radius: 24px; background:#fff; border: 1px solid rgba(255,142,179,0.15);
  box-shadow: 0 8px 28px rgba(200,162,216,0.18);
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s;
}
html[data-theme="kawaii"] .resident-card:hover, html[data-theme="kawaii"] .actu-card:hover {
  transform: translateY(-5px) scale(1.01); box-shadow: 0 14px 36px rgba(255,142,179,0.28);
}
html[data-theme="kawaii"] .btn-primary, html[data-theme="kawaii"] .nav-cta {
  border-radius: 999px; background: linear-gradient(135deg,#cc3a78 0%,#a04ec0 100%); color:#fff;
  box-shadow: 0 6px 22px rgba(255,142,179,0.4); border:none; font-weight:700;
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s;
}
html[data-theme="kawaii"] .btn-primary:hover, html[data-theme="kawaii"] .nav-cta:hover {
  transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 28px rgba(255,142,179,0.55);
}
html[data-theme="kawaii"] .section-title { color:#5a4868; }
html[data-theme="kawaii"] .section-label { color:#a02a5a; letter-spacing: 0.12em; }
html[data-theme="kawaii"] footer { background: linear-gradient(180deg,#fef5fa,#fcd9e8); color:#5a4868; border-top: 2px dotted #ff8eb3; }

/* ══════════════════════════════════════════════════════════════════
   🖼 VINTAGE — carte postale · sépia · grain SVG · serif italique
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="vintage"] {
  --vert-fonce:   #4a3520;
  --vert-moyen:   #7a5a40;
  --vert-clair:   #b08868;
  --vert-pale:    #f0e4d2;
  --terre:        #a85a30;
  --terre-claire: #d49060;
  --creme:        #f0e4d2;
  --blanc:        #faeeda;
  --gris-chaud:   #8a6e58;
  --texte:        #3a2a1c;
  --ombre:        rgba(74,53,32,0.20);
}
html[data-theme="vintage"] body {
  background-color:#f0e4d2;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.29 0 0 0 0 0.21 0 0 0 0 0.13 0 0 0 0.10 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-attachment: fixed;
}
html[data-theme="vintage"] nav { background-color: rgba(74,53,32,0.95); border-bottom: 1px solid rgba(168,90,48,0.4); }
html[data-theme="vintage"] .burger { background: rgba(74,53,32,0.78); }
html[data-theme="vintage"] .hero { background: linear-gradient(160deg,#7a5a40 0%,#4a3520 50%,#2a1c10 100%);
  background-attachment: fixed;
}
html[data-theme="vintage"] .hero-badge { background: rgba(240,228,210,0.15); color:#f0e4d2; border:1px solid rgba(240,228,210,0.3); font-style:italic; letter-spacing:0.1em; }
html[data-theme="vintage"] .hero h1 { font-family:'EB Garamond', serif; font-style: italic; font-weight: 500; }
html[data-theme="vintage"] .hero h1 em { color:#d49060; font-style: italic; }
html[data-theme="vintage"] .resident-card, html[data-theme="vintage"] .soutien-card,
html[data-theme="vintage"] .actu-card {
  border-radius: 3px; background: #faeeda; border: 1px solid rgba(74,53,32,0.18);
  box-shadow: 0 6px 22px rgba(74,53,32,0.18), inset 0 0 0 1px rgba(168,90,48,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}
html[data-theme="vintage"] .resident-card::before, html[data-theme="vintage"] .actu-card::before {
  content:''; position:absolute; inset:6px; pointer-events:none;
  border:1px solid rgba(74,53,32,0.10); border-radius:2px;
}
html[data-theme="vintage"] .resident-card:hover, html[data-theme="vintage"] .actu-card:hover {
  transform: rotate(-0.4deg) translateY(-3px); box-shadow: 0 12px 32px rgba(74,53,32,0.28);
}
html[data-theme="vintage"] .btn-primary, html[data-theme="vintage"] .nav-cta {
  border-radius: 3px; background:#a85a30; color:#faeeda; border: 1px solid rgba(74,53,32,0.4);
  box-shadow: 0 3px 0 rgba(74,53,32,0.5); font-style: italic; letter-spacing:0.05em;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
html[data-theme="vintage"] .btn-primary:hover, html[data-theme="vintage"] .nav-cta:hover {
  transform: translateY(-1px); box-shadow: 0 4px 0 rgba(74,53,32,0.5);
}
html[data-theme="vintage"] .section-title { font-style:italic; font-weight: 500; color:#4a3520; }
html[data-theme="vintage"] .section-label { color:#a85a30; letter-spacing:0.18em; font-style: italic; }
html[data-theme="vintage"] footer { background: #2a1c10; color:#d4ba90; border-top: 4px double #a85a30; }

/* Section .soutien : override fond sombre par défaut + couleurs texte cohérentes washi */

/* Section .actualites + .residents-preview : doivent rester claires aussi */

/* Hero : le gradient default a #2c4a22 et #1a3018 hardcodés (vert foncé) qui créent
   un mélange sale avec --vert-fonce sumi en washi → on réécrit le gradient propre.
   On utilise un gradient légèrement plus prononcé (creme → ombre rose) pour la profondeur. */

/* Ornement sumi-e : trait rouge cinabre fin sous le titre du hero */

/* Boutons hero : style washi solide (or filled, pas blanc-sur-blanc) */

/* Bouton primaire (Soutenir, Nous soutenir) : variante avec accent cinabre */

/* Bandeau scrolling de remerciements (top, "Merci à vous", noms donateurs) */

/* ── TDB & footer overrides pour les thèmes lifestyle (cohérence visuelle) ── */
html[data-theme="moderne"]   #tdb { background: linear-gradient(90deg,#0f1115,#2a2f3a); }
html[data-theme="retro"]     #tdb { background: linear-gradient(90deg,#4a3520,#ce5b1d); }
html[data-theme="brutalist"] #tdb { background: #000; color:#ffd400; }
html[data-theme="editorial"] #tdb { background: linear-gradient(90deg,#1a1612,#4a3f30); }
html[data-theme="cyberpunk"] #tdb { background: linear-gradient(90deg,#0a0a14,#1a0a2a); border-bottom: 1px solid #00f5ff; }
html[data-theme="kawaii"]    #tdb { background: linear-gradient(90deg,#fcd9e8,#d8b8e8); color:#5a4868; }
html[data-theme="vintage"]   #tdb { background: linear-gradient(90deg,#4a3520,#7a5a40); }

html[data-theme="moderne"]   nav    { background-color: rgba(255,255,255,0.94) !important; }
html[data-theme="moderne"]   footer { background: #0f1115 !important; }
html[data-theme="retro"]     nav    { background-color: rgba(74,53,32,0.95) !important; }
html[data-theme="retro"]     footer { background: #2a1f10 !important; }
html[data-theme="brutalist"] nav    { background-color: #000 !important; }
html[data-theme="brutalist"] footer { background: #000 !important; }
html[data-theme="editorial"] nav    { background-color: rgba(250,246,238,0.96) !important; }
html[data-theme="editorial"] footer { background: #1a1612 !important; }
html[data-theme="cyberpunk"] nav    { background-color: rgba(10,10,20,0.95) !important; }
html[data-theme="cyberpunk"] footer { background: #0a0a14 !important; }
html[data-theme="kawaii"]    nav    { background-color: rgba(252,217,232,0.92) !important; }
html[data-theme="kawaii"]    footer { background: linear-gradient(180deg,#fef5fa,#fcd9e8) !important; }
html[data-theme="vintage"]   nav    { background-color: rgba(74,53,32,0.95) !important; }
html[data-theme="vintage"]   footer { background: #2a1c10 !important; }

/* ════════════════════════════════════════════════════════════════════════════
   AUDIT CONTRASTES — Lifestyle themes coverage systématique (WCAG AA)
   Ajouté 2026-05-07 suite à l'audit complet des sections.

   Couvre les sections où le base CSS utilise des couleurs hardcodées
   (#1a3018, #2c4a22 dans .hero ; #1a2e14 dans footer ; rgba(255,255,255,0.08)
   dans .soutien-card) ou des combinaisons texte/fond qui deviennent
   invisibles sur des palettes lifestyle claires (washi, kawaii, retro/vintage
   crème, editorial sépia, moderne blanc).

   Contraste cible : WCAG AA = 4.5:1 sur texte normal, 3:1 sur texte large.
   Pour washi : visé 7:1 (AAA) — sumi #2a2520 sur fond papier #fdf3ee = 13.4:1.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. HERO + PAGE-HERO + PHOTO-HERO — éliminer les hardcoded #2c4a22/#1a3018 ── */

/* Moderne — minimal, blanc/indigo */
html[data-theme="moderne"] .page-hero,
html[data-theme="moderne"] .photo-hero {
  background-color: #0f1115;
  background-image: linear-gradient(180deg, rgba(15,17,21,0.55) 0%, rgba(15,17,21,0.78) 100%), var(--hero-bg);
  color: #ffffff;
  background-attachment: fixed;
}
html[data-theme="moderne"] .page-hero h1,
html[data-theme="moderne"] .page-hero p,
html[data-theme="moderne"] .photo-hero h1,
html[data-theme="moderne"] .photo-hero .hero-sub { color: #ffffff; }

/* Retro — chocolat ocre */
html[data-theme="retro"] .hero {
  background: linear-gradient(160deg,#ce5b1d 0%,#a8431a 50%,#4a3520 100%) !important;
  background-attachment: fixed;
}
html[data-theme="retro"] .page-hero,
html[data-theme="retro"] .photo-hero {
  background-color: #2a1f10;
  background-image: linear-gradient(180deg, rgba(42,31,16,0.55) 0%, rgba(42,31,16,0.85) 100%), var(--hero-bg);
  color: #fbf3df;
  background-attachment: fixed;
}
html[data-theme="retro"] .page-hero h1,
html[data-theme="retro"] .photo-hero h1 { color: #fbf3df; }

/* Brutalist — jaune/noir (le hero est déjà jaune via base override) */
html[data-theme="brutalist"] .hero {
  background: #ffd400 !important;
  color: #000 !important;
  background-attachment: fixed;
}
html[data-theme="brutalist"] .hero h1,
html[data-theme="brutalist"] .hero-subtitle { color: #000 !important; text-shadow: none; }
html[data-theme="brutalist"] .page-hero,
html[data-theme="brutalist"] .photo-hero {
  background-color: #000;
  background-image: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.85) 100%), var(--hero-bg);
  color: #ffd400;
  background-attachment: fixed;
}
html[data-theme="brutalist"] .page-hero h1,
html[data-theme="brutalist"] .photo-hero h1 { color: #ffd400; }
html[data-theme="brutalist"] .page-hero p,
html[data-theme="brutalist"] .photo-hero .hero-sub { color: #ffffff; }

/* Editorial — noble noir/beige */
html[data-theme="editorial"] .hero {
  background: linear-gradient(180deg,#1a1612 0%,#2a2418 100%) !important;
  background-attachment: fixed;
}
html[data-theme="editorial"] .hero h1,
html[data-theme="editorial"] .hero-subtitle { color: #faf6ee; }
html[data-theme="editorial"] .page-hero,
html[data-theme="editorial"] .photo-hero {
  background-color: #1a1612;
  background-image: linear-gradient(180deg, rgba(26,22,18,0.45) 0%, rgba(26,22,18,0.82) 100%), var(--hero-bg);
  color: #faf6ee;
  background-attachment: fixed;
}
html[data-theme="editorial"] .page-hero h1,
html[data-theme="editorial"] .photo-hero h1 { color: #faf6ee; }

/* Cyberpunk — déjà bien défini, juste renforcer page-hero/photo-hero */
html[data-theme="cyberpunk"] .page-hero,
html[data-theme="cyberpunk"] .photo-hero {
  background-color: #0a0a14;
  background-image: linear-gradient(180deg, rgba(10,10,20,0.55) 0%, rgba(10,10,20,0.92) 100%), var(--hero-bg);
  color: #e8e8f8;
  background-attachment: fixed;
}
html[data-theme="cyberpunk"] .page-hero h1,
html[data-theme="cyberpunk"] .photo-hero h1 { color: #ffffff; text-shadow: 0 0 20px rgba(0,245,255,0.5); }
html[data-theme="cyberpunk"] .page-hero p,
html[data-theme="cyberpunk"] .photo-hero .hero-sub { color: #c8d4e8; }

/* Kawaii — pastel sur dégradé rose/violet, texte sombre lisible */
html[data-theme="kawaii"] .hero {
  background: linear-gradient(135deg,#fcd9e8 0%,#d8b8e8 50%,#a8d4e8 100%) !important;
  color: #5a4868 !important;
  background-attachment: fixed;
}
html[data-theme="kawaii"] .hero h1 { color: #5a4868 !important; text-shadow: 0 1px 2px rgba(255,255,255,0.5); }
html[data-theme="kawaii"] .hero-subtitle { color: #5a4868 !important; text-shadow: 0 1px 2px rgba(255,255,255,0.4); }
html[data-theme="kawaii"] .page-hero,
html[data-theme="kawaii"] .photo-hero {
  background-color: #d8b8e8;
  background-image: linear-gradient(180deg, rgba(90,72,104,0.32) 0%, rgba(90,72,104,0.55) 100%), var(--hero-bg);
  color: #ffffff;
  background-attachment: fixed;
}
html[data-theme="kawaii"] .page-hero h1,
html[data-theme="kawaii"] .photo-hero h1 { color: #ffffff; text-shadow: 0 2px 16px rgba(90,72,104,0.7); }

/* Vintage — sépia chaud */
html[data-theme="vintage"] .hero {
  background: linear-gradient(160deg,#7a5a40 0%,#4a3520 50%,#2a1c10 100%) !important;
  background-attachment: fixed;
}
html[data-theme="vintage"] .hero h1 { color: #faeeda; }
html[data-theme="vintage"] .hero-subtitle { color: rgba(250,238,218,0.92); }
html[data-theme="vintage"] .page-hero,
html[data-theme="vintage"] .photo-hero {
  background-color: #2a1c10;
  background-image: linear-gradient(180deg, rgba(42,28,16,0.45) 0%, rgba(42,28,16,0.85) 100%), var(--hero-bg);
  color: #faeeda;
  background-attachment: fixed;
}
html[data-theme="vintage"] .page-hero h1,
html[data-theme="vintage"] .photo-hero h1 { color: #faeeda; }

/* Washi — papier clair, sumi sombre — déjà partiellement traité ; renforce
   .page-hero/.photo-hero qui sinon utilisent le fond foncé hardcodé. */

/* ── 2. .soutien (section dons sur homepage) — fond sombre par défaut tue les
       palettes claires (washi, kawaii, retro). Override par thème. ── */

html[data-theme="moderne"] .soutien {
  background: linear-gradient(180deg, #f4f5f7 0%, #ffffff 100%);
  color: #0f1115;
}
html[data-theme="moderne"] .soutien .section-title { color: #0f1115; }
html[data-theme="moderne"] .soutien .section-intro { color: #2a2f3a; }
html[data-theme="moderne"] .soutien-card {
  background: #ffffff;
  border: 1px solid rgba(15,17,21,0.08);
  color: #0f1115;
}
html[data-theme="moderne"] .soutien-card h3 { color: #5b3df5; }
html[data-theme="moderne"] .soutien-card p { color: #2a2f3a; opacity: 1; }
html[data-theme="moderne"] .soutien-detail { color: #5b3df5; }

html[data-theme="retro"] .soutien {
  background: linear-gradient(135deg, #4a3520 0%, #2a1f10 100%);
  color: #fbf3df;
}
html[data-theme="retro"] .soutien-card {
  background: #fbf3df;
  border: 2px solid #2a1f10;
  color: #2a1f10;
}
html[data-theme="retro"] .soutien-card h3 { color: #ce5b1d; }
html[data-theme="retro"] .soutien-card p { color: #4a3520; opacity: 1; }
html[data-theme="retro"] .soutien-detail { color: #f0c870; }

html[data-theme="brutalist"] .soutien {
  background: #000;
  color: #ffd400;
}
html[data-theme="brutalist"] .soutien .section-title,
html[data-theme="brutalist"] .soutien .section-intro { color: #ffffff; }
html[data-theme="brutalist"] .soutien-card {
  background: #ffd400;
  border: 3px solid #000;
  color: #000;
}
html[data-theme="brutalist"] .soutien-card h3,
html[data-theme="brutalist"] .soutien-card p { color: #000; opacity: 1; }
html[data-theme="brutalist"] .soutien-detail { color: #ffd400; }

html[data-theme="editorial"] .soutien {
  background: linear-gradient(135deg, #1a1612 0%, #4a3f30 100%);
  color: #faf6ee;
}
html[data-theme="editorial"] .soutien-card {
  background: rgba(250,246,238,0.06);
  border: 1px solid rgba(250,246,238,0.18);
  color: #faf6ee;
}
html[data-theme="editorial"] .soutien-card h3 { color: #d4a04a; }
html[data-theme="editorial"] .soutien-card p { color: rgba(250,246,238,0.85); opacity: 1; }
html[data-theme="editorial"] .soutien-detail { color: #d4a04a; }

html[data-theme="cyberpunk"] .soutien {
  background: linear-gradient(135deg, #0a0a14 0%, #1a0a2a 100%);
  color: #e8e8f8;
  position: relative;
}
html[data-theme="cyberpunk"] .soutien-card {
  background: #14142a;
  border: 1px solid rgba(0,245,255,0.3);
  color: #e8e8f8;
  box-shadow: 0 0 12px rgba(0,245,255,0.1);
}
html[data-theme="cyberpunk"] .soutien-card h3 { color: #00f5ff; text-shadow: 0 0 8px rgba(0,245,255,0.5); }
html[data-theme="cyberpunk"] .soutien-card p { color: #c8d4e8; opacity: 1; }
html[data-theme="cyberpunk"] .soutien-detail { color: #ff006e; }

html[data-theme="kawaii"] .soutien {
  background: linear-gradient(180deg, #fef5fa 0%, #fcd9e8 100%);
  color: #5a4868;
}
html[data-theme="kawaii"] .soutien .section-title,
html[data-theme="kawaii"] .soutien .section-intro { color: #5a4868; }
html[data-theme="kawaii"] .soutien-card {
  background: #ffffff;
  border: 1px solid rgba(255,142,179,0.18);
  color: #5a4868;
  box-shadow: 0 8px 28px rgba(200,162,216,0.18);
}
html[data-theme="kawaii"] .soutien-card h3 { color: #b8366a; }
html[data-theme="kawaii"] .soutien-card p { color: #5a4868; opacity: 1; }
html[data-theme="kawaii"] .soutien-detail { color: #b8366a; }

html[data-theme="vintage"] .soutien {
  background: linear-gradient(135deg, #4a3520 0%, #2a1c10 100%);
  color: #f0e4d2;
}
html[data-theme="vintage"] .soutien-card {
  background: #faeeda;
  border: 1px solid rgba(74,53,32,0.22);
  color: #3a2a1c;
}
html[data-theme="vintage"] .soutien-card h3 { color: #a85a30; }
html[data-theme="vintage"] .soutien-card p { color: #5a4530; opacity: 1; }
html[data-theme="vintage"] .soutien-detail { color: #d49060; }

/* Washi — déjà bien traité, mais on s'assure des contrastes des sous-titres */

/* ── 3. .actualites + .residents-preview — backgrounds clairs cohérents ── */

html[data-theme="moderne"]   .actualites,
html[data-theme="moderne"]   .residents-preview { background: #ffffff; }
html[data-theme="retro"]     .actualites,
html[data-theme="retro"]     .residents-preview { background: #f3ead0; }
html[data-theme="brutalist"] .actualites,
html[data-theme="brutalist"] .residents-preview { background: #ffffff; }
html[data-theme="editorial"] .actualites,
html[data-theme="editorial"] .residents-preview { background: #faf6ee; }
html[data-theme="cyberpunk"] .actualites,
html[data-theme="cyberpunk"] .residents-preview { background: #0f0f1a; }
html[data-theme="kawaii"]    .actualites,
html[data-theme="kawaii"]    .residents-preview { background: #fef5fa; }
html[data-theme="vintage"]   .actualites,
html[data-theme="vintage"]   .residents-preview { background: #f0e4d2; }

/* ── 4. .actu-card titres + body texte (var(--vert-fonce) + var(--gris-chaud))
       — vert-fonce de moderne = #0f1115 (lisible), de washi = #2a2520 (lisible),
       mais pour cyberpunk et kawaii, on doit forcer la couleur titre. ── */

html[data-theme="moderne"]   .actu-card-top h3 { color: #0f1115; }
html[data-theme="retro"]     .actu-card-top h3 { color: #4a3520; }
html[data-theme="brutalist"] .actu-card-top h3 { color: #000000; }
html[data-theme="editorial"] .actu-card-top h3 { color: #1a1612; font-family: 'Playfair Display', serif; font-weight: 700; }
html[data-theme="cyberpunk"] .actu-card-top h3 { color: #ffffff; }
html[data-theme="cyberpunk"] .actu-card-body p,
html[data-theme="cyberpunk"] .actu-card .actu-card-source-row .source-name { color: #c8d4e8; }
html[data-theme="kawaii"]    .actu-card-top h3 { color: #5a4868; }
html[data-theme="kawaii"]    .actu-card-body p { color: #5a4868; }
html[data-theme="vintage"]   .actu-card-top h3 { color: #4a3520; font-style: italic; }

/* Les .actu-card.has-bg::after a un overlay blanc 0.78-0.96 qui assure le
   contraste du texte ; on garde, mais on adapte le gradient pour les thèmes
   sombres. */
html[data-theme="cyberpunk"] .actu-card.has-bg::after {
  background: linear-gradient(to bottom, rgba(20,20,42,0.10) 0%, rgba(20,20,42,0.78) 55%, rgba(20,20,42,0.96) 100%);
}
html[data-theme="editorial"] .actu-card.has-bg::after {
  background: linear-gradient(to bottom, rgba(250,246,238,0.10) 0%, rgba(250,246,238,0.82) 55%, rgba(250,246,238,0.97) 100%);
}

/* ── 5. .resident-card — titres + textes ── */

html[data-theme="moderne"]   .resident-card h3,
html[data-theme="moderne"]   .resident-card-title { color: #0f1115; }
html[data-theme="retro"]     .resident-card h3,
html[data-theme="retro"]     .resident-card-title { color: #4a3520; }
html[data-theme="brutalist"] .resident-card h3,
html[data-theme="brutalist"] .resident-card-title { color: #000000; }
html[data-theme="editorial"] .resident-card h3,
html[data-theme="editorial"] .resident-card-title { color: #1a1612; }
html[data-theme="cyberpunk"] .resident-card h3,
html[data-theme="cyberpunk"] .resident-card-title { color: #ffffff; }
html[data-theme="cyberpunk"] .resident-card p,
html[data-theme="cyberpunk"] .resident-card-desc,
html[data-theme="cyberpunk"] .resident-card .espece { color: #c8d4e8; }
html[data-theme="kawaii"]    .resident-card h3,
html[data-theme="kawaii"]    .resident-card-title { color: #5a4868; }
html[data-theme="kawaii"]    .resident-card p,
html[data-theme="kawaii"]    .resident-card-desc { color: #7a6878; }
html[data-theme="kawaii"]    .resident-card .espece { color: #a02a5a; }
html[data-theme="vintage"]   .resident-card h3,
html[data-theme="vintage"]   .resident-card-title { color: #4a3520; font-style: italic; }

/* CTA buttons in resident cards — assurer contraste ≥ 4.5:1 */
html[data-theme="moderne"]   .resident-card-cta { background: #0f1115; color: #ffffff; }
html[data-theme="moderne"]   .resident-card-parrain-btn { background: #5b3df5; color: #ffffff; }
html[data-theme="brutalist"] .resident-card-cta { background: #000; color: #ffd400; border: 2px solid #000; }
html[data-theme="brutalist"] .resident-card-parrain-btn { background: #ffd400; color: #000; border: 2px solid #000; }
html[data-theme="cyberpunk"] .resident-card-cta { background: #00f5ff; color: #0a0a14; }
html[data-theme="cyberpunk"] .resident-card-parrain-btn { background: #ff006e; color: #ffffff; }
html[data-theme="kawaii"]    .resident-card-cta { background: linear-gradient(135deg,#cc3a78 0%,#a04ec0 100%); color: #ffffff; }
html[data-theme="kawaii"]    .resident-card-parrain-btn { background: #cc3a78; color: #ffffff; }

/* ── 6. .stat-card — fond rgba(255,255,255,0.12) sur gradient sombre par défaut ── */

html[data-theme="moderne"] .presentation-visual {
  background: linear-gradient(135deg, #0f1115, #2a2f3a);
}
html[data-theme="retro"] .presentation-visual {
  background: linear-gradient(135deg, #4a3520, #8a5a2a);
}
html[data-theme="brutalist"] .presentation-visual {
  background: #000;
  border: 3px solid #ffd400;
  border-radius: 0;
}
html[data-theme="brutalist"] .stat-card {
  background: #ffd400;
  color: #000;
  border-radius: 0;
}
html[data-theme="brutalist"] .stat-card .number { color: #000; }
html[data-theme="editorial"] .presentation-visual {
  background: linear-gradient(135deg, #1a1612, #4a3f30);
}
html[data-theme="editorial"] .stat-card .number { color: #d4a04a; }
html[data-theme="cyberpunk"] .presentation-visual {
  background: linear-gradient(135deg, #0a0a14, #1a0a2a);
  border: 1px solid #00f5ff;
  border-radius: 0;
}
html[data-theme="cyberpunk"] .stat-card .number { color: #00f5ff; text-shadow: 0 0 12px rgba(0,245,255,0.6); }
html[data-theme="kawaii"] .presentation-visual {
  background: linear-gradient(135deg, #fcd9e8, #d8b8e8);
}
html[data-theme="kawaii"] .stat-card {
  background: rgba(255,255,255,0.7);
  color: #5a4868;
}
html[data-theme="kawaii"] .stat-card .number { color: #a02a5a; }
html[data-theme="vintage"] .presentation-visual {
  background: linear-gradient(135deg, #4a3520, #7a5a40);
}
html[data-theme="vintage"] .stat-card .number { color: #d49060; }

/* ── 7. .contact-cta-section — utilise gradient var(--vert-fonce)→var(--vert-moyen)
       avec texte blanc. Pour washi/moderne/kawaii il faut s'assurer du contraste. ── */

html[data-theme="moderne"] .contact-cta-section {
  background: linear-gradient(135deg, #0f1115 0%, #2a2f3a 100%);
}
html[data-theme="moderne"] .contact-cta-title { color: #ffffff; }
html[data-theme="moderne"] .contact-cta-text { color: rgba(255,255,255,0.85); }

html[data-theme="retro"] .contact-cta-section {
  background: linear-gradient(135deg, #4a3520 0%, #8a5a2a 100%);
}
html[data-theme="retro"] .contact-cta-title { color: #fbf3df; }
html[data-theme="retro"] .contact-cta-text { color: rgba(251,243,223,0.88); }

html[data-theme="brutalist"] .contact-cta-section {
  background: #ffd400;
}
html[data-theme="brutalist"] .contact-cta-title,
html[data-theme="brutalist"] .contact-cta-text { color: #000; }

html[data-theme="editorial"] .contact-cta-section {
  background: linear-gradient(135deg, #1a1612 0%, #4a3f30 100%);
}
html[data-theme="editorial"] .contact-cta-title { color: #faf6ee; }
html[data-theme="editorial"] .contact-cta-text { color: rgba(250,246,238,0.85); }

html[data-theme="cyberpunk"] .contact-cta-section {
  background: linear-gradient(135deg, #0a0a14 0%, #1a0a2a 100%);
  border-top: 1px solid #00f5ff;
  border-bottom: 1px solid #00f5ff;
}
html[data-theme="cyberpunk"] .contact-cta-title { color: #ffffff; text-shadow: 0 0 16px rgba(0,245,255,0.5); }
html[data-theme="cyberpunk"] .contact-cta-text { color: #c8d4e8; }

html[data-theme="kawaii"] .contact-cta-section {
  background: linear-gradient(135deg, #fcd9e8 0%, #d8b8e8 100%);
}
html[data-theme="kawaii"] .contact-cta-title { color: #5a4868; }
html[data-theme="kawaii"] .contact-cta-text { color: #5a4868; }

html[data-theme="vintage"] .contact-cta-section {
  background: linear-gradient(135deg, #4a3520 0%, #7a5a40 100%);
}
html[data-theme="vintage"] .contact-cta-title { color: #faeeda; font-style: italic; }
html[data-theme="vintage"] .contact-cta-text { color: rgba(250,238,218,0.88); }

/* ── 8. .adoption-section-soft — fond #f5f0e8 avec border #e0d8cc hardcodé ── */

html[data-theme="moderne"]   .adoption-section-soft { background: #f4f5f7; border-top: 1px solid rgba(15,17,21,0.08); }
html[data-theme="retro"]     .adoption-section-soft { background: #f3ead0; border-top: 2px solid #4a3520; }
html[data-theme="brutalist"] .adoption-section-soft { background: #ffffff; border-top: 4px solid #000; }
html[data-theme="editorial"] .adoption-section-soft { background: #faf6ee; border-top: 1px solid rgba(26,22,18,0.15); }
html[data-theme="cyberpunk"] .adoption-section-soft { background: #14142a; border-top: 1px solid #00f5ff; color: #e8e8f8; }
html[data-theme="kawaii"]    .adoption-section-soft { background: #fef5fa; border-top: 2px dotted #ff8eb3; }
html[data-theme="vintage"]   .adoption-section-soft { background: #f0e4d2; border-top: 1px solid rgba(74,53,32,0.22); }

/* ── 9. .agenda-preview-section, .presentation — fond var(--blanc) déjà OK
       sauf pour cyberpunk où --blanc=#14142a. ── */

html[data-theme="cyberpunk"] .presentation,
html[data-theme="cyberpunk"] .agenda-preview-section {
  background: #14142a;
  color: #e8e8f8;
}
html[data-theme="cyberpunk"] .presentation-text p,
html[data-theme="cyberpunk"] .fondatrices p { color: #c8d4e8; }
html[data-theme="cyberpunk"] .fondatrices {
  background: #0f0f1a;
  border-left: 4px solid #00f5ff;
}
html[data-theme="cyberpunk"] .fondatrices h3 { color: #00f5ff; }

html[data-theme="moderne"] .fondatrices { background: #f4f5f7; border-left: 4px solid #5b3df5; }
html[data-theme="moderne"] .fondatrices h3 { color: #0f1115; }
html[data-theme="moderne"] .fondatrices p { color: #2a2f3a; }

html[data-theme="kawaii"] .fondatrices { background: #fef5fa; border-left: 4px solid #ff8eb3; }
html[data-theme="kawaii"] .fondatrices h3 { color: #5a4868; }
html[data-theme="kawaii"] .fondatrices p { color: #7a6878; }

html[data-theme="brutalist"] .fondatrices { background: #ffd400; border-left: 8px solid #000; border-radius: 0; }
html[data-theme="brutalist"] .fondatrices h3,
html[data-theme="brutalist"] .fondatrices p { color: #000; }

html[data-theme="editorial"] .fondatrices { background: rgba(26,22,18,0.04); border-left: 3px solid #8b1e1e; }
html[data-theme="editorial"] .fondatrices h3 { color: #1a1612; }
html[data-theme="editorial"] .fondatrices p { color: #4a3f30; }

html[data-theme="retro"] .fondatrices { background: #fbf3df; border-left: 4px solid #ce5b1d; }
html[data-theme="retro"] .fondatrices h3 { color: #4a3520; }
html[data-theme="retro"] .fondatrices p { color: #4a3520; }

html[data-theme="vintage"] .fondatrices { background: #faeeda; border-left: 4px solid #a85a30; }
html[data-theme="vintage"] .fondatrices h3 { color: #4a3520; font-style: italic; }
html[data-theme="vintage"] .fondatrices p { color: #4a3520; }

/* ── 10. .btn-hero-cta + .btn-home-cta + .btn-outline — assurer contraste ── */

/* btn-hero-cta utilise var(--terre-claire) sur var(--vert-fonce) ; ratio
   variable selon le thème. On force des combos lisibles. */
html[data-theme="moderne"]   .btn-hero-cta { background: #5b3df5; color: #ffffff; }
html[data-theme="retro"]     .btn-hero-cta { background: #fbf3df; color: #4a3520; border: 2px solid #2a1f10; }
html[data-theme="brutalist"] .btn-hero-cta { background: #000; color: #ffd400; border: 3px solid #ffd400; border-radius: 0; }
html[data-theme="editorial"] .btn-hero-cta { background: #faf6ee; color: #1a1612; border-radius: 0; border-bottom: 2px solid #8b1e1e; }
html[data-theme="cyberpunk"] .btn-hero-cta { background: transparent; color: #00f5ff; border: 1px solid #00f5ff; border-radius: 0; box-shadow: 0 0 12px rgba(0,245,255,0.4); }
html[data-theme="kawaii"]    .btn-hero-cta { background: #ffffff; color: #a02a5a; border-radius: 999px; box-shadow: 0 4px 16px rgba(255,142,179,0.25); }
html[data-theme="vintage"]   .btn-hero-cta { background: #faeeda; color: #4a3520; border-radius: 3px; font-style: italic; }

html[data-theme="moderne"]   .btn-outline { background: transparent; color: #0f1115; border: 2px solid #0f1115; }
html[data-theme="moderne"]   .btn-outline:hover { background: #0f1115; color: #ffffff; }
html[data-theme="retro"]     .btn-outline { background: transparent; color: #4a3520; border: 2px solid #4a3520; }
html[data-theme="retro"]     .btn-outline:hover { background: #4a3520; color: #fbf3df; }
html[data-theme="brutalist"] .btn-outline { background: #fff; color: #000; border: 3px solid #000; border-radius: 0; }
html[data-theme="brutalist"] .btn-outline:hover { background: #000; color: #ffd400; }
html[data-theme="editorial"] .btn-outline { background: transparent; color: #1a1612; border: 1px solid #1a1612; border-radius: 0; }
html[data-theme="editorial"] .btn-outline:hover { background: #1a1612; color: #faf6ee; }
html[data-theme="cyberpunk"] .btn-outline { background: transparent; color: #00f5ff; border: 1px solid #00f5ff; border-radius: 0; }
html[data-theme="cyberpunk"] .btn-outline:hover { background: rgba(0,245,255,0.1); }
html[data-theme="kawaii"]    .btn-outline { background: transparent; color: #a02a5a; border: 2px solid #a02a5a; border-radius: 999px; }
html[data-theme="kawaii"]    .btn-outline:hover { background: #ff8eb3; color: #ffffff; }
html[data-theme="vintage"]   .btn-outline { background: transparent; color: #4a3520; border: 2px solid #a85a30; border-radius: 3px; font-style: italic; }
html[data-theme="vintage"]   .btn-outline:hover { background: #a85a30; color: #faeeda; }

/* btn-green / btn-cream-strong — utilisés sur boutons d'accueil (.btn-home-cta) */
html[data-theme="moderne"]   .btn-green { background: #5b3df5; color: #ffffff; }
html[data-theme="brutalist"] .btn-green { background: #ffd400; color: #000; border: 3px solid #000; border-radius: 0; }
html[data-theme="cyberpunk"] .btn-green { background: #00f5ff; color: #0a0a14; }
html[data-theme="kawaii"]    .btn-green { background: linear-gradient(135deg,#cc3a78 0%,#a04ec0 100%); color: #ffffff; }
html[data-theme="vintage"]   .btn-green { background: #a85a30; color: #faeeda; border-radius: 3px; font-style: italic; }
html[data-theme="retro"]     .btn-green { background: #ce5b1d; color: #fbf3df; border: 2px solid #2a1f10; border-radius: 4px; }
html[data-theme="editorial"] .btn-green { background: #8b1e1e; color: #faf6ee; border-radius: 0; }

/* ── 11. .section-title + .section-label + .section-intro coverage ── */

html[data-theme="moderne"] .section-title    { color: #0f1115; }
html[data-theme="moderne"] .section-intro    { color: #2a2f3a; }
html[data-theme="moderne"] .section-label    { color: #5b3df5; }

html[data-theme="retro"] .section-title      { color: #4a3520; }
html[data-theme="retro"] .section-intro      { color: #5a4530; }

html[data-theme="brutalist"] .section-title  { color: #000; }
html[data-theme="brutalist"] .section-intro  { color: #1a1a1a; }
html[data-theme="brutalist"] .section-label  { color: #000; background: #ffd400; padding: 0.2rem 0.5rem; }

html[data-theme="editorial"] .section-title  { color: #1a1612; }
html[data-theme="editorial"] .section-intro  { color: #4a3f30; }
html[data-theme="editorial"] .section-label  { color: #8b1e1e; letter-spacing: 0.18em; }

html[data-theme="cyberpunk"] .section-title  { color: #ffffff; }
html[data-theme="cyberpunk"] .section-intro  { color: #c8d4e8; }

html[data-theme="kawaii"] .section-title     { color: #5a4868; }
html[data-theme="kawaii"] .section-intro     { color: #7a6878; }

html[data-theme="vintage"] .section-title    { color: #4a3520; font-style: italic; }
html[data-theme="vintage"] .section-intro    { color: #5a4530; }

/* ── 12. Footer-logo, footer .footer-logo couleurs (couvre le link à l'asso) ── */

html[data-theme="moderne"]   footer .footer-logo { color: #ffffff; }
html[data-theme="moderne"]   footer { color: #d1d5db; }
html[data-theme="moderne"]   footer a, html[data-theme="moderne"] footer nav a { color: #8b75ff; }
html[data-theme="retro"]     footer .footer-logo { color: #f3ead0; }
html[data-theme="retro"]     footer a, html[data-theme="retro"] footer nav a { color: #d4a574; }
html[data-theme="brutalist"] footer .footer-logo { color: #ffd400; }
html[data-theme="brutalist"] footer a, html[data-theme="brutalist"] footer nav a, html[data-theme="brutalist"] footer a:visited, html[data-theme="brutalist"] footer nav a:visited { color: #ffd400; }
html[data-theme="editorial"] footer .footer-logo { color: #faf6ee; font-family: 'Playfair Display', serif; }
html[data-theme="editorial"] footer a, html[data-theme="editorial"] footer nav a, html[data-theme="editorial"] footer a:visited, html[data-theme="editorial"] footer nav a:visited { color: #d4a04a; }
html[data-theme="cyberpunk"] footer .footer-logo { color: #ffffff; text-shadow: 0 0 12px rgba(0,245,255,0.5); }
html[data-theme="cyberpunk"] footer a, html[data-theme="cyberpunk"] footer nav a, html[data-theme="cyberpunk"] footer a:visited, html[data-theme="cyberpunk"] footer nav a:visited { color: #00f5ff; }
html[data-theme="kawaii"]    footer .footer-logo { color: #5a4868; }
html[data-theme="kawaii"]    footer a, html[data-theme="kawaii"] footer nav a { color: #a02a5a; }
html[data-theme="vintage"]   footer .footer-logo { color: #faeeda; font-style: italic; }
html[data-theme="vintage"]   footer a, html[data-theme="vintage"] footer nav a { color: #d49060; }

/* ── 13. Burger menu mobile background + lignes ── */

html[data-theme="moderne"]   .burger span,
html[data-theme="kawaii"]    .burger span { background: #ffffff; }
html[data-theme="brutalist"] .burger span { background: #000; }

/* ── 14. Saisonniers — pour les saisonniers à fond clair (printemps utilise
       --creme=#fdf5f7), s'assurer que le hero garde un fond sombre suffisant
       (déjà vrai car gradient hardcodé). Les saisonniers utilisent le base CSS
       qui force le hero foncé. Couvrir le cas .actu-card.has-bg::after où
       l'overlay creme rosée peut être trop clair. */

/* Vérifier .resident-card-cta sur saisonniers à --vert-moyen clair */
html[data-theme="ete"]     .resident-card-cta { background: #c05010; color: #ffffff; }
html[data-theme="hiver"]   .resident-card-cta { background: #1a2a4a; color: #ffffff; }
html[data-theme="paille"]  .resident-card-cta { background: #7a5a10; color: #ffffff; }
html[data-theme="manche"]  .resident-card-cta { background: #0a6070; color: #ffffff; }
html[data-theme="prairie"] .resident-card-cta { background: #4a3090; color: #ffffff; }
html[data-theme="etoiles"] .resident-card-cta { background: #20185a; color: #ffffff; }

/* ── 15. Liens (a) — couleurs par thème ── */

html[data-theme="moderne"]   a:not([class]) { color: #5b3df5; }
html[data-theme="retro"]     a:not([class]) { color: #ce5b1d; }
html[data-theme="brutalist"] a:not([class]) { color: #000; text-decoration: underline; text-decoration-thickness: 2px; }
html[data-theme="editorial"] a:not([class]) { color: #8b1e1e; text-decoration: underline; text-underline-offset: 3px; }
html[data-theme="kawaii"]    a:not([class]) { color: #a02a5a; }
html[data-theme="vintage"]   a:not([class]) { color: #a85a30; font-style: italic; }

/* ── 16. .nav-counter-num + .nav-counter-label — couleurs nav cohérentes ── */

html[data-theme="moderne"]   .nav-counter-num { color: #5b3df5; }
html[data-theme="moderne"]   .nav-counter-label { color: rgba(15,17,21,0.65); }
html[data-theme="moderne"]   .nav-counters { background: rgba(15,17,21,0.04); border-color: rgba(15,17,21,0.1); }

html[data-theme="brutalist"] .nav-counter-num { color: #ffd400; }
html[data-theme="brutalist"] .nav-counter-label { color: rgba(255,255,255,0.7); }

html[data-theme="kawaii"]    .nav-counter-num { color: #a02a5a; }
html[data-theme="kawaii"]    .nav-counter-label { color: rgba(90,72,104,0.7); }
html[data-theme="kawaii"]    .nav-counters { background: rgba(255,255,255,0.5); border-color: rgba(255,142,179,0.25); }

html[data-theme="cyberpunk"] .nav-counter-num { color: #00f5ff; }
html[data-theme="cyberpunk"] .nav-counter-label { color: rgba(232,232,248,0.65); }

/* ── 17. .faq-q (accordion FAQ) — color: var(--vert-fonce) ── */

html[data-theme="moderne"]   .faq-q { color: #0f1115; }
html[data-theme="moderne"]   .faq-item { background: #ffffff; border: 1px solid rgba(15,17,21,0.08); }
html[data-theme="brutalist"] .faq-q { color: #000; }
html[data-theme="brutalist"] .faq-item { background: #fff; border: 3px solid #000; border-radius: 0; }
html[data-theme="editorial"] .faq-q { color: #1a1612; }
html[data-theme="editorial"] .faq-item { background: rgba(26,22,18,0.03); border: none; border-bottom: 1px solid rgba(26,22,18,0.15); border-radius: 0; }
html[data-theme="cyberpunk"] .faq-q { color: #ffffff; }
html[data-theme="cyberpunk"] .faq-item { background: #14142a; border: 1px solid rgba(0,245,255,0.3); border-radius: 0; }
html[data-theme="cyberpunk"] .faq-a p { color: #c8d4e8; }
html[data-theme="kawaii"]    .faq-q { color: #5a4868; }
html[data-theme="kawaii"]    .faq-item { background: #ffffff; border: 1px solid rgba(255,142,179,0.15); border-radius: 16px; }
html[data-theme="vintage"]   .faq-q { color: #4a3520; font-style: italic; }
html[data-theme="vintage"]   .faq-item { background: #faeeda; border: 1px solid rgba(74,53,32,0.18); }

/* ── 18. .contact (section contact pages) — fond var(--creme) défaut, OK sauf
       cyberpunk où --creme=#0f0f1a. Renforcer texte. ── */

html[data-theme="cyberpunk"] .contact {
  background: #0f0f1a;
  color: #e8e8f8;
}

/* ── 19. .urgence-banner / .urgence-icon (adoption) — couleurs accessibles ── */

html[data-theme="cyberpunk"] .urgence-banner { background: #ff006e; color: #fff; }
html[data-theme="brutalist"] .urgence-banner { background: #ffd400; color: #000; border: 3px solid #000; }

/* ── 20. .alert-3677 (numéro urgence) sur contact.html ── */

html[data-theme="moderne"]   .alert-3677 { background: #fff; border: 1px solid rgba(15,17,21,0.1); color: #0f1115; }
html[data-theme="brutalist"] .alert-3677 { background: #ffd400; border: 4px solid #000; color: #000; }
html[data-theme="cyberpunk"] .alert-3677 { background: #14142a; border: 1px solid #ff006e; color: #e8e8f8; }
html[data-theme="cyberpunk"] .alert-3677-number { color: #ff006e; text-shadow: 0 0 12px rgba(255,0,110,0.5); }
html[data-theme="kawaii"]    .alert-3677 { background: #ffffff; border: 2px dotted #ff8eb3; color: #5a4868; }
html[data-theme="kawaii"]    .alert-3677-number { color: #a02a5a; }

/* ── 21. .nav-dropdown-menu — fond var(--vert-fonce), pour kawaii/washi ce
       sera très foncé donc texte blanc reste lisible. OK. ── */

/* ── 23. .actu-lien color: var(--vert-moyen) — invisible sur cyberpunk ── */

html[data-theme="cyberpunk"] .actu-lien { color: #00f5ff; }
html[data-theme="kawaii"]    .actu-lien { color: #a02a5a; }

/* ── 24. Hero badge — pour les thèmes où hero a fond clair ── */

html[data-theme="kawaii"] .hero-badge {
  background: #ffffff !important;
  color: #a02a5a;
  border: 1px solid rgba(255,142,179,0.3);
}
html[data-theme="moderne"] .hero-badge {
  background: rgba(91,61,245,0.10);
  color: #5b3df5;
  border: 1px solid rgba(91,61,245,0.3);
}
html[data-theme="brutalist"] .hero-badge {
  background: #000;
  color: #ffd400;
  border: 3px solid #000;
}

/* ── 25. .resident-card .badge (statut adopté/disponible) ── */

html[data-theme="cyberpunk"] .resident-card .badge { background: #00f5ff; color: #0a0a14; }
html[data-theme="brutalist"] .resident-card .badge { background: #000; color: #ffd400; border-radius: 0; }
html[data-theme="kawaii"]    .resident-card .badge { background: #ffc1d4; color: #5a4868; border-radius: 999px; }

/* ── 26. Saisonniers — .soutien-detail (var(--terre-claire) low contrast on
       dark gradients). Force highlight crémeux universel. ── */

html[data-theme="default"] .soutien-detail,
html[data-theme="printemps"] .soutien-detail,
html[data-theme="ete"] .soutien-detail,
html[data-theme="automne"] .soutien-detail,
html[data-theme="hiver"] .soutien-detail,
html[data-theme="sakura"] .soutien-detail,
html[data-theme="halloween"] .soutien-detail,
html[data-theme="noel"] .soutien-detail,
html[data-theme="anniversaire"] .soutien-detail,
html[data-theme="normandie"] .soutien-detail,
html[data-theme="prairie"] .soutien-detail,
html[data-theme="etoiles"] .soutien-detail,
html[data-theme="paille"] .soutien-detail,
html[data-theme="manche"] .soutien-detail,
html[data-theme="couchersoleil"] .soutien-detail {
  color: #fff8e0;
}
:root .soutien-detail { color: #fff8e0; } /* couvre l'absence de data-theme */

/* Le .soutien-card h3 utilise var(--terre-claire) — sur fond rgba(255,255,255,0.08)
   sur dégradé sombre. Pour les saisonniers où terre-claire = pastel pâle,
   contraste OK car le fond est très sombre. Mais on uniformise pour lisibilité. */

html[data-theme="printemps"] .soutien-card h3 { color: #f4c0d0; }
html[data-theme="automne"]   .soutien-card h3 { color: #f4a444; }
html[data-theme="sakura"]    .soutien-card h3 { color: #f4aac8; }
html[data-theme="vintage"]   .soutien-card h3 { color: #d49060; } /* déjà override */

/* ── 27. Section-label par défaut (var(--vert-moyen) sur creme) — borderline AA.
       On garde le code de base mais ajoute fallback contrasté pour saisonniers
       à --vert-moyen pâle. ── */

html[data-theme="ete"]    .section-label { color: #802e08; } /* roussi foncé > #c05010 sur creme */
html[data-theme="paille"] .section-label { color: #503c0a; }
html[data-theme="manche"] .section-label { color: #0a6070; }

/* ── 28. .nav-counter-num utilise var(--terre-claire) sur nav background.
       Pour la nav par défaut (rgba(58,90,46,0.92) vert foncé), terre-claire = c49a6c
       passe (4.96). Lifestyle déjà couverts. Saisonniers : nav background = vert-fonce
       du thème, terre-claire varie : on force un white-yellow pour uniformité. */

html[data-theme="printemps"] .nav-counter-num,
html[data-theme="ete"] .nav-counter-num,
html[data-theme="automne"] .nav-counter-num,
html[data-theme="hiver"] .nav-counter-num,
html[data-theme="sakura"] .nav-counter-num,
html[data-theme="halloween"] .nav-counter-num,
html[data-theme="noel"] .nav-counter-num,
html[data-theme="anniversaire"] .nav-counter-num,
html[data-theme="normandie"] .nav-counter-num,
html[data-theme="prairie"] .nav-counter-num,
html[data-theme="etoiles"] .nav-counter-num,
html[data-theme="paille"] .nav-counter-num,
html[data-theme="manche"] .nav-counter-num,
html[data-theme="couchersoleil"] .nav-counter-num { color: #f8e0b0; }

/* Fin AUDIT CONTRASTES ──────────────────────────────────────────────────── */

/* Fin THÈMES LIFESTYLE ────────────────────────────────────────────────── */

@media (max-width: 640px) {
  #tdb { height: 26px !important; font-size: 0.72rem !important; }
  #tdb > div:first-child { display: none !important; }
}
/* Hero text readability across the site */
/* NOTE : .photo-hero et .page-hero ont position: sticky (effet sticky-cover).
   On NE doit PAS écraser leur position avec relative ici, sinon le hero
   ne reste plus collé pendant le scroll et les sections suivantes ne
   le recouvrent pas. On les inclut uniquement pour isolation: isolate. */
.hero-banner,
.feature-hero,
.support-cta,
.donation-cta,
.parrainage-cta,
.support-banner,
.cta-banner {
  position: relative;
  isolation: isolate;
}
.hero,
.photo-hero,
.page-hero {
  isolation: isolate;
}

.hero::before,
.photo-hero::before,
.page-hero::before,
.hero-banner::before,
.feature-hero::before,
.support-cta::before,
.donation-cta::before,
.parrainage-cta::before,
.support-banner::before,
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(16, 24, 14, 0.28) 0%, rgba(16, 24, 14, 0.42) 100%),
    linear-gradient(90deg, rgba(16, 24, 14, 0.14) 0%, rgba(16, 24, 14, 0.2) 50%, rgba(16, 24, 14, 0.14) 100%);
}

.hero > *,
.photo-hero > *,
.page-hero > *,
.hero-banner > *,
.feature-hero > *,
.support-cta > *,
.donation-cta > *,
.parrainage-cta > *,
.support-banner > *,
.cta-banner > * {
  position: relative;
  z-index: 1;
}

.hero :is(h1, h2, .hero-title, .hero-heading),
.photo-hero :is(h1, h2, .hero-title, .hero-heading),
.page-hero :is(h1, h2, .hero-title, .hero-heading),
.hero-banner :is(h1, h2, .hero-title, .hero-heading),
.hero-content :is(h1, h2, .hero-title, .hero-heading),
.hero-copy :is(h1, h2, .hero-title, .hero-heading),
.hero-inner :is(h1, h2, .hero-title, .hero-heading),
.hero-text :is(h1, h2, .hero-title, .hero-heading),
.feature-hero :is(h1, h2, .hero-title, .hero-heading),
.support-cta :is(h1, h2, .hero-title, .hero-heading),
.donation-cta :is(h1, h2, .hero-title, .hero-heading),
.parrainage-cta :is(h1, h2, .hero-title, .hero-heading),
.support-banner :is(h1, h2, .hero-title, .hero-heading),
.cta-banner :is(h1, h2, .hero-title, .hero-heading) {
  display: inline-block;
  max-width: min(100%, 24rem);
  padding: 0;
  margin: 0;
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.62), 0 0 1px rgba(0, 0, 0, 0.35);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.16));
  font-weight: 700;
  text-wrap: balance;
  line-height: 1.05;
}

.hero :is(p, .hero-sub, .hero-lead, .hero-kicker, .hero-badge),
.photo-hero :is(p, .hero-sub, .hero-lead, .hero-kicker, .hero-badge),
.page-hero :is(p, .hero-sub, .hero-lead, .hero-kicker, .hero-badge),
.hero-banner :is(p, .hero-sub, .hero-lead, .hero-kicker, .hero-badge),
.hero-content :is(p, .hero-sub, .hero-lead, .hero-kicker, .hero-badge),
.hero-copy :is(p, .hero-sub, .hero-lead, .hero-kicker, .hero-badge),
.hero-inner :is(p, .hero-sub, .hero-lead, .hero-kicker, .hero-badge),
.hero-text :is(p, .hero-sub, .hero-lead, .hero-kicker, .hero-badge),
.feature-hero :is(p, .hero-sub, .hero-lead, .hero-kicker, .hero-badge),
.support-cta :is(p, .hero-sub, .hero-lead, .hero-kicker, .hero-badge),
.donation-cta :is(p, .hero-sub, .hero-lead, .hero-kicker, .hero-badge),
.parrainage-cta :is(p, .hero-sub, .hero-lead, .hero-kicker, .hero-badge),
.support-banner :is(p, .hero-sub, .hero-lead, .hero-kicker, .hero-badge),
.cta-banner :is(p, .hero-sub, .hero-lead, .hero-kicker, .hero-badge) {
  display: inline-block;
  max-width: min(100%, 30rem);
  padding: 0;
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 1px rgba(0, 0, 0, 0.3);
  font-weight: 600;
  text-wrap: balance;
  line-height: 1.45;
}

.hero :is(h1, h2, .hero-title, .hero-heading),
.photo-hero :is(h1, h2, .hero-title, .hero-heading),
.page-hero :is(h1, h2, .hero-title, .hero-heading),
.hero-banner :is(h1, h2, .hero-title, .hero-heading),
.hero-content :is(h1, h2, .hero-title, .hero-heading),
.hero-copy :is(h1, h2, .hero-title, .hero-heading),
.hero-inner :is(h1, h2, .hero-title, .hero-heading),
.hero-text :is(h1, h2, .hero-title, .hero-heading),
.feature-hero :is(h1, h2, .hero-title, .hero-heading),
.support-cta :is(h1, h2, .hero-title, .hero-heading),
.donation-cta :is(h1, h2, .hero-title, .hero-heading),
.parrainage-cta :is(h1, h2, .hero-title, .hero-heading),
.support-banner :is(h1, h2, .hero-title, .hero-heading),
.cta-banner :is(h1, h2, .hero-title, .hero-heading),
.hero :is(p, .hero-sub, .hero-lead, .hero-kicker, .hero-badge),
.photo-hero :is(p, .hero-sub, .hero-lead, .hero-kicker, .hero-badge),
.page-hero :is(p, .hero-sub, .hero-lead, .hero-kicker, .hero-badge),
.hero-banner :is(p, .hero-sub, .hero-lead, .hero-kicker, .hero-badge),
.hero-content :is(p, .hero-sub, .hero-lead, .hero-kicker, .hero-badge),
.hero-copy :is(p, .hero-sub, .hero-lead, .hero-kicker, .hero-badge),
.hero-inner :is(p, .hero-sub, .hero-lead, .hero-kicker, .hero-badge),
.hero-text :is(p, .hero-sub, .hero-lead, .hero-kicker, .hero-badge),
.feature-hero :is(p, .hero-sub, .hero-lead, .hero-kicker, .hero-badge),
.support-cta :is(p, .hero-sub, .hero-lead, .hero-kicker, .hero-badge),
.donation-cta :is(p, .hero-sub, .hero-lead, .hero-kicker, .hero-badge),
.parrainage-cta :is(p, .hero-sub, .hero-lead, .hero-kicker, .hero-badge),
.support-banner :is(p, .hero-sub, .hero-lead, .hero-kicker, .hero-badge),
.cta-banner :is(p, .hero-sub, .hero-lead, .hero-kicker, .hero-badge) {
  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.75),
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 0 1px rgba(0, 0, 0, 0.5);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}

.hero a,
.photo-hero a,
.page-hero a,
.hero-banner a,
.hero-content a,
.hero-copy a,
.hero-inner a,
.hero-text a {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
}

/* ===== HERO — éléments communs ================================
   Plus aucun override par page : tout vient de .photo-hero. */
.hero-icon { font-size: 3rem; margin-bottom: 0.8rem; }
.hero-subtitle { max-width: 680px; }

/* ===== BOUTONS — VARIANTES ====================================== */
.btn-sm { font-size: 0.85rem; padding: 0.5rem 1.1rem; }
.btn-lg { font-size: 1rem; padding: 0.9rem 2rem; }

/* ===== FORMULAIRE COMMUN ======================================== */
.form-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--vert-fonce);
  margin-bottom: 0.3rem;
}
.form-field {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1.5px solid #d0c8be;
  border-radius: 8px;
  font-size: 0.93rem;
  font-family: inherit;
  background: #fff;
  box-sizing: border-box;
}
textarea.form-field { resize: vertical; }
.form-group { margin-bottom: 0.8rem; }
.form-group-lg { margin-bottom: 1.5rem; }
.form-message {
  display: none;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
}
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}
.field-hidden { display: none; }
.field-honeypot { position: absolute; left: -9999px; opacity: 0; }
.btn-submit-pill {
  background: var(--vert-fonce);
  color: #fff;
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 30px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.legal-main {
  max-width: 800px;
  margin: 2rem auto 4rem;
  padding: 0 1.5rem;
}
.legal-card {
  background: #fff;
  border-radius: 14px;
  padding: 1.8rem 2rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.legal-card-last { margin-bottom: 2.5rem; }
.legal-title {
  color: #3a5a2e;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}
.legal-subtitle {
  font-size: 1rem;
  margin: 1rem 0 0.4rem;
}
.legal-note-top { margin-top: 0.6rem; }
.legal-list {
  margin: 0.8rem 0 0 1.2rem;
  color: #555;
}
.legal-list li { margin-bottom: 0.4rem; }
.legal-link { color: #3a5a2e; }
.legal-callout {
  margin-top: 0.8rem;
  font-size: 0.88rem;
  color: #666;
  background: #f9f7f3;
  border-left: 3px solid #8b7355;
  padding: 0.6rem 0.9rem;
  border-radius: 0 6px 6px 0;
}
.legal-return { text-align: center; }
.btn-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 0.8rem 1.8rem;
  background: var(--terre-claire);
  color: var(--vert-fonce);
  border-radius: 30px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.15s;
}
.btn-hero-cta:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}
.adoption-section { padding: 4rem 0; }
.adoption-section-cream { background: var(--creme); }
.adoption-section-soft {
  background: #f5f0e8;
  padding: 4rem 0;
  border-top: 2px solid #e0d8cc;
}
.adoption-section-narrow { max-width: 780px; }
.adoption-section-title-tight { margin-bottom: 0.5rem; }
.adoption-section-intro-tight { margin-bottom: 0; }
.adoption-urgences-wrap {
  display: none;
  margin-top: 1.5rem;
}
.adoption-last-update {
  font-size: 0.78rem;
  color: var(--gris-chaud);
  text-align: right;
  margin-bottom: 0.5rem;
}
.adoption-faq-title {
  text-align: center;
  margin-bottom: 2rem;
}
.adoption-faq-actions {
  text-align: center;
  margin-top: 2rem;
}
.btn-outline-vert {
  border-color: var(--vert-fonce);
  color: var(--vert-fonce);
}
.adoption-cta {
  padding: 3.5rem 0;
  text-align: center;
}
.adoption-cta-title {
  font-family: serif;
  font-size: 1.6rem;
  color: var(--vert-fonce);
  margin-bottom: 0.7rem;
}
.adoption-cta-text {
  color: var(--gris-chaud);
  margin: 0 auto 1.5rem;
  max-width: 520px;
}
.adoption-cta-actions,
.contact-cta-actions,
.cta-band-actions,
.faq-cta-btns,
.contact-presse-actions,
.residents-cta-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.adoption-relay-actions {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.btn-medium {
  font-size: 0.95rem;
  padding: 0.75rem 1.6rem;
}
.adoption-privacy-note {
  text-align: center;
  font-size: 0.82rem;
  color: #7a7168;
  margin-top: 0.9rem;
}
.hero-split-fixed {
  background-attachment: fixed;
}
@supports (-webkit-touch-callout: none) {
  .hero-split-fixed { background-attachment: scroll; }
}
.section-label-light { color: var(--terre-claire); }
.section-intro-compact {
  font-size: 0.92rem;
  color: var(--gris-chaud);
  margin-top: -0.5rem;
}
.soutien-link-wrap { margin-top: 0.9rem; }
.soutien-link-pill {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border-radius: 20px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--creme);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
}
.soutien-fiscal-note {
  font-size: 0.88rem;
  color: rgba(245,240,232,0.75);
  margin-bottom: 1.5rem;
}
.soutien-highlight { color: var(--terre-claire); }
.btn-home-cta {
  font-size: 1.05rem;
  padding: 0.9rem 2.2rem;
}
.home-link-muted {
  display: block;
  margin-top: 1rem;
  font-size: 0.88rem;
  color: rgba(245,240,232,0.65);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.agenda-preview-section {
  display: none;
  background: var(--blanc);
  padding: 4rem 2rem;
  position: relative;
  z-index: 1;
}
.agenda-preview-list {
  max-width: 700px;
  margin: 0 auto 2rem;
}
.contact-cta-section {
  background: linear-gradient(135deg, var(--vert-fonce), var(--vert-moyen));
  padding: 5rem 2rem;
  text-align: center;
  position: relative;
  z-index: 1;
}
.contact-cta-inner {
  max-width: 700px;
  margin: 0 auto;
}
.contact-cta-title {
  font-family: serif;
  color: var(--creme);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  margin: 0.5rem 0 1rem;
}
.contact-cta-text {
  color: rgba(245,240,232,0.85);
  font-size: 1.1rem;
  margin-bottom: 2.5rem;
}
.mt-2 { margin-top: 2.5rem; }
/* Section d'intro (sous le hero) */
.dons-intro {
  background: var(--creme);
  padding: 3rem 1.5rem 2rem;
}
.dons-intro-inner { max-width: 760px; }
.dons-intro-text {
  color: var(--gris-chaud);
  font-size: 1rem;
  line-height: 1.7;
  text-align: center;
  margin-bottom: 1.5rem;
}
.dons-fiscal-box {
  display: block;
  max-width: 720px;
  margin: 1.2rem auto 1.5rem;
  background: var(--vert-pale, #e8f0e4);
  border: 2px solid var(--vert-moyen, #5a7f48);
  border-radius: 16px;
  padding: 0.9rem 1.4rem;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--vert-fonce, #3a5a2e);
  text-align: center;
}
.dons-intro-action { text-align: center; margin: 0; }
.dons-featured-section {
  background: var(--blanc);
  padding: 3rem 2rem;
}
.section-text-muted {
  color: var(--gris-chaud);
  margin-bottom: 2rem;
}
.don-forms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.section-footnote {
  text-align: center;
  font-size: 0.78rem;
  color: var(--gris-chaud);
  margin-top: 1.2rem;
}
.budget-since {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--gris-chaud);
  margin-left: 0.4rem;
}
.budget-summary {
  margin-bottom: 0.5rem;
}
.budget-amount-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.2rem;
}
.budget-amount {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--vert-fonce);
}
.budget-caption {
  font-size: 0.78rem;
  color: var(--gris-chaud);
}
.budget-pct-strong {
  color: var(--vert-moyen);
  font-weight: 700;
}
.budget-detail-total {
  font-weight: 700;
  border-top: 1px solid #e0d8cc;
  margin-top: 0.3rem;
  padding-top: 0.3rem;
}
.budget-detail-meta {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: #aaa;
}
.budget-detail-note {
  font-size: 0.72rem;
  color: #bbb;
  margin: 0.5rem 0 0;
  font-style: italic;
}
.charges-list-spaced { margin-top: 1.2rem; }
.sidebar-card-dark {
  background: linear-gradient(135deg,var(--vert-fonce),#2c4a22);
  color: var(--creme);
}
.sidebar-card-dark h3 { color: var(--terre-claire); }
.sidebar-card-dark p { color: rgba(245,240,232,0.8); }
.sidebar-highlight { color: var(--terre-claire); }
.parrainage-section {
  background: linear-gradient(135deg,#f9f3ec,#f0ebe3);
  padding: 4rem 2rem;
}
.parrainage-inner {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.parrainage-intro {
  color: var(--gris-chaud);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 660px;
  margin: 0 auto 2rem;
}
.parrainage-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
.parrainage-tile {
  background: var(--blanc);
  border-radius: 16px;
  padding: 1.5rem 1.8rem;
  box-shadow: 0 4px 20px var(--ombre);
  max-width: 220px;
  min-width: 160px;
  flex: 1;
  text-align: center;
}
.parrainage-tile-emoji {
  font-size: 2.2rem;
  margin-bottom: 0.6rem;
}
.parrainage-tile-title {
  font-weight: 700;
  color: var(--vert-fonce);
  margin-bottom: 0.3rem;
}
.parrainage-tile-needs {
  font-size: 0.78rem;
  color: var(--gris-chaud);
  margin-bottom: 0.4rem;
}
.parrainage-tile-names {
  font-size: 0.75rem;
  color: var(--terre);
  font-style: italic;
}
.parrainage-info-box {
  background: rgba(255,255,255,0.7);
  border: 1.5px solid rgba(192,57,43,0.2);
  border-radius: 14px;
  padding: 0.9rem 1.4rem;
  display: inline-block;
  margin-bottom: 2rem;
  font-size: 0.88rem;
  color: var(--gris-chaud);
}
.parrainage-btn {
  font-size: 1rem;
  padding: 0.9rem 2rem;
}
.parrainage-btn-secondary {
  font-size: 1rem;
  padding: 0.9rem 2rem;
  margin-left: 1rem;
}
.parrainage-note {
  font-size: 0.8rem;
  color: var(--gris-chaud);
  margin-top: 0.8rem;
}
.parrainage-links {
  font-size: 0.78rem;
  color: #888;
  margin-top: 0.5rem;
  text-align: center;
}
.support-section {
  background: var(--blanc);
  padding: 4rem 2rem;
}
.support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  gap: 1rem;
  margin-top: 2.5rem;
}
.support-card-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.8rem 1.2rem;
  background: var(--creme);
  border-radius: 16px;
  border: 1.5px solid rgba(58,90,46,0.12);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 12px rgba(58,42,30,0.06);
}
.support-card-icon {
  font-size: 2rem;
  margin-bottom: 0.8rem;
}
.support-card-title {
  font-family: serif;
  color: var(--vert-fonce);
  font-size: 1rem;
  margin-bottom: 0.4rem;
}
.support-card-text {
  font-size: 0.82rem;
  color: var(--gris-chaud);
  line-height: 1.5;
}
.faq-title-center { text-align: center; }
.faq-loading {
  text-align: center;
  padding: 2rem;
  color: var(--gris-chaud);
}
.faq-actions-center {
  text-align: center;
  margin-top: 1.5rem;
}
.faq-link-strong {
  color: var(--vert-fonce);
  font-weight: 600;
  font-size: 0.9rem;
}

/* ===== CONTACT PAGE =========================================== */
.contact-section-top { padding-top: 4rem; }
.contact-summary-card {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
  background: white;
  border-radius: 20px;
  padding: 1.5rem 2rem;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
  margin-bottom: 2rem;
}
.contact-summary-col { flex: 1; }
.contact-summary-address { min-width: 200px; }
.contact-summary-phone { min-width: 160px; }
.contact-summary-email { min-width: 200px; }
.contact-summary-socials { min-width: 250px; }
.contact-kicker {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gris-chaud);
  margin-bottom: 0.3rem;
}
.contact-kicker-spaced { margin-bottom: 0.5rem; }
.contact-summary-text {
  font-size: 0.92rem;
  color: var(--texte-fonce);
  line-height: 1.5;
}
.contact-link-strong {
  font-size: 0.92rem;
  color: var(--vert-fonce);
  font-weight: 600;
  text-decoration: none;
}
.contact-link {
  color: var(--vert-fonce);
  text-decoration: none;
}
.contact-app-links {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.contact-app-icon {
  height: 58px;
  width: auto;
  max-width: none;
  display: block;
}
.contact-social-row {
  display: flex;
  gap: 0;
  flex-wrap: nowrap;
}
.contact-social-icon {
  height: 90px;
  width: auto;
  max-width: none;
  min-width: 44px;  /* WCAG 2.5.8 fallback */
  display: block;
}
.contact-visits-card {
  background: linear-gradient(135deg, var(--vert-fonce), var(--vert-moyen));
  border-radius: 20px;
  padding: 2rem;
  color: var(--creme);
  margin-bottom: 2rem;
}
.contact-visits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}
.contact-visits-copy {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.contact-visits-title {
  font-family: serif;
  font-size: 1.3rem;
}
.contact-visits-text {
  opacity: 0.85;
  font-size: 0.95rem;
}
.contact-visits-highlight { color: var(--terre-claire); }
.contact-visits-tip {
  background: rgba(0,0,0,0.15);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  font-size: 0.85rem;
  opacity: 0.95;
}
.contact-visits-label {
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  font-size: 0.85rem;
}
.contact-visits-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
}
.contact-visits-item {
  display: flex;
  gap: 0.7rem;
}
.contact-visits-item-cta { margin-top: 0.5rem; }
.contact-visits-item-icon { color: var(--terre-claire); }
.contact-visits-item-text { opacity: 0.85; }
.contact-visits-item-text-strong { opacity: 0.9; }
.contact-form-shell {
  background: white;
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
  margin-bottom: 2rem;
  scroll-margin-top: 90px;
}
.contact-form-title {
  font-family: serif;
  color: var(--vert-fonce);
  font-size: 1.3rem;
  margin-bottom: 1.2rem;
}
.contact-form { margin-top: 1.2rem; }
.form-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}
.form-label-note {
  font-weight: 400;
  color: var(--gris-chaud);
}
.form-field-file {
  width: 100%;
  padding: 0.5rem;
  border: 1.5px solid #d0c8be;
  border-radius: 8px;
  font-size: 0.88rem;
  font-family: inherit;
  background: #fff;
  box-sizing: border-box;
}
.form-checkbox-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.form-checkbox-option {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.88rem;
  cursor: pointer;
}
.cf-info-note {
  border-radius: 8px;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.88rem;
}
.cf-info-note-benevolat {
  background: #f0f5ec;
  border-left: 3px solid var(--vert-fonce);
  color: var(--vert-fonce);
}
.cf-info-note-adoption {
  background: #f0f5f0;
  border-left: 3px solid var(--vert-fonce);
  color: #3a5a2e;
}
.cf-info-note-don {
  background: #f5f0e8;
  border-left: 3px solid var(--terre);
  color: #5a3e28;
}
.cf-inline-links {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.82rem;
  color: var(--gris-chaud);
}
.cf-privacy-note {
  font-size: 0.78rem;
  color: #888;
  margin-top: 0.5rem;
  text-align: center;
}
.cf-privacy-note a { color: #3a5a2e; }
.map-card {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 24px var(--ombre);
  border: 1px solid #e0dbd5;
  margin-bottom: 1rem;
}
.map-frame {
  border: none;
  display: block;
  height: clamp(200px, 50vw, 380px);
}
.map-caption {
  background: var(--creme);
  padding: 0.8rem 1.2rem;
  font-size: 0.85rem;
  color: var(--gris-chaud);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.map-caption-link {
  margin-left: auto;
  color: var(--vert-moyen);
  font-size: 0.8rem;
  white-space: nowrap;
}
.alert-3677 {
  background: #fff8f0;
  padding: 3rem 0;
  border-top: 3px solid #e8622a;
}
.alert-3677-inner {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.alert-3677-badge {
  flex-shrink: 0;
  background: #e8622a;
  color: white;
  border-radius: 20px;
  padding: 1.2rem 1.6rem;
  text-align: center;
  min-width: 110px;
}
.alert-3677-number {
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
  font-family: serif;
}
.alert-3677-caption {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.9;
  margin-top: 0.3rem;
  text-transform: uppercase;
}
.alert-3677-copy {
  flex: 1;
  min-width: 220px;
}
.alert-3677-kicker {
  font-size: 0.75rem;
  font-weight: 700;
  color: #e8622a;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.4rem;
}
.alert-3677-title {
  font-family: serif;
  font-size: 1.25rem;
  margin-bottom: 0.7rem;
  color: #2d2d2d;
}
.alert-3677-text {
  color: #555;
  font-size: 0.93rem;
  line-height: 1.6;
  margin-bottom: 0.9rem;
}
.alert-3677-highlight { color: #e8622a; }
.alert-3677-actions {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.alert-3677-btn,
.alert-3677-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.2rem;
  border-radius: 30px;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
}
.alert-3677-btn {
  background: #e8622a;
  color: white;
}
.alert-3677-btn-outline {
  background: white;
  color: #e8622a;
  border: 2px solid #e8622a;
}
.contact-help-section {
  background: var(--creme);
  padding: 4rem 0;
}
.contact-help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.2rem;
  margin-top: 2rem;
}
.contact-help-card {
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 2px 12px var(--ombre);
}
.contact-help-card-icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}
.contact-help-card-text {
  font-size: 0.85rem;
  color: var(--gris-chaud);
  margin-top: 0.3rem;
}
.contact-help-actions {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.btn-contact-cta {
  font-size: 0.95rem;
  padding: 0.75rem 1.6rem;
}
.faq-section-soft {
  background: #f9f6f1;
  padding: 3rem 0;
}
.faq-container-narrow { max-width: 780px; }
.faq-title-center-lg {
  text-align: center;
  margin-bottom: 2rem;
}
.contact-inline-link {
  color: var(--vert-fonce);
  font-weight: 600;
}
.newsletter-section-dark {
  background: #3a5c3a;
  padding: 3rem 0;
  scroll-margin-top: 80px;
}
.newsletter-inner { max-width: 600px; }
.newsletter-kicker {
  text-align: center;
  color: #c8dfc8;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.5rem;
}
.newsletter-title {
  text-align: center;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 400;
  margin: 0 0 0.8rem;
}
.newsletter-text {
  text-align: center;
  color: #e8f5e8;
  font-size: 0.93rem;
  line-height: 1.7;
  margin: 0 0 1.5rem;
}
.newsletter-text-strong { color: #fff; }
.newsletter-text-small {
  font-size: 0.85rem;
  opacity: 0.8;
}
.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 420px;
  margin: 0 auto;
}
.newsletter-input {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: none;
  font-size: 0.95rem;
  font-family: inherit;
}
.newsletter-submit {
  padding: 0.85rem 1rem;
  border-radius: 8px;
  border: none;
  background: #fff;
  color: #3a5c3a;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.newsletter-note {
  text-align: center;
  font-size: 0.78rem;
  color: rgba(200,223,200,0.75);
  margin: 0.4rem 0 0;
}
.newsletter-note a { color: rgba(200,223,200,0.85); }
.newsletter-msg {
  text-align: center;
  margin: 1rem 0 0;
  font-size: 0.9rem;
  min-height: 1.4em;
}
.sujet-btn {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  border: 2px solid var(--vert-moyen);
  background: white;
  color: var(--vert-fonce);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s;
}
.sujet-btn:hover,
.sujet-btn.active {
  background: var(--vert-fonce);
  color: white;
  border-color: var(--vert-fonce);
}

@media (max-width: 768px) {
  .contact-visits-grid,
  .form-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* ===== DON MATÉRIEL — section formulaire ======================== */
.section-don {
  background: #f5f0e8;
  padding: 4rem 0;
  border-top: 2px solid #e0d8cc;
  scroll-margin-top: 90px;
}
.section-don .container { max-width: 680px; }
.form-card {
  background: #fff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}

/* ===== LIENS RÉSEAUX SOCIAUX ==================================== */
.social-links { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.social-link-item { display: inline-block; padding: 0.2rem 0.4rem; border-radius: 8px; }
.social-logo { height: 38px; vertical-align: middle; display: block; }

/* ===== UTILITAIRES TEXTE / MISE EN PAGE ========================= */
.text-center { text-align: center; }
.section-desc { color: var(--gris-chaud); max-width: 600px; margin: 0 auto; }
.section-desc-mb { color: var(--gris-chaud); max-width: 600px; margin: 0 auto 2rem; }
.section-desc-large { color: var(--gris-chaud); max-width: 680px; }
.cta-rgpd-note { text-align: center; font-size: 0.82rem; color: rgba(245,240,232,0.78); margin-top: 0.9rem; }
.cta-rgpd-note a { color: var(--creme); text-decoration: underline; }
.loading-placeholder { text-align: center; padding: 3rem; color: var(--gris-chaud); }
.container-680 { max-width: 680px; }
.container-800 { max-width: 800px; }
.container-900 { max-width: 900px; }
.cta-icon { font-size: 3rem; margin-bottom: 1rem; }

/* ===== PAGE : DONS MATÉRIELS ==================================== */
.mat-section { padding: 4.5rem 2rem; }
.mat-section.alt { background: var(--blanc); }
.mat-section .container { max-width: 900px; margin: 0 auto; }
.besoin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.2rem;
  margin-top: 2.5rem;
}
.besoin-card {
  background: var(--blanc);
  border-radius: 16px;
  padding: 1.5rem 1.2rem;
  border: 1.5px solid rgba(58,90,46,0.12);
  box-shadow: 0 2px 12px rgba(58,42,30,0.06);
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.besoin-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(58,42,30,0.12); }
.besoin-card .card-icon { font-size: 2rem; margin-bottom: 0.8rem; display: block; }
.besoin-card h3 { font-family: serif; font-size: 1rem; color: var(--vert-fonce); margin-bottom: 0.4rem; }
.besoin-card p { font-size: 0.83rem; color: var(--gris-chaud); line-height: 1.5; }
.mat-cta { background: var(--creme); text-align: center; padding: 4rem 2rem; }
.mat-cta h2 { font-family: serif; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--vert-fonce); margin-bottom: 1rem; }
.mat-cta p { color: var(--gris-chaud); max-width: 520px; margin: 0 auto 2rem; font-size: 0.98rem; line-height: 1.7; }
.mat-cta-form { text-align: center; padding: 1rem 0 2rem; }
.mat-cta-form .btn-lg { font-size: 1.05rem; padding: 1rem 2rem; }

/* ===== PAGE : AIDER AUTREMENT ================================== */
.autre-section { padding: 4.5rem 2rem; }
.autre-section.alt { background: var(--blanc); }
.autre-section .container { max-width: 900px; margin: 0 auto; }
.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.action-card { border-radius: 18px; padding: 2rem 1.5rem; border: 2px solid transparent; transition: all 0.2s; }
.action-card.green { background: rgba(58,90,46,0.06); border-color: rgba(58,90,46,0.12); }
.action-card.green:hover { background: rgba(58,90,46,0.1); border-color: var(--vert-moyen); }
.action-card.terre { background: rgba(139,94,60,0.06); border-color: rgba(139,94,60,0.12); }
.action-card.terre:hover { background: rgba(139,94,60,0.1); border-color: var(--terre); }
.action-card .icon-big { font-size: 2.5rem; margin-bottom: 1rem; display: block; }
.action-card h3 { font-family: serif; color: var(--vert-fonce); font-size: 1.15rem; margin-bottom: 0.6rem; }
.action-card p { font-size: 0.9rem; color: var(--gris-chaud); margin-bottom: 1rem; line-height: 1.6; }
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
}
.hub-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 1.8rem 1.2rem; background: var(--blanc); border-radius: 16px;
  border: 1.5px solid rgba(58,90,46,0.12); text-decoration: none; color: inherit;
  transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 2px 12px rgba(58,42,30,0.06);
}
.hub-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(58,42,30,0.12); border-color: var(--vert-moyen); }
.hub-card .hub-icon { font-size: 2rem; margin-bottom: 0.8rem; }
.hub-card strong { font-family: serif; color: var(--vert-fonce); font-size: 1rem; margin-bottom: 0.4rem; display: block; }
.hub-card span { font-size: 0.82rem; color: var(--gris-chaud); line-height: 1.5; }

/* ===== PAGE : BÉNÉVOLAT ======================================== */
.ben-section { padding: 4.5rem 2rem; }
.ben-section.alt { background: var(--blanc); }
.ben-section .container { max-width: 900px; margin: 0 auto; }
.missions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.mission-card {
  background: var(--blanc);
  border-radius: 16px;
  padding: 1.8rem 1.5rem;
  border: 1.5px solid rgba(58,90,46,0.12);
  box-shadow: 0 2px 12px rgba(58,42,30,0.06);
  transition: transform 0.2s, box-shadow 0.2s;
}
.mission-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(58,42,30,0.12); }
.mission-card .card-icon { font-size: 2rem; margin-bottom: 0.8rem; display: block; }
.mission-card h3 { font-family: serif; font-size: 1.1rem; color: var(--vert-fonce); margin-bottom: 0.5rem; }
.mission-card p { font-size: 0.9rem; color: var(--gris-chaud); line-height: 1.6; }
.etapes { display: flex; flex-direction: column; gap: 1.2rem; margin-top: 2.5rem; max-width: 640px; }
.etape { display: flex; gap: 1.2rem; align-items: flex-start; }
.etape-num { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--vert-moyen); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; flex-shrink: 0; margin-top: 0.1rem; }
.etape h4 { font-weight: 700; color: var(--vert-fonce); margin-bottom: 0.25rem; }
.etape p { font-size: 0.92rem; color: var(--gris-chaud); line-height: 1.6; }
.pratique-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
@media (max-width: 640px) { .pratique-grid { grid-template-columns: 1fr; } }
.pratique-item { display: flex; gap: 1rem; align-items: flex-start; }
.pratique-item .av-icon { font-size: 1.6rem; flex-shrink: 0; margin-top: 0.1rem; }
.pratique-item h4 { font-size: 1rem; font-weight: 700; color: var(--vert-fonce); margin-bottom: 0.3rem; }
.pratique-item p { font-size: 0.9rem; color: var(--gris-chaud); line-height: 1.6; }
.ben-cta { background: var(--creme); text-align: center; padding: 4rem 2rem; }
.ben-cta h2 { font-family: serif; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--vert-fonce); margin-bottom: 1rem; }
.ben-cta p { color: var(--gris-chaud); max-width: 520px; margin: 0 auto 2rem; font-size: 0.98rem; line-height: 1.7; }

/* ===== PAGE : STRUCTURE ======================================== */
.structure-sections {
  /* Le bg crème (via :where(.photo-hero ~ *)) doit couvrir toute la largeur
     pendant le sticky-cover, sinon on voit le hero derrière sur les côtés.
     Donc width 100% au wrapper, max-width sur les enfants. */
  width: 100%;
  margin: 0 auto;
  padding: 4rem max(2rem, calc((100% - 860px) / 2));
}
.structure-section { padding: 2.5rem 0; border-bottom: 1px solid rgba(58,90,46,0.12); }
.structure-section:last-child { border-bottom: none; }
.structure-section h2 {
  font-family: serif;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  color: var(--vert-fonce);
  margin: 0 0 1.2rem;
}
.structure-section .structure-contenu { font-size: 1rem; line-height: 1.8; color: var(--gris-chaud); }
.structure-section .structure-contenu p { margin: 0 0 1rem; }
.structure-section .structure-contenu ul { padding-left: 1.5rem; }
.structure-section .structure-contenu li { margin-bottom: 0.4rem; }
.structure-photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1.8rem;
}
.structure-photos img { width: 100%; border-radius: 10px; object-fit: cover; aspect-ratio: 4/3; box-shadow: 0 2px 12px rgba(0,0,0,0.1); transition: transform 0.2s, box-shadow 0.2s; }
.structure-lb-trigger { display: block; background: none; border: none; padding: 0; cursor: pointer; border-radius: 10px; overflow: hidden; }
.structure-lb-trigger:hover img, .structure-lb-trigger:focus-visible img { transform: scale(1.04); box-shadow: 0 6px 24px rgba(0,0,0,0.18); }
#structure-page-title {
  font-family: serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--vert-fonce);
  text-align: center;
  margin-bottom: 0.5rem;
}

/* ===== PAGE : LEGS ============================================ */
.legs-notice-sub { font-size: 0.9rem; opacity: 0.85; }
.legs-highlight-box {
  margin-top: 2.5rem;
  background: rgba(90,127,72,0.08);
  border-radius: 16px;
  padding: 1.6rem 2rem;
  border-left: 3px solid var(--vert-moyen);
}
.legs-highlight-box p { font-size: 0.95rem; color: var(--gris-chaud); line-height: 1.7; }
.legs-highlight-box strong { color: var(--vert-fonce); }
.legs-section-compact { padding: 3rem 2rem; }
.section-label-center { text-align: center; }
.legs-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.legs-cta-note {
  margin-top: 2rem;
  font-size: 0.82rem;
  color: var(--gris-chaud);
  opacity: 0.7;
}

/* ===== PAGE : AGENDA ========================================== */
.agenda-section {
  background: var(--creme);
  padding: 4rem 2rem;
}
.agenda-container {
  max-width: 820px;
  margin: 0 auto;
}
.event-card {
  background: var(--blanc);
  border-radius: 18px;
  box-shadow: 0 4px 24px var(--ombre);
  display: grid;
  grid-template-columns: 110px 1fr;
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s;
  margin-bottom: 1.2rem;
}
.event-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(58, 90, 46, 0.2);
}
.event-date-box {
  background: linear-gradient(135deg, var(--vert-fonce) 0%, var(--vert-moyen) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--creme);
  padding: 1.5rem 0.8rem;
  text-align: center;
}
.event-day {
  font-family: serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--terre-claire);
  line-height: 1;
}
.event-month {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.88;
  margin-top: 0.2rem;
}
.event-year {
  font-size: 0.7rem;
  opacity: 0.55;
  margin-top: 0.1rem;
}
.event-body { padding: 1.4rem 1.6rem; }
.event-body h3 {
  font-family: serif;
  color: var(--vert-fonce);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
.event-meta {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--gris-chaud);
  margin-bottom: 0.7rem;
}
.event-desc {
  font-size: 0.92rem;
  color: var(--gris-chaud);
  line-height: 1.6;
}
.event-lien {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--vert-moyen);
  text-decoration: none;
  border: 1.5px solid var(--vert-moyen);
  border-radius: 20px;
  padding: 0.3rem 0.9rem;
  transition: background 0.2s, color 0.2s;
}
.event-lien:hover {
  background: var(--vert-moyen);
  color: white;
}
.event-card.event-past .event-date-box { background: linear-gradient(135deg, #5a5050, #3a3030); }
.event-card.event-past { opacity: 0.72; }
.event-card.event-test {
  border-left: 4px solid #c0392b;
  background: #fff8f7;
}
.agenda-archive-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 3rem 0 1.5rem;
  color: var(--gris-chaud);
}
.agenda-archive-title::before,
.agenda-archive-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gris-chaud);
  opacity: 0.25;
}
.agenda-archive-title span {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.empty-state,
.adoption-empty {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--gris-chaud);
  grid-column: 1 / -1;
}
.empty-state .empty-icon { font-size: 4rem; margin-bottom: 1rem; }
.empty-state h3 {
  font-family: serif;
  color: var(--vert-fonce);
  font-size: 1.4rem;
  margin-bottom: 0.7rem;
}
.empty-state p { font-size: 0.95rem; line-height: 1.6; }
.cta-band-dark {
  background: linear-gradient(135deg, var(--vert-fonce) 0%, #1a3018 100%);
  padding: 4rem 2rem;
  text-align: center;
  color: var(--creme);
}
.cta-band-dark-title {
  font-family: serif;
  font-size: 2rem;
  margin-bottom: 1rem;
}
.cta-band-dark-text {
  color: rgba(245,240,232,0.85);
  font-size: 1.05rem;
  margin-bottom: 2rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.cta-band-link-light {
  background: var(--creme);
  color: var(--vert-fonce);
  font-weight: 700;
}

.actu-filters-hidden {
  display: none;
}

.actu-last-update {
  font-size: 0.78rem;
  color: var(--gris-chaud);
  text-align: right;
  margin-bottom: 0.5rem;
}

.gallery-loading-state,
.residents-loading {
  text-align: center;
  padding: 3rem;
  color: var(--gris-chaud);
}

.galerie-social-cta {
  background: var(--blanc);
  padding: 3rem 2rem;
  text-align: center;
}

.galerie-social-cta-inner {
  max-width: 600px;
  margin: 0 auto;
}

.galerie-social-cta-title {
  font-family: 'Playfair Display', serif;
  color: var(--vert-fonce);
  font-size: 1.8rem;
  margin-bottom: 0.8rem;
}

.galerie-social-cta-text {
  color: var(--gris-chaud);
  margin-bottom: 1.8rem;
}

.social-icon-shrink {
  flex-shrink: 0;
}

.galerie-social-link {
  border-color: var(--vert-moyen);
  color: var(--vert-fonce);
}

.lightbox-resident-links-hidden {
  display: none;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.5rem;
}

.lightbox-nav-hidden {
  display: none;
}

.galerie-faq-wrap {
  margin: 0 auto 3rem;
  padding: 0 1.5rem;
}

.galerie-faq-answer {
  padding: 0.8rem 1rem;
}

.galerie-faq-link {
  border-color: var(--vert-fonce);
  color: var(--vert-fonce);
}
.cta-actions-center {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-cream-strong {
  background: var(--creme);
  color: var(--vert-fonce);
  font-weight: 700;
}
@media (max-width: 560px) {
  .event-card { grid-template-columns: 1fr; }
  .event-date-box {
    flex-direction: row;
    gap: 0.6rem;
    padding: 0.9rem 1.2rem;
    justify-content: flex-start;
  }
  .event-day { font-size: 1.6rem; }
}

/* Page témoignages — wrapper full-width pour sticky-cover (cf .structure-sections) */
.temoignages-section {
  width: 100%;
  background-color: var(--creme);
}
.temoignages-section .container { padding: 2rem 1rem; }

/* ===== PAGE : FAQ ============================================= */
.faq-layout {
  display: flex;
  gap: 2rem;
  /* width 100% pour couvrir toute la largeur pendant sticky-cover (cf .structure-sections) */
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 2.5rem max(1.5rem, calc((100% - 1060px) / 2)) 3rem;
  align-items: flex-start;
}
.faq-sidebar {
  width: 190px;
  flex-shrink: 0;
  align-self: flex-start;
  position: sticky;
  top: 5.5rem;
  height: fit-content;
  background: var(--blanc);
  border-radius: 16px;
  box-shadow: 0 2px 12px var(--ombre);
  padding: 0.8rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.faq-sidebar .sid-btn {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  line-height: 1.3;
  min-height: 0;
  padding: 0.5rem 0.7rem;
  font-size: 0.83rem;
}
#faq-container { flex: 1; min-width: 0; }
.faq-section {
  padding: 2.5rem 0 1rem;
  scroll-margin-top: 5.5rem;
}
.faq-section-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.8rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--vert-pale);
}
.faq-section-icon {
  font-size: 2rem;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vert-pale);
  border-radius: 12px;
  flex-shrink: 0;
}
.faq-section-header h2 {
  font-size: 1.3rem;
  color: var(--vert-fonce);
  font-weight: 700;
}
.faq-section-header p {
  font-size: 0.88rem;
  color: var(--gris-chaud);
  margin-top: 0.15rem;
}
/* Scoped to #faq-container (faq.html full page) — ne pas écraser le mini-FAQ des autres pages */
#faq-container .faq-item {
  background: white;
  border-radius: 14px;
  margin-bottom: 0.7rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.05);
}
#faq-container .faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 1.1rem 1.4rem;
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--texte);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  line-height: 1.4;
  transition: background 0.15s;
}
#faq-container .faq-q:hover { background: var(--vert-pale); }
#faq-container .faq-q::after {
  content: '▾';
  font-size: 1rem;
  color: var(--vert-fonce);
  transition: transform 0.25s;
  flex-shrink: 0;
}
#faq-container .faq-item.open .faq-q { background: var(--vert-pale); }
#faq-container .faq-item.open .faq-q::after { transform: rotate(180deg); }
#faq-container .faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
#faq-container .faq-item.open .faq-a { max-height: 600px; }
.faq-a-inner {
  padding: 0 1.4rem 1.2rem;
  font-size: 0.93rem;
  color: var(--gris-chaud);
  line-height: 1.75;
}
.faq-a-inner p { margin-bottom: 0.5rem; }
.faq-a-inner p:last-child { margin-bottom: 0; }
.faq-a-inner strong { color: var(--texte); }
.faq-a-inner a { color: var(--vert-fonce); font-weight: 600; }
.faq-a-inner ul { padding-left: 1.2rem; margin-top: 0.3rem; }
.faq-a-inner ul li { margin-bottom: 0.3rem; }
.faq-a-inner .tip {
  background: var(--vert-pale);
  border-left: 3px solid var(--vert-fonce);
  border-radius: 0 8px 8px 0;
  padding: 0.6rem 0.9rem;
  margin-top: 0.6rem;
  font-size: 0.88rem;
}
.faq-cta {
  background: linear-gradient(135deg, var(--vert-fonce), #2a4520);
  color: var(--creme);
  text-align: center;
  padding: 3.5rem 2rem;
}
.faq-cta h2 { font-size: 1.5rem; margin-bottom: 0.6rem; }
.faq-cta p { opacity: 0.85; margin-bottom: 1.5rem; }
.faq-cta-btns a {
  padding: 0.75rem 1.8rem;
  border-radius: 30px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.15s;
}
.faq-cta-btns a:hover { opacity: 0.85; transform: translateY(-2px); }
.btn-cta-white { background: white; color: var(--vert-fonce); }
.btn-cta-outline { background: transparent; color: white; border: 2px solid rgba(255,255,255,0.5); }
.faq-loading {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--gris-chaud);
}
@media (max-width: 768px) {
  .faq-layout { flex-direction: column; padding: 1.5rem 1rem 2rem; gap: 1rem; }
  .faq-sidebar { width: 100%; position: static; max-height: none; display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.6rem; }
  .faq-sidebar .sid-title { width: 100%; padding-bottom: 0.4rem; }
  .faq-sidebar .sid-btn { width: auto; flex: 0 0 auto; padding: 0.35rem 0.8rem; line-height: 1.2; }
}
@media (max-width: 640px) {
  .faq-section { padding: 2rem 0 0.5rem; }
  .faq-q { font-size: 0.9rem; padding: 1rem 1.1rem; }
}

/* ===== PAGE : PRESSE / ILS PARLENT ============================ */
.presse-section {
  background: var(--creme);
  padding: 4rem 2rem;
}
.presse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}
.presse-card {
  background: var(--blanc);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 24px var(--ombre);
  transition: transform 0.25s, box-shadow 0.25s;
  display: flex;
  flex-direction: column;
  position: relative;
}
.presse-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}
.presse-card.has-bg,
.presse-card:has(.presse-card-bg) {
  background: transparent;
}
.presse-card.has-bg::after,
.presse-card:has(.presse-card-bg)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(245, 240, 232, 0.72);
  pointer-events: none;
  z-index: 1;
}
.presse-card.has-bg .presse-card-footer,
.presse-card:has(.presse-card-bg) .presse-card-footer {
  border-top: 1px solid rgba(58, 90, 46, 0.15);
  background: rgba(245, 240, 232, 0.4);
}
.presse-card.has-bg .source-icon-big,
.presse-card:has(.presse-card-bg) .source-icon-big {
  background: rgba(255,255,255,0.6) !important;
}
.presse-card.has-bg .presse-type-badge,
.presse-card:has(.presse-card-bg) .presse-type-badge {
  background: rgba(255,255,255,0.7);
}
.presse-card > *:not(.presse-card-bg) {
  position: relative;
  z-index: 2;
}
.presse-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(58, 42, 30, 0.2);
}
.presse-card-header {
  padding: 1.8rem 1.8rem 1.2rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.source-icon-big {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  flex-shrink: 0;
}
.source-meta { flex: 1; }
.source-name-big {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--gris-chaud);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.presse-date {
  font-size: 0.8rem;
  color: var(--vert-moyen);
  font-weight: 700;
  margin-top: 0.2rem;
}
.presse-type-badge {
  display: inline-block;
  background: var(--creme);
  color: var(--vert-fonce);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 8px;
  margin-top: 0.4rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.presse-card-body {
  padding: 0 1.8rem 1.8rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.presse-card-body h3 {
  font-family: serif;
  color: var(--vert-fonce);
  font-size: 1.15rem;
  margin-bottom: 0.8rem;
  line-height: 1.4;
}
.presse-card-body p {
  font-size: 0.92rem;
  color: var(--gris-chaud);
  line-height: 1.65;
  flex: 1;
}
.presse-card-img {
  width: 100%;
  height: 140px;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  background: var(--creme);
  display: flex;
  align-items: center;
  justify-content: center;
}
.presse-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.8rem;
}
.presse-card-footer {
  padding: 1.2rem 1.8rem;
  border-top: 1px solid var(--creme);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.presse-tag {
  font-size: 0.78rem;
  color: var(--gris-chaud);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.presse-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--vert-fonce);
  color: var(--creme);
  padding: 0.5rem 1.1rem;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}
.presse-link:hover {
  background: var(--vert-moyen);
  transform: translateY(-1px);
}
.featured-card {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--vert-fonce) 0%, #2c4a22 100%);
  color: var(--creme);
  border-radius: 20px;
  padding: 0;
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 0;
  align-items: stretch;
  box-shadow: 0 8px 40px rgba(58, 90, 46, 0.35);
  text-decoration: none;
  transition: transform 0.25s;
  overflow: hidden;
}
.featured-card:hover { transform: translateY(-4px); }
.featured-card-img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.featured-card-body {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.featured-icon {
  font-size: 5rem;
  opacity: 0.9;
  padding: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.featured-meta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}
.featured-source {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--terre-claire);
}
.featured-badge {
  background: var(--terre);
  color: var(--creme);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 8px;
}
.featured-card h3 {
  font-family: serif;
  font-size: 1.5rem;
  margin-bottom: 0.8rem;
  line-height: 1.3;
}
.featured-card p {
  opacity: 0.8;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.2rem;
}
.featured-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--terre);
  color: var(--creme);
  padding: 0.6rem 1.3rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s;
}
.featured-link:hover {
  background: var(--terre-claire);
  color: var(--texte);
}
.tv-highlight {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  background: linear-gradient(135deg, #1a3018 0%, #2c4a22 100%);
  color: var(--creme);
  border-radius: 16px;
  padding: 1.4rem 1.8rem;
  margin-top: 2.5rem;
  box-shadow: 0 6px 24px rgba(58, 90, 46, 0.35);
}
.tv-highlight-icon {
  font-size: 2.2rem;
  flex-shrink: 0;
  line-height: 1;
}
.tv-highlight-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vert-clair);
  margin-bottom: 0.4rem;
}
.tv-highlight-text {
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.92;
}
.tv-highlight-text strong { color: #fff; }
.partenaires-section {
  background: var(--blanc);
  padding: 4rem 2rem;
}
.partenaires-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.partenaire-card {
  border: 2px solid rgba(58,90,46,0.12);
  border-radius: 16px;
  padding: 1.5rem;
  text-align: center;
  transition: border-color 0.2s, transform 0.2s;
  text-decoration: none;
  display: block;
  color: inherit;
}
.partenaire-card:hover {
  border-color: var(--vert-moyen);
  transform: translateY(-3px);
}
.partenaire-card-img {
  width: 100%;
  height: 120px;
  overflow: hidden;
  border-radius: 14px 14px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.partenaire-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.6rem;
}
.partenaire-card .p-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 0.8rem;
}
.partenaire-card h3 {
  font-family: serif;
  color: var(--vert-fonce);
  font-size: 1rem;
  margin-bottom: 0.4rem;
}
.partenaire-card p {
  font-size: 0.82rem;
  color: var(--gris-chaud);
}
.contact-presse {
  background: linear-gradient(135deg, var(--terre) 0%, #6b4028 100%);
  padding: 4rem 2rem;
  text-align: center;
  color: var(--creme);
}
.contact-presse h2 {
  font-family: serif;
  font-size: 2rem;
  margin-bottom: 1rem;
}
.contact-presse p {
  opacity: 0.85;
  max-width: 520px;
  margin: 0 auto 2rem;
}
.loading-grid-message {
  color: var(--gris-chaud);
  text-align: center;
  padding: 2rem;
  grid-column: 1 / -1;
}
.btn-cream-text {
  background: var(--creme);
  color: var(--texte);
}
@media (max-width: 768px) {
  .featured-card { grid-template-columns: 1fr; }
  .featured-card-img {
    min-height: 220px;
    max-height: 280px;
  }
  .featured-card-body { padding: 1.5rem; }
  .featured-card h3 { font-size: 1.2rem; }
}

/* ===== DONS PAGE (moved from dons.html) ===== */
.don-section {
      background: var(--creme);
      padding: 4rem 2rem;
    }

    .don-grid {
      display: grid;
      grid-template-columns: 3fr 2fr;
      gap: 3rem;
      align-items: start;
    }

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

    @media (max-width: 480px) {
      .montants-grid { grid-template-columns: repeat(2, 1fr); }
    }
        /* ===== MONTANTS ===== */
    .montants-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.8rem;
      margin-bottom: 1.5rem;
    }

    .montant-btn {
      background: var(--blanc);
      border: 2px solid rgba(58,90,46,0.15);
      border-radius: 14px;
      padding: 1.2rem 0.8rem;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s;
      position: relative;
    }

    .montant-btn:hover,
    .montant-btn.selected {
      border-color: var(--vert-moyen);
      background: var(--vert-fonce);
      color: var(--creme);
    }

    .montant-btn .amount {
      font-family: 'Playfair Display', serif;
      font-size: 1.5rem;
      font-weight: 700;
      display: block;
      color: var(--vert-fonce);
    }

    .montant-btn:hover .amount,
    .montant-btn.selected .amount {
      color: var(--terre-claire);
    }

    .montant-btn .impact {
      font-size: 0.72rem;
      color: var(--gris-chaud);
      margin-top: 0.3rem;
      line-height: 1.3;
    }

    .montant-btn:hover .impact,
    .montant-btn.selected .impact {
      color: rgba(245,240,232,0.7);
    }

    .montant-btn .popular-badge {
      position: absolute;
      top: -8px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--terre);
      color: var(--creme);
      font-size: 0.65rem;
      font-weight: 700;
      padding: 0.15rem 0.5rem;
      border-radius: 8px;
      white-space: nowrap;
    }

    .don-cta-box {
      background: linear-gradient(135deg, var(--vert-fonce), #2c4a22);
      border-radius: 20px;
      padding: 2rem;
      color: var(--creme);
    }

    .don-cta-box h3 {
      font-family: 'Playfair Display', serif;
      font-size: 1.3rem;
      margin-bottom: 1rem;
      color: var(--terre-claire);
    }

    .don-cta-box p {
      font-size: 0.9rem;
      opacity: 0.8;
      margin-bottom: 1.5rem;
      line-height: 1.65;
    }

    .helloasso-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      background: #ff6b35;
      color: white;
      padding: 0.9rem 1.5rem;
      border-radius: 12px;
      font-weight: 700;
      font-size: 1rem;
      text-decoration: none;
      transition: background 0.2s, transform 0.2s;
      width: 100%;
      margin-bottom: 0.8rem;
    }

    .helloasso-btn:hover {
      background: #e55a24;
      transform: translateY(-2px);
    }

    .don-note {
      font-size: 0.75rem;
      opacity: 0.6;
      text-align: center;
    }

    /* ===== SIDEBAR ===== */
    .sidebar-card {
      background: var(--blanc);
      border-radius: 16px;
      padding: 1.5rem;
      margin-bottom: 1.2rem;
      box-shadow: 0 4px 20px var(--ombre);
    }

    .sidebar-card h3 {
      font-family: 'Playfair Display', serif;
      color: var(--vert-fonce);
      font-size: 1.1rem;
      margin-bottom: 0.8rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .sidebar-card p {
      font-size: 0.88rem;
      color: var(--gris-chaud);
      line-height: 1.6;
    }

    .budget-bar {
      background: #e8e2d8;
      border-radius: 8px;
      height: 14px;
      overflow: hidden;
      margin: 0.4rem 0 0.3rem;
      position: relative;
    }

    .budget-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--vert-fonce), var(--vert-moyen));
      border-radius: 8px;
      width: 0%;
      transition: width 1.4s cubic-bezier(.22,1,.36,1);
    }

    .budget-labels {
      display: flex;
      justify-content: space-between;
      font-size: 0.78rem;
      color: var(--gris-chaud);
    }

    .budget-detail {
      margin-top: 0.8rem;
      border-top: 1px solid rgba(0,0,0,0.07);
      padding-top: 0.7rem;
      font-size: 0.8rem;
      color: var(--gris-chaud);
      display: none;
    }
    .budget-detail.open { display: block; }
    .budget-detail-row {
      display: flex;
      justify-content: space-between;
      padding: 0.15rem 0;
    }
    .budget-toggle {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 0.75rem;
      color: var(--vert-moyen);
      padding: 0.2rem 0;
      text-decoration: underline dotted;
      display: none;
    }

    .charges-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
      margin-top: 0.8rem;
    }

    .charges-list li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.85rem;
    }

    .charges-list .label {
      color: var(--gris-chaud);
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }

    .charges-list .montant {
      font-weight: 700;
      color: var(--vert-fonce);
    }

    /* ===== AUTRES MOYENS ===== */
    .autres-section {
      background: var(--blanc);
      padding: 4rem 2rem;
    }

    .autres-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 1.5rem;
      margin-top: 2.5rem;
    }

    .autre-card {
      border-radius: 18px;
      padding: 2rem 1.5rem;
      border: 2px solid transparent;
      transition: all 0.2s;
    }

    .autre-card.green {
      background: rgba(58, 90, 46, 0.06);
      border-color: rgba(58, 90, 46, 0.12);
    }
    .autre-card.green:hover {
      background: rgba(58, 90, 46, 0.1);
      border-color: var(--vert-moyen);
    }

    .autre-card.terre {
      background: rgba(139, 94, 60, 0.06);
      border-color: rgba(139, 94, 60, 0.12);
    }
    .autre-card.terre:hover {
      background: rgba(139, 94, 60, 0.1);
      border-color: var(--terre);
    }

    .autre-card .icon-big {
      font-size: 2.5rem;
      margin-bottom: 1rem;
      display: block;
    }

    .autre-card h3 {
      font-family: 'Playfair Display', serif;
      color: var(--vert-fonce);
      font-size: 1.15rem;
      margin-bottom: 0.6rem;
    }

    .autre-card p {
      font-size: 0.9rem;
      color: var(--gris-chaud);
      margin-bottom: 1rem;
      line-height: 1.6;
    }

    /* ===== FAQ ===== */
    .faq-section {
      background: var(--creme);
      padding: 4rem 2rem;
    }

    .faq-list {
      max-width: 720px;
      margin: 2.5rem auto 0;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .faq-item {
      background: var(--blanc);
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 2px 12px var(--ombre);
    }

    .faq-question {
      padding: 1.2rem 1.5rem;
      font-weight: 700;
      color: var(--vert-fonce);
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
    }

    .faq-question::after {
      content: '▾';
      font-size: 1rem;
      transition: transform 0.3s;
      flex-shrink: 0;
    }

    .faq-item.open .faq-question::after {
      transform: rotate(180deg);
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease;
    }

    .faq-item.open .faq-answer {
      max-height: 300px;
    }

    .faq-answer-inner {
      padding: 0 1.5rem 1.2rem;
      font-size: 0.92rem;
      color: var(--gris-chaud);
      line-height: 1.65;
    }

    /* ===== CAMPAGNES HELLOASSO ===== */
    .ha-card {
      background: var(--blanc);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 4px 20px var(--ombre);
      display: flex;
      flex-direction: column;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .ha-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    }
    .ha-card-banner {
      width: 100%;
      height: 160px;
      object-fit: cover;
      background: linear-gradient(135deg, var(--vert-fonce), var(--vert-moyen));
    }
    .ha-card-banner-placeholder {
      height: 160px;
      background: linear-gradient(135deg, var(--vert-fonce), var(--vert-moyen));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3rem;
    }
    .ha-card-body {
      padding: 1.3rem 1.5rem;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .ha-card-type {
      font-size: 0.72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--terre);
      margin-bottom: 0.4rem;
    }
    .ha-card-title {
      font-family: 'Playfair Display', serif;
      color: var(--vert-fonce);
      font-size: 1.15rem;
      margin-bottom: 0.6rem;
    }
    .ha-card-desc {
      font-size: 0.88rem;
      color: var(--gris-chaud);
      line-height: 1.6;
      flex: 1;
      margin-bottom: 1.2rem;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .ha-card-desc-empty {
      opacity: 0.5;
      font-style: italic;
    }
    .ha-card-actions {
      display: flex;
      gap: 0.6rem;
    }
    .ha-featured-card {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 6px 30px var(--ombre);
      /* margin-bottom retiré : créait un gap visible entre la section blanche et
         la section crème suivante (la marge sortait du parent qui avait
         padding-bottom:0 — le body s'imprimait dans l'espace). Le padding-bottom
         de .dons-featured-section gère désormais l'espacement (fond blanc OK). */
    }
    .ha-featured-media,
    .ha-featured-placeholder {
      min-height: 260px;
    }
    .ha-featured-media {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .ha-featured-placeholder {
      background: linear-gradient(135deg,var(--vert-fonce),var(--vert-moyen));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 5rem;
    }
    .ha-featured-content {
      background: linear-gradient(135deg,var(--vert-fonce),#2c4a22);
      padding: 2.5rem;
      color: var(--creme);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .ha-featured-eyebrow {
      font-size: 0.72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--terre-claire);
      margin-bottom: 0.5rem;
    }
    .ha-featured-title {
      font-family: serif;
      font-size: 1.8rem;
      color: var(--creme);
      margin-bottom: 1rem;
    }
    .ha-featured-desc {
      font-size: 0.9rem;
      opacity: 0.85;
      line-height: 1.7;
      margin-bottom: 1.5rem;
      flex: 1;
    }
    .ha-featured-actions {
      display: flex;
      gap: 0.8rem;
      flex-wrap: wrap;
    }
    .ha-btn-widget {
      flex: 1;
      background: var(--vert-fonce);
      color: var(--creme);
      border: none;
      border-radius: 10px;
      padding: 0.7rem 1rem;
      font-weight: 700;
      font-size: 0.88rem;
      cursor: pointer;
      transition: background 0.2s;
    }
    .ha-btn-widget-featured {
      background: var(--terre);
      font-size: 1rem;
      padding: 0.9rem 1.5rem;
    }
    .ha-btn-widget:hover { background: var(--vert-moyen); }
    .ha-btn-widget-featured:hover {
      background: var(--terre-claire);
      color: var(--texte);
    }
    .ha-btn-external {
      background: var(--creme);
      color: var(--vert-fonce);
      border: 2px solid rgba(58,90,46,0.2);
      border-radius: 10px;
      padding: 0.7rem 0.9rem;
      font-size: 0.85rem;
      text-decoration: none;
      display: flex;
      align-items: center;
      transition: border-color 0.2s;
    }
    .ha-btn-external-inverse {
      background: transparent;
      color: var(--creme);
      border-color: rgba(255,255,255,0.3);
    }
    .ha-btn-external:hover { border-color: var(--vert-moyen); }
    .ha-btn-external-inverse:hover {
      border-color: rgba(255,255,255,0.55);
    }
    .urgence-link {
      display: flex;
      align-items: center;
      gap: 0.8rem;
      padding: 0.8rem;
      background: rgba(139,94,60,0.07);
      border-radius: 10px;
      text-decoration: none;
      transition: background 0.2s;
    }
    .urgence-link-icon {
      font-size: 1.5rem;
    }
    .urgence-link-body {
      min-width: 0;
    }
    .urgence-link-title {
      font-weight: 700;
      color: var(--vert-fonce);
      font-size: 0.9rem;
    }
    .urgence-link-desc {
      font-size: 0.78rem;
      color: var(--gris-chaud);
    }
    .urgence-link-arrow {
      margin-left: auto;
      color: var(--vert-moyen);
      font-size: 0.8rem;
      font-weight: 700;
    }

    /* ===== MODALE WIDGET ===== */
    .ha-modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.65);
      z-index: 1000;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }
    .ha-modal-overlay.open { display: flex; }
    .ha-modal {
      background: var(--blanc);
      border-radius: 20px;
      width: 100%;
      max-width: 780px;
      height: 90vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .ha-modal-header {
      padding: 1rem 1.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(0,0,0,0.08);
    }
    .ha-modal-header h3 {
      font-family: 'Playfair Display', serif;
      color: var(--vert-fonce);
      font-size: 1.1rem;
    }
    .ha-modal-close {
      background: none;
      border: none;
      font-size: 1.5rem;
      cursor: pointer;
      color: var(--gris-chaud);
      line-height: 1;
      padding: 0.2rem 0.5rem;
    }
    .ha-modal iframe {
      flex: 1;
      border: none;
      width: 100%;
      min-height: 0;
    }
    @media (max-width: 640px) {
      .ha-featured-card {
        grid-template-columns: 1fr;
      }
      .ha-featured-media,
      .ha-featured-placeholder {
        min-height: 200px;
      }
    }

    /* ===== ACTUALITES PAGE ===== */
    .actu-section {
      background: var(--creme);
      padding: 4rem 2rem;
    }
    .actu-container {
      max-width: 820px;
      margin: 0 auto;
    }
    .actu-subtitle {
      font-size: 1.05rem;
      color: var(--gris-chaud);
      margin-bottom: 2.5rem;
      line-height: 1.6;
    }
    .actu-filters {
      display: flex;
      gap: 0.6rem;
      flex-wrap: wrap;
      margin-bottom: 2rem;
    }
    .filter-btn {
      background: var(--blanc);
      border: 1.5px solid var(--vert-moyen);
      color: var(--vert-moyen);
      border-radius: 20px;
      padding: 0.3rem 0.9rem;
      font-size: 0.82rem;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
    }
    .filter-btn:hover,
    .filter-btn.active {
      background: var(--vert-moyen);
      color: white;
    }
    .badge-lu {
      display: inline-block;
      font-size: 0.7rem;
      background: #e8f5e9;
      color: #388e3c;
      padding: 0.1rem 0.45rem;
      border-radius: 8px;
      font-weight: 600;
    }
    .actu-section .actu-card.is-read { opacity: 0.6; }
    .actu-section .actu-card.is-read h3 { color: #999; }
    .actu-section .actu-card {
      background: var(--blanc);
      border-radius: 18px;
      box-shadow: 0 4px 24px var(--ombre);
      display: grid;
      grid-template-columns: 90px 1fr;
      overflow: hidden;
      transition: transform 0.25s, box-shadow 0.25s;
      margin-bottom: 1.2rem;
    }
    .actu-section .actu-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(58, 90, 46, 0.2);
    }
    .actu-source-box {
      background: linear-gradient(135deg, var(--vert-fonce) 0%, var(--vert-moyen) 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: var(--creme);
      padding: 1.2rem 0.6rem;
      text-align: center;
    }
    .actu-icone {
      font-size: 1.1rem;
      margin-bottom: 0.3rem;
      line-height: 1;
      opacity: 0.8;
    }
    .actu-source-name {
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-weight: 700;
      word-break: break-word;
      hyphens: auto;
      line-height: 1.2;
    }
    .actu-body { padding: 1.2rem 1.5rem; }
    .actu-body h3 {
      font-family: 'Playfair Display', serif;
      color: var(--vert-fonce);
      font-size: 1.15rem;
      margin-bottom: 0.45rem;
      line-height: 1.35;
    }
    .actu-meta {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      font-size: 0.8rem;
      color: var(--gris-chaud);
      margin-bottom: 0.6rem;
      align-items: center;
    }
    .actu-categorie {
      background: var(--creme);
      border: 1px solid rgba(58,90,46,0.2);
      border-radius: 12px;
      padding: 0.1rem 0.6rem;
      font-size: 0.72rem;
      font-weight: 700;
      color: var(--vert-moyen);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .actu-desc {
      font-size: 0.9rem;
      color: var(--gris-chaud);
      line-height: 1.6;
    }
    .actu-lien {
      display: inline-block;
      margin-top: 0.8rem;
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--vert-moyen);
      text-decoration: none;
      border: 1.5px solid var(--vert-moyen);
      border-radius: 20px;
      padding: 0.3rem 0.9rem;
      transition: background 0.2s, color 0.2s;
    }
    .actu-lien:hover {
      background: var(--vert-moyen);
      color: white;
    }
    .empty-state {
      text-align: center;
      padding: 4rem 2rem;
      color: var(--gris-chaud);
    }
    .empty-state .empty-icon {
      font-size: 4rem;
      margin-bottom: 1rem;
    }
    .empty-state h3 {
      font-family: 'Playfair Display', serif;
      color: var(--vert-fonce);
      font-size: 1.4rem;
      margin-bottom: 0.7rem;
    }
    .empty-state p {
      font-size: 0.95rem;
      line-height: 1.6;
    }
    @media (max-width: 560px) {
      .actu-card { grid-template-columns: 1fr; }
      .actu-source-box {
        flex-direction: row;
        gap: 0.6rem;
        padding: 0.8rem 1.2rem;
        justify-content: flex-start;
      }
      .actu-icone { font-size: 1.4rem; margin-bottom: 0; }
    }

    /* ===== VISAGES PAGE ===== */
    .visages-grid-section {
      padding: 5rem 2rem;
      background: var(--creme);
    }
    .visages-grid-section .container { max-width: 1100px; margin: 0 auto; }
    .visages-grid-section h2.section-heading {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.5rem, 3vw, 2rem);
      color: var(--vert-fonce);
      text-align: center;
      margin-bottom: 0.6rem;
    }
    .visages-grid-section .section-sub {
      text-align: center;
      color: var(--gris-chaud);
      font-size: 0.96rem;
      margin-bottom: 3rem;
    }
    .visages-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
    }
    .visage-card {
      background: var(--blanc);
      border-radius: 18px;
      box-shadow: 0 2px 18px rgba(58,42,30,0.09);
      overflow: hidden;
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s;
      display: flex;
      flex-direction: column;
    }
    .visage-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 36px rgba(58,42,30,0.16);
    }
    .visage-card-photo {
      width: 100%;
      aspect-ratio: 4/3;
      background: linear-gradient(135deg, var(--vert-fonce) 0%, #2d4a1e 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 4rem;
    }
    .visage-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .visage-card-body {
      padding: 1.4rem 1.5rem 1.6rem;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .visage-card-num {
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--vert-moyen);
      text-transform: uppercase;
      letter-spacing: 0.07em;
      margin-bottom: 0.4rem;
    }
    .visage-card-nom {
      font-family: 'Playfair Display', serif;
      font-size: 1.25rem;
      color: var(--vert-fonce);
      margin-bottom: 0.4rem;
    }
    .visage-card-role {
      font-size: 0.85rem;
      color: var(--gris-chaud);
      line-height: 1.5;
      margin-bottom: 1rem;
      flex: 1;
    }
    .visage-card-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--vert-moyen);
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      transition: color 0.15s;
    }
    .visage-card-btn:hover { color: var(--vert-fonce); }
    .visages-modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(10,18,6,0.75);
      z-index: 1000;
      padding: 1rem;
      align-items: center;
      justify-content: center;
    }
    .visages-modal-overlay.open { display: flex; }
    .visages-modal {
      background: var(--blanc);
      border-radius: 18px;
      max-width: 760px;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
      position: relative;
      box-shadow: 0 20px 60px rgba(0,0,0,0.4);
      animation: visages-modal-in 0.22s ease;
    }
    @keyframes visages-modal-in {
      from { opacity: 0; transform: translateY(16px) scale(0.97); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .visages-modal-close {
      position: absolute;
      top: 0.8rem;
      right: 0.8rem;
      background: rgba(0,0,0,0.35);
      border: none;
      color: white;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      font-size: 1.1rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s;
      z-index: 20;
    }
    .visages-modal-close:hover { background: rgba(0,0,0,0.6); }
    .visages-modal-slider {
      position: relative;
      border-radius: 18px 18px 0 0;
      overflow: hidden;
      background: var(--vert-fonce);
    }
    .visages-slider-track {
      display: flex;
      height: 420px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .visages-slider-track::-webkit-scrollbar { display: none; }
    .visages-slider-slide {
      min-width: 100%;
      height: 420px;
      flex-shrink: 0;
      scroll-snap-align: start;
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #1a2810;
    }
    .visages-slider-slide::before {
      content: '';
      position: absolute;
      inset: -20px;
      z-index: 0;
      background: var(--slide-bg, #1a2810) center/cover no-repeat;
      filter: blur(18px) brightness(0.45);
    }
    .visages-slider-slide img {
      position: relative;
      z-index: 1;
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      object-fit: contain;
      display: block;
    }
    .visages-slider-slide .visages-slider-emoji {
      font-size: 6rem;
      color: var(--creme);
      position: relative;
      z-index: 1;
    }
    .visages-slider-overlay {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      z-index: 4;
      padding: 0 1.2rem 2rem;
      background: linear-gradient(to top, rgba(10,18,6,0.88) 0%, rgba(10,18,6,0.48) 38%, transparent 100%);
    }
    .visages-slider-overlay > * { max-width: 100%; }
    .visages-slider-overlay h2 {
      font-family: 'Playfair Display', serif;
      color: var(--creme);
      font-size: clamp(1.25rem, 2.2vw, 1.7rem);
      line-height: 1.2;
      margin: 0;
      text-shadow: 0 2px 12px rgba(0,0,0,0.45);
      display: inline-block;
      max-width: min(100%, 560px);
      width: auto;
      padding: 0.65rem 0.9rem 0.7rem;
      border-radius: 18px;
      background: rgba(15, 26, 10, 0.28);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      box-shadow: 0 8px 24px rgba(0,0,0,0.16);
    }
    .visages-slider-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0,0,0,0.4);
      border: none;
      color: white;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      font-size: 1.1rem;
      cursor: pointer;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s;
      opacity: 0;
      pointer-events: none;
    }
    .visages-modal-slider:hover .visages-slider-arrow { opacity: 1; pointer-events: auto; }
    .visages-slider-arrow:hover { background: rgba(0,0,0,0.65); }
    .visages-slider-arrow.prev { left: 0.6rem; }
    .visages-slider-arrow.next { right: 0.6rem; }
    .visages-slider-arrow[disabled] { opacity: 0 !important; pointer-events: none; }
    .visages-slider-dots {
      position: absolute;
      bottom: 0.5rem;
      width: 100%;
      display: flex;
      justify-content: center;
      gap: 6px;
      z-index: 5;
    }
    .visages-slider-dot {
      height: 6px;
      width: 6px;
      border-radius: 3px;
      background: rgba(255,255,255,0.45);
      transition: all 0.25s;
      cursor: pointer;
    }
    .visages-slider-dot.active { width: 18px; background: white; }
    .portrait-role-badge {
      display: inline-block;
      background: rgba(255,255,255,0.18);
      color: rgba(245,240,232,0.9);
      font-size: 0.78rem;
      padding: 0.45rem 0.9rem;
      border-radius: 20px;
      margin-bottom: 0;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      backdrop-filter: blur(6px);
      text-shadow: 0 1px 8px rgba(0,0,0,0.35);
    }
    .portrait-avatar {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      background: rgba(255,255,255,0.15);
      border: 3px solid rgba(255,255,255,0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.4rem;
      flex-shrink: 0;
      overflow: hidden;
    }
    .portrait-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .portrait-body { padding: 1.4rem 1.6rem 1.8rem; }
    .portrait-specs {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 1.4rem;
      margin-bottom: 1rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid var(--creme);
    }
    .portrait-spec { display: flex; flex-direction: column; }
    .portrait-spec-label {
      font-size: 0.7rem;
      color: #aaa;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .portrait-spec-value {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--texte);
    }
    .portrait-section-title {
      font-family: 'Playfair Display', serif;
      font-size: 1.15rem;
      color: var(--vert-fonce);
      margin: 2.2rem 0 1.2rem;
      padding-bottom: 0.5rem;
      border-bottom: 2px solid rgba(58,90,46,0.12);
      display: flex;
      align-items: center;
      gap: 0.6rem;
    }
    .portrait-section-title:first-child { margin-top: 0; }
    .qa-item { margin-bottom: 1.5rem; }
    .qa-question {
      font-size: 0.86rem;
      font-weight: 700;
      color: var(--vert-moyen);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 0.45rem;
    }
    .qa-answer { font-size: 0.97rem; color: var(--gris-chaud); line-height: 1.75; }
    .portrait-quote {
      background: var(--creme);
      border-left: 4px solid var(--vert-moyen);
      border-radius: 0 12px 12px 0;
      padding: 1.2rem 1.5rem;
      margin: 1.5rem 0;
      font-family: 'Playfair Display', serif;
      font-size: 1.02rem;
      color: var(--vert-fonce);
      line-height: 1.65;
    }
    .portrait-animal-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      background: rgba(58,90,46,0.08);
      color: var(--vert-fonce);
      border: 1.5px solid rgba(58,90,46,0.18);
      border-radius: 20px;
      padding: 0.3rem 0.9rem;
      font-size: 0.88rem;
      font-weight: 600;
      margin: 0.3rem 0.3rem 0 0;
    }
    .portrait-gallery-title {
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--vert-fonce);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin: 1.4rem 0 0.5rem;
    }
    .portrait-gallery-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      margin-bottom: 1.4rem;
    }
    .portrait-gallery-thumb {
      display: block;
      border-radius: 8px;
      overflow: hidden;
      aspect-ratio: 1;
      cursor: pointer;
    }
    .portrait-gallery-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.2s;
    }
    .portrait-gallery-thumb:hover img { transform: scale(1.07); }
    .portrait-actions {
      display: flex;
      gap: 0.7rem;
      flex-wrap: wrap;
      padding-top: 1rem;
      border-top: 1px solid var(--creme);
    }
    .portrait-actions a,
    .portrait-actions button {
      flex: 1;
      min-width: 130px;
      text-align: center;
      padding: 0.65rem 1rem;
      border-radius: 30px;
      font-size: 0.88rem;
      font-weight: 700;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
      border: none;
    }
    .portrait-actions .btn-secondary {
      background: transparent;
      color: var(--vert-moyen);
      border: 2px solid var(--vert-moyen) !important;
    }
    .portrait-actions .btn-secondary:hover { background: var(--vert-moyen); color: white; }
    .portrait-actions .btn-primary {
      background: var(--vert-fonce);
      color: var(--creme);
      border: 2px solid var(--vert-fonce) !important;
    }
    .portrait-actions .btn-primary:hover { background: var(--vert-moyen); border-color: var(--vert-moyen) !important; }
    .visages-cta {
      background: var(--blanc);
      text-align: center;
      padding: 4rem 2rem;
      border-top: 1px solid rgba(58,90,46,0.1);
    }
    .visages-cta h2 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.5rem, 3vw, 2rem);
      color: var(--vert-fonce);
      margin-bottom: 1rem;
    }
    .visages-cta p {
      color: var(--gris-chaud);
      max-width: 520px;
      margin: 0 auto 2rem;
      font-size: 0.97rem;
      line-height: 1.7;
    }
    .visages-loading {
      grid-column: 1 / -1;
      text-align: center;
      padding: 3rem;
      color: var(--gris-chaud);
    }
    .visages-cta-icon { font-size: 2.5rem; margin-bottom: 1rem; }
    .visages-cta-btn { font-size: 1rem; padding: 0.9rem 2rem; }
    .visages-cta-btn-primary { margin-right: 1rem; }
    @media (max-width: 900px) {
      .visages-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 760px) {
      .visages-slider-overlay { padding: 0 0.9rem 1.6rem; }
      .visages-slider-overlay h2 { font-size: clamp(1.05rem, 4.4vw, 1.35rem); }
    }
    @media (max-width: 640px) {
      .portrait-body { padding: 1.5rem; }
      .visages-cta-btn { display: block; width: 100%; margin: 0 0 0.9rem; }
      .visages-cta-btn:last-of-type { margin-bottom: 0; }
      #tdb { height: 26px !important; font-size: 0.72rem !important; }
    }
    @media (max-width: 580px) {
      .visages-grid { grid-template-columns: 1fr; }
    }

    /* ===== GALERIE PAGE ===== */
    .galerie-section {
      background: var(--creme);
      padding: 4rem 2rem;
    }
    .galerie-section .container {
      max-width: 1100px;
      margin: 0 auto;
    }
    .galerie-layout {
      display: flex;
      gap: 1.5rem;
      align-items: flex-start;
    }
    #sidebar-residents {
      width: 170px;
      flex-shrink: 0;
      position: sticky;
      top: 1rem;
      max-height: 80vh;
      overflow-y: auto;
      background: var(--blanc);
      border-radius: 16px;
      box-shadow: 0 2px 12px var(--ombre);
      padding: 0.8rem 0.6rem;
    }
    #sidebar-residents .sid-title {
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--gris-chaud);
      padding: 0 0.4rem 0.6rem;
      border-bottom: 1px solid rgba(0,0,0,0.07);
      margin-bottom: 0.5rem;
    }
    .sid-btn {
      display: flex;
      align-items: center;
      width: 100%;
      text-align: left;
      padding: 0.4rem 0.6rem;
      min-height: 44px;
      border-radius: 10px;
      border: none;
      background: none;
      font-size: 0.82rem;
      color: var(--texte);
      cursor: pointer;
      transition: background 0.15s;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .sid-btn:hover { background: rgba(90,127,72,0.1); }
    .sid-btn.active { background: var(--vert-fonce); color: var(--creme); font-weight: 700; }
    .sid-btn .sid-count { opacity: 0.6; font-size: 0.75rem; margin-left: 0.3rem; }
    .sid-group-hdr {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      text-align: left;
      padding: 0.45rem 0.4rem;
      margin-top: 0.2rem;
      border-top: 1px solid rgba(0,0,0,0.07);
      border-radius: 8px;
      border-left: none;
      border-right: none;
      background: none;
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--gris-chaud);
      cursor: pointer;
      transition: background 0.15s;
    }
    .sid-group-hdr:hover { background: rgba(0,0,0,0.04); }
    .sid-group-hdr .sid-chevron { font-size: 0.6rem; transition: transform 0.2s; }
    .sid-group-hdr.open .sid-chevron { transform: rotate(90deg); }
    .sid-group-items { display: none; }
    .sid-group-items.open { display: block; }
    .photo-grid {
      flex: 1;
      min-width: 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
    }
    .photo-grid .photo-item {
      break-inside: unset;
      margin-bottom: 0;
    }
    .photo-item {
      break-inside: avoid;
      margin-bottom: 1rem;
      border-radius: 14px;
      overflow: hidden;
      cursor: pointer;
      position: relative;
      box-shadow: 0 4px 20px var(--ombre);
      transition: transform 0.25s, box-shadow 0.25s;
      aspect-ratio: 3/4;
    }
    .photo-item:hover {
      transform: translateY(-4px) scale(1.01);
      box-shadow: 0 10px 35px rgba(58, 42, 30, 0.25);
    }
    .photo-item img,
    .photo-item video {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      transition: opacity 0.3s;
    }
    .photo-item .video-thumb-wrap {
      position: relative;
      width: 100%;
      height: 100%;
      background: #111;
    }
    .photo-item .video-thumb {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      opacity: 0;
      transition: opacity 0.25s;
    }
    .photo-item .video-thumb.loaded { opacity: 1; }
    .photo-item .video-badge {
      position: absolute;
      inset: auto auto 0.6rem 0.6rem;
      background: rgba(0,0,0,0.55);
      color: #fff;
      border-radius: 999px;
      padding: 0.25rem 0.55rem;
      font-size: 0.8rem;
      font-weight: 700;
      pointer-events: none;
    }
    .photo-item video { background: #111; }
    .photo-item img.loading {
      opacity: 0;
      height: 200px;
    }
    .photo-item img.loaded { opacity: 1; }
    .photo-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(30,50,24,0.7) 0%, transparent 50%);
      opacity: 0;
      transition: opacity 0.25s;
      display: flex;
      align-items: flex-end;
      padding: 1rem;
    }
    .photo-item:hover .photo-overlay { opacity: 1; }
    .photo-caption {
      color: var(--creme);
      font-size: 0.85rem;
      font-weight: 700;
    }
    .lightbox {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(10, 20, 8, 0.95);
      z-index: 2000;
      align-items: center;
      justify-content: center;
      padding: 2rem;
    }
    .lightbox.open { display: flex; }
    .lightbox-inner {
      max-width: 900px;
      width: 100%;
      position: relative;
    }
    .lightbox-media {
      width: 100%;
      display: flex;
      justify-content: center;
    }
    .lightbox-media img,
    .lightbox-media video {
      width: 100%;
      max-height: 80vh;
      object-fit: contain;
      border-radius: 12px;
    }
    .lightbox-close {
      position: absolute;
      top: -2.5rem;
      right: 0;
      background: none;
      border: none;
      color: var(--creme);
      font-size: 2rem;
      cursor: pointer;
      opacity: 0.7;
      transition: opacity 0.2s;
    }
    .lightbox-close:hover { opacity: 1; }
    .lightbox-nav { display: none; }
    .lightbox-btn {
      position: fixed;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0,0,0,0.5);
      border: 2px solid rgba(255,255,255,0.3);
      color: #fff;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
      z-index: 10001;
    }
    .lightbox-btn:hover { background: rgba(0,0,0,0.8); }
    .lightbox-btn.prev { left: 1rem; }
    .lightbox-btn.next { right: 1rem; }
    .lightbox-caption {
      text-align: center;
      color: rgba(245,240,232,0.75);
      font-size: 0.88rem;
      margin-top: 0.8rem;
    }
    .lightbox-resident-link {
      display: block;
      text-align: center;
      margin-top: 0.5rem;
      color: var(--terre-claire, #c49a6c);
      font-size: 0.82rem;
      font-weight: 700;
      text-decoration: none;
      opacity: 0.85;
      transition: opacity 0.2s;
    }
    .lightbox-resident-link:hover { opacity: 1; }
    .photo-resident-link {
      display: inline-block;
      margin-top: 0.3rem;
      color: var(--terre-claire, #c49a6c);
      font-size: 0.75rem;
      font-weight: 700;
      text-decoration: none;
      background: rgba(0,0,0,0.3);
      padding: 0.2rem 0.6rem;
      border-radius: 12px;
    }
    .photo-resident-link:hover { background: rgba(0,0,0,0.55); }
    @media (max-width: 900px) {
      .photo-grid { grid-template-columns: repeat(2, 1fr); }
      #sidebar-residents { width: 140px; }
    }
    @media (max-width: 600px) {
      .galerie-layout { flex-direction: column; }
      #sidebar-residents {
        width: 100%;
        position: static;
        max-height: none;
        display: flex;
        flex-wrap: wrap;
        gap: 0.3rem;
        padding: 0.5rem;
      }
      #sidebar-residents .sid-title { display: none; }
      .sid-group-hdr { display: none; }
      .sid-group-items { display: contents; }
      .sid-btn {
        width: auto;
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        border-radius: 20px;
        border: 1.5px solid var(--vert-clair);
        padding: 0.3rem 0.7rem;
      }
      .photo-grid { grid-template-columns: 1fr; }
    }

    /* ===== RESIDENTS PAGE ===== */
    .residents-full {
      background: var(--creme);
      padding: 4rem 2rem;
    }
    .residents-full .container,
    .chiffres-section .container {
      max-width: 1100px;
      margin: 0 auto;
    }
    .residents-layout {
      display: flex;
      gap: 1.5rem;
      align-items: flex-start;
    }
    #sidebar-categories {
      width: 170px;
      flex-shrink: 0;
      position: sticky;
      top: 1rem;
      max-height: 80vh;
      overflow-y: auto;
      background: var(--blanc);
      border-radius: 16px;
      box-shadow: 0 2px 12px var(--ombre);
      padding: 0.8rem 0.6rem;
    }
    #sidebar-categories .sid-title {
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--gris-chaud);
      padding: 0 0.4rem 0.6rem;
      border-bottom: 1px solid rgba(0,0,0,0.07);
      margin-bottom: 0.5rem;
    }
    #sidebar-categories .sid-btn {
      display: block;
      width: 100%;
      text-align: left;
      padding: 0.4rem 0.6rem;
      border-radius: 10px;
      border: none;
      background: none;
      font-size: 0.82rem;
      color: var(--texte);
      cursor: pointer;
      transition: background 0.15s;
      text-decoration: none;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #sidebar-categories .sid-btn:hover { background: rgba(90,127,72,0.1); }
    #sidebar-categories .sid-btn.active { background: var(--vert-fonce); color: var(--creme); font-weight: 700; }
    #sidebar-categories .sid-btn .sid-count { opacity: 0.6; font-size: 0.75rem; margin-left: 0.3rem; }
    #residents-container { flex: 1; min-width: 0; }
    .espece-section {
      margin-bottom: 4rem;
      scroll-margin-top: 8rem;
    }
    .espece-header {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 2rem;
      padding-bottom: 1rem;
      border-bottom: 2px solid var(--vert-clair);
    }
    .espece-header .espece-emoji { font-size: 2.5rem; }
    .espece-header h2 {
      font-family: 'Playfair Display', serif;
      color: var(--vert-fonce);
      font-size: 1.8rem;
    }
    .espece-header .count {
      background: var(--vert-moyen);
      color: var(--creme);
      font-size: 0.8rem;
      font-weight: 700;
      padding: 0.3rem 0.8rem;
      border-radius: 20px;
      margin-left: auto;
    }
    .residents-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
      gap: 1.5rem;
    }
    .resident-full-card {
      background: var(--blanc);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 4px 24px var(--ombre);
      transition: transform 0.25s, box-shadow 0.25s;
      cursor: pointer;
    }
    .resident-full-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 35px rgba(58, 42, 30, 0.18);
    }
    @keyframes residentHighlight {
      0% { box-shadow: 0 0 0 0 rgba(196, 154, 108, 0.8); }
      50% { box-shadow: 0 0 0 12px rgba(196, 154, 108, 0.3); }
      100% { box-shadow: 0 4px 24px var(--ombre); }
    }
    .resident-full-card.highlight-resident {
      animation: residentHighlight 1.2s ease forwards;
    }
    .resident-card-top {
      background: linear-gradient(135deg, var(--vert-fonce), var(--vert-moyen));
      padding: 2rem 1.5rem 1.5rem;
      text-align: center;
      position: relative;
    }
    .resident-card-top .big-emoji {
      font-size: 4rem;
      display: block;
      margin-bottom: 0.5rem;
    }
    .resident-card-top h3 {
      font-family: 'Playfair Display', serif;
      color: var(--creme);
      font-size: 1.4rem;
    }
    .resident-card-top .sexe-badge {
      position: absolute;
      top: 1rem;
      right: 1rem;
      font-size: 1.2rem;
    }
    .resident-card-body { padding: 1.3rem 1.5rem 1.5rem; }
    .resident-tag {
      display: inline-block;
      background: var(--creme);
      color: var(--vert-fonce);
      font-size: 0.72rem;
      font-weight: 700;
      padding: 0.2rem 0.6rem;
      border-radius: 10px;
      margin-bottom: 0.8rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    .resident-tag.special {
      background: var(--terre-claire);
      color: var(--texte);
    }
    .resident-card-body p {
      font-size: 0.92rem;
      color: var(--gris-chaud);
      line-height: 1.6;
    }
    .resident-photos-link,
    .resident-parrain-link {
      display: inline-block;
      font-size: 0.82rem;
      font-weight: 700;
      text-decoration: none;
      border-radius: 20px;
      padding: 0.3rem 0.9rem;
      transition: background 0.2s, color 0.2s;
    }
    .resident-photos-link {
      margin-top: 0.8rem;
      color: var(--vert-moyen);
      border: 1.5px solid var(--vert-moyen);
    }
    .resident-photos-link:hover {
      background: var(--vert-moyen);
      color: white;
    }
    .resident-links-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-top: 0.8rem;
    }
    .resident-links-row .resident-photos-link { margin-top: 0; }
    .resident-parrain-link {
      color: #c0392b;
      border: 1.5px solid #c0392b;
    }
    .resident-parrain-link:hover {
      background: #c0392b;
      color: white;
    }
    .parrain-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 28px;
      background: rgba(0,0,0,0.52);
      overflow: hidden;
      display: flex;
      align-items: center;
      z-index: 2;
    }
    .parrain-overlay-label {
      flex-shrink: 0;
      color: rgba(255,255,255,0.75);
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 0 0.7rem 0 0.8rem;
      border-right: 1px solid rgba(255,255,255,0.25);
      white-space: nowrap;
    }
    .parrain-overlay-scroll {
      flex: 1;
      overflow: hidden;
      display: flex;
      align-items: center;
    }
    .parrain-overlay-track {
      display: flex;
      white-space: nowrap;
      will-change: transform;
    }
    @keyframes parrain-scroll {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
    .parrain-overlay-item {
      color: #fff;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      padding: 0 2rem;
    }
    .resident-parrains {
      margin-top: 0.5rem;
      font-size: 0.8rem;
      color: var(--gris-chaud);
    }
    .parrain-name {
      background: #f0f9f4;
      border: 1px solid #b2dfdb;
      border-radius: 12px;
      padding: 0.1rem 0.5rem;
      margin-left: 0.3rem;
      font-weight: 600;
      color: var(--vert-fonce);
    }
    .resident-info-row {
      display: flex;
      gap: 0.5rem;
      margin-top: 0.8rem;
      flex-wrap: wrap;
    }
    .info-pill {
      background: var(--creme);
      border: 1px solid rgba(58,90,46,0.15);
      color: var(--vert-fonce);
      font-size: 0.78rem;
      padding: 0.2rem 0.7rem;
      border-radius: 12px;
      font-weight: 700;
    }
    .resident-full-card.has-photo .resident-card-top {
      padding: 1rem 1.5rem 1rem;
    }
    .resident-card-photo {
      width: 100%;
      height: 320px;
      overflow: hidden;
      position: relative;
      border-radius: 18px 18px 0 0;
    }
    .resident-card-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      display: block;
    }
    .resident-specs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.4rem 0.8rem;
      margin-bottom: 0.9rem;
      padding: 0.7rem;
      background: var(--creme);
      border-radius: 10px;
    }
    .spec {
      display: flex;
      flex-direction: column;
      gap: 0.1rem;
    }
    .spec-label {
      font-size: 0.68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--gris-chaud);
    }
    .spec-value {
      font-size: 0.85rem;
      color: var(--texte);
      font-weight: 600;
    }
    .sexe-badge.female { color: #e96aa0; }
    .sexe-badge.male { color: #6aade9; }
    .duo-card {
      grid-column: span 2;
      background: var(--blanc);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 4px 24px var(--ombre);
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
    .duo-left {
      background: linear-gradient(135deg, var(--vert-fonce), #2c4a22);
      padding: 2.5rem 2rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: var(--creme);
    }
    .duo-left .emojis {
      font-size: 3.5rem;
      margin-bottom: 0.8rem;
    }
    .duo-left h3 {
      font-family: 'Playfair Display', serif;
      font-size: 1.8rem;
      margin-bottom: 0.5rem;
    }
    .duo-left p {
      opacity: 0.8;
      font-size: 0.95rem;
    }
    .duo-right {
      padding: 2rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0.8rem;
    }
    .duo-right p {
      font-size: 0.95rem;
      color: var(--gris-chaud);
    }
    .chiffres-section {
      background: var(--blanc);
      padding: 3rem 2rem;
      margin-bottom: 0;
    }
    .chiffres-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 1.5rem;
      margin-top: 2rem;
    }
    .chiffre-box {
      background: linear-gradient(135deg, var(--vert-fonce), var(--vert-moyen));
      border-radius: 16px;
      padding: 1.5rem 1rem;
      text-align: center;
      color: var(--creme);
      text-decoration: none;
      display: block;
      transition: transform 0.2s, box-shadow 0.2s;
      cursor: pointer;
    }
    .chiffre-box:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(58,42,30,0.2);
    }
    .chiffre-box .big {
      font-family: 'Playfair Display', serif;
      font-size: 2.5rem;
      font-weight: 700;
      color: var(--terre-claire);
      display: block;
    }
    .chiffre-box .small {
      font-size: 0.85rem;
      opacity: 0.8;
      margin-top: 0.3rem;
    }
    .residents-adoption-cta {
      background: linear-gradient(135deg, var(--terre) 0%, #6b4028 100%);
      padding: 4rem 2rem;
      text-align: center;
      color: var(--creme);
    }
    .residents-adoption-cta h2 {
      font-family: 'Playfair Display', serif;
      font-size: 2rem;
      margin-bottom: 1rem;
    }
    .residents-adoption-cta p {
      opacity: 0.85;
      max-width: 560px;
      margin: 0 auto 2rem;
      font-size: 1.05rem;
    }
    .res-modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(10,18,6,0.75);
      z-index: 9000;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }
    .res-modal-overlay.open { display: flex; }
    .res-modal {
      background: var(--blanc);
      border-radius: 18px;
      width: 100%;
      max-width: 680px;
      max-height: 90vh;
      overflow-y: auto;
      position: relative;
      box-shadow: 0 20px 60px rgba(0,0,0,0.4);
      animation: res-modal-in 0.22s ease;
    }
    @keyframes res-modal-in {
      from { opacity: 0; transform: translateY(16px) scale(0.97); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .res-modal-close {
      position: absolute;
      top: 0.8rem;
      right: 0.8rem;
      background: rgba(0,0,0,0.35);
      border: none;
      color: white;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      font-size: 1.1rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 20;
      transition: background 0.15s;
    }
    .res-modal-close:hover { background: rgba(0,0,0,0.6); }
    .res-modal-slider {
      position: relative;
      border-radius: 18px 18px 0 0;
      overflow: hidden;
      background: var(--vert-fonce);
    }
    .res-slider-track {
      display: flex;
      height: 420px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .res-slider-track::-webkit-scrollbar { display: none; }
    .res-slider-slide {
      min-width: 100%;
      height: 420px;
      flex-shrink: 0;
      scroll-snap-align: start;
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #1a2810;
    }
    .res-slider-slide::before {
      content: '';
      position: absolute;
      inset: -20px;
      z-index: 0;
      background: var(--slide-bg, #1a2810) center/cover no-repeat;
      filter: blur(18px) brightness(0.45);
    }
    .res-slider-slide img {
      position: relative;
      z-index: 1;
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      object-fit: contain;
      display: block;
    }
    .res-slider-slide .res-slider-emoji {
      font-size: 6rem;
      color: var(--creme);
      position: relative;
      z-index: 1;
    }
    .res-slider-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(to top, rgba(10,18,6,0.85) 0%, transparent 70%);
      padding: 2rem 1.5rem 1rem;
      pointer-events: none;
    }
    .res-slider-overlay h2 {
      font-family: 'Playfair Display', serif;
      color: var(--creme);
      font-size: clamp(1.4rem, 3vw, 1.9rem);
      margin: 0.3rem 0 0.4rem;
    }
    .res-slider-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0,0,0,0.4);
      border: none;
      color: white;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      font-size: 1.1rem;
      cursor: pointer;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s;
      opacity: 0;
      pointer-events: none;
    }
    .res-modal-slider:hover .res-slider-arrow { opacity: 1; pointer-events: auto; }
    .res-slider-arrow:hover { background: rgba(0,0,0,0.65); }
    .res-slider-arrow.prev { left: 0.6rem; }
    .res-slider-arrow.next { right: 0.6rem; }
    .res-slider-arrow[disabled] { opacity: 0 !important; pointer-events: none; }
    .res-slider-dots {
      position: absolute;
      bottom: 0.5rem;
      width: 100%;
      display: flex;
      justify-content: center;
      gap: 6px;
      z-index: 3;
    }
    .res-slider-dot {
      height: 6px;
      width: 6px;
      border-radius: 3px;
      background: rgba(255,255,255,0.45);
      transition: all 0.25s;
      cursor: pointer;
    }
    .res-slider-dot.active { width: 18px; background: white; }
    .res-modal-body { padding: 1.4rem 1.6rem 1.8rem; }
    .res-modal-specs {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 1.4rem;
      margin-bottom: 1rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid var(--creme);
    }
    .res-modal-specs .spec { display: flex; flex-direction: column; }
    .res-modal-specs .spec-label {
      font-size: 0.7rem;
      color: #aaa;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .res-modal-specs .spec-value {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--texte);
    }
    .res-modal-desc {
      font-size: 0.93rem;
      color: var(--gris-chaud);
      line-height: 1.7;
      margin-bottom: 1.1rem;
    }
    .res-modal-section {
      margin-bottom: 0.9rem;
      font-size: 0.92rem;
      color: var(--gris-chaud);
    }
    .res-modal-section strong {
      color: var(--texte);
      display: block;
      margin-bottom: 0.2rem;
    }
    .res-modal-gallery-title {
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--vert-fonce);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin: 1.2rem 0 0.5rem;
    }
    .res-modal-gallery {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      margin-bottom: 1.4rem;
    }
    .res-modal-gallery-thumb {
      display: block;
      border-radius: 8px;
      overflow: hidden;
      aspect-ratio: 1;
    }
    .res-modal-gallery-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.2s;
    }
    .res-modal-gallery-thumb:hover img { transform: scale(1.07); }
    .res-modal-actions {
      display: flex;
      gap: 0.7rem;
      flex-wrap: wrap;
      padding-top: 1rem;
      border-top: 1px solid var(--creme);
    }
    .res-modal-actions a,
    .res-modal-actions button {
      flex: 1;
      min-width: 130px;
      text-align: center;
      padding: 0.65rem 1rem;
      border-radius: 30px;
      font-size: 0.88rem;
      font-weight: 700;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
      border: none;
    }
    .res-modal-actions .btn-secondary {
      background: transparent;
      color: var(--vert-moyen);
      border: 2px solid var(--vert-moyen) !important;
    }
    .res-modal-actions .btn-secondary:hover { background: var(--vert-moyen); color: white; }
    .res-modal-actions .btn-primary {
      background: var(--vert-fonce);
      color: var(--creme);
      border: 2px solid var(--vert-fonce) !important;
    }
    .res-modal-actions .btn-primary:hover { background: var(--vert-moyen); border-color: var(--vert-moyen) !important; }
    .res-card-hint {
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--vert-moyen);
    }
    .res-compact-specs {
      font-size: 0.82rem;
      color: var(--gris-chaud);
      margin: 0.3rem 0 0;
    }
    .res-card-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 0.8rem;
      gap: 0.5rem;
    }
    .res-card-parrain {
      font-size: 0.75rem;
      font-weight: 700;
      padding: 0.3rem 0.7rem;
      border-radius: 20px;
      background: var(--vert-fonce);
      color: var(--creme);
      border: none;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.15s;
    }
    .res-card-parrain:hover { background: var(--vert-moyen); }
    .residents-hero-badge {
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.2);
      color: var(--terre-claire);
      padding: 0.4rem 1rem;
      border-radius: 20px;
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      display: inline-block;
      margin-bottom: 1rem;
    }
    .residents-hero-cta {
      margin-top: 1.8rem;
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      background: rgba(255,255,255,0.1);
      border: 1.5px solid rgba(255,255,255,0.25);
      border-radius: 20px;
      padding: 1rem 1.8rem;
    }
    .residents-hero-copy { text-align: left; }
    .residents-hero-title {
      font-size: 1rem;
      font-weight: 700;
      color: var(--creme);
    }
    .residents-hero-note {
      font-size: 0.82rem;
      color: rgba(245,240,232,0.75);
      margin-top: 0.2rem;
    }
    .residents-hero-actions {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      flex-shrink: 0;
    }
    .residents-hero-btn {
      white-space: nowrap;
      text-align: center;
    }
    .residents-hero-btn-primary {
      border-color: rgba(255,255,255,0.5);
      color: var(--creme);
    }
    .residents-hero-btn-secondary {
      border-color: rgba(255,255,255,0.3);
      color: rgba(245,240,232,0.8);
      font-size: 0.82rem;
    }
    .residents-faq-section {
      background: var(--creme);
      padding: 3rem 0;
    }
    .residents-faq-wrap { max-width: 780px; }
    .residents-faq-title {
      text-align: center;
      margin-bottom: 2rem;
    }
    .residents-faq-link-wrap {
      text-align: center;
      margin-top: 2rem;
    }
    .residents-faq-link {
      border-color: var(--vert-fonce);
      color: var(--vert-fonce);
    }
    .residents-cta-btn {
      background: var(--creme);
      color: var(--vert-fonce);
      font-weight: 700;
    }
    .residents-cta-btn-primary { margin-right: 0.8rem; }
    @media (max-width: 700px) {
      .residents-layout { flex-direction: column; }
      #sidebar-categories {
        width: 100%;
        position: static;
        max-height: none;
        display: flex;
        flex-wrap: wrap;
        gap: 0.3rem;
        padding: 0.5rem;
      }
      #sidebar-categories .sid-title { display: none; }
      #sidebar-categories .sid-btn {
        width: auto;
        border-radius: 20px;
        border: 1.5px solid var(--vert-clair);
        padding: 0.3rem 0.7rem;
      }
    }
    @media (max-width: 640px) {
      .residents-hero-cta {
        width: 100%;
        padding: 1rem 1rem 1.2rem;
      }
      .residents-hero-copy { text-align: center; }
      .residents-hero-actions { width: 100%; }
    }
    @media (max-width: 600px) {
      .duo-card {
        grid-column: span 1;
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 480px) {
      .residents-cards {
        grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
        gap: 1rem;
      }
      .chiffres-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
      }
    }

/* ===== ADOPTION — GRILLE ANIMAUX (extrait depuis adoption.html) ===== */
.adoption-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
}

.animal-card {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 24px var(--ombre);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}
.animal-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.13);
}

.animal-photo-wrap {
  position: relative;
  width: 100%;
  height: 240px;
  overflow: hidden;
  background: #e8e4df;
}
.animal-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.animal-card:hover .animal-photo-wrap img {
  transform: scale(1.04);
}

.animal-statut {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.3rem 0.9rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.statut-urgent { background: #e8622a; color: white; }
.statut-disponible { background: var(--vert-moyen); color: white; }
.statut-reserve { background: #f0b429; color: white; }
.statut-adopte { display: none; }

.animal-card.is-adopte .animal-photo-wrap::after {
  content: '🏡 Adopté !';
  position: absolute;
  inset: 0;
  background: rgba(40, 40, 40, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 900;
  color: white;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  border-radius: 0;
}
.animal-card.is-adopte {
  opacity: 0.75;
}
.animal-card.is-adopte .animal-cta { display: none; }
.animal-card.is-adopte .animal-nom::after {
  content: ' ✓';
  color: #aaa;
  font-size: 0.9rem;
}

.animal-body {
  padding: 1.4rem 1.6rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  flex: 1;
}

.animal-nom {
  font-family: 'Playfair Display', serif;
  font-size: 1.45rem;
  color: var(--vert-fonce);
  margin: 0;
}

.animal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.animal-meta-tag {
  background: var(--creme);
  color: var(--vert-fonce);
  border-radius: 12px;
  padding: 0.25rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
}

.animal-desc {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.65;
  flex: 1;
}
.animal-desc p { margin: 0 0 0.6rem; }
.animal-desc p:first-child { margin-top: 0; }
.animal-desc p:last-child { margin-bottom: 0; }
.animal-desc br + br { display: block; margin-top: 0.4rem; content: ""; }

.animal-besoins {
  background: #f6f4f1;
  border-left: 3px solid var(--vert-moyen);
  border-radius: 0 10px 10px 0;
  padding: 0.7rem 1rem;
  font-size: 0.83rem;
  color: #444;
}
.animal-besoins strong {
  display: block;
  color: var(--vert-fonce);
  margin-bottom: 0.2rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.animal-cta {
  margin-top: 0.4rem;
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.animal-cta a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.2rem;
  border-radius: 30px;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.15s;
}
.animal-cta a:hover { opacity: 0.85; transform: translateY(-1px); }
.btn-adopt { background: var(--vert-moyen); color: white; }

/* ===== ADOPTION — FILTRES ===== */
.adoption-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

/* ===== ADOPTION — ENCART URGENCE ===== */
.urgence-banner {
  background: linear-gradient(135deg, #e8622a, #c94c1a);
  color: white;
  border-radius: 20px;
  padding: 1.6rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.urgence-banner .urgence-icon {
  font-size: 2.8rem;
  flex-shrink: 0;
}
.urgence-banner h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  margin-bottom: 0.3rem;
}
.urgence-banner p {
  font-size: 0.9rem;
  opacity: 0.9;
  margin: 0;
}

/* ===== ADOPTION — EMPTY STATE ===== */
.adoption-empty .empty-icon { font-size: 3.5rem; margin-bottom: 1rem; }

/* ===== ADOPTION — PROCESS STEPS ===== */
.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.process-step {
  text-align: center;
  padding: 1.5rem;
  background: white;
  border-radius: 16px;
  box-shadow: 0 2px 12px var(--ombre);
}
.process-step .step-num {
  width: 40px; height: 40px;
  background: var(--vert-moyen);
  color: white;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.1rem;
  margin: 0 auto 0.8rem;
}
.process-step h4 {
  font-size: 0.95rem;
  color: var(--vert-fonce);
  margin-bottom: 0.4rem;
}
.process-step p {
  font-size: 0.82rem;
  color: var(--gris-chaud);
  margin: 0;
}
@media (max-width: 480px) {
  .adoption-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .adoption-filters { gap: 0.4rem; }
  .filter-btn { font-size: 0.8rem; padding: 0.5rem 0.9rem; }
}

/* ===== LEGS — classes manquantes (migration depuis legs.html) ===== */
.dispo-badge {
  display: inline-block;
  background: rgba(245, 200, 66, 0.18);
  border: 1.5px solid rgba(245, 200, 66, 0.55);
  color: #f5e8a0;
  border-radius: 30px;
  padding: 0.5rem 1.4rem;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.legs-types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
@media (max-width: 768px) {
  .legs-types { grid-template-columns: 1fr; }
}
.legs-type-card {
  background: var(--blanc);
  border-radius: 16px;
  padding: 1.8rem 1.5rem;
  border: 1.5px solid rgba(58, 90, 46, 0.12);
  box-shadow: 0 2px 12px rgba(58, 42, 30, 0.06);
  transition: transform 0.2s, box-shadow 0.2s;
}
.legs-type-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(58, 42, 30, 0.12);
}
.legs-type-card .card-icon {
  font-size: 2rem;
  margin-bottom: 0.8rem;
  display: block;
}
.legs-type-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  color: var(--vert-fonce);
  margin-bottom: 0.6rem;
}
.legs-type-card p {
  font-size: 0.9rem;
  color: var(--gris-chaud);
  line-height: 1.6;
}

.avantages-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
@media (max-width: 640px) {
  .avantages-grid { grid-template-columns: 1fr; }
}
.avantage-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.avantage-item .av-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.avantage-item h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--vert-fonce);
  margin-bottom: 0.3rem;
}
.avantage-item p {
  font-size: 0.9rem;
  color: var(--gris-chaud);
  line-height: 1.6;
}

.legs-quote {
  background: linear-gradient(135deg, #2a3e20, #3a5a2e);
  color: var(--creme);
  border-radius: 20px;
  padding: 3rem 2.5rem;
  text-align: center;
  margin-top: 1rem;
}
.legs-quote p {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.15rem, 2.5vw, 1.4rem);
  line-height: 1.6;
  opacity: 0.95;
}
.legs-quote .quote-sub {
  font-family: 'Lato', sans-serif;
  font-size: 0.85rem;
  opacity: 0.65;
  margin-top: 1rem;
}

.legs-faq { margin-top: 2.5rem; }
.legs-faq details {
  border-bottom: 1px solid rgba(58, 90, 46, 0.12);
  padding: 1rem 0;
}
.legs-faq details summary {
  font-weight: 700;
  color: var(--vert-fonce);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.legs-faq details summary::-webkit-details-marker { display: none; }
.legs-faq details summary::after {
  content: '+';
  font-size: 1.3rem;
  color: var(--vert-moyen);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.legs-faq details[open] summary::after { transform: rotate(45deg); }
.legs-faq details p {
  padding-top: 0.8rem;
  font-size: 0.95rem;
  color: var(--gris-chaud);
  line-height: 1.7;
}

/* ===== LEGS — classes manquantes (faux positifs substring check) ===== */
.legs-notice {
  background: linear-gradient(90deg, #fff3cd, #fff8e1);
  border-top: 3px solid #f5c842;
  border-bottom: 3px solid #f5c842;
  padding: 1.4rem 2rem;
  text-align: center;
  font-size: 1rem;
  color: #4a3a08;
}
.legs-notice strong { color: #2a1e00; font-size: 1.05rem; }
.legs-notice .notice-date {
  display: inline-block;
  background: #f5c842;
  color: #2a1e00;
  font-weight: 900;
  border-radius: 6px;
  padding: 0.1rem 0.6rem;
  font-size: 1rem;
  margin: 0 0.2rem;
}

.legs-section { padding: 4.5rem 2rem; }
.legs-section.alt { background: var(--blanc); }
.legs-section .container { max-width: 900px; margin: 0 auto; }

.legs-cta {
  background: var(--creme);
  text-align: center;
  padding: 4rem 2rem;
}
.legs-cta h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--vert-fonce);
  margin-bottom: 1rem;
}
.legs-cta p {
  color: var(--gris-chaud);
  max-width: 520px;
  margin: 0 auto 2rem;
  font-size: 0.98rem;
  line-height: 1.7;
}

/* ===== PAGE 404 ============================================== */
.not-found-wrap {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.5rem;
}
.not-found-code {
  font-size: clamp(5rem, 18vw, 9rem);
  font-weight: 900;
  line-height: 1;
  color: var(--vert-clair, #8fb87a);
  opacity: 0.35;
  letter-spacing: -0.04em;
  margin: 0 0 0.5rem;
}
.not-found-wrap h1 {
  font-size: clamp(1.4rem, 4vw, 2rem);
  color: var(--vert-fonce, #3a5a2e);
  margin: 0 0 0.75rem;
}
.not-found-wrap p {
  font-size: 1rem;
  color: var(--gris-chaud, #6b6259);
  max-width: 480px;
  margin: 0 auto 2rem;
  line-height: 1.6;
}
.not-found-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}
.not-found-links a {
  display: inline-block;
  padding: 0.65rem 1.4rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: opacity 0.2s, transform 0.15s;
}
.not-found-links a:hover { opacity: 0.85; transform: translateY(-1px); }
.btn-primary-404 {
  background: var(--vert-fonce, #3a5a2e);
  color: #fff;
}
.btn-outline-404 {
  border: 2px solid var(--vert-moyen, #5a7f48);
  color: var(--vert-fonce, #3a5a2e);
}

/* ── Témoignages page ── */
.tab-btn, .rating-btn {
  border: 1px solid #cfd8dc; background: #fff; color: #666;
  padding: .6rem 1.2rem; border-radius: 24px; font-weight: 600; cursor: pointer;
  font-size: .88rem;
}
.rating-btn { padding: .3rem .8rem; font-size: .85rem; border-radius: 20px; }
.tab-btn.active, .rating-btn.active {
  background: var(--vert-fonce, #1a4d6e); color: #fff; border-color: var(--vert-fonce, #1a4d6e);
}
.temoignages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.4rem; margin: 0 0 2rem;
}
.temoignage-card {
  background: #fff; border-radius: 14px; padding: 1.5rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06); border: 1px solid #f0e8d8;
  position: relative; transition: transform .2s, box-shadow .2s;
}
.temoignage-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.temoignage-card .quote-mark { font-size: 3rem; line-height: 1; color: #e8d4a0; position: absolute; top: .5rem; left: 1rem; font-family: serif; font-weight: 800; }
.temoignage-card .source-badge { position: absolute; top: .8rem; right: 1rem; font-size: .72rem; padding: .2rem .5rem; border-radius: 12px; font-weight: 600; }
.temoignage-card .source-badge.google { background: #4285f4; color: #fff; }
.temoignage-card .source-badge.site   { background: var(--vert-fonce, #1a4d6e); color: #fff; }
.temoignage-card .text { font-style: italic; color: #333; line-height: 1.6; margin: 1.5rem 0 1rem; }
.temoignage-card .author { font-weight: 700; color: var(--vert-fonce, #1a4d6e); margin: 0; }
.temoignage-card .role { font-size: .85rem; color: #888; margin: .2rem 0 0; }
.temoignage-card .stars { color: #f4a72d; font-size: 1rem; margin-bottom: .5rem; letter-spacing: .05em; }
.temoignage-card .relative-time { font-size: .78rem; color: #aaa; margin-top: .4rem; }
.testim-empty, .testim-error { text-align: center; grid-column: 1 / -1; padding: 2rem; }
.testim-empty { color: #888; }
.testim-error { color: #c0392b; }
/* Rating summary */
#rating-summary { display: none; margin-top: 1.5rem; text-align: center; }
#rating-summary.is-visible { display: block; }
.rating-sum-stars { font-size: 2.4rem; font-weight: 800; color: #f4a72d; letter-spacing: .05em; }
.rating-sum-num { font-size: 1.2rem; font-weight: 600; color: var(--vert-fonce); margin: .3rem 0; }
#rating-source { color: #666; font-size: .9rem; text-decoration: underline; }
/* Tabs & filtres */
#testim-tabs { display: flex; gap: .5rem; margin-bottom: 1.5rem; justify-content: center; flex-wrap: wrap; }
#rating-filter { display: flex; gap: .4rem; margin-bottom: 1.5rem; justify-content: center; flex-wrap: wrap; font-size: .88rem; }
.filter-lbl { color: #666; align-self: center; }
.temoignages-grid .loading { text-align: center; color: #888; }
.testim-cta { margin: 3rem 0; display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.temoignages-container { padding: 2rem 1rem; }
/* Modal témoignage */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 5000; display: none; align-items: center; justify-content: center; padding: 1rem; }
.modal.is-open { display: flex; }
.modal-content { background: #fff; border-radius: 14px; padding: 2rem; max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto; }
.modal-title { margin-top: 0; }
.modal-note { font-size: .88rem; color: #666; }
.modal-label { display: block; font-weight: 600; margin: 1rem 0 .3rem; }
.modal-input { width: 100%; padding: .6rem; border: 1px solid #cfd8dc; border-radius: 6px; font-family: inherit; box-sizing: border-box; }
.modal-textarea { resize: vertical; }
#rating-stars-input { display: flex; gap: .3rem; font-size: 1.6rem; cursor: pointer; color: #f4a72d; }
.modal-hint { font-size: .78rem; color: #888; }
.modal-actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.4rem; }
#form-feedback { margin-top: 1rem; }
.feedback-ok { color: #2d7a3d; font-weight: 600; }
.feedback-err { color: #c0392b; }
/* Share buttons */
.share-buttons { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: 1rem 0; }
.share-lbl { font-size: .85rem; color: #666; }
.share-btn { padding: .5rem .8rem; border-radius: 6px; text-decoration: none; font-size: .85rem; font-weight: 600; color: #fff; }
.share-btn-fb    { background: #1877f2; }
.share-btn-x     { background: #000; }
.share-btn-wa    { background: #25d366; }
.share-btn-li    { background: #0a66c2; }
.share-btn-mail  { background: #666; }
.share-btn-copy  { background: #f0f0f0; color: #333; border: 1px solid #ddd; cursor: pointer; }
/* Map */
#refuge-map { width: 100%; height: 300px; border-radius: 12px; overflow: hidden; }
/* Badges SSR */
.badge-test {
  display: inline-block; background: #c0392b; color: #fff;
  font-size: 0.65rem; font-weight: 700; padding: 0.1rem 0.4rem;
  border-radius: 3px; letter-spacing: 0.05em; vertical-align: middle;
  margin-right: 0.35rem;
}
.badge-fictif {
  display: inline-block; background: #c0392b; color: #fff;
  font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.5rem;
  border-radius: 4px; letter-spacing: 0.05em; vertical-align: middle;
  margin-right: 0.4rem;
}
/* SSR agenda card */
.ssr-agenda-card {
  display: grid; grid-template-columns: 90px 1fr; gap: 1rem;
  align-items: center; background: var(--creme); border-radius: 14px;
  padding: 1rem 1.2rem; margin-bottom: 0.8rem;
}
.ssr-agenda-card--test { border-left: 4px solid #c0392b; background: #fff8f7; }
.ssr-agenda-date {
  text-align: center;
  background: linear-gradient(135deg, var(--vert-fonce), var(--vert-moyen));
  border-radius: 10px; padding: 0.7rem 0.5rem; color: var(--creme);
}
.ssr-agenda-day { font-family: serif; font-size: 1.8rem; font-weight: 700; color: var(--terre-claire); line-height: 1; }
.ssr-agenda-month { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.85; }
.ssr-agenda-year { font-size: 0.65rem; opacity: 0.55; }
.ssr-agenda-title { font-family: serif; color: var(--vert-fonce); font-size: 1rem; }
.ssr-agenda-meta { font-size: 0.8rem; color: var(--gris-chaud); margin-top: 0.25rem; }
/* Agenda page */
.event-nav-links { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; align-items: center; }
.nav-link-maps { display: inline-flex; align-items: center; gap: 0.3rem; background: #4285F4; color: #fff !important; font-size: 0.75rem; font-weight: 700; padding: 0.3rem 0.7rem; border-radius: 20px; text-decoration: none; }
.nav-link-waze { display: inline-flex; align-items: center; gap: 0.3rem; background: #00C8F8; color: #1a1a1a !important; font-size: 0.75rem; font-weight: 700; padding: 0.3rem 0.7rem; border-radius: 20px; text-decoration: none; }
.nav-link-apple { display: inline-flex; align-items: center; gap: 0.3rem; background: #555; color: #fff !important; font-size: 0.75rem; font-weight: 700; padding: 0.3rem 0.7rem; border-radius: 20px; text-decoration: none; }
.agenda-empty-state { padding: 2rem 0 1rem; }
.agenda-next-label { margin-bottom: 1.2rem; }
.link-vert-moyen { color: var(--vert-moyen) !important; }
/* ils-parlent-de-nous */
.featured-card-date { font-size: 0.78rem; opacity: 0.65; }
.featured-card-diffusion { margin-top: 0.8rem; font-size: 0.85rem; opacity: 0.7; }
.presse-badge { font-size: 0.75rem; color: var(--vert-moyen); font-weight: 700; }
/* Dynamic styles via data-* attributes (applied by footer.js) */
.is-hidden { display: none !important; }

/* ── CSP-safe helpers (replaces inline style= in JS templates) ── */
/* Badge source auto */
.source-auto-badge {
  font-size: 0.7rem; background: #f0f0f0; color: #888;
  padding: 0.1rem 0.4rem; border-radius: 8px;
}
/* Liens vert-moyen gras (formatContact, adoption, etc.) */
.link-vert-bold { color: var(--vert-moyen) !important; font-weight: 700; }
/* Messages vides/erreur dans des grilles */
.grid-empty {
  text-align: center; padding: 2rem; color: var(--gris-chaud);
  grid-column: 1 / -1;
}
.grid-error {
  text-align: center; padding: 3rem; color: var(--gris-chaud);
}
.grid-error-red {
  text-align: center; padding: 3rem; color: red;
}
/* Placeholder emoji quand pas de photo dans une card */
.photo-no-photo {
  display: flex; align-items: center; justify-content: center;
  height: 100%; font-size: 4rem;
}
/* animal-besoins avec border-left colorée (adoption-page) */
.animal-besoins-externe {
  border-left-color: #e67e22;
  margin-top: 0.5rem;
}
.animal-besoins-directe {
  border-left-color: #0084FF;
  margin-top: 0.5rem;
}
/* sous-texte dans animal-besoins */
.animal-besoins-sub {
  margin-top: 0.3rem; font-size: 0.87rem; color: #555;
}
.animal-besoins-sub-nomt {
  font-size: 0.87rem; color: #555; margin-top: 0.3rem;
}
/* Badges source sur photo (position:absolute) */
.source-badge-photo {
  position: absolute; bottom: 8px; left: 8px;
  font-size: 0.68rem; font-weight: 700;
  padding: 0.2rem 0.55rem; border-radius: 12px; letter-spacing: 0.03em;
}
.source-badge-secondechance {
  background: rgba(230, 126, 34, 0.92); color: white;
}
.source-badge-directe {
  background: rgba(46, 125, 50, 0.92); color: white;
}
/* btn-adopt variante Seconde Chance */
.btn-adopt-terre { background: var(--terre) !important; }
/* animal-meta-tag couleur vert foncé */
.animal-tag-vert {
  background: var(--vert-fonce) !important; color: var(--creme) !important;
}
/* Partenaire sans URL (curseur normal) */
.cursor-default { cursor: default; }
/* resident-card-photo position (inline style removed) */
.resident-card-photo { position: relative; }
/* Logos inline (replaceLinksWithLogos) */
.logo-img-inline {
  height: var(--logo-h, 38px); vertical-align: middle;
  display: block; background: none;
}
/* Animation parrain scroll : speed transmise via data-parrain-speed + JS */
/* (la durée est dynamique — voir footer.js applicateur data-parrain-speed) */

/* Visites list items (contact-page) */
.visites-item { display: flex; gap: 0.7rem; }
.visites-check { color: var(--terre-claire); }
.visites-text { opacity: 0.85; }

/* Portrait qa-answer avec animal chip (visages-page) */
.portrait-qa-p { margin-top: 0.7rem; }

/* Sexe badge grand (résidents modal) */
.sexe-badge-lg { font-size: 1.3rem; }

/* ── Footer mobile ── */
@media (max-width: 640px) {
  footer {
    padding: 1.5rem 1rem 1rem;
    font-size: 0.82rem;
  }
  footer .footer-logo {
    font-size: 1.15rem;
    margin-bottom: 0.4rem;
  }
  footer nav {
    gap: 0.3rem 0.9rem;
    margin: 0.6rem 0;
  }
  footer nav a { font-size: 0.8rem; }
  .footer-copyright { margin-top: 0.7rem; }
  .footer-subnav { margin-top: 0.5rem; gap: 0 1rem; }
  .footer-version { font-size: 0.72rem; }
}