/* ==========================================================
   HOME (front-page) — @layer pages
   Keep the exact same design/functionality.
   Cleaned: remove duplicates + merge mobile hero rules.
   ========================================================== */


/* =========================
   HERO (text over photo)
   ========================= */

.hero-full{
  position:relative;
  width:100%;
  max-width:1400px;
  margin:80px auto 120px;
  min-height:580px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
  border-radius:24px;
  box-shadow:0 26px 48px rgba(0,0,0,0.22);
  background:#000;
}

/* Background image */
.hero-full .hero-bg{
  position:absolute;
  inset:0;
  border-radius:24px;
  overflow:hidden;
  z-index:1;
}
.hero-full .hero-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Light overlay */
.hero-full .hero-overlay{
  position:absolute;
  inset:0;
  border-radius:24px;
  background:rgba(0,0,0,0.10);
  z-index:2;
}
/* Kill any old pseudo overlay */
.hero-full .hero-bg::after{
  content:none;
  background:none;
}

/* Text container */
.hero-full .hero-center{
  position:relative;
  z-index:3;
  text-align:center;

  max-width:900px;
  padding:0 20px;
  margin:0 16px;

  background:transparent !important;
}

/* Base text: white, no shadow */
.hero-full .hero-center :is(h1,p){
  color:#fff !important;
  text-shadow:none !important;
  -webkit-text-stroke:0 !important;
  background:transparent;
}

/* H1: clean “line pill” */
.hero-full .hero-center h1{
  font-family:var(--font-title);
  font-size:56px;
  font-weight:700;
  line-height:1.10;
  margin:0 0 18px;

  display:inline-block;
  background:rgba(0,0,0,0.62);
  padding:.14em .36em;
  border-radius:12px;

  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

/* If JS wrapped the H1 into chip spans, neutralize them */
.hero-full .hero-center h1 .chip-text{
  display:contents !important;
  background:transparent !important;
  padding:0 !important;
  border-radius:0 !important;
}
.hero-full .hero-center h1 :is(.chip-char,.chip-space){
  display:inline !important;
  background:transparent !important;
  padding:0 !important;
  border-radius:0 !important;
  width:auto !important;
  line-height:inherit !important;
}

/* Paragraph: line pill for contrast */
.hero-full .hero-center p{
  font-size:18px;
  line-height:1.65;
  max-width:760px;
  margin:0 auto 28px;

  display:inline-block;
  background:rgba(0,0,0,0.55) !important;
  padding:.22em .50em;
  border-radius:10px;

  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

/* Generic chip system (kept for other uses) */
.hero-full .sr-only{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.hero-full .chip-text .chip-char{
  display:inline-block;
  background:#000;
  color:#fff;
  padding:.06em .08em;
  border-radius:.12em;
  line-height:1.2;
}
.hero-full .chip-text .chip-space{
  display:inline-block;
  width:.28em;
}

/* Buttons layout */
.hero-full .hero-ctas{
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}

/* Responsive */
@media (max-width:900px){
  .hero-full{
    margin:60px auto 90px;
    min-height:480px;
    padding:40px 16px;
  }
  .hero-full .hero-center{max-width:720px;}
  .hero-full .hero-center h1{font-size:40px;}
  .hero-full .hero-center p{font-size:16px;}
}

/* Mobile/Small tablet: ONE dark card behind all text (no pills) */
@media (max-width:700px){
  .hero-full{
    margin:40px auto 70px;
    min-height:520px;
    padding:24px 14px;
  }

  .hero-full .hero-center{
    width:min(92vw,560px);
    margin:0 auto;
    padding:18px 16px;
    border-radius:18px;
    background:rgba(0,0,0,0.56) !important;
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
  }

  /* Remove the per-line pills */
  .hero-full .hero-center :is(h1,p){
    display:block !important;
    background:transparent !important;
    padding:0 !important;
    border-radius:0 !important;
    -webkit-box-decoration-break:initial !important;
    box-decoration-break:initial !important;
  }

  .hero-full .hero-center h1{
    font-size:clamp(30px,8.2vw,40px) !important;
    line-height:1.12 !important;
    margin:0 0 12px !important;
  }

  .hero-full .hero-center p{
    font-size:14px !important;
    line-height:1.55 !important;
    margin:0 auto 18px !important;
    max-width:42ch !important;
  }

  .hero-full .hero-ctas{
    flex-direction:column;
    gap:14px;
    max-width:320px;
    margin:0 auto;
  }

  /* If JS injected chip spans, neutralize them too */
  .hero-full .hero-center :is(h1,p) :is(.chip-text,.chip-char,.chip-space){
    background:transparent !important;
    padding:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
}

/* =========================
   HISTORY (“Notre engagement depuis 2016”)
   ========================= */

.history-wrap{
  display:grid;
  grid-template-columns:minmax(0,520px) minmax(0,1fr);
  gap:60px;
  align-items:stretch; /* both columns share same height */
  justify-content:space-between;
}

.history-text{
  max-width:520px;
  min-width:0;
  display:flex;
  flex-direction:column;
}

.history-text h2{
  font-size:56px;
  font-weight:700;
  line-height:1.1;
  color:var(--color-dark);
  margin:0 0 24px;
}

.history-text p{
  font-size:18px;
  line-height:1.6;
  margin:0 0 18px;
}

/* Buttons aligned with image bottom on desktop */
.history-buttons{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:auto;     /* keep the nice alignment */
  padding-top:26px;
  padding-bottom:22px; /* ✅ breathing room so it doesn't look cut */
}

.history-image{
  margin:0;
  min-width:0;
  align-self:stretch;
  display:flex;
}

.history-image img{
  width:100%;
  height:auto;
  display:block;
  border-radius:16px;
}

.history-dark-image img,
.history-image img{
  transition:transform .25s ease;
}

@media (hover:hover) and (pointer:fine){
  .history-dark-image img:hover,
  .history-image img:hover{
    transform:translateY(-6px);
    box-shadow:0 10px 26px rgba(0,0,0,0.25);
    cursor:zoom-in;
  }
}

@media (max-width:900px){
  .history-wrap{
    grid-template-columns:1fr;
    text-align:center;
    gap:40px;
  }
  .history-text{max-width:100%;}
  .history-buttons{
    justify-content:center;
    margin-top:26px;
    padding-top:0;
  }
}

/* =========================
   TESTIMONIALS
   ========================= */

.testimonials{
  background:var(--color-bg);
  padding:80px 0 90px;
  text-align:center;
}

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

.section-kicker{
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--color-dark);
  margin-bottom:8px;
}

.section-title{
  font-family:var(--font-title);
  font-size:38px;
  font-weight:700;
  margin-bottom:8px;
  color:var(--color-dark);
}

.section-subtitle{
  font-size:16px;
  line-height:1.6;
  color:var(--color-dark);
  opacity:.9;
  max-width:760px;
  margin:0 auto 36px;
}

.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
  margin-top:20px;
}

.testimonial{
  background:var(--color-white);
  padding:26px 22px 22px;
  border-radius:16px;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
  text-align:left;
}

.testimonial p{
  font-size:14px;
  line-height:1.7;
  color:var(--color-dark);
  margin:14px 0 0;
}

.stars{
  font-size:14px;
  letter-spacing:2px;
  color:var(--color-dark);
}

.author{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:18px;
}

.author img{
  width:44px;
  height:44px;
  border-radius:50%;
  object-fit:cover;
}

.author-info{
  display:flex;
  flex-direction:column;
}

.author-name{
  font-weight:600;
  font-size:14px;
  color:var(--color-dark);
}

.author-role{
  font-size:13px;
  color:var(--color-dark);
  opacity:.9;
}

@media (max-width:1100px){
  .testimonials-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:700px){
  .testimonials{padding:60px 0 70px;}
  .testimonials-grid{grid-template-columns:1fr;}
  .testimonial{
    max-width:420px;
    margin:0 auto;
  }
}

/* =========================
   DOMAINS
   ========================= */

.domains{
  background:var(--color-bg);
  padding:80px 0;
  text-align:center;
}

.domains-label{
  display:block;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--color-dark);
  margin-bottom:8px;
}

.domains-title{
  font-family:var(--font-title);
  font-size:32px;
  font-weight:700;
  color:var(--color-dark);
  margin:0 0 8px;
}

.domains-subtitle{
  max-width:640px;
  margin:0 auto 40px;
  font-size:15px;
  line-height:1.6;
  color:var(--color-dark);
}

.domains-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:40px;
  max-width:1300px;
  margin:0 auto;
  padding:0 20px;
}

.domain-card{
  background:var(--color-white);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.08);

  display:flex;
  flex-direction:column;
  height:100%;
}

.domain-card img{
  width:100%;
  display:block;
  aspect-ratio:4 / 3;
  object-fit:cover;
}

.domain-content{
  padding:32px 26px 30px;
  text-align:left;

  display:flex;
  flex-direction:column;
  height:100%;
}

.domain-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  margin:0 0 16px;
}

.domain-icon{
  width:44px;
  height:44px;
  border-radius:12px;

  background:var(--color-bg);
  border:2px solid var(--color-primary);

  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 44px;
}

.domain-icon img{
  width:22px;
  height:22px;
  display:block;
}

.domain-category{
  background:var(--color-primary);
  color:var(--color-dark);
  padding:4px 12px;
  font-size:14px;
  border-radius:999px;
  display:inline-block;
  margin:0;
}

.domain-content h3{
  font-size:24px;
  line-height:1.3;
  color:var(--color-dark);
  margin-bottom:10px;
}

.domain-content p{
  font-size:16px;
  line-height:1.6;
  color:var(--color-dark);
  margin-bottom:18px;
}

/* CTA always sits at the bottom (aligned across cards) */
.domain-content a{
  margin-top:auto;
  align-self:center;
}

@media (max-width:1024px){
  .domains-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:700px){
  .domains{padding:60px 0;}
  .domains-grid{
    grid-template-columns:1fr;
    gap:24px;
  }
  .domain-card{
    max-width:420px;
    margin:0 auto;
  }
  .domain-content{
    text-align:center;
    align-items:center;
  }
  .domain-meta{align-items:center;}
  .domain-content a{align-self:center;}
}

/* =========================
   BLOG PREVIEW
   ========================= */

.blog-preview{
  background:var(--color-bg);
  padding:80px 0;
  text-align:center;
}

.blog-preview .blog-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:40px;
  margin-top:40px;
}

.blog-preview .blog-card{
  background:var(--color-white);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
  height:100%;
}

.blog-preview .blog-thumb{margin:0;}
.blog-preview .blog-thumb img{display:block;width:100%;height:auto;}

.blog-preview .blog-body{
  padding:18px 22px 22px;
  display:flex;
  flex-direction:column;
  flex:1;
  text-align:left;
  gap:10px;
  min-height:0;
}

/* Category chip alignment (works even if WP moves the chip) */
.blog-preview :is(.blog-body .blog-category, .blog-card > .blog-category){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
}
.blog-preview .blog-body .blog-category{margin:0 0 6px;}
.blog-preview .blog-card > .blog-category{margin:18px 22px 0;}

.blog-preview .blog-meta{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--color-dark);
  opacity:.9;
  margin:0;
  padding:0;
}

.blog-preview .blog-card-title{
  font-family:var(--font-title);
  font-size:20px;
  line-height:1.4;
  color:var(--color-dark);
  margin:0;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

.blog-preview .blog-excerpt{
  font-size:14px;
  line-height:1.6;
  color:var(--color-dark);
  opacity:.9;
  margin:0;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
  overflow:hidden;
}

/* “Lire plus” always sits at the bottom */
.blog-preview .blog-btn{
  margin-top:auto;
  align-self:center;
}

.blog-preview .blog-actions{
  margin-top:44px;
  display:flex;
  justify-content:center;
}

@media (max-width:1024px){
  .blog-preview .blog-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
  }
}

@media (max-width:640px){
  .blog-preview .blog-grid{
    grid-template-columns:1fr;
    gap:18px;
    max-width:520px;
    margin:28px auto 0;
  }
  .blog-preview .blog-body{text-align:left;}
.blog-preview .blog-btn{
  align-self:center;
}
}

/* =========================
   PARTNERS HOME (WAVE contrast fixes)
   ========================= */

.about-logos.partners-home{
  background:var(--color-bg);
  padding:80px 20px;
  text-align:center;
}

.about-logos.partners-home .logos-title{
  font-family:var(--font-title);
  font-size:32px;
  font-weight:700;

  color:var(--color-dark) !important;
  opacity:1 !important;
  text-shadow:none !important;

  max-width:1200px;
  margin:0 auto 40px;
}

/* Disclaimer under the title */
.about-logos.partners-home .logos-note{
  margin:14px auto 26px;
  max-width:900px;
  font-size:15px;
  line-height:1.6;
  font-weight:600;
  color:var(--color-dark);
  opacity:1;
  text-align:center;

  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
}
.about-logos.partners-home .logos-note::before{
  content:"ⓘ";
  font-size:15px;
  line-height:1;
}

.about-logos.partners-home :where(h2,h3){
  color:var(--color-dark) !important;
  opacity:1 !important;
}

.about-logos.partners-home :is(.fade-in-up, .fade-in-up.visible){
  opacity:1 !important;
  filter:none !important;
}

.about-logos.partners-home .logos-grid{
  max-width:1400px;
  margin:0 auto;

  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:30px;
}

.about-logos.partners-home .logo-card{
  background:var(--color-white);
  padding:28px;
  border-radius:20px;

  display:flex;
  align-items:center;
  justify-content:center;

  transition:transform .25s ease, box-shadow .25s ease;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

.about-logos.partners-home .logo-card img{
  max-width:150px;
  max-height:70px;
  width:auto;
  height:auto;
  object-fit:contain;
}

@media (hover:hover) and (pointer:fine){
  .about-logos.partners-home .logo-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 40px rgba(0,0,0,.18);
  }
}

@media (max-width:1100px){
  .about-logos.partners-home .logos-grid{grid-template-columns:repeat(3,1fr);}
}

@media (max-width:700px){
  .about-logos.partners-home .logos-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:600px){
  .about-logos.partners-home .logos-note{font-size:14px;}
}

@media (max-width:480px){
  .about-logos.partners-home .logos-grid{grid-template-columns:1fr;}
}

/* =========================
   DONATION CTA
   ========================= */

.donation-cta{
  background:var(--color-bg);
  padding:100px 0;
  color:var(--color-dark);
}

.donation-wrap{
  max-width:1100px;
  margin:0 auto;

  background:var(--color-white);
  padding:70px 50px;
  border-radius:24px;

  text-align:center;
  box-shadow:0 6px 20px rgba(0,0,0,0.15);
}

.donation-wrap h2{
  font-family:var(--font-title);
  font-size:52px;
  font-weight:700;
  margin-bottom:20px;
  color:var(--color-dark);
}

.donation-wrap p{
  font-size:20px;
  color:var(--color-dark);
  max-width:750px;
  margin:0 auto 34px;
}

/* ==========================================
   DONATION CTA — Mobile fix only
   - Keeps desktop unchanged
   - Fixes weird spacing + button layout on small screens
========================================== */
@media (max-width:700px){

  .donation-cta{
    padding:60px 0;
  }

  .donation-wrap{
    padding:34px 18px;
    border-radius:20px;
  }

  .donation-wrap h2{
    font-size:clamp(30px, 8.5vw, 40px);
    line-height:1.12;
    margin-bottom:14px;
  }

  .donation-wrap p{
    font-size:15px;
    line-height:1.6;
    margin:0 auto 22px;
    max-width:34ch;
  }

  /* Buttons: stack cleanly, same width, no awkward gaps */
  .donation-wrap :is(.btn, .btn-primary, .btn-gold, .btn-secondary, .btn-outline, .wp-block-button__link){
    width:100%;
    max-width:320px;
    justify-content:center;
  }

  /* If the buttons are inside a wrapper, make it vertical */
  .donation-wrap :is(.donation-actions, .donation-buttons, .donation-ctas, .hero-ctas, .wp-block-buttons){
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
  }
}

/* =========================
   HOVER LIFT (shared)
   ========================= */

:is(.stat-box,.testimonial,.domain-card,.community-gallery img){
  transition:transform .25s ease;
}

@media (hover:hover) and (pointer:fine){
  :is(.stat-box:hover,.testimonial:hover,.domain-card:hover){transform:none;box-shadow:none;}
  .community-gallery img:hover{transform:translateY(-6px);box-shadow:0 10px 28px rgba(0,0,0,0.18);cursor:zoom-in;}
}

/* Helpers */
.section-white{background:var(--color-white);}
.section-cream{background:var(--color-bg);}

/* =========================
   IMPACT STATS BAND
   ========================= */

.impact-section{padding:80px 0;}

.impact-card{
  max-width:1300px;
  margin:0 auto;

  background:var(--color-white);
  border-radius:24px;
  box-shadow:0 10px 30px rgba(0,0,0,.10);

  padding:50px 70px 56px;
  text-align:center;
}

.impact-title{
  font-family:var(--font-title);
  font-size:32px;
  font-weight:700;
  color:var(--color-dark);
  margin:0 0 36px;
}

.impact-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:36px;
}

.impact-item{text-align:center;}

.impact-icon{
  width:70px;
  height:70px;
  margin:0 auto 16px;

  border-radius:999px;
  background:var(--color-bg);
  border:2px solid var(--color-primary);

  display:flex;
  align-items:center;
  justify-content:center;
}

.impact-icon img{
  width:34px;
  height:34px;
  display:block;
}

/* WAVE fix: avoid low-contrast turquoise number on white */
.impact-number{
  font-size:24px;
  font-weight:800;
  color:var(--color-dark);

  margin:0 0 6px;
  display:inline-block;

  padding-bottom:4px;
  border-bottom:3px solid var(--color-link);
}

.impact-label{
  font-size:16px;
  font-weight:600;
  color:var(--color-dark);
  margin:0 0 8px;
}

.impact-text{
  font-size:14px;
  line-height:1.6;
  color:var(--color-dark);
  margin:0;
  max-width:260px;
  margin-inline:auto;
}

/* Impact disclaimer */
.impact-card .impact-note{
  margin:28px auto 0;
  max-width:820px;
  font-size:16px;
  line-height:1.6;
  font-weight:600;
  color:var(--color-dark);
  opacity:1;
  text-align:center;

  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
}
.impact-card .impact-note::before{
  content:"ⓘ";
  font-size:16px;
  line-height:1;
}

@media (max-width:1024px){
  .impact-card{padding:40px 32px 44px;}
  .impact-grid{
    grid-template-columns:repeat(2,1fr);
    gap:28px 20px;
  }
  .impact-text{max-width:320px;}
}

@media (max-width:640px){
  .impact-card{padding:32px 22px 40px;}
  .impact-grid{
    grid-template-columns:1fr;
    gap:22px;
  }
  .impact-icon{width:64px;height:64px;}
  .impact-icon img{width:30px;height:30px;}
}

@media (max-width:600px){
  .impact-card .impact-note{font-size:15px;}
}

/* History section background: force the wrapper to cream */
body.home .site-main section:has(.history-wrap),
body.home .site-main div:has(.history-wrap){
  background:var(--color-bg) !important;
}

 /* end @layer pages */

/* =========================
   7B) NEWSLETTER (above footer)
   - Same structure logic as donation CTA, but lighter
   - White background
   ========================= */
.newsletter-cta{
  background: var(--color-white);
  padding: 60px 0 90px;
  color: var(--color-dark);
}

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

.newsletter-card{
  background: var(--color-white);
  border-radius: 24px;
  padding: 44px 42px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
  border: 1px solid rgba(0,0,0,0.06);
}

.newsletter-heading{
  font-family: var(--font-title);
  font-size: 44px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--color-dark);
}

.newsletter-text{
  font-size: 18px;
  max-width: 760px;
  margin: 0 auto 18px;
  line-height: 1.45;
  color: var(--color-dark);
}

.newsletter-note{
  margin-top: 10px;
  font-size: 14px;
  opacity: 0.85;
  color: var(--color-dark);
}


/* Hide the CF7 internal title inside the form (we already have one clear section heading) */
.newsletter-cta .homepage-news-form .newsletter-title{display:none;}
/* Re-skin the existing CF7 form styles for the white newsletter section */
.newsletter-cta .homepage-news-form{
  max-width: 760px;
  margin: 14px auto 0;
}

/* Override footer field theme (dark) to white (homepage newsletter) */
.newsletter-cta .homepage-news-form input[type="email"]{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.18);
  color: var(--color-dark);
}

.newsletter-cta .homepage-news-form input[type="email"]::placeholder{
  color: rgba(0,0,0,0.55);
}

.newsletter-cta .homepage-news-form input[type="email"]:focus{
  outline: 3px solid var(--color-link);
  outline-offset: 3px;
}

/* Keep button brand as-is, just ensure focus is visible */
.newsletter-cta .homepage-news-form input[type="submit"]:focus{
  outline: 3px solid var(--color-dark);
  outline-offset: 3px;
}

/* Consent line stays readable on white */
.newsletter-cta .homepage-news-form .wpcf7-acceptance label{
  color: var(--color-dark) !important;
}

@media (max-width: 768px){
  .newsletter-cta{padding: 40px 0 70px;}
  .newsletter-card{padding: 30px 18px;}
  .newsletter-heading{font-size: 32px;}
  .newsletter-text{font-size: 16px;}
}