/* ===========================================================
   Elybe Clinic — style.css global
   Extrait de maquette-clinique-elybe.html (design validé)
   Étend : Tajawal (AR) + helpers RTL
   =========================================================== */

:root{
  --vert-profond:#0E3B2E;
  --vert-clair:#15543F;
  --or:#C9A85C;
  --or-clair:#E3CB97;
  --ivoire:#FAF6EF;
  --sauge:#EBE6D8;
  --charbon:#1A1A18;
  --blanc:#FFFEFB;
  --wa:#1F7A52;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Manrope',system-ui,sans-serif;
  --sans-ar:'Tajawal',var(--sans);
  --serif-ar:'Tajawal',var(--serif);
  --max:1240px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);color:var(--charbon);background:var(--ivoire);
  line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.12;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.eyebrow{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--or);display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--or)}
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;
  padding:16px 30px;border-radius:4px;transition:.35s;cursor:pointer;border:1px solid transparent;letter-spacing:.01em}
.btn-or{background:var(--or);color:var(--vert-profond)}
.btn-or:hover{background:var(--or-clair);transform:translateY(-2px)}
.btn-ghost{border-color:rgba(250,246,239,.45);color:var(--ivoire)}
.btn-ghost:hover{border-color:var(--or);color:var(--or)}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{filter:brightness(1.08);transform:translateY(-2px)}
.btn-dark{background:var(--vert-profond);color:var(--ivoire)}
.btn-dark:hover{background:var(--vert-clair);transform:translateY(-2px)}

/* ---------- TOP STRIP ---------- */
.strip{background:var(--vert-profond);color:var(--or-clair);text-align:center;
  font-size:13px;letter-spacing:.06em;padding:9px 16px;font-weight:600}

/* ---------- HEADER ---------- */
header{position:sticky;top:0;z-index:1000;background:rgba(250,246,239,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid rgba(14,59,46,.10)}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px}
.logo{font-family:var(--serif);font-size:26px;font-weight:600;color:var(--vert-profond);
  display:flex;align-items:baseline;gap:9px}
.logo span{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.42em;
  color:var(--or);text-transform:uppercase}
.menu{display:flex;align-items:center;gap:34px;list-style:none}
.menu a{font-size:15px;font-weight:600;color:var(--charbon);transition:.25s;position:relative;padding:6px 0}
.menu a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;
  background:var(--or);transition:.3s}
.menu a:hover{color:var(--vert-profond)}
.menu a:hover::after{width:100%}
.hd-right{display:flex;align-items:center;gap:20px}
.lang{display:flex;gap:4px;font-size:13px;font-weight:700;letter-spacing:.05em}
.lang a,.lang button{background:none;border:none;cursor:pointer;color:#9a958a;padding:5px 7px;
  border-radius:3px;font:inherit;transition:.2s;text-decoration:none}
.lang a.on,.lang button.on{color:var(--vert-profond);background:var(--sauge)}
.lang a:hover,.lang button:hover{color:var(--vert-profond)}
.burger{display:none;background:none;border:none;flex-direction:column;gap:5px;cursor:pointer}
.burger span{width:26px;height:2px;background:var(--vert-profond);display:block}

/* ---------- MEGA-MENU DROPDOWN ---------- */
.menu > li{position:relative}
.menu > li.has-submenu > a::after{content:" ▾";color:var(--or);font-size:11px;margin-left:4px;display:inline-block;vertical-align:middle}
.submenu{
  position:absolute;top:calc(100% + 14px);left:-12px;
  background:var(--blanc);border:1px solid rgba(14,59,46,.1);border-radius:8px;
  box-shadow:0 18px 40px rgba(14,59,46,.14);
  min-width:260px;padding:10px 0;
  list-style:none;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .25s,visibility .25s,transform .25s;
  z-index:1001;
}
.menu > li.has-submenu:hover > .submenu,
.menu > li.has-submenu:focus-within > .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.submenu li{margin:0}
.submenu a{display:block;padding:9px 22px;font-size:14px;font-weight:500;color:var(--charbon);transition:.18s;border-left:2px solid transparent}
.submenu a::after{display:none}
.submenu a:hover{background:var(--sauge);color:var(--vert-profond);border-left-color:var(--or)}
.submenu a[aria-current="page"]{color:var(--vert-profond);font-weight:700;border-left-color:var(--or);background:var(--sauge)}
.submenu .sub-head{padding:6px 22px 4px;font-size:11px;font-weight:700;color:var(--or);letter-spacing:.14em;text-transform:uppercase;border-top:1px solid rgba(14,59,46,.08);margin-top:6px}
.submenu .sub-head:first-child{border-top:none;margin-top:0}
html[dir="rtl"] .submenu{left:auto;right:-12px}
html[dir="rtl"] .submenu a{border-left:none;border-right:2px solid transparent}
html[dir="rtl"] .submenu a:hover,html[dir="rtl"] .submenu a[aria-current="page"]{border-right-color:var(--or)}

/* ---------- HERO ---------- */
.hero{background:var(--vert-profond);color:var(--ivoire);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-180px;top:-180px;width:560px;height:560px;
  border:1px solid rgba(201,168,92,.22);border-radius:50%}
.hero::before{content:"";position:absolute;right:-90px;bottom:-220px;width:420px;height:420px;
  border:1px solid rgba(201,168,92,.14);border-radius:50%}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;
  padding:84px 0 92px;position:relative;z-index:2}
.hero h1{font-size:clamp(40px,5.4vw,68px);font-weight:500;margin:26px 0 22px}
.hero h1 em{font-style:italic;color:var(--or)}
.hero p.lead{font-size:19px;color:rgba(250,246,239,.82);max-width:520px;margin-bottom:36px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-figure{position:relative}
.ph{background:linear-gradient(135deg,#16493a,#0c3326);border:1px solid rgba(201,168,92,.3);
  border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:34px;color:var(--or-clair);font-size:13.5px;line-height:1.5;gap:10px;min-height:180px}
.ph .pic{font-size:26px;opacity:.7}
.ph b{font-family:var(--sans);font-weight:700;color:var(--or);letter-spacing:.04em;font-size:12px;text-transform:uppercase}
.hero-figure .ph{min-height:430px}
.hero-figure .badge{position:absolute;left:-26px;bottom:34px;background:var(--ivoire);
  color:var(--vert-profond);padding:18px 24px;border-radius:6px;box-shadow:0 24px 50px rgba(0,0,0,.28)}
.hero-figure .badge b{display:block;font-family:var(--serif);font-size:30px;line-height:1}
.hero-figure .badge small{font-size:12px;font-weight:600;color:#7a766c}

/* ---------- PHOTOS (remplacent les .ph) ---------- */
img.photo{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:8px;background:var(--sauge)}
.hero-figure img.photo{aspect-ratio:1/1;border:1px solid rgba(201,168,92,.3)}
.card img.photo{aspect-ratio:16/10;border-radius:0;border-bottom:1px solid rgba(201,168,92,.25)}
.aa img.photo{aspect-ratio:1/1;border-radius:0}


/* ---------- EN BREF ---------- */
.bref{background:var(--blanc);border-bottom:1px solid rgba(14,59,46,.08)}
.bref-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;text-align:center}
.bref-grid>div{padding:42px 22px;border-right:1px solid rgba(14,59,46,.08)}
.bref-grid>div:last-child{border:none}
.bref-grid b{font-family:var(--serif);font-size:38px;color:var(--vert-profond);display:block;line-height:1}
.bref-grid span{font-size:13.5px;color:#7a766c;font-weight:600;letter-spacing:.04em}

/* ---------- SECTION BASE ---------- */
.section{padding:96px 0}
.sec-head{max-width:680px;margin-bottom:54px}
.sec-head h2{font-size:clamp(30px,3.6vw,46px);margin:20px 0 14px}
.sec-head p{color:#6f6b61;font-size:17.5px}
.num{font-family:var(--serif);font-size:15px;color:var(--or);font-weight:600}

/* ---------- SPECIALITES / CARDS ---------- */
.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.card{background:var(--blanc);border:1px solid rgba(14,59,46,.10);border-radius:10px;
  overflow:hidden;transition:.4s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(14,59,46,.12);border-color:var(--or)}
.card .ph{border-radius:0;min-height:230px;border:none;border-bottom:1px solid rgba(201,168,92,.25)}
.card-body{padding:34px 34px 38px}
.card-body h3{font-size:27px;margin-bottom:12px;color:var(--vert-profond)}
.card-body p{color:#6f6b61;font-size:15.5px;margin-bottom:22px}
.chiplist{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px;list-style:none}
.chiplist li{font-size:13px;font-weight:600;background:var(--sauge);color:var(--vert-profond);
  padding:7px 13px;border-radius:30px}
.card-link{font-weight:700;color:var(--vert-profond);font-size:15px;display:inline-flex;
  align-items:center;gap:8px;transition:.25s}
.card-link:hover{gap:14px;color:var(--or)}

/* ---------- POURQUOI ---------- */
.why{background:var(--vert-profond);color:var(--ivoire)}
.why-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.why h2{font-size:clamp(30px,3.6vw,46px);margin:20px 0 18px;color:var(--ivoire)}
.why .feat{display:flex;gap:18px;padding:22px 0;border-top:1px solid rgba(201,168,92,.2)}
.why .feat:first-of-type{border-top:none}
.why .feat .ic{width:44px;height:44px;flex:none;border:1px solid var(--or);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--or);font-size:18px}
.why .feat h4{font-size:18px;color:var(--ivoire);margin-bottom:5px}
.why .feat p{font-size:14.5px;color:rgba(250,246,239,.72)}

/* ---------- AVANT/APRES ---------- */
.aa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.aa{position:relative;border-radius:8px;overflow:hidden;border:1px solid rgba(14,59,46,.12)}
.aa .ph{min-height:260px;border:none;border-radius:0}
.aa .tag{position:absolute;top:14px;left:14px;background:var(--vert-profond);color:var(--or-clair);
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:7px 12px;border-radius:30px}

/* ---------- PROCESS ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.step{padding-top:30px;border-top:2px solid var(--or)}
.step b{font-family:var(--serif);font-size:46px;color:var(--sauge);display:block;line-height:1;margin-bottom:14px}
.step h4{font-size:19px;color:var(--vert-profond);margin-bottom:9px}
.step p{font-size:14.5px;color:#6f6b61}

/* ---------- FAQ ---------- */
.faq-wrap{max-width:840px;margin:0 auto}
.faq{border-bottom:1px solid rgba(14,59,46,.14)}
.faq button{width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:26px 4px;font-family:var(--serif);font-size:20px;color:var(--vert-profond);
  display:flex;justify-content:space-between;align-items:center;gap:20px}
.faq .ans{max-height:0;overflow:hidden;transition:.4s;color:#6f6b61;font-size:15.5px}
.faq .ans p{padding:0 4px 26px}
.faq.open .ans{max-height:600px}
.faq .pl{color:var(--or);font-size:24px;flex:none;transition:.3s;font-family:var(--sans)}
.faq.open .pl{transform:rotate(45deg)}

/* ---------- CONTACT ---------- */
.contact{background:var(--blanc)}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px}
.contact-info h2{font-size:clamp(28px,3.4vw,42px);margin:18px 0 16px;color:var(--vert-profond)}
.contact-info p{color:#6f6b61;margin-bottom:30px}
.ci{display:flex;gap:15px;align-items:flex-start;padding:16px 0;border-top:1px solid rgba(14,59,46,.10)}
.ci .ic{width:40px;height:40px;flex:none;background:var(--vert-profond);color:var(--or);
  border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}
.ci b{display:block;font-size:15px;color:var(--vert-profond)}
.ci span{font-size:14.5px;color:#6f6b61}
form{background:var(--ivoire);border:1px solid rgba(14,59,46,.12);border-radius:12px;padding:40px}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{margin-bottom:18px}
.fld label{display:block;font-size:13px;font-weight:700;margin-bottom:7px;color:var(--vert-profond);letter-spacing:.03em}
.fld input,.fld select,.fld textarea{width:100%;padding:14px 16px;border:1px solid rgba(14,59,46,.18);
  border-radius:5px;font:inherit;background:var(--blanc);color:var(--charbon);transition:.2s}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--or);
  box-shadow:0 0 0 3px rgba(201,168,92,.18)}
.fld textarea{min-height:110px;resize:vertical}
.consent{display:flex;gap:10px;font-size:13px;color:#6f6b61;margin:6px 0 20px}
.consent input{margin-top:3px}
.consent a{color:var(--vert-profond);text-decoration:underline}
form .btn{width:100%;justify-content:center}
.formnote{display:none;margin-top:16px;padding:14px;border-radius:6px;font-size:14px;font-weight:600;text-align:center}
.formnote.ok{display:block;background:rgba(31,122,82,.12);color:var(--wa)}
.formnote.err{display:block;background:rgba(180,40,40,.12);color:#b42828}
.hp{position:absolute !important;left:-9999px !important;top:-9999px !important;opacity:0;pointer-events:none}

/* ---------- FOOTER ---------- */
footer{background:var(--vert-profond);color:rgba(250,246,239,.72);padding:74px 0 0}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:54px}
footer .logo{color:var(--ivoire);margin-bottom:16px}
footer h5{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--or);margin-bottom:20px}
footer ul{list-style:none}
footer li{margin-bottom:11px;font-size:14.5px}
footer a:hover{color:var(--or)}
footer .nap{font-size:14px;line-height:1.8}
footer .nap b{color:var(--ivoire)}
.f-bottom{border-top:1px solid rgba(201,168,92,.2);padding:24px 0;text-align:center;
  font-size:13px;color:rgba(250,246,239,.5)}
.f-bottom a{color:rgba(250,246,239,.5)}
.f-bottom a:hover{color:var(--or)}

/* ---------- STICKY MOBILE CTA ---------- */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:1000;display:none;
  grid-template-columns:1fr 1fr;background:var(--vert-profond);border-top:1px solid var(--or)}
.mcta a{padding:16px;text-align:center;font-weight:700;font-size:14.5px;color:var(--ivoire);
  display:flex;align-items:center;justify-content:center;gap:8px}
.mcta a:first-child{border-right:1px solid rgba(201,168,92,.3)}
.mcta a.wa{background:var(--wa)}

/* ---------- WHATSAPP FLOAT ---------- */
.wafloat{position:fixed;right:26px;bottom:30px;z-index:999;width:60px;height:60px;border-radius:50%;
  background:var(--wa);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:28px;box-shadow:0 14px 34px rgba(31,122,82,.45);transition:.3s}
.wafloat:hover{transform:scale(1.08)}

/* ---------- REVEAL ---------- */
.rv{opacity:0;transform:translateY(26px);transition:.9s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}

/* ---------- RTL / ARABE ---------- */
html[dir="rtl"] body{font-family:var(--sans-ar)}
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4{font-family:var(--serif-ar);letter-spacing:0}
html[dir="rtl"] .eyebrow{letter-spacing:.08em}
html[dir="rtl"] .eyebrow::before{margin-left:0;margin-right:0}
html[dir="rtl"] .hero::after{right:auto;left:-180px}
html[dir="rtl"] .hero::before{right:auto;left:-90px}
html[dir="rtl"] .hero-figure .badge{left:auto;right:-26px}
html[dir="rtl"] .bref-grid>div{border-right:none;border-left:1px solid rgba(14,59,46,.08)}
html[dir="rtl"] .bref-grid>div:last-child{border:none}
html[dir="rtl"] .menu a::after{left:auto;right:0}
html[dir="rtl"] .wafloat{right:auto;left:26px}
html[dir="rtl"] .card-link:hover{gap:14px}
html[dir="rtl"] .ci .ic{margin-right:0}
html[dir="rtl"] .faq button .pl{margin-left:0}

/* ---------- RESPONSIVE ---------- */
@media(max-width:980px){
  .hero-grid,.why-grid,.contact-grid{grid-template-columns:1fr;gap:44px}
  .spec-grid{grid-template-columns:1fr}
  .bref-grid{grid-template-columns:1fr 1fr}
  .bref-grid>div:nth-child(2){border-right:none}
  .steps{grid-template-columns:1fr 1fr}
  .aa-grid{grid-template-columns:1fr 1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  .menu,.lang{display:none}
  .burger{display:flex}
  .menu.show{display:flex;position:absolute;top:78px;left:0;right:0;flex-direction:column;
    background:var(--ivoire);padding:24px 28px;gap:6px;border-bottom:1px solid rgba(14,59,46,.1);max-height:calc(100vh - 78px);overflow-y:auto}
  .lang.show{display:flex;justify-content:center;padding:10px 0 20px;background:var(--ivoire)}
  /* Mega-menu mobile : flux vertical, ouvert par défaut */
  .menu.show > li.has-submenu > a::after{content:""}
  .menu.show .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;background:transparent;padding:4px 0 10px 14px;min-width:0}
  .menu.show .submenu a{padding:6px 12px;font-size:13.5px;color:#5e5b53}
  .menu.show .submenu .sub-head{padding-left:12px}
  .mcta{display:grid}
  .wafloat{display:none}
  body{padding-bottom:54px}
}
@media(max-width:560px){
  .wrap{padding:0 18px}
  .bref-grid,.steps,.aa-grid,.f-grid,form .row{grid-template-columns:1fr}
  .bref-grid>div{border-right:none;border-bottom:1px solid rgba(14,59,46,.08)}
  .section{padding:68px 0}
  form{padding:28px 22px}
}