.elementor-14 .elementor-element.elementor-element-70f63f8{--display:flex;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS *//* =========================================================
   SF HEADER — Premium (Hello + Elementor)
   HTML attendu : version avec .sf-nav-overlay + .sf-nav-panel
   Scope : classes .sf-*
   ========================================================= */

/* ---------- Design tokens ---------- */
:root{
  --sf-ink:#0f172a;
  --sf-muted:#64748b;
  --sf-line:rgba(15, 23, 42, .10);
  --sf-soft:rgba(15, 23, 42, .06);

  --sf-bg:rgba(255,255,255,.86);
  --sf-bg-solid:#ffffff;

  --sf-accent:#2F6A8B;
  --sf-accent-2:#1f506a;

  --sf-max: 1180px;
  --sf-pad-x: 22px;
  --sf-h: 78px;
  --sf-radius: 16px;

  --sf-shadow: 0 18px 48px rgba(15,23,42,.12);
  --sf-shadow-soft: 0 10px 30px rgba(15,23,42,.10);
}

/* ---------- Sticky header ---------- */
.sf-header{
  position: sticky;
  top: 0;
  z-index: 9999; /* au-dessus Elementor */
  background: transparent;
}

/* ---------- Header bar ---------- */
.sf-header__bar{
  max-width: var(--sf-max);
  margin: 12px auto;
  padding: 12px var(--sf-pad-x);
  min-height: var(--sf-h);

  display: flex;
  align-items: center;
  gap: 18px;

  border: 1px solid var(--sf-line);
  border-radius: calc(var(--sf-radius) + 6px);
  background: var(--sf-bg);
  box-shadow: var(--sf-shadow-soft);

  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* ---------- Logo ---------- */
.sf-logo{
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  min-width: 230px;
}
.sf-logo__name{
  color: var(--sf-ink);
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 18px;
  line-height: 1.1;
}
.sf-logo__tag{
  color: var(--sf-muted);
  font-size: 12.5px;
  line-height: 1.2;
}

/* ---------- Desktop nav ---------- */
.sf-nav{
  /* rien ici : variantes ci-dessous */
}
.sf-nav--desktop{
  flex: 1;
  display: flex;
  justify-content: center;
}
.sf-nav__list{
  list-style: none;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0;
  margin: 0;
}
.sf-nav__item{ margin: 0; }

/* Liens premium */
.sf-nav__link{
  position: relative;
  display: inline-flex;
  align-items: center;

  padding: 10px 2px;
  color: var(--sf-ink);
  text-decoration: none;

  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .08em;
  text-transform: uppercase;

  opacity: .88;
  transition: opacity .18s ease, transform .18s ease, background .18s ease;
}
.sf-nav__link:hover{
  opacity: 1;
  transform: translateY(-1px);
}
.sf-nav__link::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sf-accent), rgba(47,106,139,.15));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.sf-nav__link:hover::after,
.sf-nav__link.is-active::after{
  transform: scaleX(1);
}
.sf-nav__link.is-active{ opacity: 1; }

/* ---------- CTA ---------- */
.sf-header__cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Buttons */
.sf-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 42px;
  padding: 0 14px;
  border-radius: 999px;

  font-weight: 800;
  font-size: 13px;
  letter-spacing: .02em;
  text-decoration: none;

  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.sf-btn:active{ transform: translateY(0); }

.sf-btn--primary{
  background: linear-gradient(180deg, var(--sf-accent), var(--sf-accent-2));
  color: #fff;
  box-shadow: 0 10px 22px rgba(47,106,139,.22);
}
.sf-btn--primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(47,106,139,.26);
}

.sf-btn--ghost{
  background: rgba(255,255,255,.70);
  color: var(--sf-ink);
  border-color: var(--sf-line);
}
.sf-btn--ghost:hover{
  transform: translateY(-1px);
  border-color: rgba(47,106,139,.25);
  box-shadow: 0 12px 22px rgba(15,23,42,.10);
}

/* ---------- Burger ---------- */
.sf-burger{
  display: none; /* visible en mobile */
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--sf-line);
  background: rgba(255,255,255,.75);
  box-shadow: 0 10px 22px rgba(15,23,42,.10);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.sf-burger__lines{
  width: 18px;
  height: 2px;
  background: var(--sf-ink);
  border-radius: 999px;
  position: relative;
  display: block;
}
.sf-burger__lines::before,
.sf-burger__lines::after{
  content:"";
  position:absolute;
  left:0;
  width: 18px;
  height: 2px;
  background: var(--sf-ink);
  border-radius: 999px;
  transition: transform .2s ease, top .2s ease, opacity .2s ease;
}
.sf-burger__lines::before{ top: -6px; }
.sf-burger__lines::after{ top: 6px; }

/* ---------- Overlay + Panel mobile ---------- */
.sf-nav-overlay{
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(15,23,42,.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  padding: 18px; /* espace autour du panneau */
}

.sf-nav-panel{
  width: min(380px, 92vw);
  max-height: 85vh;
  overflow: auto;

  margin-left: auto;

  background: var(--sf-bg-solid);
  border: 1px solid var(--sf-line);
  border-radius: 18px;
  box-shadow: var(--sf-shadow);

  transform: translateX(10px);
  transition: transform .18s ease;
}

/* Top bar du panneau */
.sf-nav-panel__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 12px 12px 6px;
  border-bottom: 1px solid var(--sf-soft);
}
.sf-nav-panel__title{
  font-weight: 900;
  color: var(--sf-ink);
  letter-spacing: .02em;
}
.sf-nav-close{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--sf-line);
  background: rgba(255,255,255,.90);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: var(--sf-ink);
}

/* Nav mobile */
.sf-nav--mobile{ display: block; }
.sf-nav__list--mobile{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 12px;
  margin: 0;
}
.sf-nav__list--mobile .sf-nav__link{
  padding: 12px 12px;
  border-radius: 12px;
  letter-spacing: .06em;
}
.sf-nav__list--mobile .sf-nav__link::after{
  left: 12px;
  right: 12px;
  bottom: 8px;
}
.sf-nav__list--mobile .sf-nav__link:hover{
  background: rgba(47,106,139,.06);
  transform: none;
}

/* CTA dans le panneau */
.sf-nav-panel__cta{
  display: grid;
  gap: 10px;
  padding: 0 12px 14px;
}
.sf-btn--full{
  width: 100%;
  justify-content: center;
}

/* ---------- OPEN state (piloté par JS) ---------- */
.sf-header.is-open .sf-nav-overlay{
  opacity: 1;
  pointer-events: auto;
}
.sf-header.is-open .sf-nav-panel{
  transform: translateX(0);
}

/* Burger en croix quand ouvert */
.sf-header.is-open .sf-burger__lines{
  background: transparent;
}
.sf-header.is-open .sf-burger__lines::before{
  top: 0;
  transform: rotate(45deg);
}
.sf-header.is-open .sf-burger__lines::after{
  top: 0;
  transform: rotate(-45deg);
}

/* Stop scroll quand ouvert */
html.sf-no-scroll,
html.sf-no-scroll body{
  overflow: hidden !important;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 1024px){
  .sf-nav-panel{ margin-top: 64px; }

  .sf-logo{ min-width: auto; }
  .sf-nav__list{ gap: 16px; }
  .sf-nav__link{ font-size: 12.8px; letter-spacing: .06em; }
}

@media (max-width: 1024px){
  .sf-header__bar{
    gap: 12px;
    padding: 10px 14px;
  }

  .sf-burger{ display: inline-flex; }

  .sf-nav--desktop{ display: none; }

  /* CTA compact en header */
  .sf-header__cta .sf-btn--ghost{ display: none; }
}

/* Ultra mobile */
@media (max-width: 420px){
  .sf-logo__tag{ display:none; }
  .sf-btn{ height: 40px; padding: 0 12px; }
  .sf-nav-overlay{ padding: 12px; }
  .sf-nav-panel{ width: min(360px, 96vw); margin-top: 48px; }
}/* End custom CSS */