/*
Theme Name: EliteCleanCo
Template: twentytwentyfour
Version: 1.0.0
Description: Thème enfant EliteCleanCo — Palette verte #14E795, typographie Poppins + Inter
Text Domain: elitecleanco-child
*/

/* ============================================================
   VARIABLES GLOBALES
   ============================================================ */
:root {
  --ec-accent:       #14E795;
  --ec-accent-hover: #10c97c;
  --ec-accent-glow:  rgba(20, 231, 149, 0.25);
  --ec-dark:         #0D0D0D;
  --ec-dark-2:       #111827;
  --ec-dark-3:       #1F2937;
  --ec-white:        #FFFFFF;
  --ec-off-white:    #F5F7F5;
  --ec-gold:         #D4AF37;
  --ec-text:         #1A1A1A;
  --ec-text-muted:   #6B7280;
  --ec-border:       #E5E7EB;
  --ec-radius:       6px;
  --ec-transition:   0.22s ease;
}

/* ============================================================
   TYPOGRAPHIE GLOBALE
   ============================================================ */
body,
.wp-block-post-content,
.entry-content {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ec-text);
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--ec-text);
}

h1, .wp-block-heading h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; }
h2, .wp-block-heading h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; }
h3, .wp-block-heading h3 { font-size: clamp(1.1rem, 2vw, 1.375rem); font-weight: 600; }

/* ============================================================
   LIENS
   ============================================================ */
a {
  color: var(--ec-accent);
  text-decoration: none;
  transition: color var(--ec-transition);
}
a:hover { color: var(--ec-accent-hover); }

/* ============================================================
   BOUTONS
   ============================================================ */
.wp-block-button__link,
.wp-element-button {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  border-radius: var(--ec-radius) !important;
  padding: 14px 32px !important;
  transition: background-color var(--ec-transition), transform var(--ec-transition), box-shadow var(--ec-transition) !important;
  cursor: pointer !important;
}

/* CTA principal */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background-color: var(--ec-accent) !important;
  color: var(--ec-dark) !important;
  border: 2px solid var(--ec-accent) !important;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background-color: var(--ec-accent-hover) !important;
  border-color: var(--ec-accent-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px var(--ec-accent-glow) !important;
  color: var(--ec-dark) !important;
}

/* CTA outline */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  color: var(--ec-white) !important;
  border: 2px solid rgba(255,255,255,0.6) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--ec-white) !important;
  color: var(--ec-dark) !important;
  border-color: var(--ec-white) !important;
}

/* ============================================================
   LOGO SITE (header + footer)
   ============================================================ */
.wp-block-site-logo {
  flex-shrink: 0 !important;
  line-height: 0 !important;
}
.wp-block-site-logo img {
  width: 100% !important;
  max-width: 160px !important;
  height: auto !important;
  display: block !important;
}
.wp-block-template-part footer .wp-block-site-logo img,
footer.wp-block-template-part .wp-block-site-logo img {
  max-width: 140px !important;
}

/* ============================================================
   NAVIGATION HEADER
   ============================================================ */
.wp-block-navigation a,
.wp-block-navigation-item__content {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.03em !important;
  text-decoration: none !important;
  color: var(--ec-white) !important;
  transition: color var(--ec-transition) !important;
}
.wp-block-navigation a:hover,
.wp-block-navigation-item__content:hover { color: var(--ec-accent) !important; }

.wp-block-navigation .wp-block-navigation__submenu-container a,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  color: var(--ec-dark) !important;
}
.wp-block-navigation .wp-block-navigation__submenu-container a:hover {
  color: var(--ec-accent) !important;
}

/* Header sombre */
.wp-block-template-part header,
header.wp-block-template-part,
.site-header {
  background-color: var(--ec-dark) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Header compact */
.wp-block-template-part header > .wp-block-group,
header.wp-block-template-part > .wp-block-group {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}


.wp-block-site-title a,
.wp-block-site-title {
  color: var(--ec-white) !important;
}

/* ============================================================
   IMAGES
   ============================================================ */
.wp-block-image img {
  border-radius: var(--ec-radius);
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.ec-hero {
  background-color: var(--ec-dark) !important;
  color: var(--ec-white) !important;
  padding: clamp(60px, 10vh, 120px) 40px !important;
  position: relative;
}
.ec-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(to right, transparent, var(--ec-accent), transparent);
}
.ec-hero h1 {
  color: var(--ec-white) !important;
  font-size: clamp(2rem, 5vw, 3.25rem) !important;
  font-weight: 800 !important;
  max-width: 780px;
  margin-bottom: 1rem;
}
.ec-hero .ec-accent-word { color: var(--ec-accent) !important; }
.ec-hero p {
  color: rgba(255,255,255,0.82) !important;
  font-size: 1.15rem !important;
  max-width: 600px;
}

/* ============================================================
   SECTION SOMBRE
   ============================================================ */
.ec-section-dark {
  background-color: var(--ec-dark-2) !important;
  color: var(--ec-white) !important;
  padding: clamp(60px, 8vh, 100px) 40px !important;
}
.ec-section-dark h2,
.ec-section-dark h3,
.ec-section-dark p { color: var(--ec-white) !important; }
.ec-section-dark h2 { color: var(--ec-white) !important; }

/* ============================================================
   SECTION CLAIRE
   ============================================================ */
.ec-section-light {
  background-color: var(--ec-white) !important;
  padding: clamp(60px, 8vh, 100px) 40px !important;
}
.ec-section-off-white {
  background-color: var(--ec-off-white) !important;
  padding: clamp(60px, 8vh, 100px) 40px !important;
}

/* ============================================================
   SECTION ACCENT (CTA)
   ============================================================ */
.ec-section-accent {
  background-color: var(--ec-accent) !important;
  color: var(--ec-dark) !important;
  padding: clamp(50px, 7vh, 80px) 40px !important;
}
.ec-section-accent h2,
.ec-section-accent p { color: var(--ec-dark) !important; }
.ec-section-accent .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background-color: var(--ec-dark) !important;
  color: var(--ec-white) !important;
  border: 2px solid var(--ec-dark) !important;
}
.ec-section-accent .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background-color: var(--ec-dark-2) !important;
  border-color: var(--ec-dark-2) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
}
.ec-section-accent .wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  color: var(--ec-dark) !important;
  border: 2px solid var(--ec-dark) !important;
}
.ec-section-accent .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--ec-dark) !important;
  color: var(--ec-white) !important;
}

/* ============================================================
   PROMESSES
   ============================================================ */
.ec-promise-item { text-align: center; padding: 24px; }
.ec-promise-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  background-color: rgba(20, 231, 149, 0.12);
  border-radius: 50%;
  margin-bottom: 16px;
  color: var(--ec-accent);
}
.ec-promise-icon svg { width: 26px; height: 26px; }

/* ============================================================
   CARDS SERVICES
   ============================================================ */
.ec-service-card {
  background: var(--ec-white);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius);
  padding: 28px 24px 24px;
  transition: border-color var(--ec-transition), box-shadow var(--ec-transition), transform var(--ec-transition);
  height: 100%;
}
.ec-service-card:hover {
  border-color: var(--ec-accent);
  box-shadow: 0 8px 32px var(--ec-accent-glow);
  transform: translateY(-3px);
}
.ec-service-card h3 { font-size: 1.1rem !important; margin-bottom: 8px !important; color: var(--ec-text) !important; }
.ec-service-card p { font-size: 0.9rem !important; color: var(--ec-text-muted) !important; margin-bottom: 16px !important; line-height: 1.5 !important; }
.ec-service-card a { font-family: 'Poppins', sans-serif; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ec-accent); }
.ec-service-card a:hover { color: var(--ec-accent-hover); }

/* ============================================================
   CHIFFRES STATS
   ============================================================ */
.ec-stat-number {
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(2.5rem, 5vw, 4rem) !important;
  font-weight: 900 !important;
  color: var(--ec-accent) !important;
  line-height: 1 !important;
  display: block;
  margin-bottom: 8px;
}
.ec-stat-label {
  font-size: 0.95rem !important;
  color: rgba(255,255,255,0.7) !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ============================================================
   PROCESSUS EN ÉTAPES
   ============================================================ */
.ec-step-number {
  font-family: 'Poppins', sans-serif;
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--ec-accent);
  opacity: 0.25;
  line-height: 1;
  display: block;
  margin-bottom: 8px;
}

/* ============================================================
   BADGE AVIS GOOGLE
   ============================================================ */
.ec-badge-avis {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 100px;
  padding: 8px 18px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ec-white);
  margin-bottom: 24px;
  backdrop-filter: blur(4px);
}
.ec-badge-avis .stars { color: #FBBF24; letter-spacing: 1px; }

/* ============================================================
   DIVIDER ACCENT
   ============================================================ */
.ec-divider {
  border: none !important;
  height: 2px !important;
  background: linear-gradient(to right, transparent, var(--ec-accent), transparent) !important;
  margin: 0 !important;
  opacity: 0.4;
}

/* ============================================================
   FOOTER
   ============================================================ */
.wp-block-template-part footer,
footer.wp-block-template-part {
  background-color: var(--ec-dark) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.65) !important;
}

/* Titres de colonnes footer */
.wp-block-template-part footer h1,
.wp-block-template-part footer h2,
.wp-block-template-part footer h3,
.wp-block-template-part footer h4,
.wp-block-template-part footer h5,
.wp-block-template-part footer h6,
footer.wp-block-template-part h1,
footer.wp-block-template-part h2,
footer.wp-block-template-part h3,
footer.wp-block-template-part h4,
footer.wp-block-template-part h5,
footer.wp-block-template-part h6 {
  color: var(--ec-accent) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 12px !important;
}

/* Paragraphes footer */
.wp-block-template-part footer p,
footer.wp-block-template-part p {
  color: rgba(255,255,255,0.6) !important;
  font-size: 0.875rem !important;
  margin-bottom: 4px !important;
  line-height: 1.6 !important;
}

/* Liens footer */
.wp-block-template-part footer a,
footer.wp-block-template-part a {
  color: rgba(255,255,255,0.65) !important;
  font-size: 0.875rem !important;
}
.wp-block-template-part footer a:hover,
footer.wp-block-template-part a:hover { color: var(--ec-accent) !important; }

/* Nom du site dans le footer */
.wp-block-template-part footer .wp-block-site-title,
.wp-block-template-part footer .wp-block-site-title a,
footer.wp-block-template-part .wp-block-site-title,
footer.wp-block-template-part .wp-block-site-title a {
  color: var(--ec-white) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
}

/* Tagline */
.wp-block-template-part footer .wp-block-site-tagline,
footer.wp-block-template-part .wp-block-site-tagline {
  color: rgba(255,255,255,0.45) !important;
  font-size: 0.82rem !important;
}

/* Colophon */
.wp-block-template-part footer > .wp-block-group:last-child p,
footer.wp-block-template-part > .wp-block-group:last-child p {
  color: rgba(255,255,255,0.35) !important;
  font-size: 0.8rem !important;
}

/* Separateur footer */
.wp-block-template-part footer .wp-block-separator,
footer.wp-block-template-part .wp-block-separator {
  margin: 16px 0 !important;
  opacity: 1 !important;
}

/* ============================================================
   UTILITAIRES
   ============================================================ */
.ec-max-width  { max-width: 1100px; margin-left: auto; margin-right: auto; }
.ec-text-center { text-align: center !important; }
.ec-mb-0 { margin-bottom: 0 !important; }
.ec-section-dark .wp-block-separator,
.ec-section-dark hr { border-color: rgba(255,255,255,0.1) !important; }

.has-accent-color        { color: var(--ec-accent) !important; }
.has-accent-background-color { background-color: var(--ec-accent) !important; }
.has-dark-color          { color: var(--ec-dark) !important; }
.has-dark-background-color   { background-color: var(--ec-dark) !important; }
.has-dark-2-background-color { background-color: var(--ec-dark-2) !important; }
.has-off-white-background-color { background-color: var(--ec-off-white) !important; }
.has-white-color         { color: var(--ec-white) !important; }
.has-white-background-color  { background-color: var(--ec-white) !important; }

/* ============================================================
   INTRO EFFECT — 2 secondes automatique
   ============================================================ */
html.ec-intro-active,
html.ec-intro-active body { overflow: hidden !important; }

#ec-intro-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: #0D0D0D;
  display: flex; align-items: center; justify-content: center;
}
#ec-intro-overlay.ec-intro-exit {
  animation: ecIntroExit 0.85s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes ecIntroExit { from { opacity: 1; } to { opacity: 0; } }

#ec-intro-logo {
  position: absolute;
  width: min(260px, 55vw);
  z-index: 2; pointer-events: none; user-select: none;
  animation: ecLogoReveal 0.5s ease-out 0.15s both;
}
@keyframes ecLogoReveal {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

#ec-intro-soap {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
  animation: ecSoapDissolve 1.2s ease-out forwards;
}
@keyframes ecSoapDissolve { 0% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  #ec-intro-overlay { display: none !important; }
  #ec-intro-logo    { animation: none; }
  #ec-intro-soap    { animation: none; }
}

/* ============================================================
   HERO ANIMATION
   ============================================================ */
@keyframes ecFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wp-block-cover__inner-container h1 {
  animation: ecFadeUp 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation-delay: 0.05s;
}
.wp-block-cover__inner-container .ec-badge-avis {
  animation: ecFadeUp 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation-delay: 0.35s;
}
.wp-block-cover__inner-container > p {
  animation: ecFadeUp 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation-delay: 0.55s;
}
.wp-block-cover__inner-container .wp-block-buttons {
  animation: ecFadeUp 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation-delay: 0.75s;
}
@media (prefers-reduced-motion: reduce) {
  .wp-block-cover__inner-container h1,
  .wp-block-cover__inner-container .ec-badge-avis,
  .wp-block-cover__inner-container > p,
  .wp-block-cover__inner-container .wp-block-buttons { animation: none; }
}

/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */
.ec-scroll-anim {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
.ec-scroll-anim.ec-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .ec-scroll-anim { opacity: 1; transform: none; transition: none; }
  .ec-scroll-anim.ec-visible { opacity: 1; transform: none; }
}


/* Logo dans le HEADER : hauteur plafonnée pour ne pas gonfler la barre */
.wp-block-template-part header .wp-block-site-logo img,
header.wp-block-template-part .wp-block-site-logo img {
  max-width: 72px !important;
  max-height: 72px !important;
  width: auto !important;
}
/* Masquer le texte "EliteCleanCo" dans le header — le logo suffit */
.wp-block-template-part header .wp-block-site-title,
header.wp-block-template-part .wp-block-site-title {
  display: none !important;
}

/* Nav items compacts pour tenir sur 1-2 lignes */
.wp-block-template-part header .wp-block-navigation-item__content,
header.wp-block-template-part .wp-block-navigation-item__content {
  padding: 6px 8px !important;
  font-size: 0.82rem !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Footer layout — padding latéral réduit pour occuper toute la largeur */
footer.wp-block-template-part .wp-block-group.has-global-padding,
.wp-block-template-part footer .wp-block-group.has-global-padding {
  padding-left: clamp(16px, 3vw, 48px) !important;
  padding-right: clamp(16px, 3vw, 48px) !important;
  padding-top: 48px !important;
  padding-bottom: 40px !important;
}

/* Footer — padding-top réduit sur le crédit WordPress en bas */
footer.wp-block-template-part .wp-block-group.alignwide.is-layout-flow,
.wp-block-template-part footer .wp-block-group.alignwide.is-layout-flow {
  padding-top: 24px !important;
}

/* Footer columns — étalement pleine largeur */
footer.wp-block-template-part .wp-block-columns.alignwide,
.wp-block-template-part footer .wp-block-columns.alignwide {
  max-width: 100% !important;
  width: 100% !important;
}

@media (max-width: 768px) {
  .ec-hero { padding: 60px 24px !important; }
  .ec-section-dark, .ec-section-light, .ec-section-off-white, .ec-section-accent {
    padding: 60px 24px !important;
  }
  .wp-block-columns { flex-wrap: wrap; }
  .wp-block-column { flex-basis: 100% !important; }
}
/* ──────────────────────────────────────────────────────────────────────
   Contact footer — ligne horizontale (desktop) / empilé (mobile)
   Cause : 3 <p> verticaux font col1 plus haute que les colonnes de nav.
   ──────────────────────────────────────────────────────────────────── */
.ec-contact-row {
  gap: 0 !important;
  row-gap: 2px !important;
  flex-wrap: wrap !important;
}
.ec-contact-row p {
  margin: 0 !important;
}
/* Séparateur · affiché après chaque item sauf le dernier */
.ec-contact-row p:not(:last-child)::after {
  content: &quot;\00B7&quot;; /* middle dot */
  opacity: 0.45;
  margin: 0 7px;
}
/* Mobile ≤ 600px : empilement vertical, séparateurs masqués */
@media (max-width: 600px) {
  .ec-contact-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    row-gap: 4px !important;
  }
  .ec-contact-row p:not(:last-child)::after {
    display: none;
  }
}
/* Col1 footer — gap flex réduit (93px natif → ~36px) pour resserrer logo/titre/contact */
footer .wp-block-column:first-child > .wp-block-group.is-vertical {
  gap: 12px !important;
}

/* Mobile séparateur ::before — masqué en colonne */
@media (max-width: 600px) {
  .ec-contact-row p:not(:first-child)::before {
    display: none;
  }
}

/* Fix bouton "Laisser un avis" — même style que "Voir nos avis Google" */
.ec-section-light .wp-block-button.is-style-outline .wp-block-button__link {
  background-color: #14E795 !important;
  color: #0D0D0D !important;
  border-color: #14E795 !important;
}
.ec-section-light .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: #0fca82 !important;
  border-color: #0fca82 !important;
}

/* Section logos clients */
.ec-clients-logos {
  padding: 48px 24px;
  background: #F8F8F8;
  text-align: center;
}
.ec-clients-logos .ec-clients-title {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 32px;
}
.ec-clients-logos .wp-block-image img {
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter 0.3s ease, opacity 0.3s ease;
  max-height: 80px;
  width: auto;
  margin: 0 auto;
  display: block;
}
.ec-clients-logos .wp-block-image img:hover {
  filter: grayscale(0%);
  opacity: 1;
}
.ec-clients-logos .wp-block-columns {
  align-items: center;
}
/* ==============================================
   Header sticky
   ============================================== */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #0D0D0D;
}

/* ==============================================
   Bloc CTA has-base-2-background-color
   ============================================== */
.has-base-2-background-color {
  background-color: #0D0D0D !important;
  color: #ffffff !important;
}
.has-base-2-background-color h1,
.has-base-2-background-color h2,
.has-base-2-background-color h3,
.has-base-2-background-color h4,
.has-base-2-background-color p {
  color: #ffffff;
}
.has-base-2-background-color h3 {
  color: #14E795;
}