.elementor-kit-4{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-b5aeb33:#F4F7FB;--e-global-color-c58817e:#1B2330;--e-global-color-5420d44:#1d71e8;--e-global-color-58be983:#ffffff;--e-global-color-09cc561:#0d141a;--e-global-color-a495fd4:#B8C0CC;--e-global-color-dff8941:#F4F7FB;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;background-color:#000000;}.elementor-kit-4 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */<header class="ftv-header">
  <div class="ftv-header-inner">

    <!-- LOGO -->
    <div class="ftv-logo">
      <a href="/">
        <img src="https://TON-URL-LOGO.png" alt="FormulaTV">
      </a>
    </div>

    <!-- NAV DESKTOP -->
    <nav class="ftv-nav">
      <a href="/">Accueil</a>
      <a href="/abonnements">Abonnements</a>
      <a href="/abonnement-avec-boitier">Boîtier TV</a>
      <a href="/faq">FAQ</a>
      <a href="/contact">Contact</a>
    </nav>

    <!-- ACTIONS -->
    <div class="ftv-actions">
      <a href="/mon-compte" class="ftv-link">Mon compte</a>
      <a href="/abonnements" class="ftv-btn">S’abonner</a>
    </div>

    <!-- BURGER -->
    <button class="ftv-burger" aria-label="Menu">
      <span></span><span></span><span></span>
    </button>

  </div>

  <!-- MENU MOBILE -->
  <div class="ftv-mobile">
    <a href="/">Accueil</a>
    <a href="/abonnements">Abonnements</a>
    <a href="/abonnement-avec-boitier">Boîtier TV</a>
    <a href="/faq">FAQ</a>
    <a href="/contact">Contact</a>
    <a href="/mon-compte" class="ftv-mobile-account">Mon compte</a>
    <a href="/abonnements" class="ftv-mobile-btn">S’abonner</a>
  </div>
</header>

<style>
/* ===== BASE ===== */
.ftv-header{
  background:#000;
  border-bottom:1px solid rgba(255,255,255,.08);
  position:relative;
  z-index:999;
}
.ftv-header-inner{
  max-width:1280px;
  margin:0 auto;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

/* LOGO */
.ftv-logo img{
  height:42px;
  width:auto;
  display:block;
}

/* NAV DESKTOP */
.ftv-nav{
  display:flex;
  gap:22px;
}
.ftv-nav a{
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  position:relative;
  opacity:.85;
}
.ftv-nav a:hover{
  opacity:1;
}
.ftv-nav a::after{
  content:"";
  position:absolute;
  left:0; bottom:-6px;
  width:0;
  height:2px;
  background:#ffd600;
  transition:.25s;
}
.ftv-nav a:hover::after{
  width:100%;
}

/* ACTIONS */
.ftv-actions{
  display:flex;
  align-items:center;
  gap:16px;
}
.ftv-link{
  color:#fff;
  font-weight:700;
  text-decoration:none;
  opacity:.85;
}
.ftv-link:hover{opacity:1}

/* BOUTON */
.ftv-btn{
  background:#ffd600;
  color:#000;
  font-weight:900;
  text-decoration:none;
  padding:10px 16px;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(255,214,0,.25);
  transition:.2s;
}
.ftv-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 45px rgba(255,214,0,.35);
}

/* BURGER */
.ftv-burger{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
}
.ftv-burger span{
  width:24px;
  height:2px;
  background:#fff;
}

/* MOBILE MENU */
.ftv-mobile{
  display:none;
  flex-direction:column;
  background:#000;
  border-top:1px solid rgba(255,255,255,.08);
  padding:16px;
}
.ftv-mobile a{
  color:#fff;
  text-decoration:none;
  font-weight:800;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.ftv-mobile a:last-child{border-bottom:none}

.ftv-mobile-btn{
  margin-top:14px;
  background:#ffd600;
  color:#000 !important;
  text-align:center;
  padding:14px;
  border-radius:14px;
  font-weight:900;
}

/* RESPONSIVE */
@media (max-width: 900px){
  .ftv-nav,
  .ftv-actions{display:none}
  .ftv-burger{display:flex}
  .ftv-header.open .ftv-mobile{display:flex}
}
</style>

<script>
(function(){
  const header = document.querySelector('.ftv-header');
  const burger = document.querySelector('.ftv-burger');
  if(!burger) return;
  burger.addEventListener('click', ()=> {
    header.classList.toggle('open');
  });
})();
</script>/* End custom CSS */