/*
Theme Name: Hello Elementor MyORG
Theme URI: https://myorg.fr/
Description: Thème enfant Hello Elementor pour le site MyORG. Variables CSS de la charte, styles complémentaires, assets propres.
Author: MyORG
Author URI: https://myorg.fr/
Template: hello-elementor
Version: 1.0.0
Requires PHP: 8.0
Tested up to: 6.4
License: GNU General Public License v3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: hello-elementor-myorg
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* =============================================
   MyORG — Charte graphique (variables CSS)
   Palette : Indigo (CTA) · Cyan (accent) · Slate
   Contraste WCAG AA vérifié sur tous les textes
   ============================================= */

:root {
  /* Couleurs principales */
  --myorg-primary: #4F46E5;
  --myorg-primary-dark: #4338CA;
  --myorg-primary-light: #EEF2FF;
  --myorg-accent: #06B6D4;
  --myorg-accent-dark: #0891B2;

  /* Couleurs neutres */
  --myorg-text: #0F172A;
  --myorg-text-soft: #334155;
  --myorg-text-muted: #64748B;
  --myorg-border: #E2E8F0;
  --myorg-border-strong: #CBD5E1;
  --myorg-bg: #FFFFFF;
  --myorg-bg-soft: #F8FAFC;
  --myorg-bg-dark: #0F172A;

  /* Sémantique */
  --myorg-success: #10B981;
  --myorg-warning: #F59E0B;
  --myorg-error: #EF4444;

  /* Typo */
  --myorg-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --myorg-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Rayons / ombres */
  --myorg-radius: 8px;
  --myorg-radius-lg: 12px;
  --myorg-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --myorg-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --myorg-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
}

/* =============================================
   Reset et améliorations Hello Elementor
   ============================================= */

body {
  font-family: var(--myorg-font-body);
  color: var(--myorg-text);
  background: var(--myorg-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--myorg-font-heading);
  letter-spacing: -0.02em;
  color: var(--myorg-text);
}

a {
  color: var(--myorg-primary);
}

a:hover {
  color: var(--myorg-primary-dark);
}

/* =============================================
   Boutons : surcharge Elementor pour cohérence
   ============================================= */

.elementor-button.elementor-button-link,
.elementor-button-wrapper .elementor-button {
  font-weight: 600;
  border-radius: var(--myorg-radius);
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.elementor-button.elementor-button-link:hover,
.elementor-button-wrapper .elementor-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--myorg-shadow-md);
}

/* CTA principal — classe utilitaire à appliquer dans Elementor */
.myorg-cta-primary .elementor-button {
  background-color: var(--myorg-primary);
  color: #FFFFFF;
  border: 1.5px solid var(--myorg-primary);
}

.myorg-cta-primary .elementor-button:hover {
  background-color: var(--myorg-primary-dark);
  border-color: var(--myorg-primary-dark);
}

.myorg-cta-secondary .elementor-button {
  background-color: transparent;
  color: var(--myorg-primary);
  border: 1.5px solid var(--myorg-primary);
}

.myorg-cta-secondary .elementor-button:hover {
  background-color: var(--myorg-primary-light);
  color: var(--myorg-primary-dark);
}

/* =============================================
   Header / navigation
   ============================================= */

.site-header,
header.elementor-location-header {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--myorg-border);
}

/* Bandeau noir au-dessus du header (top-bar) */
.myorg-top-bar {
  background: var(--myorg-bg-dark);
  color: #CBD5E1;
  font-size: 0.85rem;
  padding: 8px 0;
  text-align: center;
}

.myorg-top-bar strong { color: #FFFFFF; }

/* =============================================
   Cartes (réassurance, audiences, features)
   ============================================= */

.myorg-card {
  background: var(--myorg-bg);
  border: 1px solid var(--myorg-border);
  border-radius: var(--myorg-radius-lg);
  padding: 32px;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.myorg-card:hover {
  border-color: var(--myorg-border-strong);
  box-shadow: var(--myorg-shadow-md);
  transform: translateY(-2px);
}

.myorg-card-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--myorg-primary-light);
  color: var(--myorg-primary);
  border-radius: var(--myorg-radius);
  margin-bottom: 16px;
}

/* =============================================
   Pricing cards
   ============================================= */

.myorg-pricing-card {
  position: relative;
  background: var(--myorg-bg);
  border: 1px solid var(--myorg-border);
  border-radius: var(--myorg-radius-lg);
  padding: 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.myorg-pricing-card.is-featured {
  border: 2px solid var(--myorg-primary);
  box-shadow: var(--myorg-shadow-lg);
}

.myorg-pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--myorg-primary);
  color: #FFFFFF;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}

.myorg-pricing-price {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--myorg-text);
  line-height: 1.1;
}

.myorg-pricing-suffix {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--myorg-text-muted);
}

/* =============================================
   Encart démo (gradient indigo→cyan)
   ============================================= */

.myorg-demo-banner {
  background: linear-gradient(135deg, var(--myorg-primary) 0%, var(--myorg-accent) 100%);
  color: #FFFFFF;
  border-radius: var(--myorg-radius-lg);
  padding: 64px 32px;
  text-align: center;
}

.myorg-demo-banner h2,
.myorg-demo-banner h3 { color: #FFFFFF; }

.myorg-demo-banner p { color: rgba(255, 255, 255, 0.92); }

/* =============================================
   Bloc identifiants démo (style terminal)
   ============================================= */

.myorg-credentials {
  background: var(--myorg-bg-dark);
  color: #E2E8F0;
  border-radius: var(--myorg-radius-lg);
  padding: 32px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.95rem;
}

.myorg-credentials dt { color: #94A3B8; }
.myorg-credentials dd { color: #FFFFFF; }

/* =============================================
   WooCommerce — alignement charte
   ============================================= */

.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background-color: var(--myorg-primary);
  color: #FFFFFF;
  font-weight: 600;
  border-radius: var(--myorg-radius);
  padding: 12px 20px;
  transition: background-color 180ms ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background-color: var(--myorg-primary-dark);
}

.woocommerce span.onsale {
  background-color: var(--myorg-accent);
}

/* =============================================
   Contact Form 7 — alignement charte
   ============================================= */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  background: var(--myorg-bg);
  border: 1px solid var(--myorg-border-strong);
  border-radius: var(--myorg-radius);
  color: var(--myorg-text);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  outline: none;
  border-color: var(--myorg-primary);
  box-shadow: 0 0 0 3px var(--myorg-primary-light);
}

.wpcf7 textarea { min-height: 140px; resize: vertical; }

.wpcf7-form label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
  color: var(--myorg-text);
  font-size: 0.92rem;
}

.wpcf7 input[type="submit"] {
  background-color: var(--myorg-primary);
  color: #FFFFFF;
  font-weight: 600;
  border: none;
  border-radius: var(--myorg-radius);
  padding: 14px 28px;
  cursor: pointer;
  transition: background-color 180ms ease;
}

.wpcf7 input[type="submit"]:hover {
  background-color: var(--myorg-primary-dark);
}

/* =============================================
   Footer
   ============================================= */

.site-footer,
footer.elementor-location-footer {
  background: var(--myorg-bg-dark);
  color: #CBD5E1;
}

.site-footer a,
footer.elementor-location-footer a {
  color: #CBD5E1;
}

.site-footer a:hover,
footer.elementor-location-footer a:hover {
  color: #FFFFFF;
}

/* =============================================
   Responsive (mobile-first complément)
   ============================================= */

@media (max-width: 768px) {
  .myorg-card { padding: 24px; }
  .myorg-pricing-card { padding: 24px; }
  .myorg-demo-banner { padding: 40px 20px; }
}

/* ============================================================
   MyORG — Améliorations responsive (ajouté après création)
   ============================================================ */

/* Hero responsive */
@media (max-width: 768px) {
  .myorg-hero .wp-block-cover__inner-container h1,
  .myorg-hero h1 {
    font-size: 32px !important;
    line-height: 1.15 !important;
  }
  .myorg-hero p {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
  .myorg-hero {
    min-height: auto !important;
    padding: 32px 0 !important;
  }
  .myorg-hero .wp-block-column[style*="55%"],
  .myorg-hero .wp-block-column[style*="45%"] {
    flex-basis: 100% !important;
    width: 100% !important;
  }
  .myorg-hero .wp-block-buttons {
    justify-content: center;
  }
}

/* Boutons pleine largeur mobile */
@media (max-width: 768px) {
  .wp-block-button {
    width: 100%;
    max-width: 320px;
  }
  .wp-block-button__link {
    display: block;
    text-align: center;
  }
}

/* Réduction des paddings de sections sur mobile */
@media (max-width: 768px) {
  .wp-block-group[style*="padding-top:80px"] {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .wp-block-group[style*="padding-top:64px"] {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  h1 { font-size: 30px !important; }
  h2 { font-size: 24px !important; }
  h3 { font-size: 20px !important; }
}

/* Cartes "audiences" et "features" */
.myorg-card,
.wp-block-column.myorg-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 24px !important;
  margin-bottom: 16px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.myorg-card:hover {
  border-color: #CBD5E1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

/* Pricing cards */
.myorg-pricing-card,
.wp-block-column.myorg-pricing-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 32px !important;
  position: relative;
  margin-bottom: 24px;
}
.<myorg-pricing-card.is>-featured {
  border: 2px solid #4F46E5;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}
.myorg-pricing-card ul,
.myorg-pricing-card .wp-block-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 24px;
}
.myorg-pricing-card li {
  padding-left: 24px;
  position: relative;
  margin-bottom: 8px;
  font-size: 14px;
}
.myorg-pricing-card li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: #10B981;
  font-weight: 700;
}

/* Boutons CTA primary */
.wp-block-button.myorg-cta-primary .wp-block-button__link,
.myorg-cta-primary .wp-block-button__link {
  background-color: #4F46E5 !important;
  color: #FFFFFF !important;
  border: 1.5px solid #4F46E5 !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  transition: background-color 0.2s, transform 0.2s;
}
.wp-block-button.myorg-cta-primary .wp-block-button__link:hover {
  background-color: #4338CA !important;
  transform: translateY(-1px);
}

/* Boutons CTA secondary */
.wp-block-button.myorg-cta-secondary .wp-block-button__link,
.myorg-cta-secondary .wp-block-button__link,
.<wp-block-button.is>-style-outline.myorg-cta-secondary .wp-block-button__link {
  background-color: transparent !important;
  color: #4F46E5 !important;
  border: 1.5px solid #4F46E5 !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
}
.wp-block-button.myorg-cta-secondary .wp-block-button__link:hover {
  background-color: #EEF2FF !important;
}

/* Top-bar noire */
.myorg-top-bar {
  background: #0F172A !important;
  color: #CBD5E1 !important;
  font-size: 13px;
  padding: 8px 0;
}
.myorg-top-bar p { color: #CBD5E1 !important; }
.myorg-top-bar strong { color: #FFFFFF !important; }

/* Demo banner gradient */
.myorg-demo-banner {
  background: linear-gradient(135deg, #4F46E5 0%, #06B6D4 100%) !important;
  border-radius: 16px;
  color: #FFFFFF;
  padding: 48px 24px !important;
  text-align: center;
}
.myorg-demo-banner h2,
.myorg-demo-banner h3 { color: #FFFFFF !important; }
.myorg-demo-banner p { color: rgba(255, 255, 255, 0.92) !important; }

/* Credentials block (page Démo) */
.myorg-credentials {
  background: #0F172A;
  color: #E2E8F0;
  border-radius: 12px;
  padding: 24px;
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: 14px;
  overflow-x: auto;
}
.myorg-credentials dl { margin: 0; }
.myorg-credentials dt {
  color: #94A3B8;
  margin-top: 12px;
}
.myorg-credentials dt:first-child { margin-top: 0; }
.myorg-credentials dd {
  color: #FFFFFF;
  margin: 0 0 8px 0;
}

/* Listes à puces personnalisées */
.wp-block-list {
  padding-left: 0;
  list-style: none;
}
.wp-block-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  line-height: 1.6;
}
.wp-block-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: #4F46E5;
  font-weight: 700;
  font-size: 16px;
}

/* FAQ accordéon */
.wp-block-details {
  border-bottom: 1px solid #E2E8F0;
  padding: 16px 0;
}
.wp-block-details summary {
  font-weight: 600;
  cursor: pointer;
  padding: 8px 0;
  list-style: none;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::before {
  content: "+ ";
  color: #4F46E5;
  font-weight: 700;
}
.wp-block-details[open] summary::before { content: "\2212  "; }

/* Container max-width */
.wp-block-group.alignwide,
.wp-block-columns.alignwide {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Colonnes empilées sur mobile */
@media (max-width: 768px) {
  .wp-block-columns {
    flex-wrap: wrap !important;
  }
  .wp-block-column {
    flex-basis: 100% !important;
    margin-bottom: 16px;
  }
}

/* ============================================================
   Menu burger mobile (Hello Elementor)
   ============================================================ */

.myorg-burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  z-index: 200;
  margin-left: auto;
}
.myorg-burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #0F172A;
  margin: 5px auto;
  transition: transform 0.25s ease, opacity 0.25s ease;
  border-radius: 2px;
}
.<myorg-burger.is>-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.<myorg-burger.is>-active span:nth-child(2) {
  opacity: 0;
}
.<myorg-burger.is>-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 768px) {
  .myorg-burger {
    display: block;
  }
  .site-navigation {
    position: fixed;
    top: 0;
    right: -100%;
    width: 82%;
    max-width: 320px;
    height: 100vh;
    background: #FFFFFF;
    padding: 80px 24px 24px;
    box-shadow: -4px 0 24px rgba(15, 23, 42, 0.15);
    transition: right 0.3s ease;
    z-index: 150;
    overflow-y: auto;
  }
  .<site-navigation.is>-open {
    right: 0;
  }
  .site-navigation .menu,
  .site-navigation #menu-menu-principal {
    flex-direction: column !important;
    align-items: stretch !important;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .site-navigation .menu li {
    border-bottom: 1px solid #E2E8F0;
  }
  .site-navigation .menu li a {
    display: block !important;
    padding: 16px 12px !important;
    font-size: 16px !important;
    color: #0F172A !important;
    text-decoration: none;
  }
  .site-navigation .menu li.current-menu-item a {
    color: #4F46E5 !important;
    font-weight: 600;
  }
  body.menu-open {
    overflow: hidden;
  }
  body.menu-open::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 100;
  }
}

/* === Patch burger : force le panneau à s'afficher sur mobile === */
@media (max-width: 768px) {
  body .site-header .site-navigation,
  body <nav.site>-navigation {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    left: auto !important;
    width: 82% !important;
    max-width: 320px !important;
    height: 100vh !important;
    background: #FFFFFF !important;
    padding: 80px 24px 24px !important;
    box-shadow: -4px 0 24px rgba(15, 23, 42, 0.15) !important;
    transition: right 0.3s ease !important;
    z-index: 150 !important;
    overflow-y: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  body .site-header .<site-navigation.is>-open,
  body <nav.site-navigation.is>-open {
    right: 0 !important;
  }
  body .site-header .site-navigation ul.menu,
  body <nav.site>-navigation ul.menu,
  body <nav.site>-navigation #menu-menu-principal {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  body <nav.site>-navigation .menu li {
    display: block !important;
    width: 100% !important;
    border-bottom: 1px solid #E2E8F0 !important;
    margin: 0 !important;
  }
  body <nav.site>-navigation .menu li a {
    display: block !important;
    padding: 16px 12px !important;
    font-size: 16px !important;
    color: #0F172A !important;
  }
}

/* ============================================================
   Patch final burger : transform + reset bouton
   ============================================================ */

/* Reset complet du bouton burger (annule les styles parasites) */
button.myorg-burger,
header .myorg-burger,
.site-header .myorg-burger {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  color: #0F172A !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  margin-left: auto !important;
}
button.myorg-burger:hover,
button.myorg-burger:focus,
button.myorg-burger:active,
.myorg-burger:hover,
.myorg-burger:focus {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
.myorg-burger span {
  background: #0F172A !important;
}

/* Panneau menu mobile : approche transform (plus fiable) */
@media (max-width: 768px) {
  body .site-header <nav.site>-navigation,
  body header <nav.site>-navigation,
  body <nav.site>-navigation,
  body .site-navigation {
    display: block !important;
    visibility: visible !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 80vw !important;
    max-width: 320px !important;
    height: 100vh !important;
    background: #FFFFFF !important;
    padding: 72px 24px 24px !important;
    box-shadow: -4px 0 24px rgba(15, 23, 42, 0.15) !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s ease !important;
    z-index: 150 !important;
    overflow-y: auto !important;
    margin: 0 !important;
    opacity: 1 !important;
  }
  body .site-header <nav.site-navigation.is>-open,
  body header <nav.site-navigation.is>-open,
  body <nav.site-navigation.is>-open,
  body .<site-navigation.is>-open {
    transform: translateX(0) !important;
  }
}

/* =====================================================
   Patch FINAL burger - sélecteurs sans nav (anti-corruption)
   ===================================================== */
@media (max-width: 768px) {
  body > .site-navigation,
  .site-navigation[aria-label] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: 80vw !important;
    max-width: 320px !important;
    height: 100vh !important;
    background: #FF0000 !important;
    padding: 72px 24px 24px !important;
    box-shadow: -4px 0 24px rgba(15, 23, 42, 0.15) !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s ease !important;
    z-index: 999999 !important;
    overflow-y: auto !important;
    margin: 0 !important;
  }
  body > .site-navigation.is-open,
  .site-navigation.is-open[aria-label] {
    transform: translateX(0) !important;
  }
  body.menu-open::after {
    z-index: 999998 !important;
  }
  body > .site-navigation ul.menu,
  body > .site-navigation #menu-menu-principal {
    display: flex !important;
    flex-direction: column !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body > .site-navigation ul.menu li {
    border-bottom: 1px solid #E2E8F0 !important;
  }
  body > .site-navigation ul.menu li a {
    display: block !important;
    padding: 16px 12px !important;
    font-size: 16px !important;
    color: #FFFFFF !important;
  }
}