/* ZAYADO Pages Plugin - Compiled CSS */
/* Google Fonts import — identique au React app */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=DM+Serif+Display:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');
/* Colors */
:root {
  --z-blue: #152F5C;
  --z-blue-light: #1D4E8A;
  --z-gold: #C9A84C;
  --z-gold-light: #E5D5A2;
  --z-red: #C7372F;
  --z-sand: #FAF9F7;
  --z-dark: #0F1B2D;
}

/* Reset */
.zp * { box-sizing: border-box; margin: 0; padding: 0; }
.zp { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #333; line-height: 1.6; overflow-x: hidden; }
.zp img { max-width: 100%; height: auto; }
.zp a { text-decoration: none; color: inherit; }

/* Typography */
.zp .font-heading { font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; }
.zp h1, .zp h2, .zp h3 { font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--z-blue); }
.zp h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 900; line-height: 1.1; }
.zp h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; line-height: 1.2; }
.zp h3 { font-size: 1.2rem; font-weight: 700; }

/* Layout */
.zp .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.zp .section { padding: 5rem 0; }
.zp .section-dark { background: var(--z-blue); color: white; }
.zp .section-sand { background: var(--z-sand); }
.zp .section-light { background: #f8f9fa; }

/* Grid */
.zp .grid-2 { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.zp .grid-3 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.zp .grid-4 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (min-width: 768px) {
  .zp .grid-2 { grid-template-columns: 1fr 1fr; }
  .zp .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .zp .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Flex */
.zp .flex { display: flex; }
.zp .flex-col { flex-direction: column; }
.zp .items-center { align-items: center; }
.zp .justify-between { justify-content: space-between; }
.zp .justify-center { justify-content: center; }
.zp .gap-2 { gap: 0.5rem; }
.zp .gap-3 { gap: 0.75rem; }
.zp .gap-4 { gap: 1rem; }
.zp .gap-6 { gap: 1.5rem; }
.zp .gap-8 { gap: 2rem; }

/* Text */
.zp .text-center { text-align: center; }
.zp .text-sm { font-size: 0.875rem; }
.zp .text-xs { font-size: 0.75rem; }
.zp .text-lg { font-size: 1.125rem; }
.zp .text-xl { font-size: 1.25rem; }
.zp .text-2xl { font-size: 1.5rem; }
.zp .text-white { color: white; }
.zp .text-gray { color: #6b7280; }
.zp .text-gold { color: var(--z-gold); }
.zp .text-red { color: var(--z-red); }
.zp .text-blue { color: var(--z-blue); }
.zp .font-bold { font-weight: 700; }
.zp .font-black { font-weight: 900; }
.zp .mb-2 { margin-bottom: 0.5rem; }
.zp .mb-4 { margin-bottom: 1rem; }
.zp .mb-6 { margin-bottom: 1.5rem; }
.zp .mb-8 { margin-bottom: 2rem; }
.zp .mt-4 { margin-top: 1rem; }
.zp .mt-8 { margin-top: 2rem; }
.zp .mx-auto { margin-left: auto; margin-right: auto; }

/* Buttons */
.zp .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 2rem; border-radius: 12px; font-weight: 700; font-size: 0.9rem; border: none; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; }
.zp .btn::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.15); transform: translateX(-100%); transition: transform 0.4s ease; }
.zp .btn:hover::after { transform: translateX(0); }
.zp .btn-red { background: var(--z-red); color: white; }
.zp .btn-red:hover { background: #a52d27; }
.zp .btn-gold { background: var(--z-gold); color: var(--z-blue); }
.zp .btn-gold:hover { background: var(--z-gold-light); }
.zp .btn-blue { background: var(--z-blue); color: white; }
.zp .btn-blue:hover { background: var(--z-blue-light); }
.zp .btn-outline { background: transparent; border: 2px solid white; color: white; }
.zp .btn-outline:hover { background: rgba(255,255,255,0.1); }
.zp .btn-lg { padding: 1rem 2.5rem; font-size: 1rem; }

/* Cards */
.zp .card { background: white; border-radius: 16px; padding: 2rem; box-shadow: 0 4px 20px rgba(0,0,0,0.06); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.zp .card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.1); }
.zp .card-highlight { border: 2px solid var(--z-red); position: relative; }
.zp .card-highlight::before { content: 'POPULAIRE'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--z-red); color: white; font-size: 0.7rem; font-weight: 700; padding: 2px 12px; border-radius: 20px; }

/* Badge */
.zp .badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.7rem; font-weight: 700; }
.zp .badge-gold { background: rgba(229,213,162,.2); color: #C9A84C; border: 1px solid rgba(229,213,162,.3); }
.zp .badge-white { background: rgba(255,255,255,.15); color: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.2); }
.zp .badge-red { background: var(--z-red); color: white; }
.zp .badge-green { background: #059669; color: white; }

/* Check list */
.zp .check-item { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.5rem; }
.zp .check-icon { color: #059669; font-weight: 700; flex-shrink: 0; margin-top: 2px; }
.zp .cross-icon { color: #d1d5db; flex-shrink: 0; margin-top: 2px; }

/* FAQ */
.zp .faq-item { border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; margin-bottom: 0.5rem; }
.zp .faq-q { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; cursor: pointer; background: white; font-weight: 600; font-size: 0.9rem; color: #1f2937; }
.zp .faq-q:hover { background: #f9fafb; }
.zp .faq-a { padding: 0 1.25rem 1rem; font-size: 0.875rem; color: #6b7280; line-height: 1.7; display: none; }
.zp .faq-item.open .faq-a { display: block; }
.zp .faq-arrow { transition: transform 0.3s ease; font-size: 1.2rem; color: #9ca3af; }
.zp .faq-item.open .faq-arrow { transform: rotate(180deg); }

/* Animations */
.zp .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.zp .reveal.visible { opacity: 1; transform: translateY(0); }
@keyframes zpSlideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.zp .anim-up { animation: zpSlideUp 0.8s ease forwards; }
.zp .anim-delay-1 { animation-delay: 0.15s; opacity: 0; }
.zp .anim-delay-2 { animation-delay: 0.3s; opacity: 0; }
.zp .anim-delay-3 { animation-delay: 0.45s; opacity: 0; }

/* Modal */
.zp .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 9999; align-items: center; justify-content: center; }
.zp .modal-overlay.active { display: flex; }
.zp .modal-box { background: white; border-radius: 20px; max-width: 500px; width: 90%; max-height: 90vh; overflow-y: auto; box-shadow: 0 25px 60px rgba(0,0,0,0.3); }
.zp .modal-header { background: var(--z-blue); color: white; padding: 1.5rem 2rem; border-radius: 20px 20px 0 0; position: relative; }
.zp .modal-header h3 { color: white; font-size: 1.3rem; }
.zp .modal-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: rgba(255,255,255,0.6); font-size: 1.5rem; cursor: pointer; }
.zp .modal-close:hover { color: white; }
.zp .modal-body { padding: 2rem; }
.zp .modal-step { font-size: 0.8rem; color: rgba(255,255,255,0.6); margin-top: 0.25rem; }

/* Radio / Option card */
.zp .option-card { border: 2px solid #e5e7eb; border-radius: 12px; padding: 1.25rem; cursor: pointer; transition: all 0.2s ease; margin-bottom: 0.75rem; }
.zp .option-card:hover { border-color: var(--z-gold); }
.zp .option-card.selected { border-color: var(--z-gold); background: #fffbf0; }
.zp .option-card.recommended { border-color: var(--z-gold); position: relative; }
.zp .option-card.recommended::after { content: 'RECOMMANDE'; position: absolute; top: -10px; right: 12px; background: var(--z-gold); color: var(--z-blue); font-size: 0.65rem; font-weight: 700; padding: 2px 10px; border-radius: 10px; }

/* Input */
.zp input[type="email"], .zp input[type="text"], .zp input[type="number"], .zp select, .zp textarea { width: 100%; padding: 0.75rem 1rem; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 0.9rem; transition: border-color 0.2s; font-family: inherit; }
.zp input:focus, .zp select:focus, .zp textarea:focus { outline: none; border-color: var(--z-gold); }
.zp button { font-family: inherit; }

/* Price display */
.zp .price-big { font-size: 2.5rem; font-weight: 900; color: var(--z-blue); }
.zp .price-period { font-size: 0.9rem; color: #6b7280; }
.zp .price-strike { text-decoration: line-through; color: #9ca3af; font-size: 0.9rem; }

/* Testimonial */
.zp .testimonial { background: white; border-radius: 16px; padding: 2rem; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.zp .stars { color: #f59e0b; letter-spacing: 2px; }

/* Icon circle */
.zp .icon-circle { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }

/* Table */
.zp table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.zp th { text-align: left; padding: 0.75rem 1rem; background: var(--z-sand); color: #6b7280; font-weight: 600; border-bottom: 1px solid #e5e7eb; }
.zp td { padding: 0.75rem 1rem; border-bottom: 1px solid #f3f4f6; }
.zp .text-check { color: #059669; font-weight: 700; }
.zp .text-cross { color: #d1d5db; }

/* Footer plugin */
.zp-footer { background: var(--z-dark); color: rgba(255,255,255,0.7); padding: 1.5rem 0; font-size: 0.8rem; }

/* =============================================
   HEADER/FOOTER TOGGLE PER PAGE
   Masque le header et/ou footer du theme WordPress
   sur les pages ZAYADO individuellement
   ============================================= */

/* Hide header */
body.zayado-no-header .site-header,
body.zayado-no-header #masthead,
body.zayado-no-header .main-navigation,
body.zayado-no-header header.entry-header,
body.zayado-no-header .nav-links,
body.zayado-no-header .breadcrumbs,
body.zayado-no-header .page-header,
body.zayado-no-header .elementor-location-header,
body.zayado-no-header .kadence-header,
body.zayado-no-header .ast-header-break-point,
body.zayado-no-header .site-header-primary-section-left,
body.zayado-no-header .site-header-primary-section-right {
  display: none !important;
}
body.zayado-no-header .site-content,
body.zayado-no-header #content,
body.zayado-no-header .entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Hide footer */
body.zayado-no-footer .site-footer,
body.zayado-no-footer #colophon,
body.zayado-no-footer .elementor-location-footer,
body.zayado-no-footer .kadence-footer,
body.zayado-no-footer footer.site-footer {
  display: none !important;
}

/* Legacy: backward compat with old zayado-no-menu class */
body.zayado-no-menu .site-header,
body.zayado-no-menu #masthead,
body.zayado-no-menu .main-navigation,
body.zayado-no-menu .site-footer,
body.zayado-no-menu #colophon {
  display: none !important;
}

/* sr-only (screen reader only) */
.zp .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Responsive */
@media (max-width: 767px) {
  .zp .section { padding: 3rem 0; }
  .zp .hide-mobile { display: none !important; }
  .zp .grid-2-hero { grid-template-columns: 1fr !important; }
  /* Services grid 5 cols -> 2 cols on mobile */
  .zp [data-testid="services-unite"] .container > div > div {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (min-width: 768px) {
  .zp .grid-2-hero { grid-template-columns: 1fr 1fr; }
}