/* ════════════════════════════════════════════════════════════════════════
   CVG-HERO — Hero principal commun des pages publiques CVGator

   Composant partagé : reprend EXACTEMENT le fond, la palette, la grille,
   la typographie et les CTA du hero inférieur commun (.cvg-cta) :
   fond émeraude plein #00A78E, texte blanc, surfaces blanches translucides,
   titre Montserrat 700 32px/24px, paragraphe Open Sans 16px, pastille
   blanche pour le CTA, ligne signature à trois tirets.

   Les pages ne personnalisent QUE le contenu des slots :

     <section class="cvg-hero">
       <div class="cvg-hero-inner">
         <div class="cvg-hero-badge"><i class="fa-..."></i> Badge</div>
         <h1 class="cvg-hero-title">Titre <span>accent</span></h1>
         <div class="cvg-hero-line"><span></span><span></span><span></span></div>
         <p class="cvg-hero-desc">Sous-titre.</p>
         <div class="cvg-hero-actions">                    <!-- optionnel -->
           <a class="cvg-hero-btn" href="...">CTA principal</a>
           <a class="cvg-hero-btn cvg-hero-btn--ghost" href="...">CTA secondaire</a>
         </div>
         <div class="cvg-hero-note"><i class="fa-..."></i> Mention</div>  <!-- optionnel -->
         <div class="cvg-hero-search"> ... <input/></div>  <!-- optionnel -->
       </div>
     </section>
   ════════════════════════════════════════════════════════════════════════ */

.cvg-hero {
    background: #00A78E; /* même fond que .cvg-cta-box (hero inférieur) */
    padding: 64px 24px 56px;
    text-align: center;
}
.cvg-hero-inner { max-width: 860px; margin: 0 auto; }

.cvg-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.35);
    color: #fff; padding: 6px 16px; border-radius: 99px;
    font-family: 'Open Sans', -apple-system, sans-serif;
    font-size: 13px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; margin-bottom: 20px;
}

.cvg-hero-title {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 32px; font-weight: 700; line-height: 1.2;
    color: #fff; margin: 0 0 12px;
}
.cvg-hero-title span { color: #fff; }

.cvg-hero-line { display: flex; justify-content: center; gap: 6px; margin: 0 0 14px; }
.cvg-hero-line span { height: 3px; border-radius: 50px; background: #fff; display: block; }
.cvg-hero-line span:nth-child(1) { width: 64px; }
.cvg-hero-line span:nth-child(2) { width: 10px; }
.cvg-hero-line span:nth-child(3) { width: 7px; }

.cvg-hero-desc {
    font-family: 'Open Sans', -apple-system, sans-serif;
    font-size: 16px; color: rgba(255,255,255,.85); line-height: 1.65;
    max-width: 640px; margin: 0 auto;
}

.cvg-hero-actions {
    display: flex; gap: 16px; margin-top: 28px;
    flex-wrap: wrap; align-items: center; justify-content: center;
}
.cvg-hero-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 32px; border-radius: 50px;
    background: #fff; color: #00A78E;
    font-family: 'Open Sans', -apple-system, sans-serif;
    font-weight: 700; font-size: 15px; text-decoration: none;
    transition: all .3s; white-space: nowrap;
}
.cvg-hero-btn:hover { background: rgba(255,255,255,.88); transform: translateY(-2px); }
.cvg-hero-btn--ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.45); }
.cvg-hero-btn--ghost:hover { background: rgba(255,255,255,.10); border-color: #fff; color: #fff; transform: translateY(-2px); }

.cvg-hero-note {
    font-family: 'Open Sans', -apple-system, sans-serif;
    font-size: 13px; color: rgba(255,255,255,.7);
    display: inline-flex; align-items: center; gap: 6px; margin-top: 22px;
}
.cvg-hero-note i { color: #fff; }

/* Champ de recherche optionnel (FAQ…) */
.cvg-hero-search { position: relative; max-width: 520px; margin: 28px auto 0; }
.cvg-hero-search input {
    width: 100%; padding: 15px 24px 15px 48px;
    border-radius: 12px; border: 1.5px solid rgba(255,255,255,.30);
    background: rgba(255,255,255,.12);
    color: #fff; font-size: 15px;
    font-family: 'Open Sans', -apple-system, sans-serif;
    outline: none; transition: border-color .2s, background .2s;
}
.cvg-hero-search input::placeholder { color: rgba(255,255,255,.55); }
.cvg-hero-search input:focus { border-color: #fff; background: rgba(255,255,255,.18); }
.cvg-hero-search i {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: rgba(255,255,255,.6); font-size: 16px;
}

@media (max-width: 768px) {
    .cvg-hero { padding: 48px 16px 44px; }
    .cvg-hero-title { font-size: 24px; }
}