/* =====================================================================
   Centre Amine Hijama — Brand restyle (charte du nouveau logo)
   Vert foncé  #0C6030   |   Vert feuille  #7CB53E
   Chargé APRÈS le CSS principal : les règles ci-dessous priment.
   ===================================================================== */

:root{
  --ca-green:#0C6030;        /* vert foncé principal */
  --ca-green-dark:#084B25;   /* hover / accents profonds */
  --ca-green-2:#138040;      /* vert medium (dégradés) */
  --ca-leaf:#7CB53E;         /* vert feuille clair */
  --ca-leaf-soft:#DCEFCE;    /* fond clair (cercles d'icônes) */
  --ca-tint:#F1F8EC;         /* fond très clair */
}

/* ---------- 1. REMAP COULEURS  (teal ➜ vert marque) ---------- */
.text-teal-600{color:var(--ca-green) !important}
.bg-teal-50{background-color:var(--ca-tint) !important}
.bg-teal-100{background-color:var(--ca-leaf-soft) !important}
.bg-teal-600{background-color:var(--ca-green) !important}
.border-teal-100{border-color:var(--ca-leaf-soft) !important}
.border-teal-600{border-color:var(--ca-green) !important}

.hover\:bg-teal-50:hover{background-color:var(--ca-tint) !important}
.hover\:bg-teal-100:hover{background-color:var(--ca-leaf-soft) !important}
.hover\:bg-teal-700:hover{background-color:var(--ca-green-dark) !important}
.hover\:text-teal-600:hover{color:var(--ca-green) !important}

/* dégradés (sections, badges) */
.from-teal-50{--tw-gradient-from:var(--ca-tint) var(--tw-gradient-from-position);--tw-gradient-to:rgb(241 248 236 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-teal-100{--tw-gradient-from:var(--ca-leaf-soft) var(--tw-gradient-from-position);--tw-gradient-to:rgb(220 239 206 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-teal-400{--tw-gradient-from:var(--ca-leaf) var(--tw-gradient-from-position);--tw-gradient-to:rgb(124 181 62 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.to-teal-100{--tw-gradient-to:var(--ca-leaf-soft) var(--tw-gradient-to-position)}
.to-teal-500{--tw-gradient-to:#4E9A34 var(--tw-gradient-to-position)}

/* ---------- 2. TYPOGRAPHIE ---------- */
h1,h2,h3,h4,.font-bold{font-family:'Poppins','Inter',system-ui,-apple-system,sans-serif}
h1,h2,h3{letter-spacing:-.015em}
html{scroll-behavior:smooth}
::selection{background:var(--ca-leaf);color:#fff}

/* ---------- 3. BOUTONS (CTA) ---------- */
.rounded-lg.px-6.py-3{border-radius:.9rem;transition:transform .22s ease,box-shadow .22s ease,background-color .22s ease}

/* bouton plein : dégradé vert + ombre teintée */
.bg-teal-600.text-white{
  background-image:linear-gradient(135deg,var(--ca-green) 0%,var(--ca-green-2) 100%) !important;
  box-shadow:0 10px 22px -10px rgba(12,96,48,.55) !important;
}
.bg-teal-600.text-white:hover{
  background-image:linear-gradient(135deg,var(--ca-green-dark) 0%,var(--ca-green) 100%) !important;
  box-shadow:0 16px 30px -10px rgba(12,96,48,.62) !important;
}

/* bouton contour : liseré plus doux au survol */
.border-2.border-teal-600{transition:all .22s ease}
.border-2.border-teal-600:hover{background-color:var(--ca-tint) !important;box-shadow:0 8px 20px -12px rgba(12,96,48,.4)}

/* pastilles réseaux rondes (footer) : dégradé */
.bg-teal-600.rounded-full{background-image:linear-gradient(135deg,var(--ca-green),var(--ca-green-2)) !important}

/* ---------- 4. CARTES & OMBRES (finition douce, teinte verte) ---------- */
.shadow-md{box-shadow:0 4px 16px -6px rgba(16,45,25,.12),0 2px 6px -3px rgba(16,45,25,.07) !important}
.shadow-lg{box-shadow:0 14px 30px -12px rgba(12,96,48,.20) !important}
.shadow-xl,.hover\:shadow-xl:hover{box-shadow:0 24px 45px -14px rgba(12,96,48,.24) !important}
.rounded-xl{border-radius:1rem}
.rounded-2xl{border-radius:1.25rem}

/* cercles d'icônes : léger dégradé feuille */
.w-12.h-12.bg-teal-100,.bg-teal-100.rounded-full{
  background-image:linear-gradient(135deg,var(--ca-leaf-soft),#EBF6E1) !important;
}

/* ---------- 5. FINITIONS DIVERSES ---------- */
/* barre de titre fixe : ombre plus fine */
header.fixed{box-shadow:0 2px 14px -8px rgba(16,45,25,.18)}
/* liens de navigation : souligné animé subtil */
nav button{position:relative}

/* transitions globales douces sur les éléments interactifs */
a,button{transition:color .2s ease,background-color .2s ease,box-shadow .2s ease,transform .2s ease}

/* image logo header un poil plus grande sur desktop pour l'équilibre */
@media (min-width:1024px){
  header .cursor-pointer img[alt="Centre Amine Hijama"]{height:3.4rem}
}

/* ---------- 6. UNIFICATION VERTE des accents hors-charte ----------
   Icônes "Pourquoi nous" (bleu/violet/orange) + section "Femmes" (rose/violet)
   sont remappés vers des dégradés verts de la charte.                     */
:root{--ca-green-3:#2E8B4E;--ca-green-4:#5FA637}

/* --- points de départ de dégradé (from-*) --- */
.from-blue-400{--tw-gradient-from:var(--ca-green-4) var(--tw-gradient-from-position);--tw-gradient-to:rgb(95 166 55 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-violet-400{--tw-gradient-from:#86C452 var(--tw-gradient-from-position);--tw-gradient-to:rgb(134 196 82 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-orange-400{--tw-gradient-from:#86C452 var(--tw-gradient-from-position);--tw-gradient-to:rgb(134 196 82 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-indigo-400{--tw-gradient-from:var(--ca-green-4) var(--tw-gradient-from-position);--tw-gradient-to:rgb(95 166 55 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-pink-400{--tw-gradient-from:var(--ca-leaf) var(--tw-gradient-from-position);--tw-gradient-to:rgb(124 181 62 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-pink-50{--tw-gradient-from:var(--ca-tint) var(--tw-gradient-from-position);--tw-gradient-to:rgb(241 248 236 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}

/* --- points d'arrivée de dégradé (to-*) --- */
.to-cyan-500{--tw-gradient-to:var(--ca-green-3) var(--tw-gradient-to-position)}
.to-pink-500{--tw-gradient-to:#4E9A34 var(--tw-gradient-to-position)}
.to-red-500{--tw-gradient-to:var(--ca-green-3) var(--tw-gradient-to-position)}
.to-violet-500{--tw-gradient-to:var(--ca-green-3) var(--tw-gradient-to-position)}
.to-purple-500{--tw-gradient-to:var(--ca-green-2) var(--tw-gradient-to-position)}
.to-purple-50{--tw-gradient-to:#E7F4DB var(--tw-gradient-to-position)}

/* icône "Section Femmes" (silhouette violette) ➜ blanche sur cercle vert */
img[src="/images/femmes.png"]{filter:brightness(0) invert(1)}

/* sous-titre "Section Femmes" (violet) ➜ vert marque */
.text-purple-600{color:var(--ca-green) !important}

/* dégradés cyan restants (fond du hero) ➜ vert */
.via-cyan-50{--tw-gradient-to:rgb(236 254 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#E7F4DB var(--tw-gradient-via-position),var(--tw-gradient-to)}
.to-cyan-50{--tw-gradient-to:#EAF6E0 var(--tw-gradient-to-position)}
.to-cyan-100{--tw-gradient-to:var(--ca-leaf-soft) var(--tw-gradient-to-position)}
.to-cyan-500{--tw-gradient-to:var(--ca-green-3) var(--tw-gradient-to-position)}

/* =====================================================================
   DESIGN v2 — mise en page premium, mouvement & intention "bien-être"
   ===================================================================== */

/* ---------- A. ANIMATIONS D'APPARITION AU SCROLL (pilotées par enhance.js) ----------
   La classe .ca-reveal n'est ajoutée QUE par JS : si le JS échoue, tout reste visible. */
.ca-reveal{opacity:0;transform:translateY(30px) scale(.985);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform}
.ca-reveal.ca-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .ca-reveal{opacity:1 !important;transform:none !important;transition:none !important}
  #hero::before,#hero::after{animation:none !important}
}

/* barre de progression de lecture (élément injecté hors React) */
#ca-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:9999;background:linear-gradient(90deg,var(--ca-green),var(--ca-leaf));box-shadow:0 0 12px rgba(124,181,62,.55);transition:width .12s linear;pointer-events:none}

/* ---------- B. HEADER — se compacte et devient "verre dépoli" au scroll ---------- */
header.fixed{transition:background .35s ease,box-shadow .35s ease,backdrop-filter .35s ease,padding .35s ease}
html.ca-scrolled header.fixed{
  background:rgba(255,255,255,.82) !important;
  backdrop-filter:saturate(1.5) blur(12px);
  -webkit-backdrop-filter:saturate(1.5) blur(12px);
  box-shadow:0 8px 30px -14px rgba(16,45,25,.30);
}
header img[alt="Centre Amine Hijama"]{transition:height .35s ease}
html.ca-scrolled header img[alt="Centre Amine Hijama"]{height:2.7rem !important}

/* ---------- C. HERO — halos verts animés, cadre photo, titre plus fort ---------- */
#hero{position:relative;overflow:hidden}
#hero > div{position:relative;z-index:2}
#hero::before,#hero::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);z-index:0;pointer-events:none}
#hero::before{width:440px;height:440px;background:radial-gradient(circle,rgba(124,181,62,.42),transparent 70%);top:-140px;right:-90px;animation:caFloat 15s ease-in-out infinite}
#hero::after{width:380px;height:380px;background:radial-gradient(circle,rgba(12,96,48,.30),transparent 70%);bottom:-150px;left:-100px;animation:caFloat 20s ease-in-out infinite reverse}
@keyframes caFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(26px,-30px)}}

#hero h1{font-size:clamp(2.4rem,5.2vw,3.9rem);line-height:1.06;letter-spacing:-.02em}
#hero p{max-width:34rem}

/* cadre décoratif incliné derrière la photo du hero */
#hero .relative{isolation:isolate}
#hero .relative::before{content:"";position:absolute;inset:14px -14px -14px 14px;background:linear-gradient(135deg,var(--ca-leaf),var(--ca-green));border-radius:2rem;opacity:.16;z-index:-1;transform:rotate(-3deg);transition:transform .5s ease}
#hero .relative:hover::before{transform:rotate(-1.5deg) scale(1.02)}
#hero img[src*="hero-image"]{box-shadow:0 34px 70px -24px rgba(12,96,48,.5) !important}

/* ---------- D. TITRES DE SECTION — accent souligné dégradé ---------- */
section > div > .text-center h2{display:inline-block}
section > div > .text-center h2::after{content:"";display:block;width:62px;height:4px;margin:16px auto 0;border-radius:99px;background:linear-gradient(90deg,var(--ca-green),var(--ca-leaf))}

/* ---------- E. BOUTONS — reflet lumineux au survol ---------- */
.rounded-lg.px-6.py-3{position:relative;overflow:hidden}
.bg-teal-600.text-white::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);transition:left .65s ease;pointer-events:none}
.bg-teal-600.text-white:hover::after{left:150%}

/* ---------- F. CARTES — bord fin, transition douce, zoom média ---------- */
.rounded-xl.shadow-md{border:1px solid rgba(16,45,25,.06);transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s ease !important}

/* pastille du badge hero (bien-être) : léger relief */
.px-4.py-2.rounded-full.bg-teal-100{box-shadow:0 8px 22px -12px rgba(12,96,48,.45);border:1px solid rgba(124,181,62,.35)}

/* icônes de service : petit rebond au survol de la carte */
.rounded-xl.shadow-md .rounded-full{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.rounded-xl.shadow-md:hover .rounded-full{transform:scale(1.12) rotate(-4deg)}

/* ---------- G. WIDGET & DIVERS ---------- */
html{scroll-padding-top:96px}
img{backface-visibility:hidden}

/* ---------- H. FOOTER — refonte charte verte ---------- */
footer{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,#0C6030 0%,#0A5228 55%,#073B1C 100%) !important;
}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--ca-leaf),rgba(255,255,255,.7),var(--ca-leaf))}
footer::after{content:"";position:absolute;inset:0;background:radial-gradient(720px circle at 82% -10%,rgba(124,181,62,.18),transparent 60%);pointer-events:none}
footer > div{position:relative;z-index:1}

/* logo : plus de pastille blanche, logo passé en blanc */
footer .bg-white{background:transparent !important;box-shadow:none !important;padding:0 !important}
footer img[alt="Centre Amine Hijama"]{filter:brightness(0) invert(1);height:7rem;width:auto}

/* textes en clair */
footer .text-gray-400{color:rgba(255,255,255,.72) !important}

/* icônes sociales : uniformes, verre dépoli */
footer a[class*="rounded-full"]{
  background:rgba(255,255,255,.14) !important;background-image:none !important;
  border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:transform .3s ease,background .3s ease !important;
}
footer a[class*="rounded-full"]:hover{background:rgba(255,255,255,.26) !important}

/* bouton "Réserver maintenant" : blanc, texte vert (contraste fort sur fond vert) */
footer .bg-teal-600.text-white{
  background:#fff !important;background-image:none !important;color:var(--ca-green) !important;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.5) !important;
}
footer .bg-teal-600.text-white:hover{background:#EAF6E0 !important;background-image:none !important}
footer .bg-teal-600.text-white::after{display:none}

/* =====================================================================
   ÉCRAN DE CHARGEMENT — logo + ondes radar (façon AirDrop)
   ===================================================================== */
#ca-loader{
  position:fixed;inset:0;z-index:99999;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 45%,#ffffff 0%,#EAF6E0 55%,#DCEFCE 100%);
  transition:opacity .6s ease,visibility .6s ease;
  /* filet de sécurité : si le JS ne masque pas, on disparaît quand même à 6s */
  animation:caLoaderFail 1ms linear 6s forwards;
}
#ca-loader.ca-hide{opacity:0;visibility:hidden;pointer-events:none}
@keyframes caLoaderFail{to{opacity:0;visibility:hidden;pointer-events:none}}

.ca-loader-stage{position:relative;width:360px;height:360px;display:flex;align-items:center;justify-content:center}
.ca-loader-stage .ca-ring{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--ca-leaf);opacity:0;
  animation:caPing 2.6s cubic-bezier(0,.2,.8,1) infinite;
}
.ca-loader-stage .ca-ring:nth-child(1){animation-delay:0s}
.ca-loader-stage .ca-ring:nth-child(2){animation-delay:.65s}
.ca-loader-stage .ca-ring:nth-child(3){animation-delay:1.3s}
.ca-loader-stage .ca-ring:nth-child(4){animation-delay:1.95s}
@keyframes caPing{
  0%{transform:scale(.52);opacity:.9;border-color:var(--ca-green)}
  60%{opacity:.18;border-color:var(--ca-leaf)}
  100%{transform:scale(1.2);opacity:0}
}
.ca-loader-logo{
  position:relative;z-index:2;height:190px;width:auto;
  filter:drop-shadow(0 10px 26px rgba(12,96,48,.28));
  animation:caLogoPulse 2.6s ease-in-out infinite;
}
@keyframes caLogoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

@media (prefers-reduced-motion:reduce){
  .ca-loader-stage .ca-ring,.ca-loader-logo{animation:none}
}
@media (max-width:640px){
  .ca-loader-stage{width:280px;height:280px}
  .ca-loader-logo{height:150px}
}

/* =====================================================================
   SÉLECTEUR DE LANGUE — 3 langues (FR / ع / EN)
   ===================================================================== */
.ca-lang{display:inline-flex;align-items:center;gap:4px;background:var(--ca-tint);border:1px solid rgba(124,181,62,.35);border-radius:12px;padding:4px}
.ca-lang-btn{padding:6px 12px;border-radius:8px;font-weight:700;font-size:.9rem;color:var(--ca-green);background:transparent;border:0;cursor:pointer;transition:all .2s ease;line-height:1}
.ca-lang-btn:hover{background:var(--ca-leaf-soft)}
.ca-lang-btn.ca-on{background:linear-gradient(135deg,var(--ca-green),var(--ca-green-2));color:#fff;box-shadow:0 6px 14px -6px rgba(12,96,48,.5)}

/* =====================================================================
   HERO v3 — affichage plus moderne
   ===================================================================== */
/* titre principal en dégradé vert */
#hero h1{
  background:linear-gradient(120deg,#0B5C2E 0%,#2E8B4E 48%,#6FAE39 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
/* un seul titre dans le hero : on masque le sous-titre (l'autre langue) */
#hero h2{display:none}
#hero h1{margin-bottom:1.4rem}
#hero p{max-width:34rem;color:#3f5445}

/* badge "service holistique" : verre dépoli */
#hero .px-4.py-2.rounded-full.bg-teal-100{
  background:rgba(255,255,255,.72) !important;background-image:none !important;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(124,181,62,.4);
  box-shadow:0 10px 26px -14px rgba(12,96,48,.45);
}

/* boutons de localisation : puces secondaires compactes */
#hero .flex.flex-wrap button:has(.lucide-map-pin){
  padding:.55rem 1.15rem;font-size:.92rem;border-width:1.5px !important;
  border-color:rgba(12,96,48,.28) !important;color:var(--ca-green) !important;
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
#hero .flex.flex-wrap button:has(.lucide-map-pin):hover{background:#fff}

/* carte flottante en verre sur la photo (injectée par enhance.js) */
#ca-hero-card{
  position:absolute;inset-inline-start:18px;bottom:18px;z-index:3;
  display:flex;flex-direction:column;gap:9px;padding:14px 16px;border-radius:18px;
  background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 20px 44px -18px rgba(12,96,48,.5);border:1px solid rgba(255,255,255,.6);
  animation:caCardIn .7s cubic-bezier(.22,.61,.36,1) both .3s;
}
@keyframes caCardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
#ca-hero-card .row{display:flex;align-items:center;gap:10px;font-weight:700;color:#0C6030;font-size:.95rem;white-space:nowrap}
#ca-hero-card .ic{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#7CB53E,#0C6030);color:#fff;flex-shrink:0}
#ca-hero-card svg{width:18px;height:18px}
@media (max-width:640px){#ca-hero-card{inset-inline-start:10px;bottom:10px;padding:10px 12px;gap:6px}#ca-hero-card .row{font-size:.82rem}#ca-hero-card .ic{width:28px;height:28px}#ca-hero-card svg{width:15px;height:15px}}

/* mobile : centrer la colonne logo + slogan du footer */
@media (max-width:767px){
  footer .grid > div:first-child{text-align:center !important}
}

/* bouton "retour en haut" flottant ➜ vert marque */
.fixed.bottom-6.left-6.bg-gray-800{
  background-color:var(--ca-green) !important;
  background-image:linear-gradient(135deg,var(--ca-green),var(--ca-green-2)) !important;
  box-shadow:0 12px 26px -10px rgba(12,96,48,.6) !important;
}