:root{
  --bb-primary: #FF562F; /* background navbar */
  --bb-text: #371811;    /* couleur base du texte */
  --bb-white: #ffffff;

  /* Jaune du trait SVG (modifie si besoin) */
  --bb-accent: #FFD34D;
}

/* Typo globale (tu peux enlever si tu ne veux pas l'appliquer à tout le site) */
body{
  font-family: "Onest", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 300; /* Light */
  color: var(--bb-text);
}

/* Gras = Onest Black */
strong, b{
  font-weight: 900;
}

/* ===== Header ===== */
.bb-header{
  width: 100%;
  background: var(--bb-primary);
  position: relative;
  z-index: 999;
}

.bb-header__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

/* ===== Logo (fix max 160px) ===== */
.bb-header__brand,
.bb-header__brand .custom-logo-link{
  display: inline-flex !important;
  align-items: center !important;
  max-width: 160px !important;
  width: 160px !important;
  text-decoration: none;
}

/* WP génère <img class="custom-logo"> */
.bb-header__brand img.custom-logo,
.bb-header__brand .custom-logo-link img{
  max-width: 160px !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain;
  display: block !important;
}

/* fallback sans logo */
.bb-header__brandtext{
  color: var(--bb-white);
  font-weight: 900;
  letter-spacing: .5px;
}

/* ===== Menu desktop ===== */
.bb-nav{
  position: relative;
}

.bb-nav__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 34px;
}

.bb-nav__list li{
  position: relative;
}

/* liens du menu (blanc + Onest Black) */
.bb-nav__list > li > a{
  position: relative;
  display: inline-block;
  color: var(--bb-white);
  text-decoration: none;
  font-weight: 900; /* Black */
  font-size: 16px;
  padding: 10px 0;
}

/* ===== Trait jaune SVG sur hover + actif (pleine largeur) ===== */
/* On applique au top-level uniquement pour éviter de souligner les sous-items */
/* Underline SVG personnalisé */
.bb-nav__list > li > a::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;        /* ajuste si besoin */
  height: 14px;         /* hauteur visuelle du trait */
  width: 100%;

  background-image: url("../assets/images/underline.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;

  opacity: 0;
  transform: translateY(3px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}


.bb-nav__list > li > a:hover::after{
  opacity: 1;
  transform: translateY(0);
}

.bb-nav__list .current-menu-item > a::after,
.bb-nav__list .current_page_item > a::after,
.bb-nav__list .current-menu-ancestor > a::after{
  opacity: 1;
  transform: translateY(0);
}

/* ===== Sous-menu desktop (dropdown hover) ===== */
.bb-nav__list .sub-menu{
  list-style: none;
  margin: 0;
  padding: 10px;
  background: var(--bb-primary);
  border-radius: 14px;
  min-width: 220px;

  position: absolute;
  top: calc(100% + 10px);
  left: 0;

  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

.bb-nav__list .sub-menu li{
  width: 100%;
}

/* sous-items en blanc (Light) */
.bb-nav__list .sub-menu a{
  display: block;
  padding: 10px 10px;
  color: var(--bb-white);
  text-decoration: none;
  font-weight: 300; /* Light */
}

/* ouverture dropdown au hover (desktop) */
.bb-nav__list li:hover > .sub-menu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ===== Burger ===== */
/* Important : caché en desktop */
.bb-burger{
  display: none;
  background: transparent;
  border: 0;
  padding: 10px;
  cursor: pointer;
}

.bb-burger__bar{
  display: block;
  width: 28px;
  height: 3px;
  background: var(--bb-white); /* blanc */
  margin: 5px 0;
  border-radius: 999px;
  transition: transform .2s ease, opacity .2s ease;
}

/* ===== Mobile ===== */
@media (max-width: 1024px){
  .bb-burger{ display: inline-block; }

  /* panel mobile */
  .bb-nav{
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--bb-primary);
    overflow: hidden;
    max-height: 0;
    transition: max-height .25s ease;
    border-top: 2px solid rgba(255,255,255,.22);
  }

  .bb-nav.is-open{
    max-height: 80vh;
  }

  .bb-nav__list{
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 14px 18px 22px;
    width: 100%;
  }

  .bb-nav__list > li{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .bb-nav__list > li > a{
  	text-align: center;
    width: calc(100% - 48px); /* laisse place au chevron */
    padding: 14px 0;
    font-size: 17px;
    color: var(--bb-white); /* blanc */
  }

  /* Trait SVG toujours OK en mobile */
  .bb-nav__list > li > a::after{
    bottom: 2px;
  }

  /* Sous-menu mobile : fermé par défaut */
  .bb-nav__list .sub-menu{
    position: static;
    box-shadow: none;
    border-radius: 0;
    padding: 0 0 0 14px;

    opacity: 1;
    visibility: visible;
    transform: none;

    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
    width: 100%;
  }

  /* ouverture via JS */
  .bb-nav__list li.is-sub-open > .sub-menu{
    max-height: 600px;
  }

  /* sous-items mobile en blanc */
  .bb-nav__list .sub-menu a{
    color: var(--bb-white);
    padding: 12px 0;
    font-weight: 300;
  }

  /* bouton chevron ajouté par JS */
  .bb-subtoggle{
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 12px 10px;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
  }

  .bb-subtoggle::before{
    content: "▾";
    font-size: 18px;
    line-height: 1;
    color: var(--bb-white); /* blanc */
    transition: transform .2s ease;
  }

  li.is-sub-open > .bb-subtoggle::before{
    transform: rotate(180deg);
  }

  /* burger en X */
  .bb-burger.is-open .bb-burger__bar:nth-child(1){
    transform: translateY(8px) rotate(45deg);
  }
  .bb-burger.is-open .bb-burger__bar:nth-child(2){
    opacity: 0;
  }
  .bb-burger.is-open .bb-burger__bar:nth-child(3){
    transform: translateY(-8px) rotate(-45deg);
  }
}


img.custom-logo{max-width:180px;}

/* css elementor */

/* --- Base fonts/couleurs --- */
:root{
  --bb-primary: #FF562F;
  --bb-text: #371811;
}

/* Si Onest est déjà chargée sur ton site, parfait.
   Sinon, ajoute-la via ton functions.php comme on a fait avant. */
.bb-hero{
  position: relative;
  overflow: hidden;
}

.bb-hero, .bb-hero *{
  font-family: "Onest", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.bb-hero__title{
  color: var(--bb-text);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
}

.bb-accent{ color: var(--bb-primary); }

.bb-hero__p{
  color: var(--bb-text);
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.55;
}

/* Bouton */
.bb-hero__cta .elementor-button{
  background: var(--bb-primary) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 900 !important;
  padding: 14px 18px !important;
}

/* Carte image */
.bb-hero__card{
  max-width: 560px;
}

/* Image responsive */
.bb-hero__img img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
}

/* Responsive */
@media (max-width: 1024px){
  .bb-hero{
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

h1 > b, h2 > b {color : #FF562F; font-weight:800; }


/*formulaire*/
/* ===== CF7 - Newsletter compact + icône + effets ===== */
/* ===== CF7 - Newsletter compact + effets + erreurs + loading ===== */

.bb-newsletter.bb-newsletter--ebook{
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 980px;
}

/* Nettoyage CF7 */
.bb-newsletter.bb-newsletter--ebook p{ margin:0 !important; }
.bb-newsletter.bb-newsletter--ebook br{ display:none; }

.bb-newsletter.bb-newsletter--ebook .wpcf7-form-control-wrap{
  flex: 1 1 auto;
  width: 100%;
  display: block;
}

/* ----- CHAMP EMAIL ----- */
.bb-newsletter.bb-newsletter--ebook input[type="email"]{
  width: 100%;
  background: #fff;
  color: #371811;

  border: 3px solid #001139;
  border-radius: 18px;

  padding: 12px 18px;
  font-size: 18px;
  line-height: 1.1;

  outline: none;

  /* shadows plus claires */
  box-shadow: 0 0 0 0 rgba(0,17,57,0);
  transition:
    border .18s ease,
    box-shadow .18s ease,
    transform .12s ease;
}

/* Placeholder */
.bb-newsletter.bb-newsletter--ebook input[type="email"]::placeholder{
  color: rgba(55, 24, 17, .45);
  opacity: 1;
}

/* Pulse au focus */
@keyframes bbFocusPulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,17,57,.14); }
  70%  { box-shadow: 0 0 0 6px rgba(0,17,57,.07); }
  100% { box-shadow: 0 0 0 4px rgba(0,17,57,.10); }
}

.bb-newsletter.bb-newsletter--ebook input[type="email"]:focus{
  border-color: #001139;
  transform: translateY(-1px);
  animation: bbFocusPulse .55s ease-out;
  box-shadow: 0 0 0 4px rgba(0,17,57,.10); /* plus clair */
}

/* Petit effet hover champ */
.bb-newsletter.bb-newsletter--ebook input[type="email"]:hover{
  border-color: #001139;
}

/* ----- BOUTON ----- */
.bb-newsletter.bb-newsletter--ebook input[type="submit"]{
  background: #001139;
  color: #fff;

  border: 0;
  border-radius: 18px;

  padding: 12px 20px;
  font-size: 18px;
  font-weight: 900;

  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;

  /* shadows plus claires */
  box-shadow: 0 0 0 rgba(0,0,0,0);

  transition:
    transform .14s ease,
    filter .15s ease,
    box-shadow .15s ease,
    opacity .15s ease;
}

/* Icône ebook SVG (optionnel - garde si tu veux) */
.bb-newsletter.bb-newsletter--ebook input[type="submit"]{
  background-repeat: no-repeat;
  background-position: 14px center;
  background-size: 20px 20px;
  padding-left: 44px;
}

/* Hover bouton */
.bb-newsletter.bb-newsletter--ebook input[type="submit"]:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 6px 14px rgba(0,17,57,.16); /* plus clair */
}

/* Focus clavier bouton */
.bb-newsletter.bb-newsletter--ebook input[type="submit"]:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(0,17,57,.12); /* plus clair */
}

/* ----- ERREURS CF7 : fond blanc arrondi + ⚠️ ----- */

/* Le message sous le champ (tip) */
.bb-newsletter.bb-newsletter--ebook .wpcf7-not-valid-tip{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-top: 10px;
  padding: 10px 12px;

  background: #ffffff;
  border: 2px solid rgba(0,17,57,.14);
  border-radius: 14px;

  color: #371811;
  font-size: 14px;
  line-height: 1.3;
}

.bb-newsletter.bb-newsletter--ebook .wpcf7-not-valid-tip::before{
  content: "⚠️";
  font-size: 16px;
  line-height: 1;
}

/* Bordure champ en erreur (plus lisible que rouge agressif) */
.bb-newsletter.bb-newsletter--ebook input.wpcf7-not-valid{
  border-color: rgba(0,17,57,.55) !important;
  box-shadow: 0 0 0 4px rgba(0,17,57,.08) !important;
}

/* Message global (succès/erreur) */
.bb-newsletter.bb-newsletter--ebook + .wpcf7-response-output{
  margin: 12px 0 0 !important;
  padding: 12px 14px !important;

  background: #ffffff !important;
  border-radius: 14px !important;
  border: 2px solid rgba(0,17,57,.14) !important;

  color: #371811 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

/* Ajoute le panneau ⚠️ uniquement si c'est une erreur */
.bb-newsletter.bb-newsletter--ebook + .wpcf7-response-output.wpcf7-validation-errors::before,
.bb-newsletter.bb-newsletter--ebook + .wpcf7-response-output.wpcf7-spam-blocked::before,
.bb-newsletter.bb-newsletter--ebook + .wpcf7-response-output.wpcf7-mail-sent-ng::before{
  content: "⚠️";
  margin-right: 10px;
}

/* ----- ANIMATION PENDANT L'ENVOI ----- */

@keyframes bbDots {
  0%   { content: ""; }
  33%  { content: "."; }
  66%  { content: ".."; }
  100% { content: "..."; }
}

/* Quand CF7 envoie, il met la classe .submitting sur le form */
.wpcf7 form.submitting .bb-newsletter.bb-newsletter--ebook input[type="submit"]{
  opacity: .92;
  transform: none;
  filter: none;
  box-shadow: 0 6px 14px rgba(0,17,57,.12);
  pointer-events: none;
  position: relative;
}

/* Petit loader "…" à droite du texte */
.wpcf7 form.submitting .bb-newsletter.bb-newsletter--ebook input[type="submit"]{
  padding-right: 48px; /* place pour les points */
}

.wpcf7 form.submitting .bb-newsletter.bb-newsletter--ebook .bb-newsletter__btn{
  position: relative;
}

.wpcf7 form.submitting .bb-newsletter.bb-newsletter--ebook .bb-newsletter__btn::after{
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,.55);
  border-top-color: #ffffff;
  border-radius: 999px;
  animation: bbSpin .7s linear infinite;
}

@keyframes bbSpin {
  to { transform: translateY(-50%) rotate(360deg); }
}

/* ----- MOBILE ----- */
@media (max-width: 768px){
  .bb-newsletter.bb-newsletter--ebook{
    flex-wrap: wrap;
    gap: 12px;
  }

  .bb-newsletter.bb-newsletter--ebook input[type="submit"]{
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

span.wpcf7-spinner{display: none !important;}

/*footer*/

/* ===== FOOTER ===== */

.bb-footer{
  background:#0b0b0b;
  color:#ffffff;
  padding:70px 20px 50px;
  position:relative;
  overflow:hidden;
}

.bb-footer__inner{
  max-width:1200px;
  margin:0 auto;
}

.bb-footer__top{
  display:flex;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}

/* Colonnes */
.bb-footer__brand{ flex: 1 1 340px; }
.bb-footer__social{ flex: 0 1 220px; }
.bb-footer__links{ flex: 0 1 260px; }

.bb-footer__logo{
  max-width:160px;
  margin-bottom:14px;
}

.bb-footer h3{
  font-weight:900;
  margin:0 0 14px 0;
  font-size:18px;
  text-transform:uppercase;
  opacity:.9;
}

.bb-footer p{
  color:rgba(255,255,255,.78);
  line-height:1.55;
}

/* MENUS */
.bb-footer-menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.bb-footer-menu a{
  color:rgba(255,255,255,.82);
  text-decoration:none;
  font-size:14px;
  transition:.15s;
}

.bb-footer-menu a:hover{
  color:#FF562F;
  transform:translateX(2px);
}


@media(max-width:768px){
  .bb-footer__social,
  .bb-footer__links{
    flex:1 1 260px;
  }
}


/* ===== Effets boutons Elementor ===== */

.elementor-button{
  transition:
    transform .16s ease,
    box-shadow .18s ease,
    filter .15s ease;
  position: relative;
}

/* Hover : effet flottant */
.elementor-button:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  filter: brightness(1.04);
}

/* Focus clavier */
.elementor-button:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(0,0,0,.08);
}

/* Effet clic */
.elementor-button:active{
  transform: translateY(1px) scale(.98);
  box-shadow: 0 4px 10px rgba(0,0,0,.06);
  filter: brightness(.98);
}
.displaynone{
  display: none !important;
}