/* ============================================================
   RN-ASLUT — Réseau National des Associations de Lutte
   contre la Tuberculose — Feuille de style principale
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Public+Sans:wght@400;500;600;700&display=swap');

:root{
  /* --- Couleurs --- */
  --ink:        #1C2620;   /* texte principal, presque noir mais chaud */
  --ink-soft:   #4A554D;   /* texte secondaire */
  --paper:      #FAF7F0;   /* fond de page */
  --paper-dim:  #F1EBDC;   /* fond de section alterné */
  --teal:       #0F4C3A;   /* couleur primaire — confiance, santé */
  --teal-dark:  #0A362A;
  --ochre:      #D68A2D;   /* accent chaleur / communauté */
  --rust:       #C1440E;   /* accent alerte / appel à l'action */
  --line:       #DCD3BE;   /* lignes de séparation */
  --white:      #FFFFFF;

  /* --- Typographie --- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Public Sans', -apple-system, Segoe UI, sans-serif;

  /* --- Rayons --- */
  --radius-s: 4px;
  --radius-m: 10px;
}

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

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 17px;
}

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

a{ color: inherit; }

h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 .5em;
  color: var(--teal-dark);
}

h1{ font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 500; }
h2{ font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3{ font-size: 1.3rem; }

p{ margin: 0 0 1em; max-width: 66ch; }

.container{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

section{ padding: 72px 0; }
.section-tight{ padding: 48px 0; }
.section-dim{ background: var(--paper-dim); }
.section-teal{ background: var(--teal); color: var(--white); }
.section-teal h2, .section-teal h3{ color: var(--white); }

.eyebrow{
  font-size: .8rem;
  letter-spacing: .02em;
  color: var(--ochre);
  font-weight: 600;
  margin-bottom: .6em;
}

/* ---------- Boutons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--radius-s);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn::before{
  content:''; position:absolute; inset:0; border-radius: inherit;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .5s ease;
  pointer-events: none;
}
.btn:hover::before{ transform: translateX(120%); }
.btn:hover{ transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 22px rgba(15,76,58,.16); }
.btn:active{ transform: translateY(0) scale(.98); }
.btn-primary{ background: var(--rust); color: var(--white); }
.btn-primary:hover{ background: #A6390B; }
.btn-outline{ background: transparent; border-color: currentColor; }
.btn-outline:hover{ background: rgba(255,255,255,.08); }
.btn-dark-outline{ background: transparent; border-color: var(--teal); color: var(--teal); }
.btn-dark-outline:hover{ background: var(--teal); color: var(--white); }
.heart-icon{ display:inline-block; font-style:normal; transition: transform .3s ease; }
.btn:hover .heart-icon{ animation: heartBeat .6s ease-in-out infinite; }
@keyframes heartBeat{
  0%, 100%{ transform: scale(1); }
  25%{ transform: scale(1.3) rotate(-6deg); }
  50%{ transform: scale(1.05); }
  75%{ transform: scale(1.25) rotate(6deg); }
}

.btn-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 1.6em; }

/* ---------- En-tête / navigation ---------- */
header.site-header{
  position: sticky; top:0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 24px;
  max-width: 1180px; margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-mark{
  width:42px; height:42px; border-radius: 50%;
  background: var(--teal); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; font-size:1.05rem;
  flex-shrink:0;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), background .2s ease;
}
.brand-mark-img{
  width: auto; height: 60px; max-width: 160px;
  border-radius: 6px;
  object-fit: contain; background: var(--white); border: 1px solid var(--line); padding: 4px;
}
.brand:hover .brand-mark{ transform: rotate(360deg) scale(1.08); background: var(--ochre); }
.brand:hover .brand-mark-img{ background: var(--white); }
.brand-text strong{ display:block; font-family: var(--font-display); font-size:1.05rem; color:var(--teal-dark); line-height:1.1; }
.brand-text span{ display:block; font-size:.72rem; color: var(--ink-soft); letter-spacing:.03em; }

nav.main-nav{ display:flex; align-items:center; gap: 28px; }
nav.main-nav a{
  position: relative;
  text-decoration:none; font-size:.92rem; font-weight:600; color: var(--ink);
  padding: 6px 0; border-bottom: 2px solid transparent;
  transition: color .2s ease;
}
nav.main-nav a::after{
  content:''; position:absolute; left:50%; right:50%; bottom:-2px; height:2px;
  background: var(--ochre); transition: left .25s ease, right .25s ease;
}
nav.main-nav a:hover::after, nav.main-nav a.active::after{ left:0; right:0; }
nav.main-nav a:hover, nav.main-nav a.active{ color: var(--teal); }

.nav-cta{ display:flex; align-items:center; gap:12px; }
.nav-toggle{ display:none; background:none; border:none; font-size:1.6rem; cursor:pointer; color:var(--teal-dark); transition: transform .2s ease; }
.nav-toggle:hover{ transform: scale(1.15) rotate(90deg); }

@media (max-width: 940px){
  nav.main-nav{
    position:absolute; top:100%; left:0; right:0;
    background: var(--paper); flex-direction:column; align-items:flex-start;
    padding: 12px 24px 20px; border-bottom:1px solid var(--line);
    display:none; gap:6px;
  }
  nav.main-nav.open{ display:flex; }
  .nav-toggle{ display:block; }
  .nav-cta .btn span{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  position: relative;
  overflow: hidden;
  padding: 120px 0 140px;
  color: var(--white);
  isolation: isolate;
  border-bottom: none;
}
.hero .bg-slideshow{ position: absolute; inset: 0; z-index: -2; }
.hero .bg-slide{
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.hero .bg-overlay{
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, rgba(10,54,42,.35) 0%, rgba(10,54,42,.25) 45%, rgba(20,32,26,.15) 100%);
}
.hero-grid{ max-width: 720px; }
.hero .eyebrow{ color: var(--ochre); text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 2px 10px rgba(0,0,0,.6); }
.hero h1{ margin-bottom:.4em; color: var(--white); text-shadow: 0 2px 4px rgba(0,0,0,.9), 0 4px 20px rgba(0,0,0,.65); }
.hero .lede{ font-size:1.15rem; color: rgba(255,255,255,.96); max-width: 52ch; text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 2px 14px rgba(0,0,0,.55); }
@media (max-width: 880px){ .hero{ padding: 90px 0 100px; } }

/* ---------- Bandeau de chiffres ---------- */
.stat-strip{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:0;
  border: 1px solid var(--line); border-radius: var(--radius-m); overflow:hidden;
  background: var(--white);
}
.stat-cell{
  padding: 26px 20px; border-right: 1px solid var(--line);
  transition: background .2s ease;
}
.stat-cell:hover{ background: var(--paper-dim); }
.stat-cell:last-child{ border-right:none; }
.stat-num{ font-family: var(--font-display); font-size:2.1rem; color: var(--teal-dark); font-weight:600; line-height:1; transition: transform .2s ease; }
.stat-cell:hover .stat-num{ transform: scale(1.06); }
.stat-num.tbd{ font-size:1.05rem; color: var(--ochre); font-weight:700; }
.stat-label{ font-size:.85rem; color: var(--ink-soft); margin-top:6px; }
.stat-source{ font-size:.72rem; color: var(--ink-soft); margin-top:14px; border-top:1px dashed var(--line); padding-top:10px; }
@media (max-width: 760px){ .stat-strip{ grid-template-columns: repeat(2,1fr);} .stat-cell:nth-child(2n){border-right:none;} .stat-cell{border-bottom:1px solid var(--line);} }

/* ---------- Grilles génériques ---------- */
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.grid-4{ display:grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
@media (max-width: 880px){ .grid-2,.grid-3,.grid-4{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .grid-2,.grid-3,.grid-4{ grid-template-columns: 1fr; } }

.section-head{ max-width: 640px; margin-bottom: 40px; }
.section-head p{ color: var(--ink-soft); }

/* ---------- Cartes ---------- */
.card{
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-m); padding: 26px;
  position: relative; overflow: hidden;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, border-color .25s ease;
}
.card::before{
  content:''; position:absolute; top:-40px; right:-40px; width:90px; height:90px; border-radius:50%;
  background: var(--paper-dim); transition: transform .4s ease, background .3s ease;
  transform: scale(0);
}
.card:hover::before{ transform: scale(1); background: rgba(214,138,45,.16); }
.card:hover{
  transform: translateY(-6px) rotate(-.4deg);
  box-shadow: 0 16px 32px rgba(15,76,58,.15);
  border-color: var(--teal);
}
.card h3{ margin-bottom:.4em; position:relative; transition: color .2s ease; }
.card:hover h3{ color: var(--teal-dark); }
.card p{ color: var(--ink-soft); font-size:.96rem; margin-bottom:0; position:relative; }

.pillar{
  border-left: 3px solid var(--ochre); padding-left: 20px;
  transition: transform .25s ease, border-color .25s ease, padding-left .25s ease;
}
.pillar:hover{ transform: translateX(6px); border-left-color: var(--teal); border-left-width: 5px; padding-left: 18px; }
.pillar h3{ margin-bottom:.3em; transition: color .2s ease; }
.pillar:hover h3{ color: var(--teal); }
.pillar p{ color: var(--ink-soft); }

/* ---------- FAQ (accordéon) ---------- */
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding: 20px 0; font-family: var(--font-display); font-size:1.06rem;
  color: var(--teal-dark); display:flex; justify-content:space-between; gap: 20px;
  align-items:center; transition: color .2s ease;
}
.faq-q:hover{ color: var(--teal); }
.faq-q::after{ content:'+'; font-size:1.4rem; color: var(--ochre); flex-shrink:0; transition: transform .2s; }
.faq-item.open .faq-q::after{ transform: rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .25s ease; }
.faq-a p{ padding-bottom: 20px; color: var(--ink-soft); }

/* ---------- Partenaires ---------- */
.partner-card{
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius-m);
  padding: 24px; text-align:center;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, border-color .25s ease;
}
.partner-card:hover{
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 32px rgba(15,76,58,.15);
  border-color: var(--teal);
}
.partner-mark{
  width:64px; height:64px; margin:0 auto 14px; border-radius:50%;
  background: var(--paper-dim); display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; color: var(--teal);
  transition: background .3s ease, transform .4s cubic-bezier(.34,1.56,.64,1), color .3s ease;
}
.partner-card:hover .partner-mark{ background: var(--teal); color: var(--white); transform: rotate(360deg) scale(1.1); animation-play-state: paused; }
.partner-card strong{ display:block; font-size:.95rem; }
.partner-card a{ font-size:.8rem; color: var(--teal); text-decoration:none; }

/* Logo partenaire en fond de carte (remplace le rond avec sigle quand une photo a été ajoutée) */
.partner-logo{
  width:100%; height:110px; margin-bottom:14px; border-radius: var(--radius-s);
  background-color: var(--paper-dim);
  background-repeat: no-repeat; background-position: center; background-size: contain;
  transition: transform .3s ease;
  animation: partnerOrbit 5s linear infinite;
}
.partner-card:hover .partner-logo{ transform: scale(1.04); animation-play-state: paused; }
.partner-mark{ animation: partnerOrbit 5s linear infinite; }
.partner-card:nth-child(2) .partner-logo,
.partner-card:nth-child(2) .partner-mark{ animation-delay: -.7s; }
.partner-card:nth-child(3) .partner-logo,
.partner-card:nth-child(3) .partner-mark{ animation-delay: -1.4s; }
.partner-card:nth-child(4) .partner-logo,
.partner-card:nth-child(4) .partner-mark{ animation-delay: -2.1s; }
.partner-card:nth-child(5) .partner-logo,
.partner-card:nth-child(5) .partner-mark{ animation-delay: -2.8s; }
.partner-card:nth-child(6) .partner-logo,
.partner-card:nth-child(6) .partner-mark{ animation-delay: -3.5s; }
.partner-card:nth-child(7) .partner-logo,
.partner-card:nth-child(7) .partner-mark{ animation-delay: -4.2s; }
@keyframes partnerOrbit{
  0%   { transform: translate(0, 0); }
  12.5%{ transform: translate(4px, -4px); }
  25%  { transform: translate(6px, 0); }
  37.5%{ transform: translate(4px, 4px); }
  50%  { transform: translate(0, 6px); }
  62.5%{ transform: translate(-4px, 4px); }
  75%  { transform: translate(-6px, 0); }
  87.5%{ transform: translate(-4px, -4px); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce){
  .partner-logo, .partner-mark{ animation: none; }
}

/* ---------- Défilement en boucle des logos partenaires (bandeau ticker) ---------- */
.partners-marquee{
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.partners-marquee-track{
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: partnersMarqueeScroll 28s linear infinite;
}
.partners-marquee:hover .partners-marquee-track{ animation-play-state: paused; }
.partners-marquee-item{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  filter: grayscale(35%);
  opacity: .85;
  transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}
.partners-marquee-item:hover{ filter: grayscale(0%); opacity: 1; transform: scale(1.06); }
.partners-marquee-item img{ max-height: 64px; max-width: 160px; object-fit: contain; }
.partners-marquee-item .partner-mark{ animation: none; width:56px; height:56px; }
@keyframes partnersMarqueeScroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .partners-marquee-track{ animation: none; }
}

/* ---------- Actualités ---------- */
.news-card{
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius-m); overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.news-card:hover{ transform: translateY(-4px); box-shadow: 0 12px 28px rgba(15,76,58,.14); }
.news-thumb{ aspect-ratio: 16/10; background: var(--paper-dim); overflow:hidden; }
.news-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
.news-card:hover .news-thumb img{ transform: scale(1.06); }
.news-body{ padding: 22px; }
.news-meta{ font-size:.78rem; color: var(--ink-soft); margin-bottom:8px; display:flex; gap:10px; flex-wrap:wrap; }
.news-meta .badge{ background: var(--paper-dim); padding:2px 9px; border-radius: 20px; color: var(--teal-dark); font-weight:600; }

/* ---------- Timeline / étapes numérotées (usage sequentiel uniquement) ---------- */
.steps{ counter-reset: step; display:grid; gap: 22px; }
.step{ display:flex; gap: 18px; transition: transform .2s ease; }
.step:hover{ transform: translateX(4px); }
.step:hover::before{ transform: scale(1.2) rotate(-8deg); background: var(--ochre); box-shadow: 0 6px 16px rgba(214,138,45,.4); }
.step::before{
  counter-increment: step; content: counter(step);
  width: 34px; height:34px; border-radius:50%; background: var(--teal); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; font-size:.9rem;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .25s ease, box-shadow .25s ease;
}

/* ---------- Bandeau CTA ---------- */
.cta-band{
  background: var(--teal); color: var(--white); border-radius: var(--radius-m);
  padding: 46px; display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap;
}
.cta-band h3{ color: var(--white); margin-bottom:.2em; }
.cta-band p{ color: rgba(255,255,255,.82); margin:0; }

/* ---------- Tableaux (gouvernance / résultats) ---------- */
table.data-table{ width:100%; border-collapse: collapse; background: var(--white); }
table.data-table th, table.data-table td{ text-align:left; padding: 12px 16px; border-bottom:1px solid var(--line); font-size:.92rem; }
table.data-table th{ background: var(--paper-dim); color: var(--teal-dark); font-family: var(--font-display); font-weight:600; }
table.data-table td a{ color: var(--teal); font-weight:600; text-decoration: underline; text-decoration-color: rgba(15,118,110,.35); text-underline-offset: 2px; transition: color .2s ease; }
table.data-table td a:hover{ color: var(--teal-dark); }
table.data-table td a::after{ content:' ↗'; font-size:.85em; }

.callout{
  border: 1px solid var(--line); border-left: 4px solid var(--rust);
  background: var(--white); padding: 20px 24px; border-radius: var(--radius-s);
  font-size:.94rem; color: var(--ink-soft);
  transition: border-left-color .2s ease, box-shadow .2s ease;
}
.callout:hover{ border-left-color: var(--teal); box-shadow: 0 8px 22px rgba(15,76,58,.1); }
.callout strong{ color: var(--ink); }

.tag-row{ display:flex; gap:10px; flex-wrap:wrap; margin: 18px 0; }
.tag-btn{
  border:1px solid var(--line); background: var(--white); padding:8px 16px;
  border-radius: 30px; font-size:.85rem; font-weight:600; cursor:pointer; color: var(--ink-soft);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.tag-btn:hover{ border-color: var(--teal); color: var(--teal-dark); transform: translateY(-2px); }
.tag-btn.active{ background: var(--teal); border-color: var(--teal); color: var(--white); }

/* ---------- Onglets (page "Nos maladies") ---------- */
.disease-tabs{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  margin: -34px 0 0; position:relative; z-index:1;
}
.disease-tab-btn{
  border:2px solid transparent; background: var(--white); padding:14px 28px;
  border-radius: 30px; font-family: var(--font-display); font-size:1.02rem; font-weight:600;
  cursor:pointer; color: var(--ink-soft); box-shadow: 0 6px 18px rgba(0,0,0,.1);
  transition: background .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.disease-tab-btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.14); }
.disease-tab-btn.active{ background: var(--teal); color: var(--white); box-shadow: 0 10px 22px rgba(15,76,58,.25); }
.disease-panel{ display:none; }
.disease-panel.active{ display:block; animation: diseaseFadeIn .35s ease; }
@keyframes diseaseFadeIn{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform:none; } }
@media (max-width: 640px){
  .disease-tabs{ margin-top:-24px; }
  .disease-tab-btn{ padding:11px 18px; font-size:.92rem; }
}

.gallery-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.gallery-grid figure{ margin:0; border-radius: var(--radius-s); overflow:hidden; aspect-ratio: 1/1; background: var(--paper-dim); }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
.gallery-grid figure:hover img{ transform: scale(1.1); }
.gallery-grid figure.lightbox-trigger{ cursor: zoom-in; position: relative; }
.gallery-grid figure.lightbox-trigger::after{
  content: '🔍'; position:absolute; top:10px; right:10px; width:30px; height:30px;
  background: rgba(255,255,255,.9); border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:.9rem; opacity:0; transition: opacity .2s ease;
}
.gallery-grid figure.lightbox-trigger:hover::after{ opacity:1; }
@media (max-width: 760px){ .gallery-grid{ grid-template-columns: repeat(2,1fr);} }

/* ---------- Lightbox (agrandissement des photos au clic) ---------- */
.lightbox{
  display:none; position:fixed; inset:0; z-index:1000;
  background: rgba(10,20,16,.92);
  align-items:center; justify-content:center; flex-direction:column; gap:16px;
  padding: 40px;
}
.lightbox.open{ display:flex; }
.lightbox img{
  max-width: 90vw; max-height: 78vh; object-fit:contain;
  border-radius: var(--radius-s); box-shadow: 0 20px 60px rgba(0,0,0,.5);
  animation: lightboxZoomIn .25s ease;
}
.lightbox video{
  max-width: 90vw; max-height: 78vh;
  border-radius: var(--radius-s); box-shadow: 0 20px 60px rgba(0,0,0,.5);
  animation: lightboxZoomIn .25s ease;
  background: #000;
}
@keyframes lightboxZoomIn{ from{ opacity:0; transform: scale(.92); } to{ opacity:1; transform:none; } }
.lightbox p{ color: rgba(255,255,255,.85); font-size:.95rem; text-align:center; max-width:70ch; }

/* Vignette vidéo dans la galerie */
.gallery-grid figure.lightbox-trigger-video{ position: relative; background:#000; }
.gallery-grid figure.lightbox-trigger-video video{ width:100%; height:100%; object-fit:cover; opacity:.75; }
.gallery-play-icon{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:50%;
  background: rgba(255,255,255,.9); color: var(--teal-dark);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  transition: transform .2s ease, background .2s ease;
}
.gallery-grid figure.lightbox-trigger-video:hover .gallery-play-icon{ transform:translate(-50%,-50%) scale(1.12); background: var(--white); }
.lightbox-close{
  position:absolute; top:24px; right:28px; background:none; border:none; color:var(--white);
  font-size:1.6rem; cursor:pointer; width:44px; height:44px; border-radius:50%;
  transition: background .2s ease, transform .2s ease;
}
.lightbox-close:hover{ background: rgba(255,255,255,.15); transform: rotate(90deg); }

/* ---------- Photos ajoutées dans le corps d'une page (admin) ---------- */
.inline-photos-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.inline-photo{ margin:0; }
.inline-photo img{
  width:100%; height:260px; object-fit:cover; border-radius: var(--radius-m);
  transition: transform .35s ease, box-shadow .25s ease;
}
.inline-photo:hover img{ transform: scale(1.03); box-shadow: 0 14px 30px rgba(15,76,58,.16); }
.inline-photo figcaption{ padding: 10px 2px 0; font-size:.85rem; color: var(--ink-soft); }

/* ---------- Formulaire de contact ---------- */
.form-field{ margin-bottom: 18px; }
.form-field label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:6px; color: var(--teal-dark); }
.form-field input, .form-field textarea, .form-field select{
  width:100%; padding: 12px 14px; border:1px solid var(--line); border-radius: var(--radius-s);
  font-family: var(--font-body); font-size:.95rem; background: var(--white); color: var(--ink);
}
.form-field textarea{ min-height: 130px; resize: vertical; }
.consent{ display:flex; gap:10px; align-items:flex-start; font-size:.85rem; color: var(--ink-soft); }
.consent input{ margin-top:4px; }

/* ---------- Pied de page ---------- */
footer.site-footer{ background: var(--teal-dark); color: rgba(255,255,255,.86); padding: 56px 0 26px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
@media (max-width: 800px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
footer h4{ color: var(--white); font-size:.9rem; letter-spacing:.02em; margin-bottom:16px; }
footer a{ color: rgba(255,255,255,.78); text-decoration:none; font-size:.9rem; display:block; margin-bottom:10px; }
footer a:hover{ color: var(--ochre); }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.14); margin-top: 40px; padding-top: 22px;
  display:flex; justify-content:space-between; gap: 16px; flex-wrap:wrap; font-size:.8rem; color: rgba(255,255,255,.6);
}
.footer-bottom a{ display:inline; margin:0 0 0 16px; font-size:.8rem; }

/* ---------- Fil d'ariane simple ---------- */
.page-header{ padding: 46px 0 40px; border-bottom:1px solid var(--line); background: var(--paper-dim); }
.page-header .eyebrow{ margin-bottom:.5em; }
.page-header p{ color: var(--ink-soft); max-width: 60ch; }

/* ---------- Bandeau photo animé (page-header) ---------- */
.page-header.has-bg{
  position: relative;
  overflow: hidden;
  padding: 76px 0 64px;
  border-bottom: none;
  color: var(--white);
  isolation: isolate;
}
.page-header.has-bg .bg-slideshow{
  position: absolute; inset: 0; z-index: -2;
}
.page-header.has-bg .bg-slide{
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.page-header.has-bg .bg-overlay{
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,54,42,.25), rgba(20,32,26,.32));
}
.page-header.has-bg .eyebrow{ color: var(--ochre); text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 2px 10px rgba(0,0,0,.55); }
.page-header.has-bg h1{ color: var(--white); text-shadow: 0 2px 4px rgba(0,0,0,.9), 0 4px 18px rgba(0,0,0,.6); }
.page-header.has-bg p{ color: rgba(255,255,255,.96); text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 2px 12px rgba(0,0,0,.5); }

@media (prefers-reduced-motion: reduce){
  .page-header.has-bg .bg-slide{ animation: none; opacity: 0; }
  .page-header.has-bg .bg-slide:first-child{ opacity: 1; }
}

.skip-link{
  position:absolute; left:-999px; top:auto;
  background: var(--teal); color:var(--white); padding: 10px 16px; z-index: 999;
}
.skip-link:focus{ left: 16px; top: 16px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}

/* ---------- Carrousel de témoignages ---------- */
.testimonial-carousel{ max-width: 720px; margin: 0 auto; }
.testimonial-track{ position: relative; overflow: hidden; }
.testimonial-slide{
  display: none;
  animation: testimonialFadeIn .4s ease;
}
.testimonial-slide.active{ display: block; }
@keyframes testimonialFadeIn{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:none; } }
.testimonial-card{
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 36px 40px; text-align: center;
}
.testimonial-quote{ font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); line-height: 1.5; margin-bottom: 22px; }
.testimonial-author{ display: flex; align-items: center; justify-content: center; gap: 14px; }
.testimonial-avatar{ width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.testimonial-avatar-fallback{
  display:flex; align-items:center; justify-content:center;
  background: var(--teal); color: var(--white); font-family: var(--font-display); font-weight:700; font-size:1.2rem;
}
.testimonial-author div{ text-align: left; }
.testimonial-author strong{ display:block; color: var(--teal-dark); }
.testimonial-author span{ font-size:.85rem; color: var(--ink-soft); }
.testimonial-controls{ display:flex; align-items:center; justify-content:center; gap: 18px; margin-top: 24px; }
.testimonial-arrow{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background: var(--white);
  font-size:1.4rem; line-height:1; cursor:pointer; color: var(--teal-dark);
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.testimonial-arrow:hover{ background: var(--teal); color: var(--white); transform: scale(1.08); }
.testimonial-dots{ display:flex; gap:8px; }
.testimonial-dot{
  width:9px; height:9px; border-radius:50%; border:none; background: var(--line); cursor:pointer; padding:0;
  transition: background .2s ease, transform .2s ease;
}
.testimonial-dot.active{ background: var(--teal); transform: scale(1.3); }
@media (max-width: 600px){ .testimonial-card{ padding: 26px 22px; } }

/* ---------- Ressources (PDF téléchargeables) ---------- */
.resource-card{ text-align: center; }
.resource-icon{ font-size: 2.4rem; margin-bottom: 10px; }
.resource-date{ font-size:.8rem; color: var(--ink-soft); font-weight:600; margin-bottom: 8px; }

/* ---------- Mot du Président ---------- */
.president-block{
  display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 40px;
}
.president-photo{
  width: 180px; height: 180px; border-radius: 50%; object-fit: cover;
  border: 4px solid var(--paper-dim); box-shadow: 0 10px 26px rgba(15,76,58,.15);
}
.president-photo-fallback{
  width: 180px; height: 180px; border-radius: 50%;
  background: var(--teal); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 2.6rem; font-weight: 700;
}
.president-quote-icon{ font-family: Georgia, serif; font-size: 3.5rem; color: var(--ochre); line-height: 1; margin-bottom: -10px; }
.president-message p{ margin-bottom: 1em; color: var(--ink); }
.president-name{ font-family: var(--font-display); color: var(--teal-dark); font-size: 1.15rem; margin-top: 12px; }
.president-role{ display:block; color: var(--ink-soft); font-size: .88rem; }
@media (max-width: 720px){
  .president-block{ grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 28px; }
}