/*
 * ============================================================
 *  THÈME CÔTE D'IVOIRE — CAP AVENIR JEUNES CI
 *  Couleurs officielles du drapeau ivoirien :
 *    Orange  : #F77F00
 *    Blanc   : #FFFFFF
 *    Vert    : #009A44
 * ============================================================
 */

/* ── 1. Override des variables CSS globales ── */
:root {
  --bodyBg:          #fff4e8;
  --bodyBg1:         #ffe9d1;
  --primaryColor:    #009A44;   /* violet → vert CI  */
  --secondaryColor:  #F77F00;   /* rose   → orange CI */
  --secondaryColor2: #F77F00;
  --secondaryColor3: #e06d00;
  --orange:          #F77F00;
  --yellow:          #F5A623;
  --indigo:          #1B8A4A;
  --skycolor:        #F77F00;
  --deepblue:        #1B8A4A;
  --deepgray:        #1f5d39;
  --darkcolor:       #1f5d39;
  --darkblack:       #173f2a;
  --whitegrey3:      #d4efe0;   /* ancienne teinte violet pâle → vert pâle */
  --lightGrey7:      #f0faf4;
  --lightGrey10:     #f0faf4;
  --lightGrey11:     #f5fdf8;
}

/* Empêche le mode sombre auto de réinjecter des bleus/violets */
.is_dark {
  --bodyBg:          #fff4e8;
  --bodyBg1:         #ffe9d1;
  --primaryColor:    #009A44;
  --secondaryColor:  #F77F00;
  --secondaryColor2: #F77F00;
  --secondaryColor3: #e06d00;
  --skycolor:        #F77F00;
  --deepblue:        #1B8A4A;
  --deepgray:        #1f5d39;
  --darkcolor:       #1f5d39;
  --darkblack:       #173f2a;
}

body,
.body__wrapper {
  background-color: var(--bodyBg) !important;
  background-image: linear-gradient(180deg, #fff4e8 0%, #ffefd9 100%);
}

/* ── 2. Header – barre de nationalité tricolore en haut ── */
.headerarea {
  border-top: 4px solid transparent;
  border-image: linear-gradient(to right, #F77F00 33.3%, #ffffff 33.3%, #ffffff 66.6%, #009A44 66.6%) 1;
}

/* ── 3. Liens de navigation au survol ── */
.headerarea__main__menu nav ul > li:hover > a,
.headerarea__main__menu nav ul > li > a.active {
  color: #009A44 !important;
}

/* ── 4. Bouton header (Se connecter / Mon espace) ── */
.headerarea__button a {
  background: #009A44 !important;
  border-color: #009A44 !important;
  color: #fff !important;
  border-radius: 999px;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  box-shadow: 0 8px 20px rgba(0, 154, 68, 0.12);
}
.headerarea__button a:hover {
  background: #F77F00 !important;
  border-color: #F77F00 !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 154, 68, 0.18);
}

/* ── 5. Hero – texte du haut ── */
.hero-main-toptext {
  background: linear-gradient(135deg, #F77F00, #009A44) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 700;
}

/* ── 6. Hero – petit titre (small_title / badge span) ── */
.herobannerarea__small__title span {
  color: #F77F00 !important;
  background: rgba(247,127,0,.10) !important;
}

/* ── 7. Hero – bouton principal ── */
.herobannerarea__button__1,
.hreobannerarea__button .herobannerarea__button__1 {
  background: #009A44 !important;
  border-color: #009A44 !important;
  color: #fff !important;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 22px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  box-shadow: 0 8px 20px rgba(0, 154, 68, 0.12);
}
.herobannerarea__button__1:hover {
  background: #F77F00 !important;
  border-color: #F77F00 !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 154, 68, 0.18);
}

/* ── 8. Boutons hero slide (prev/next/dots) ── */
.hero-main-prev,
.hero-main-next {
  background: rgba(0,154,68,.15) !important;
  color: #009A44 !important;
  border: 2px solid #009A44 !important;
}
.hero-main-prev:hover,
.hero-main-next:hover {
  background: #009A44 !important;
  color: #fff !important;
}
.hero-main-dot {
  background: rgba(0,154,68,.35) !important;
  border-color: #009A44 !important;
}
.hero-main-dot.is-active {
  background: #009A44 !important;
}

/* ── 9. "default__small__button" (badges de section) ── */
.default__small__button {
  color: #009A44 !important;
  background: rgba(0,154,68,.10) !important;
  border-color: rgba(0,154,68,.25) !important;
}

/* ── 10. Titres de section avec <span> coloré ── */
.populerarea__heading h2 span,
.section__title__heading h2 span,
.section__title__heading__2 h2 span,
h2 span,
h3 span {
  color: #F77F00 !important;
}

/* ── 11. Cartes de service (single__service) ── */
.single__service .service__icon__bg path {
  fill: #009A44 !important;
  fill-opacity: 0.07 !important;
}
.single__service:hover {
  border-color: #009A44 !important;
}
.single__service .service__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #009A44 !important;
  border-color: #009A44 !important;
  border-radius: 999px;
  padding: 10px 18px;
  min-height: 44px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  box-shadow: 0 8px 20px rgba(0, 154, 68, 0.12);
}
.single__service .service__button:hover {
  background: #009A44 !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 154, 68, 0.18);
}
/* Icônes SVG inline : override couleur primaire (#5F2DED → vert CI) */
.single__service .service__icon path[fill="#5F2DED"],
.single__service .service__icon rect[fill="#5F2DED"],
.single__service .service__icon path[fill="#5f2ded"],
.single__service .service__icon rect[fill="#5f2ded"] {
  fill: #009A44 !important;
}
/* Icônes SVG inline : override couleur accent (#FFB31F → orange CI) */
.single__service .service__icon path[fill="#FFB31F"],
.single__service .service__icon rect[fill="#FFB31F"],
.single__service .service__icon path[fill="#ffb31f"],
.single__service .service__icon rect[fill="#ffb31f"] {
  fill: #F77F00 !important;
}
.service__small__img path {
  stroke: #F77F00 !important;
}

/* ── 12. Section testimonials / concours ── */
.single__testimonial__wraper {
  border-color: rgba(0,154,68,.15) !important;
}
.single__testimonial__wraper:hover {
  border-color: #009A44 !important;
}
.single__testimonial__inner .testimonial__name h6 a:hover {
  color: #009A44 !important;
}
.single__testimonial__inner .testimonial__name span {
  color: #F77F00 !important;
}
.testimonial__content a {
  color: #009A44 !important;
}

/* Contrôles slider testimonial */
.home-testimonial-prev,
.home-testimonial-next {
  background: rgba(0,154,68,.12) !important;
  color: #009A44 !important;
  border: 2px solid #009A44 !important;
}
.home-testimonial-prev:hover,
.home-testimonial-next:hover {
  background: #009A44 !important;
  color: #fff !important;
}

/* ── 13. Section Établissements (gridarea) ── */
.grid__badge {
  background: #009A44 !important;
  color: #fff !important;
}
.gridarea__heading h3 a:hover {
  color: #009A44 !important;
}
.gridfilter_nav button.active,
.gridfilter_nav button:hover {
  background: #009A44 !important;
  color: #fff !important;
  border-color: #009A44 !important;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(0, 154, 68, 0.12);
}

/* ── 14. Footer ── */
.footerarea {
  border-top: 4px solid #009A44 !important;
}
.footerarea__heading h3 {
  color: #009A44 !important;
}
.footerarea__list ul li a:hover {
  color: #F77F00 !important;
}
.footerarea__newsletter .subscribe__btn {
  background: #009A44 !important;
  border-color: #009A44 !important;
  color: #fff !important;
  border-radius: 999px;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  box-shadow: 0 8px 20px rgba(0, 154, 68, 0.12);
}
.footerarea__newsletter .subscribe__btn:hover {
  background: #F77F00 !important;
  border-color: #F77F00 !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 154, 68, 0.18);
}
.footerarea__content a,
.footer__bottom__icon i {
  color: #009A44 !important;
}
.footerarea__copyright a {
  color: #F77F00 !important;
}

/* ── 15. Boutons génériques ── */
.btn__1,
button.btn__1 {
  background: #009A44 !important;
  border-color: #009A44 !important;
  color: #fff !important;
  border-radius: 999px;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  box-shadow: 0 8px 20px rgba(0, 154, 68, 0.12);
}
.btn__1:hover {
  background: #F77F00 !important;
  border-color: #F77F00 !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 154, 68, 0.18);
}

/* ── 16. Scrollbar thématique ── */
::-webkit-scrollbar-thumb {
  background: linear-gradient(#009A44, #F77F00) !important;
}

/* ── 17. Pagination dots slider établissements ── */
.slick-dots li button:before {
  color: #009A44 !important;
}
.slick-dots li.slick-active button:before {
  color: #009A44 !important;
}

/* ── 18. Liens globaux ── */
a:hover {
  color: #009A44;
}

/* ── 19. Heading underline ── */
.heading__underline h2:after,
.heading__underline::after {
  background: linear-gradient(90deg, #F77F00, #009A44) !important;
}

/* ── 20. Background hero dégradé leger ── */
.herobannerarea {
  background: linear-gradient(160deg, #fff7f0 0%, #f0faf4 100%) !important;
}

/* ── 21. Icônes icofont colorées ── */
.icofont-heart-alt,
.footer__bottom__icon .icofont-clock-time {
  color: #F77F00 !important;
}

/* ── 22. Slider simple (établissements) prev/next ── */
.slider-prev,
.slider-next {
  background: rgba(0,154,68,.75) !important;
  color: #fff !important;
  border-radius: 999px;
  min-width: 40px;
  min-height: 40px;
  box-shadow: 0 8px 20px rgba(0, 154, 68, 0.12);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.slider-prev:hover,
.slider-next:hover {
  background: #F77F00 !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 154, 68, 0.18);
}

/* ── 23. Section titre badge ── */
.section__title__button .default__small__button {
  color: #009A44 !important;
  border-color: rgba(0,154,68,.3) !important;
  background: rgba(0,154,68,.08) !important;
}

/* ── 24. Remplacement explicite des bleus restants ── */
[style*="#03A9F4"],
[style*="#03a9f4"],
[style*="#505975"],
[style*="#5F2DED"],
[style*="#5f2ded"] {
  color: #009A44 !important;
}

svg path[fill="#03A9F4"],
svg path[fill="#03a9f4"],
svg path[fill="#505975"],
svg path[fill="#5F2DED"],
svg path[fill="#5f2ded"],
svg rect[fill="#03A9F4"],
svg rect[fill="#03a9f4"],
svg rect[fill="#505975"],
svg rect[fill="#5F2DED"],
svg rect[fill="#5f2ded"] {
  fill: #009A44 !important;
}

svg path[stroke="#03A9F4"],
svg path[stroke="#03a9f4"],
svg path[stroke="#505975"],
svg path[stroke="#5F2DED"],
svg path[stroke="#5f2ded"],
svg rect[stroke="#03A9F4"],
svg rect[stroke="#03a9f4"],
svg rect[stroke="#505975"],
svg rect[stroke="#5F2DED"],
svg rect[stroke="#5f2ded"] {
  stroke: #F77F00 !important;
}

/* ── 25. Lisibilité renforcée des textes blancs ── */
.footerarea,
.headerarea,
.herobannerarea,
.single__service,
.single__testimonial__wraper,
.gridarea__wraper {
  color: #1d1d1d;
}

/* Le texte blanc ne reste blanc que sur fonds foncés/verts */
.headerarea__button a,
.herobannerarea__button__1,
.btn__1,
button.btn__1,
.footerarea__newsletter .subscribe__btn,
.grid__badge,
.slider-prev,
.slider-next {
  color: #ffffff !important;
  text-shadow: none;
}

/* Si un texte blanc apparaît sur fond clair, on le force en foncé */
.single__service *:not(.service__button):not(.btn__1),
.single__testimonial__wraper *:not(.btn__1),
.gridarea__content *:not(.grid__badge) {
  text-shadow: none;
}

.single__service p,
.single__service h3 a,
.single__service a,
.single__testimonial__wraper p,
.single__testimonial__wraper h6 a,
.gridarea__content,
.gridarea__content p,
.gridarea__content a {
  color: #1f2b22 !important;
}

/* Texte blanc lisible uniquement sur boutons/fonds foncés */
.single__service .service__button,
.single__service .service__button:hover,
.headerarea__button a,
.headerarea__button a:hover,
.herobannerarea__button__1,
.herobannerarea__button__1:hover,
.footerarea__newsletter .subscribe__btn,
.footerarea__newsletter .subscribe__btn:hover,
.gridfilter_nav button.active,
.gridfilter_nav button:hover {
  color: #ffffff !important;
}

/* ── 26. Breadcrumb / hero area (centralisé) ── */
.breadcrumbarea{
  position:relative;
  padding:56px 0 36px;
  color:#fff;
  background-color:transparent;
  /* image de fond + léger overlay pour lisibilité */
  background-image: linear-gradient(rgba(0,0,0,0.28), rgba(0,0,0,0.12)), url('/assetsfront/img/herobanner/herobanner__5.png');
  background-size:cover;
  background-position:center center;
}
.breadcrumb__content__wraper{max-width:1100px;margin:0 auto;padding:10px 18px}
.breadcrumb__title .heading{font-size:30px;line-height:1.1;margin:0 0 8px;font-weight:700;color:#ffffff}
.breadcrumb__inner{display:flex;justify-content:center}
.breadcrumb__inner ul{list-style:none;padding:0;margin:0;display:flex;gap:10px;align-items:center;color:rgba(255,255,255,0.95)}
.breadcrumb__inner ul li{font-size:14px;color:rgba(255,255,255,0.95)}
.breadcrumb__inner ul li a{color:rgba(255,255,255,0.98);text-decoration:none}
.breadcrumb__inner ul li + li:before{content:"/";margin:0 8px;color:rgba(255,255,255,0.6)}
.shape__icon__2{position:absolute;right:8px;top:8px;pointer-events:none}
.shape__icon__2 img{display:block;max-width:86px;opacity:0.95}
@media (max-width:767px){
  .breadcrumbarea{padding:36px 0}
  .breadcrumb__title .heading{font-size:22px}
  .shape__icon__2{display:none}
  .breadcrumb__inner{padding-top:8px}
}

/* Corps de texte jamais blanc sur fonds clairs */
.single__service p,
.single__service h3,
.single__service h3 a,
.single__testimonial__wraper p,
.single__testimonial__wraper h6,
.single__testimonial__wraper h6 a,
.gridarea__heading h3,
.gridarea__heading h3 a,
.footerarea__content p,
.footerarea__list ul li a {
  color: #1f2b22 !important;
}

/* ── 26. Dégradés CI plus présents sur éléments clés ── */
.section__title__button .default__small__button,
.hero-main-prev:hover,
.hero-main-next:hover,
.home-testimonial-prev:hover,
.home-testimonial-next:hover {
  background-image: linear-gradient(135deg, #009A44 0%, #F77F00 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

/* ── 27. Uniformisation fond grid + testimonial (variantes orange) ── */
.gridarea.gridarea__2 {
  background: linear-gradient(180deg, #fff3e5 0%, #ffe8cc 100%) !important;
}

.testmonialarea.home-testimonial-tight {
  background: linear-gradient(160deg, #fff8ef 0%, #ffe7c7 55%, #ffe0b8 100%) !important;
}

/* Cartes testimonial plus lisibles sur fond orange clair */
.testmonialarea.home-testimonial-tight .single__testimonial__wraper {
  background: #ffffff !important;
  border: 1px solid rgba(247, 127, 0, 0.25) !important;
  box-shadow: 0 8px 20px rgba(247, 127, 0, 0.10) !important;
}

/* Titres h non visibles -> forcer contraste */
.testmonialarea.home-testimonial-tight h2,
.testmonialarea.home-testimonial-tight h6,
.testmonialarea.home-testimonial-tight h6 a,
.testmonialarea.home-testimonial-tight .section__title__heading h2,
.testmonialarea.home-testimonial-tight .testimonial__name h6 a {
  color: #1f2b22 !important;
}

.testmonialarea.home-testimonial-tight .section__title__heading h2 span,
.testmonialarea.home-testimonial-tight .testimonial__name span {
  color: #d96800 !important;
}

/* Override des styles inline de index.blade.php (boutons sombres) */
.home-testimonial-tight .home-testimonial-controls button {
  background: #009A44 !important;
  color: #ffffff !important;
  border-radius: 999px;
  min-width: 44px;
  min-height: 44px;
  box-shadow: 0 8px 20px rgba(0, 154, 68, 0.12);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}

.home-testimonial-tight .home-testimonial-controls button:hover {
  background: #F77F00 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 154, 68, 0.18);
}

/* Grid headings/liste plus contrastés */
.gridarea.gridarea__2 .section__title__heading__2 h2,
.gridarea.gridarea__2 .gridarea__content,
.gridarea.gridarea__2 .gridarea__content a,
.gridarea.gridarea__2 .gridarea__list ul li {
  color: #1f2b22 !important;
}

/* ── 28. Header + Menu : fonds CI et contraste texte ── */
.headerarea,
.headerarea.headerarea__2,
.header__sticky {
  background: linear-gradient(135deg, #fff8ef 0%, #f0faf4 100%) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.headerarea__main__menu nav ul > li > a,
.headerarea__right,
.headerarea__login a,
.headerarea__left__logo a {
  color: #1f2b22 !important;
}

.headerarea__main__menu nav ul > li:hover > a,
.headerarea__main__menu nav ul > li > a.active,
.headerarea__login a:hover {
  color: #009A44 !important;
}

/* Menu mobile */
.mob_menu_wrapper,
.mobile-off-canvas,
.mobile-menu-area,
.mobile-menu-wrap {
  background: linear-gradient(180deg, #fff6ea 0%, #ffe8cc 100%) !important;
}

.mob_menu_wrapper a,
.mobile-menu-area a,
.mobile-menu-wrap a,
.mobile-menu-area li a {
  color: #1f2b22 !important;
}

/* ── 29. Zone slide (hero) : fond et lisibilité ── */
.hero-main-slider,
.herobannerarea.herobannerarea__box.hero-main-slider {
  background: linear-gradient(165deg, #fff8ef 0%, #ffe6c2 45%, #eef9f3 100%) !important;
}

.hero-main-slider .hero-main-slide {
  background: transparent !important;
}

.herobannerarea__title__heading__2 h2,
.herobannerarea__text p,
.herobannerarea__small__title span,
.hero-main-slider .hero-main-toptext {
  color: #1f2b22 !important;
}

.hero-main-slider .hero-main-toptext {
  background: rgba(247, 127, 0, 0.14) !important;
  border: 1px solid rgba(247, 127, 0, 0.35);
  -webkit-text-fill-color: #1f2b22 !important;
}

.hero-main-slider .hero-main-prev,
.hero-main-slider .hero-main-next {
  background: #009A44 !important;
  border-color: #009A44 !important;
  color: #ffffff !important;
}

.hero-main-slider .hero-main-prev:hover,
.hero-main-slider .hero-main-next:hover,
.hero-main-slider .hero-main-dot.is-active {
  background: #F77F00 !important;
  border-color: #F77F00 !important;
  color: #ffffff !important;
}

.hero-main-slider .hero-main-dot {
  background: rgba(247, 127, 0, 0.45) !important;
}

/* ── 30. Footer : fond CI + contraste fort ── */
.footerarea {
  background: linear-gradient(140deg, #1f5d39 0%, #009A44 52%, #f77f00 100%) !important;
  color: #ffffff !important;
}

.footerarea__wrapper,
.footerarea__inner,
.footerarea__heading h3,
.footerarea__content,
.footerarea__content p,
.footerarea__list ul li a,
.footer__bottom__content h6,
.footer__bottom__content span,
.footerarea__newsletter__input input {
  color: #ffffff !important;
}

.footerarea__newsletter__input input {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
}

.footerarea__newsletter__input input::placeholder {
  color: rgba(255, 255, 255, 0.85) !important;
}

.footerarea__list ul li a:hover,
.footerarea__content a:hover,
.footerarea__copyright a:hover {
  color: #ffe0b8 !important;
}

.footerarea__newsletter .subscribe__btn {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #1f5d39 !important;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(31, 93, 57, 0.10);
}

.footerarea__newsletter .subscribe__btn:hover {
  background: #ffe6c2 !important;
  border-color: #ffe6c2 !important;
  color: #1f5d39 !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(31, 93, 57, 0.14);
}

/* ── 31. Section services (populerarea) : même traitement que testimonial ── */
.populerarea.sp_top_80.sp_bottom_50 {
  background: linear-gradient(160deg, #fff8ef 0%, #ffe7c7 55%, #ffe0b8 100%) !important;
}

/* Cartes de services plus lisibles sur fond orange clair */
.populerarea .single__service {
  background: #ffffff !important;
  border: 1px solid rgba(247, 127, 0, 0.25) !important;
  box-shadow: 0 8px 20px rgba(247, 127, 0, 0.10) !important;
}

.populerarea .single__service:hover {
  border-color: #F77F00 !important;
  box-shadow: 0 12px 28px rgba(247, 127, 0, 0.18) !important;
}

/* Titres et textes visibles sur cartes blanches */
.populerarea h2,
.populerarea h3,
.populerarea h3 a,
.populerarea .single__service h3,
.populerarea .single__service h3 a,
.populerarea .single__service p,
.populerarea .service__content {
  color: #1f2b22 !important;
}

/* Texte du heading principal */
.populerarea__heading h2,
.populerarea__heading h2 span,
.populerarea .populerarea__heading h2 {
  color: #1f2b22 !important;
}

.populerarea__heading h2 span,
.populerarea .populerarea__heading h2 span {
  color: #F77F00 !important;
}

/* SVG icons conversion - bleu → vert CI */
.populerarea .service__icon path[fill="#5F2DED"],
.populerarea .service__icon rect[fill="#5F2DED"],
.populerarea .service__icon path[fill="#5f2ded"],
.populerarea .service__icon rect[fill="#5f2ded"],
.populerarea .service__icon__bg path[fill="#5F2DED"],
.populerarea .service__icon__bg rect[fill="#5F2DED"] {
  fill: #009A44 !important;
}

/* SVG icons conversion - jaune → orange CI */
.populerarea .service__icon path[fill="#FFB31F"],
.populerarea .service__icon rect[fill="#FFB31F"],
.populerarea .service__icon path[fill="#ffb31f"],
.populerarea .service__icon rect[fill="#ffb31f"],
.populerarea .service__small__img path[stroke="#FFB31F"],
.populerarea .service__small__img path[stroke="#ffb31f"] {
  fill: #F77F00 !important;
  stroke: #F77F00 !important;
}

/* SVG background icon opacity et couleur */
.populerarea .service__icon__bg path {
  fill: #009A44 !important;
  fill-opacity: 0.07 !important;
}

/* Boutons de service */
.populerarea .service__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff !important;
  border: 2px solid #009A44 !important;
  color: #009A44 !important;
  font-weight: 600;
  border-radius: 999px;
  padding: 10px 18px;
  min-height: 44px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  box-shadow: 0 8px 20px rgba(0, 154, 68, 0.10);
}

.populerarea .service__button:hover {
  background: #009A44 !important;
  border-color: #009A44 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 154, 68, 0.16);
}

/* Lien du service au survol */
.populerarea .single__service .service__content a:hover {
  color: #F77F00 !important;
}

/* ── 27. Pages Détail (shared detail-*) ── */
.detail-cover img {
  width: 100%;
  border-radius: 14px;
  object-fit: cover;
  max-height: 420px;
}

.detail-main-content {
  padding: 20px;
  border: 1px solid #e9f3ee;
  border-radius: 14px;
  background: #ffffff;
}

.detail-chip {
  display: inline-block;
  border-radius: 999px;
  background: #ecfdf5;
  color: #166534;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
}

.detail-side-card {
  border: 1px solid #e9f3ee;
  border-radius: 14px;
  background: #ffffff;
  padding: 14px;
  height: 100%;
}

.detail-box-green {
  background: #ecfdf5;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 12px;
}

.detail-box-title {
  font-size: 12px;
  font-weight: 700;
  color: #166534;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.detail-info-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  border-bottom: 1px dashed #d1e7dd;
  padding-bottom: 6px;
}

.detail-info-label {
  font-size: 13px;
  color: #6b7280;
  min-width: 120px;
}

.detail-info-value {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  text-align: right;
}

.detail-info-value-success {
  color: #059669;
  font-weight: 700;
}

.detail-actions {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.detail-btn {
  flex: 1 1 170px;
  text-align: center;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all .2s ease;
}

.detail-btn-primary {
  background: #009a44;
  color: #fff;
  border: 1px solid #009a44;
}

.detail-btn-primary:hover {
  background: #007f38;
  color: #fff;
}

.detail-btn-outline {
  background: #fff;
  color: #009a44;
  border: 1px solid #009a44;
}

.detail-btn-outline:hover {
  background: #ecfdf5;
  color: #007f38;
}

@media (max-width: 991px) {
  .detail-main-content {
    margin-top: 16px;
  }
}