/*
Theme Name:   Ruch Optimiz - Hello Child
Theme URI:    https://www.ruch-optimiz.com/
Description:  Thème enfant Hello Elementor — design system Ruch Optimiz (FR/DE). Ne pas modifier le thème parent.
Author:       Eric Ruch
Author URI:   https://www.ruch-optimiz.com/
Template:     hello-elementor
Version:      1.0.0
Text Domain:  ruch-child
License:      GPL-2.0-or-later
*/

/* ==========================================================
   DESIGN TOKENS — Ruch Optimiz
   ========================================================== */
:root{
  --ro-royal:        #1E3A8A;   /* bleu royal — titres, boutons */
  --ro-royal-light:  #3B82F6;   /* accent liens, hover */
  --ro-ink:          #0F172A;   /* texte principal */
  --ro-mute:         #475569;   /* texte secondaire */
  --ro-line:         #CBD5E1;   /* bordures douces */
  --ro-bg-soft:      #F1F5F9;   /* fond alterné */
  --ro-white:        #FFFFFF;
  --ro-amber:        #F59E0B;   /* accent chaud CTA header */
  --ro-amber-dark:   #D97706;
  --ro-radius:       10px;
  --ro-radius-sm:    6px;
  --ro-shadow:       0 1px 2px rgba(15,23,42,.06);
  --ro-shadow-strong:0 10px 30px rgba(15,23,42,.12);
  --ro-container:    1200px;
  --ro-font-title:   'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --ro-font-body:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ==========================================================
   BASE
   ========================================================== */
html{ scroll-behavior:smooth; }
body{
  font-family: var(--ro-font-body);
  color: var(--ro-ink);
  font-size: 17px;
  line-height: 1.65;
  background: var(--ro-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,h5,h6{
  font-family: var(--ro-font-title);
  color: var(--ro-royal);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
h1{ font-size: clamp(30px, 4.5vw, 52px); margin:0 0 .4em; }
h2{ font-size: clamp(24px, 3.2vw, 36px); margin:0 0 .5em; }
h3{ font-size: clamp(20px, 2.2vw, 24px); margin:0 0 .5em; color: var(--ro-royal-light); }
p{ margin: 0 0 1em; color: var(--ro-ink); }
a{ color: var(--ro-royal-light); text-decoration: none; transition: color .2s ease; }
a:hover{ color: var(--ro-royal); text-decoration: underline; }

/* ==========================================================
   LAYOUT HELPERS
   ========================================================== */
.ro-container{ max-width: var(--ro-container); margin:0 auto; padding: 0 24px; }
.ro-section{ padding: 120px 0; }
.ro-section.ro-bg-soft{ background: var(--ro-bg-soft); }
@media (max-width: 1024px){ .ro-section{ padding: 80px 0; } }
@media (max-width: 767px){ .ro-section{ padding: 56px 0; } }

/* ==========================================================
   HEADER (site-header, rendu via header.php)
   ========================================================== */
.ro-header{
  position: sticky; top: 0; z-index: 100;
  background: var(--ro-white);
  border-bottom: 1px solid transparent;
  transition: box-shadow .2s ease, border-color .2s ease, height .2s ease;
}
.ro-header.is-scrolled{
  border-bottom-color: var(--ro-line);
  box-shadow: 0 1px 0 var(--ro-line);
}
.ro-header__inner{
  max-width: var(--ro-container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  height: 80px;
  gap: 24px;
}
@media (max-width: 767px){ .ro-header__inner{ height: 64px; } }
.ro-logo{ display:inline-flex; align-items:center; gap:10px; font-family: var(--ro-font-title); font-weight:800; color: var(--ro-royal); font-size: 20px; letter-spacing: -0.01em; }
.ro-logo img{ height: 36px; width:auto; display:block; }
.ro-logo:hover{ text-decoration:none; color: var(--ro-royal-light); }

.ro-nav{ display:flex; align-items:center; gap: 28px; }
.ro-nav ul{ list-style:none; margin:0; padding:0; display:flex; gap: 24px; }
.ro-nav a{ color: var(--ro-ink); font-weight: 500; font-size: 15px; }
.ro-nav a:hover{ color: var(--ro-royal); text-decoration: none; }
.ro-nav .current-menu-item > a,
.ro-nav .current_page_item > a{ color: var(--ro-royal); font-weight: 600; }

/* Sub-menu */
.ro-nav .sub-menu{
  position:absolute; top:100%; left:0;
  background: var(--ro-white);
  border: 1px solid var(--ro-line);
  border-radius: var(--ro-radius-sm);
  box-shadow: var(--ro-shadow-strong);
  padding: 8px 0; min-width: 220px;
  display:none;
}
.ro-nav li{ position: relative; }
.ro-nav li:hover > .sub-menu{ display:block; }
.ro-nav .sub-menu a{ display:block; padding: 10px 16px; font-size: 14px; }
.ro-nav .sub-menu a:hover{ background: var(--ro-bg-soft); color: var(--ro-royal); }

/* Right side: CTA + lang */
.ro-header__actions{ display:flex; align-items:center; gap: 16px; }
.ro-btn-amber{
  display:inline-flex; align-items:center; gap: 8px;
  background: var(--ro-amber); color: var(--ro-ink) !important;
  padding: 10px 18px; border-radius: var(--ro-radius-sm);
  font-weight: 700; font-size: 14px;
  border: 0; cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.ro-btn-amber:hover{ background: var(--ro-amber-dark); color: var(--ro-ink) !important; text-decoration: none; transform: translateY(-1px); }

.ro-lang{ display:flex; align-items:center; gap: 8px; font-size: 13px; color: var(--ro-mute); }
.ro-lang a{ color: var(--ro-mute); font-weight: 600; }
.ro-lang a.is-active{ color: var(--ro-royal); }
.ro-lang span{ color: var(--ro-line); }

/* Burger mobile */
.ro-burger{ display:none; background:none; border:0; width:40px; height:40px; cursor:pointer; color: var(--ro-ink); }
.ro-burger svg{ width: 28px; height: 28px; }
@media (max-width: 1024px){
  .ro-nav{ display:none; }
  .ro-burger{ display:inline-flex; align-items:center; justify-content:center; }
  .ro-nav.is-open{
    display:flex; flex-direction:column; align-items:flex-start;
    position: fixed; inset: 64px 0 0 0;
    background: var(--ro-white);
    padding: 24px;
    z-index: 99;
  }
  .ro-nav.is-open ul{ flex-direction:column; gap: 12px; width:100%; }
  .ro-nav.is-open a{ font-size: 22px; font-family: var(--ro-font-title); font-weight: 700; color: var(--ro-ink); }
  .ro-nav.is-open .sub-menu{ position:static; box-shadow:none; border:0; padding-left: 16px; display:block; }
}

/* ==========================================================
   BUTTONS (réutilisables via classes, widgets Elementor)
   ========================================================== */
.ro-btn{
  display:inline-flex; align-items:center; gap: 8px;
  padding: 14px 26px; border-radius: var(--ro-radius-sm);
  font-weight: 600; font-size: 15px; font-family: var(--ro-font-body);
  transition: all .2s ease; cursor:pointer; border: 1.5px solid transparent;
  text-decoration: none;
}
.ro-btn--primary{ background: var(--ro-royal); color: var(--ro-white) !important; }
.ro-btn--primary:hover{ background: var(--ro-royal-light); color: var(--ro-white) !important; text-decoration:none; transform: translateY(-1px); }
.ro-btn--outline{ background: transparent; color: var(--ro-royal) !important; border-color: var(--ro-royal); }
.ro-btn--outline:hover{ background: var(--ro-royal); color: var(--ro-white) !important; text-decoration:none; }
.ro-btn--white{ background: var(--ro-white); color: var(--ro-royal) !important; }
.ro-btn--white:hover{ background: var(--ro-bg-soft); color: var(--ro-royal) !important; text-decoration:none; }

/* Boutons Elementor alignés sur le design system */
.elementor-button-wrapper .elementor-button.ro-primary,
.elementor-button.ro-primary{
  background-color: var(--ro-royal) !important;
  color: #fff !important;
  border-radius: var(--ro-radius-sm) !important;
  padding: 14px 26px !important;
  font-weight: 600 !important;
}
.elementor-button.ro-primary:hover{ background-color: var(--ro-royal-light) !important; }

.elementor-button.ro-outline{
  background-color: transparent !important;
  color: var(--ro-royal) !important;
  border: 1.5px solid var(--ro-royal) !important;
  border-radius: var(--ro-radius-sm) !important;
  padding: 13px 25px !important;
  font-weight: 600 !important;
}
.elementor-button.ro-outline:hover{ background-color: var(--ro-royal) !important; color: #fff !important; }

/* ==========================================================
   CARDS
   ========================================================== */
.ro-card{
  background: var(--ro-white);
  border: 1px solid var(--ro-line);
  border-radius: var(--ro-radius);
  padding: 32px;
  box-shadow: var(--ro-shadow);
  transition: box-shadow .2s ease, transform .2s ease;
}
.ro-card:hover{ box-shadow: var(--ro-shadow-strong); transform: translateY(-2px); }
.ro-card h3{ margin-top: 0; }

/* Elementor Icon Box alignée */
.elementor-widget-icon-box.ro-card-widget .elementor-icon-box-wrapper{
  background: var(--ro-white);
  border: 1px solid var(--ro-line);
  border-radius: var(--ro-radius);
  padding: 32px;
  box-shadow: var(--ro-shadow);
}
.elementor-widget-icon-box.ro-card-widget .elementor-icon-box-title{
  font-family: var(--ro-font-title);
  color: var(--ro-royal);
  font-weight: 700;
}

/* ==========================================================
   HERO SECTION GENERIC (pour Elementor containers avec classe .ro-hero)
   ========================================================== */
.ro-hero{ padding: 120px 0 100px; }
.ro-hero h1{ color: var(--ro-royal); }
.ro-hero .ro-subtitle{ font-size: clamp(16px, 1.4vw, 19px); color: var(--ro-mute); max-width: 620px; }
.ro-hero .ro-actions{ display:flex; flex-wrap:wrap; gap: 14px; margin-top: 28px; }

/* ==========================================================
   CTA BANNER BOTTOM
   ========================================================== */
.ro-cta-banner{
  background: var(--ro-royal);
  color: var(--ro-white);
  padding: 88px 0;
  text-align: center;
}
.ro-cta-banner h2{ color: var(--ro-white); }
.ro-cta-banner p{ color: #dbeafe; max-width: 720px; margin-left:auto; margin-right:auto; }
.ro-cta-banner .ro-btn--white{ margin-top: 20px; }

/* ==========================================================
   FOOTER
   ========================================================== */
.ro-footer{ background: var(--ro-ink); color: #CBD5E1; padding: 64px 0 24px; }
.ro-footer a{ color: #fff; }
.ro-footer a:hover{ color: var(--ro-royal-light); text-decoration:none; }
.ro-footer__grid{
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px; max-width: var(--ro-container); margin: 0 auto; padding: 0 24px;
}
.ro-footer__col h4{ color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px; font-family: var(--ro-font-body); }
.ro-footer__col ul{ list-style:none; margin:0; padding:0; }
.ro-footer__col li{ margin-bottom: 8px; font-size: 14px; }
.ro-footer__about p{ color: #94a3b8; font-size: 14px; line-height: 1.6; }
.ro-footer__bottom{
  max-width: var(--ro-container); margin: 40px auto 0; padding: 24px 24px 0;
  border-top: 1px solid #1e293b;
  display:flex; flex-wrap:wrap; gap: 12px; justify-content: space-between; align-items: center;
  font-size: 13px; color: #64748b;
}
.ro-footer__bottom a{ color: #94a3b8; font-size: 13px; }
@media (max-width: 900px){ .ro-footer__grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .ro-footer__grid{ grid-template-columns: 1fr; } }

/* ==========================================================
   UTILS
   ========================================================== */
.ro-eyebrow{ display:inline-block; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--ro-royal-light); font-weight: 700; margin-bottom: 12px; }
.ro-divider{ border: 0; border-top: 1px solid var(--ro-line); margin: 40px 0; }
.ro-muted{ color: var(--ro-mute); }
.ro-center{ text-align: center; }
.ro-mt-0{ margin-top: 0 !important; }

/* Elementor tweaks pour headings */
.elementor-heading-title{ font-family: var(--ro-font-title); }

/* Accessibilité */
:focus-visible{ outline: 2px solid var(--ro-royal-light); outline-offset: 2px; border-radius: 4px; }

/* Mobile tweaks */
@media (max-width: 767px){
  body{ font-size: 16px; }
  .ro-cta-banner{ padding: 64px 0; }
  .ro-card{ padding: 24px; }
}