/* ============================================
   MANATHAN - Custom CSS (clean)
   Bleu: #2D5A91 | Orange: #FF8C1A
============================================ */

/* ---------- Variables ---------- */
:root{
  --man-blue:#2D5A91;
  --man-blue-dark:#123A66;
  --man-orange:#FF8C1A;
  --man-navy:rgba(0,0,51,.5);
  --man-text-on-dark:#EAF2FF;

  /* Bootstrap overrides */
  --bs-primary:var(--man-blue);
  --bs-secondary:var(--man-blue-dark);
  --bs-warning:var(--man-orange);
  --bs-dark:#0e1a26;
  --bs-light:#f7f9fc;
  --bs-link-color:var(--man-blue);
  --bs-link-hover-color:var(--man-blue);

  /* Utilitaires */
  --radius-lg:20px;
  --nav-height:80px;
}

/* =================== NAVBAR =================== */
#site-navbar{
  position:fixed; top:0; left:0; right:0; z-index:1030;
  width:100%; height:80px;
  background-color:var(--man-blue) !important;
  border-bottom:3px solid var(--man-orange);
  box-shadow:0 6px 20px rgba(0,0,0,.15);
  transition:box-shadow .25s ease, background-color .25s ease;
  overflow: visible; /* laisse le logo dépasser si plus grand que 80px */
}
.ftco-navbar-light{ background:transparent !important; box-shadow:none !important; }

#site-navbar .nav-link{
  color:#fff !important; font-weight:500; transition:color .2s ease;
  white-space:nowrap; /* 1 ligne */
}
#site-navbar .nav-link:hover,
#site-navbar .nav-link.active{ color:var(--man-orange) !important; }

#site-navbar .btn{ white-space:nowrap; line-height:1; }

/* ===== Logo — plus grand et net, sans impacter les autres items ===== */
.navbar-brand{
  padding-top:0; padding-bottom:0; line-height:0;
  display:flex; align-items:center;
  margin-right:.75rem;
}
.logo-img{
  height:65px;             /* augmente la taille du logo (desktop) */
  max-height:none;
  width:auto;
  display:block;
  object-fit:contain;
  background:#fff;
  padding:4px 8px;         /* padding réduit = logo visuellement plus grand */
  border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  transition:transform .3s ease;
}
.logo-img:hover{ transform:scale(1.05); }

/* Mobile/tablette : garder un logo raisonnable pour le burger */
@media (max-width: 991.98px){
  :root{ --nav-height:72px; }
  .logo-img{ height:60px; }
  .navbar-collapse{ transition:background-color .2s ease; }
  .navbar-collapse.show{ background-color:var(--man-blue); }
  .navbar-collapse.show .nav-link,
  .navbar-collapse.show .dropdown-item{ color:#fff !important; }
  .navbar-collapse.show .dropdown-item:hover{ background-color:rgba(255,255,255,.1); }
  .navbar-toggler[aria-expanded="true"]{
    background-color:var(--man-blue); border-color:var(--man-blue); color:#fff;
  }
  .navbar-toggler[aria-expanded="true"] .fa-bars{ color:#fff; }
}

/* Espace sous nav global */
body{ padding-top:calc(var(--nav-height) + 12px); }
main.wrap{ padding-top:calc(var(--nav-height) + 12px); }
[id]{ scroll-margin-top:calc(var(--nav-height) + 12px); }

/* =================== BOUTONS =================== */
.btn-primary{ background:var(--man-blue); border-color:var(--man-blue); }
.btn-primary:hover,.btn-primary:focus{ background:var(--man-blue-dark); border-color:var(--man-blue-dark); }
.btn-outline-primary{ color:var(--man-blue); border-color:var(--man-blue); }
.btn-outline-primary:hover{ color:#fff; background:var(--man-blue); border-color:var(--man-blue); }

/* =================== TITRES / ACCENTS =================== */
.heading-section .subheading{ color:var(--man-blue); letter-spacing:.5px; font-weight:700; }
.heading-section h2 .accent{ color:var(--man-orange); }
.man-accent{
  background:linear-gradient(135deg, var(--man-orange), var(--man-orange));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.man-badge{
  display:inline-block; font-size:.75rem; font-weight:700;
  padding:.35rem .6rem; border-radius:999px; color:#0b0b0b;
  background:linear-gradient(135deg, var(--man-orange), var(--man-orange));
}

/* =================== HERO =================== */
.hero-wrap{
  position:relative; background-position:center top; background-size:cover; min-height:80vh;
}
.hero-wrap .overlay{ display:none !important; }
.hero-wrap .slider-text{ min-height:80vh; display:flex; align-items:flex-end; }
.hero-wrap .slider-text > [class*="col-"]{ margin-top:auto; padding-bottom:2.5rem; }
.hero-wrap .slider-text h1,
.hero-wrap .slider-text .subheading,
.hero-wrap .slider-text p{
  display:inline-block; background:rgba(45,90,145,.65); color:#fff;
  padding:.35rem .65rem; border-radius:8px;
}
#toptexte2, #toptexte2 *{ color:#fff !important; }
#toptexte2{ background-color:var(--man-navy); font-size:18px; padding:1rem; border-radius:8px; }

/* Centrage texte hero desktop */
@media (min-width:992px){
  .slider-text .col-lg-6{ margin-left:auto; max-width:620px; text-align:center; }
}

/* =================== GRILLES / CARTES =================== */
.grid{ display:grid; gap:20px; grid-template-columns:repeat(1,minmax(0,1fr)); }
@media (min-width:720px){ .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.card{
  background:var(--man-blue-dark);
  color:var(--man-text-on-dark);
  border-radius:var(--radius-lg);
  border:1px solid rgba(0,0,0,.1);
  display:flex; flex-direction:column; min-height:100%;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,.35); }

.media{
  aspect-ratio:16/10;
  display:flex; align-items:center; justify-content:center;
  background:#0f1214; position:relative; overflow:hidden;
}
.badge{
  position:absolute; right:12px; bottom:12px;
  background:rgba(0,0,0,.5); color:#fff;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px; padding:6px 10px; font-size:.75rem;
}
.icon-img{ width:80px; height:80px; object-fit:contain; max-width:100%; }

.content{ padding:16px 16px 8px; display:flex; flex-direction:column; gap:10px; }
.title{ margin:0; font-size:1.1rem; line-height:1.25; }
.title span{ color:var(--man-orange); }
.desc{ margin:0; color:#d0d7e2; }
.actions{ display:flex; gap:10px; padding:0 16px 16px; margin-top:auto; }

/* Effets cartes Lovecare (icônes) */
.services-2{ border:1px solid rgba(0,0,0,.06); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.services-2:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(45,90,145,.12); border-color:rgba(45,90,145,.18); }
.services-2 .icon span{ color:var(--man-blue); }
.services-2.color-2 .icon span{ color:var(--man-orange); }
.services-2.color-3 .icon span{ color:var(--man-blue-dark); }

/* =================== SECTIONS COMPACTES =================== */
.ftco-section,
.ftco-image.img,
.ftco-section-counter.img,
.ftco-causes{
  padding-top:1.25rem !important;
  padding-bottom:1.25rem !important;
  margin:0 !important;
}
section + section{ margin-top:.75rem !important; }
.heading-section{ margin-bottom:.75rem !important; }
.heading-section.mb-5{ margin-bottom:1rem !important; }
.heading-section h2{ margin-bottom:0 !important; }
.ftco-image.img{ padding-top:2rem !important; padding-bottom:2rem !important; }
.ftco-section .row.justify-content-center.pb-4{ padding-bottom:.5rem !important; }
.section-counter{ row-gap:1rem; }
.carousel-causes .item .text{ padding:.5rem 0; }

/* =================== FOOTER =================== */
footer.ftco-footer .ij-footer-btn{
  background-color:var(--man-orange) !important;
  border-color:var(--man-orange) !important;
  color:#fff !important; box-shadow:none !important;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
footer.ftco-footer .ij-footer-btn:hover,
footer.ftco-footer .ij-footer-btn:focus{
  background-color:var(--man-blue) !important;
  border-color:var(--man-blue) !important;
}

/* =================== CONTACT (double bordure) =================== */
.ij-dual-border{
  position:relative; background:#fff; border-radius:.5rem;
  border:3px solid var(--man-blue);
  box-shadow:inset 0 0 0 3px var(--man-orange);
}
.ij-dual-border:hover{ box-shadow:inset 0 0 0 3px var(--man-orange), 0 2px 14px rgba(0,0,0,.06); }
.contact-eq .col-md-6{ display:flex; }
.contact-eq .ij-dual-border{ display:flex; flex-direction:column; height:100%; }
.contact-eq .ij-fill{ flex:1 1 auto; min-height:220px; background-size:cover; background-position:center; border-radius:.35rem; }

/* =================== BLOG ENTRIES =================== */
.blog-entry{ display:flex; flex-direction:column; }
.blog-entry .text{ display:flex; flex-direction:column; flex:1; }
.blog-entry .text p:last-child{ margin-top:auto; }

/* =================== IMAGES (global) =================== */
img, .img img{ max-width:100%; height:auto; display:block; }

/* Blocs .img.img-2 (avec background-image inline) */
.img.img-2{
  width:100%; aspect-ratio:16/10; background-size:cover; background-position:center;
  border-radius:inherit; overflow:hidden; min-height:220px;
}
@media (min-width:992px){
  .img.img-2{ aspect-ratio:16/9; min-height:320px; }
}
.d-flex.align-items-stretch .img img{ height:auto !important; object-fit:contain; }

/* Ajustement position texte hero si besoin */
.hero-wrap #toptexte2{ position:relative; top:clamp(16px, 7vw, 160px); }


/* === Ajustements logo sur mobile === */
@media (max-width: 767.98px){

  /* Laisse un peu plus de liberté au header */
  #site-navbar{
    height:auto;
    min-height:72px;
    padding-top:4px;
    padding-bottom:4px;
  }

  /* Le bloc du logo */
  .navbar-brand{
    margin-right:auto;          /* pousse le burger à droite */
    display:flex;
    align-items:center;
  }

  /* Le logo lui-même */
  .logo-img{
    height:auto;                /* ne force pas une hauteur fixe */
    max-height:50px;            /* limite sur petits écrans */
    width:auto;
    padding:2px 6px;            /* un peu moins de blanc autour */
    box-shadow:none;            /* optionnel si tu veux alléger sur mobile */
  }
}


/* Contact : mettre tout le texte des deux colonnes en bleu foncé */
.contact-eq .ij-dual-border,
.contact-eq .heading-section {
  color: #0D3B66; /* bleu foncé */
}

/* Faire hériter les liens de la couleur du parent */
.contact-eq .ij-dual-border a,
.contact-eq .heading-section a {
  color: inherit;
}



/* Page Contact : annuler la hauteur forcée + l'étirement vertical */
.contact-eq .h-100 { height: auto !important; }
.contact-eq .row.align-items-stretch { align-items: flex-start !important; }

/* Optionnel : masquer le filler "carte" si tu ne l'utilises pas */
.contact-eq .ij-fill { display: none; }



/* =========================================================
   HERO boxed — texte H1 remonté + anti-coupe + responsive
   À coller en bas de assets/css/custom.css
   ========================================================= */

/* Fond général (comme validé) */
body,
main.wrap{
  background-color: #FAF8F5;
}


/* Cartes "Nos actions en France" + "Nos actions en Afrique"
   -> fond bleu plus sombre derrière titre + extrait, texte blanc */
section[aria-label="Cartes axes d'action — France"] .card .content,
section[aria-label="Cartes axes d'action — Afrique"] .card .content{
  background: #0b1f3a; /* bleu marine sombre (contraste élevé) */
}

section[aria-label="Cartes axes d'action — France"] .card .title,
section[aria-label="Cartes axes d'action — Afrique"] .card .title,
section[aria-label="Cartes axes d'action — France"] .card .desc,
section[aria-label="Cartes axes d'action — Afrique"] .card .desc{
  color: #fff;
}

/* Optionnel : si tu as des <span> colorés dans le titre */
section[aria-label="Cartes axes d'action — France"] .card .title span,
section[aria-label="Cartes axes d'action — Afrique"] .card .title span{
  color: #fff;
}


Ajoute/complète ce CSS pour mettre les **boutons** (dans France + Afrique) en **jaune foncé sombre** avec texte lisible :

```css
/* Boutons des sections France + Afrique : jaune foncé sombre */
section[aria-label="Cartes axes d'action — France"] .card .actions .btn,
section[aria-label="Cartes axes d'action — Afrique"] .card .actions .btn{
  background: #b8860b;   /* jaune foncé (dark goldenrod) */
  border-color: #b8860b;
  color: #fff;
}

/* Hover */
section[aria-label="Cartes axes d'action — France"] .card .actions .btn:hover,
section[aria-label="Cartes axes d'action — Afrique"] .card .actions .btn:hover{
  background: #946c08;   /* encore plus sombre */
  border-color: #946c08;
  color: #fff;
}


  /* Home — titres en casse normale (pas de CAPS) + titre plus grand que le texte dessous */
  section[aria-label="Cartes axes d'action — France"] .grid .card .title,
  section[aria-label="Cartes axes d'action — Afrique"] .grid .card .title,
  section[aria-label="Cartes Star Kids — Créativité & expression"] .grid .card .title{
    text-transform: none;
    font-size: 1.35rem;
    line-height: 1.25;
  }

  section[aria-label="Cartes axes d'action — France"] .grid .card .desc,
  section[aria-label="Cartes axes d'action — Afrique"] .grid .card .desc,
  section[aria-label="Cartes Star Kids — Créativité & expression"] .grid .card .desc{
    font-size: 1rem;
    line-height: 1.55;
  }





/* Donne de l’air au contenu du hero pour que le bouton ne soit pas coupé */
#toptexte{
  padding-bottom: 5.25rem; /* ↑ bas plus grand = bouton visible */
}

/* Centrage + espacement */
#toptexte2{
  text-align: center;
}

#toptexte2 .hero-cta{
  margin-top: 1rem;
}

/* Bouton propre et stable */
#toptexte2 .hero-don-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  white-space: normal;
}

#toptexte2 .hero-heart{
  font-size: 20px;
  line-height: 1;
  vertical-align: -2px;
}

/* Responsive */
@media (max-width: 576px){
  #toptexte2 h1{
    font-size: clamp(1.25rem, 4.6vw, 1.75rem);
    line-height: 1.25;
  }

  /* Le bouton devient “presque plein largeur” sans coller aux bords */
  #toptexte2 .hero-don-btn{
    width: min(100%, 320px);
  }
}









/* =================== TYPO UNIFORME =================== */
:root{
  --site-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Base */
body, button, input, textarea, select{
  font-family: var(--site-font) !important;
}

/* Titres */
h1, h2, h3, h4, h5, h6{
  font-family: var(--site-font) !important;
}

/* Navbar (écrase "Patrick Hand") */
.ftco-navbar-light .navbar-nav > .nav-item > .nav-link,
.ftco-navbar-light .navbar-brand{
  font-family: var(--site-font) !important;
}
/* =========================================================
   PAGE NOUS — uniformisation et réduction des titres
   ========================================================= */

/* Titre principal de la page */
main[aria-labelledby="heading"] #heading{
  font-size: clamp(1.8rem, 3vw, 2.35rem) !important;
  line-height: 1.2;
  font-weight: 700;
}

/* Sous-titre "NOUS" */
main[aria-labelledby="heading"] .heading-section .subheading{
  font-size: .95rem;
  letter-spacing: .08em;
  font-weight: 700;
}

/* Tous les titres de blocs de la page */
main[aria-labelledby="heading"] .ij-dual-border h2{
  font-size: clamp(0.675rem, 1.1vw, 0.875rem) !important;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: .75rem !important;
}

/* Titres des bénévoles/volontaires */
main[aria-labelledby="heading"] .staff .text h3{
  font-size: 1.1rem;
  line-height: 1.25;
  font-weight: 700;
}

/* Fonction sous les noms */
main[aria-labelledby="heading"] .staff .text .position{
  font-size: .95rem;
  line-height: 1.35;
}

/* Mobile : encore un peu plus compact */
@media (max-width: 767.98px){
  main[aria-labelledby="heading"] #heading{
    font-size: 1.7rem !important;
  }

  main[aria-labelledby="heading"] .ij-dual-border h2{
    font-size: 0.64rem !important;
  }
}