/*
    Template: pearl
    Theme Name: Pearl Child Theme
    Theme URI: http://pearl.stylemixthemes.com/
    Author: StylemixThemes
    Author URI: http://stylemixthemes.com/
    Description: Pearl WP is a true multi-niche WordPress theme, which consist of several micro-niche themes. Each micro-niche layout has its own features, modules and specifications. You can use UI modules from any layout and mix it with other UI modules. 300+ UI modules and 250+ prebuilt pages are available for use. Open the shell and find the Pearl!
    Version: 1.1.1
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: beauty salon, blog, business, church, coach, construction, consulting, corporate, ecommerce, multipurpose, music, portfolio, restaurant, transportation, travel, custom-header, custom-menu, editor-style, sticky-post, theme-options
	Text Domain: pearl-child-theme
*/

/* =========================================================
   CLINIQUE MÉDICALE ELISHAMA — Section "Nos Services"
   Palette : #038793 (primaire) / #feffff (secondaire) / #333333 (tertiaire)

   ========================================================= */

.elh-services-section,
.elh-carousel-section{
  /* Variables scopées  */
  --elh-primary: #038793;
  --elh-primary-dark: #026570;
  --elh-primary-light: #e5f4f5;
  --elh-primary-soft: #d0ecee;
  --elh-bg: #feffff;
  --elh-text: #333333;
  --elh-text-soft: #6b7573;
  --elh-radius: 18px;
  --elh-shadow: 0 10px 30px rgba(3, 135, 147, 0.10);
  --elh-shadow-hover: 0 20px 45px rgba(3, 135, 147, 0.20);
}

.elh-carousel-section *,
.elh-services-section *{ box-sizing: border-box; }

/* =========================================================
   CARROUSEL — 4 images en défilement automatique
   ========================================================= */
.elh-carousel-section{
  background: var(--elh-bg);
  padding: 60px 24px 0;
  position: relative;
}
.elh-carousel-wrap{
  max-width: 100%;
  margin: 0 auto;
  position: relative;
}
.elh-carousel{
  position: relative;
  width: 100%;
  height: 500px;
  border-radius: var(--elh-radius);
  overflow: hidden;
  box-shadow: var(--elh-shadow);
  background: var(--elh-primary-light);
}
/* Paliers responsive : on réduit la hauteur sur petits écrans pour éviter
   un bandeau trop imposant par rapport au texte visible */
@media (max-width: 1024px){
  .elh-carousel{ height: 480px; }
}
@media (max-width: 620px){
  .elh-carousel{ height: 360px; }
}
@media (max-width: 400px){
  .elh-carousel{ height: 300px; }
}
.elh-carousel-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.elh-carousel-slide.elh-is-active{
  opacity: 1;
}
.elh-carousel-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Dégradé renforcé pour garantir la lisibilité du texte quelle que soit
   la luminosité de la photo utilisée */
/* Dégradé uniforme : le texte étant maintenant centré au milieu du
   slide (et non plus calé en bas), on assombrit l'ensemble de la photo
   de façon homogène pour garantir la lisibilité, quel que soit
   l'endroit où le texte tombe. */
.elh-carousel-slide::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(1,38,42,0.42) 0%, rgba(1,38,42,0.52) 50%, rgba(1,38,42,0.42) 100%);
}
.elh-carousel-caption{
  position:absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 40px;
  /* Le bloc de texte est plafonné en largeur : sur les grands écrans,
     un titre étiré sur toute la largeur du slide devient difficile à lire */
  max-width: 620px;
  margin: 0 auto;
  color: var(--elh-bg);
  font-family: 'Outfit', sans-serif;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.8s ease 0.25s, transform 0.8s ease 0.25s;
}
.elh-carousel-slide.elh-is-active .elh-carousel-caption{
  opacity: 1;
  transform: translateY(0);
}
.elh-carousel-caption span{
  display:block;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #ffffff !important;
  margin-bottom: 12px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.35);
}
.elh-carousel-caption h4{
  margin: 0;
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.28;
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.elh-carousel-dots{
  position: absolute;
  right: 24px;
  bottom: 22px;
  z-index: 3;
  display: flex;
  gap: 9px;
}
.elh-carousel-dot{
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}
.elh-carousel-dot.elh-is-active{
  background: var(--elh-bg);
  transform: scale(1.35);
}
.elh-carousel-dot:hover{ background: rgba(255,255,255,0.8); }

/* Bouton pause/lecture (accessibilité WCAG 2.2.2) */
.elh-carousel-toggle{
  position: absolute;
  left: 24px;
  bottom: 22px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.6);
  background: rgba(0,0,0,0.25);
  color: var(--elh-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease;
}
.elh-carousel-toggle:hover{ background: rgba(0,0,0,0.45); }
.elh-carousel-toggle svg{ width: 14px; height: 14px; fill: currentColor; }

@media (max-width: 620px){
  .elh-carousel-section{ padding: 44px 18px 0; }
  .elh-carousel-caption{ padding: 0 24px; max-width: none; }
}

/* Palier très petits écrans : le carrousel passe à 300px de hauteur,
   le texte doit donc être resserré pour rester bien proportionné */
@media (max-width: 400px){
  .elh-carousel-caption span{ font-size: 12px; letter-spacing: 2px; margin-bottom: 8px; }
  .elh-carousel-caption h4{ font-size: clamp(20px, 6vw, 26px); line-height: 1.25; }
}

/* ---------- Signature : ligne d'électrocardiogramme ---------- */
.elh-services-section{
  background: var(--elh-bg);
  font-family: 'Inter', sans-serif;
  color: var(--elh-text);
  padding: 100px 24px;
  position: relative;
  overflow: hidden;
}

.elh-ekg-line{
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  pointer-events:none;
  opacity: 0.5;
}
.elh-ekg-line path{
  fill:none;
  stroke: var(--elh-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: elh-draw-ekg 6s ease-in-out infinite;
}
@keyframes elh-draw-ekg{
  0%   { stroke-dashoffset: 1400; opacity: 0; }
  8%   { opacity: 1; }
  55%  { stroke-dashoffset: 0; opacity: 1; }
  80%  { opacity: 0; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* ---------- En-tête de section ---------- */
.elh-services-header{
  max-width: 860px;
  margin: 0 auto 64px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.elh-services-eyebrow{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  font-family:'Outfit', sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 3px;
  color: var(--elh-primary);
  text-transform: uppercase;
  margin-bottom: 22px;
  opacity: 0;
  animation: elh-fade-in-up 0.7s ease forwards;
}
.elh-services-eyebrow::before{
  content:"";
  width: 28px;
  height: 2px;
  background: var(--elh-primary);
  display:inline-block;
}
.elh-services-title{
  font-family:'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 5.2vw, 56px);
  line-height: 1.2;
  margin: 0 0 20px;
  color: var(--elh-text);
  opacity: 0;
  animation: elh-fade-in-up 0.7s ease 0.1s forwards;
}
.elh-services-title span{ color: var(--elh-primary); }
.elh-services-subtitle{
  font-size: 19px;
  line-height: 1.8;
  color: var(--elh-text-soft);
  margin: 0;
  opacity: 0;
  animation: elh-fade-in-up 0.7s ease 0.2s forwards;
}

@keyframes elh-fade-in-up{
  from{ opacity: 0; transform: translateY(16px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* ---------- Carte "Urgences" mise en avant ---------- */
.elh-emergency-card{
  max-width: 1100px;
  margin: 0 auto 28px;
  background: linear-gradient(120deg, var(--elh-primary) 0%, var(--elh-primary-dark) 100%);
  border-radius: var(--elh-radius);
  padding: 34px 38px;
  display:flex;
  align-items:center;
  gap: 28px;
  color: var(--elh-bg);
  position: relative;
  z-index: 2;
  box-shadow: var(--elh-shadow);
  opacity: 0;
  transform: translateY(24px);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.elh-emergency-card.elh-is-visible{
  animation: elh-fade-in-up 0.7s ease forwards;
}
.elh-emergency-card:hover{
  box-shadow: var(--elh-shadow-hover);
  transform: translateY(-4px);
}
.elh-emergency-badge{
  flex-shrink:0;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 2px solid rgba(255,255,255,0.45);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction: column;
  font-family:'Outfit', sans-serif;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.5px;
  position: relative;
}
.elh-emergency-badge::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:50%;
  border: 2px solid rgba(255,255,255,0.6);
  animation: elh-ping 2.2s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes elh-ping{
  0%   { transform: scale(1); opacity: 0.7; }
  75%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
.elh-emergency-badge small{
  font-family:'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.85;
}
.elh-emergency-content h3{
  font-family:'Outfit', sans-serif;
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 10px;
}
.elh-emergency-content p{
  margin:0;
  font-size: 18px;
  line-height: 1.75;
  color: rgba(255,255,255,0.92);
  max-width: 700px;
}

/* ---------- Grille des services ---------- */
.elh-services-grid{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  position: relative;
  z-index: 2;
}

.elh-service-card{
  background: var(--elh-bg);
  border: 1px solid rgba(3,135,147,0.12);
  border-radius: var(--elh-radius);
  padding: 30px 26px;
  text-align: left;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(24px);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.elh-service-card.elh-is-visible{
  animation: elh-fade-in-up 0.6s ease forwards;
}
.elh-service-card::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width: 100%;
  height: 3px;
  background: var(--elh-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.elh-service-card:hover{
  transform: translateY(-8px);
  box-shadow: var(--elh-shadow-hover);
  border-color: transparent;
}
.elh-service-card:hover::before{
  transform: scaleX(1);
}

.elh-service-icon{
  width: 60px;
  height: 60px;
  border-radius: 15px;
  background: var(--elh-primary-light);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 22px;
  transition: background 0.4s ease, transform 0.4s ease;
}
.elh-service-card:hover .elh-service-icon{
  background: var(--elh-primary);
  transform: rotate(-6deg) scale(1.08);
}
.elh-service-icon svg{
  width: 29px;
  height: 29px;
  stroke: var(--elh-primary);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.4s ease;
}
.elh-service-card:hover .elh-service-icon svg{
  stroke: var(--elh-bg);
}

/* ---------- Photo d'illustration (entre le titre et le texte) ---------- */
.elh-service-photo{
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  margin: 0 0 16px;
  background: var(--elh-primary-light);
}
.elh-service-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.elh-service-card:hover .elh-service-photo img{
  transform: scale(1.06);
}

.elh-service-card h3{
  font-family:'Outfit', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.2px;
  margin: 0 0 14px;
  color: var(--elh-text);
  transition: color 0.3s ease;
}
.elh-service-card:hover h3{
  color: var(--elh-primary);
}
.elh-service-card p{
  font-size: 16px;
  line-height: 1.8;
  color: var(--elh-text-soft);
  margin: 0;
}

/* Décalage d'apparition en cascade */
.elh-service-card:nth-child(3n+1){ animation-delay: 0.05s; }
.elh-service-card:nth-child(3n+2){ animation-delay: 0.12s; }
.elh-service-card:nth-child(3n+3){ animation-delay: 0.19s; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .elh-services-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px){
  .elh-services-section{ padding: 70px 18px; }
  .elh-services-grid{ grid-template-columns: 1fr; }
  .elh-emergency-card{ flex-direction: column; text-align:center; padding: 30px 24px; }
  .elh-emergency-content p{ max-width: none; }
}
@media (max-width: 400px){
  .elh-services-title{ font-size: clamp(30px, 8vw, 38px); }
  .elh-services-subtitle{ font-size: 17px; }
  .elh-service-card{ padding: 26px 20px; }
}

/* ---------- Accessibilité : réduction des animations ---------- */
@media (prefers-reduced-motion: reduce){
  .elh-services-eyebrow, .elh-services-title, .elh-services-subtitle,
  .elh-emergency-card, .elh-service-card{ animation: none !important; opacity: 1 !important; transform: none !important; }
  .elh-ekg-line path{ animation: none; stroke-dashoffset: 0; opacity: 0.25; }
  .elh-emergency-badge::after{ animation: none; }
  .elh-carousel-slide{ transition: none; }
  .elh-carousel-slide.elh-is-active{ opacity: 1; }
  /* Le défilement automatique continue (le bouton pause suffit pour le
     contrôle WCAG 2.2.2), mais la légende apparaît instantanément au
     lieu de faire un fondu progressif. */
  .elh-carousel-caption{ transition: none !important; opacity: 1 !important; transform: none !important; }
}