/* =========================================================
   BBF — styles additionnels
   - Police de secours pour "Vectora" (les .woff ne sont pas fournis)
   - Formulaire "Sign up" (numéro de téléphone)
   Tout reprend l'identité du site : fond noir, orange #fd980d.
   ========================================================= */

:root{
  --bbf-orange:#fd980d;
  --bbf-black:#000000;
}

/* Police de secours tant que les fichiers Vectora ne sont pas ajoutés.
   Vectora est un sans-serif humaniste : Helvetica/Arial s'en approche. */
body,
body td, body th, body input, body textarea, body select{
  font-family:'Vectora','Helvetica Neue',Helvetica,Arial,sans-serif;
}

/* ---------- Formulaire téléphone ---------- */
.signup-form{
  width:100%;
  text-align:center;
  box-sizing:border-box;
  padding:0 8px;
}
.signup-form .su-inner{
  max-width:560px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* Champs texte / téléphone / indicatif : même habillage */
.signup-form input[type="text"],
.signup-form input[type="tel"],
.signup-form select{
  border:0;
  border-bottom:3px solid var(--bbf-orange);
  background:transparent;
  color:#fff;
  font-size:20px;
  line-height:1.2;
  padding:14px 6px;
  text-align:center;
  outline:none;
  font-family:inherit;
  width:100%;
  box-sizing:border-box;
}
.signup-form input::placeholder{
  color:rgba(253,152,13,.65);
  font-style:italic;
}

/* Liste déroulante des indicatifs */
.signup-form select{
  text-align:left;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  cursor:pointer;
  padding-right:26px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23fd980d' d='M0 0h12L6 8z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 6px center;
}
.signup-form select option{ color:#000; background:#fff; }

/* Ligne Prénom / Nom */
.signup-form .su-names{ display:flex; gap:12px; }
.signup-form .su-names input{ flex:1 1 0; min-width:0; }

/* Ligne Indicatif + Numéro */
.signup-form .su-phone{ display:flex; gap:12px; align-items:stretch; }
.signup-form .su-phone select{ flex:0 0 auto; width:auto; min-width:122px; max-width:152px; }
.signup-form .su-phone input[type="tel"]{ flex:1 1 auto; min-width:0; }

/* Bouton */
.signup-form button{
  cursor:pointer;
  border:0;
  background:var(--bbf-orange);
  color:#000;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:.5px;
  font-size:20px;
  padding:16px 26px;
  width:100%;
  font-family:inherit;
  transition:transform .15s ease-out, filter .15s ease-out;
}
.signup-form button:hover{ filter:brightness(1.08); }
.signup-form button:active{ transform:translateY(1px); }
.signup-form button:disabled{ opacity:.55; cursor:default; transform:none; filter:none; }
.signup-form button:focus-visible,
.signup-form input:focus-visible,
.signup-form select:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
}

/* Message de retour (succès / erreur) */
.signup-form .su-msg{
  min-height:22px;
  margin-top:4px;
  font-size:18px;
  line-height:1.4;
  color:var(--bbf-orange);
}
.signup-form .su-msg.error{ color:#ff5a5a; }
.signup-form .su-msg.ok{ color:var(--bbf-orange); font-weight:bold; }

/* État envoyé : on cache les champs, on garde le message */
.signup-form.sent .su-names,
.signup-form.sent .su-phone,
.signup-form.sent button{ display:none; }
.signup-form.sent .su-msg{ font-size:22px; }

@media screen and (max-width: 640px){
  .signup-form .su-names{ flex-direction:column; }
  .signup-form input[type="text"],
  .signup-form input[type="tel"],
  .signup-form select{ font-size:18px; }
}

/* Respecte la préférence "réduire les animations" */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ---------- React/Vercel version fixes ---------- */
#root{
  min-height:100vh;
}
.logo-button{
  border:0;
  padding:0;
  background:transparent;
  font:inherit;
}
.logo .b,
.logo .t{
  display:block;
}
/* Vidéos : par défaut on affiche toute l'image, sans couper les bords. */
.project li.lazyvid,
.project li.type-local{
  overflow:hidden;
  background:#000;
}
main.project video{
  display:block;
  width:100%;
  height:100%;
  background:#000;
  object-position:center center;
}
main.project video.video-fit-contain{
  object-fit:contain;
}
main.project video.video-fit-cover{
  object-fit:cover;
}
.project li.type-image{
  overflow:hidden;
}
.project li.type-image .mob{
  height:auto;
}
@media screen and (max-width: 980px){
  /* Mobile : on laisse la vidéo garder son vrai ratio pour éviter tout crop. */
  .project li.lazyvid,
  .project li.type-local{
    height:auto !important;
  }
  main.project video{
    width:100%;
    height:auto !important;
    object-fit:contain;
  }
  .project li.type-image{
    background-image:none !important;
  }
  .signup-form{
    padding:24px 0 8px;
  }
}
.bring-friend-title {
  text-align: center;
    font-size: clamp(34px, 1vw, 52px);
  line-height: 0.65;
  margin: 0;
  padding-top: 0;
  word-break: normal;
  overflow-wrap: normal;
}

.bring-friend-title strong {
  display: inline-block;
}

/* Mobile */
@media screen and (max-width: 980px) {
  .bring-friend-title {
    font-size: clamp(24px, 1vw, 32px);
    line-height: 0.95;
    padding: 24px 12px 0;
  }
  

  .desktop-only-break {
    display: none;
  }
}

/* Très petits écrans */
@media screen and (max-width: 380px) {
  .bring-friend-title {
    font-size: clamp(30px, 10vw, 42px);
  }
}

.signup-form input[type="email"] {
  border: 0;
  border-bottom: 3px solid var(--bbf-orange);
  background: transparent;
  color: #fff;
  font-size: 20px;
  line-height: 1.2;
  padding: 14px 6px;
  text-align: center;
  outline: none;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}

.signup-form .su-email {
  display: flex;
  width: 100%;
}

.signup-form .su-email input {
  width: 100%;
}

.signup-form input[type="email"]::placeholder {
  color: rgba(253, 152, 13, .65);
  font-style: italic;
}

@media screen and (max-width: 640px) {
  .signup-form input[type="email"] {
    font-size: 18px;
  }
}

/* Gate screen: utilisateur obligé de s'inscrire avant de voir le site */
body.page-bbf-signup-gate {
  overflow-x: hidden;
  overflow-y: auto;
  background: #000;
  color: #fd980d;
}

.signup-gate {
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  box-sizing: border-box;
  background: #000;
  color: #fd980d;
}

.signup-gate-inner {
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.signup-gate-bear {
  width: min(340px, 72vw);
  max-height: 36vh;
  max-height: 36svh;
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.signup-gate-bear video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 36vh;
  max-height: 36svh;
  object-fit: contain;
}

.signup-gate-form {
  width: 100%;
  margin: 0;
  position: static !important;
}

.signup-gate-form .signup-form {
  padding: 0;
}

.signup-gate-form .su-inner {
  max-width: 560px;
}

/* S'assure que le champ email a le même style que les autres champs */
.signup-form input[type="email"] {
  border: 0;
  border-bottom: 3px solid var(--bbf-orange, #fd980d);
  background: transparent;
  color: #fff;
  font-size: 20px;
  line-height: 1.2;
  padding: 14px 6px;
  text-align: center;
  outline: none;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}

.signup-form .su-email {
  display: flex;
  width: 100%;
}

.signup-form input[type="email"]::placeholder {
  color: rgba(253, 152, 13, .65);
  font-style: italic;
}

@media screen and (max-width: 640px) {
  .signup-gate {
    align-items: flex-start;
    padding: 12px 16px 16px;
  }

  .signup-gate-inner {
    gap: 10px;
  }

  .signup-gate-bear {
    width: min(230px, 58vw);
    max-height: 28vh;
    max-height: 28svh;
  }

  .signup-gate-bear video {
    max-height: 28vh;
    max-height: 28svh;
  }

  .signup-gate-form .su-inner {
    gap: 10px;
  }

  .signup-gate-form .signup-form input[type="text"],
  .signup-gate-form .signup-form input[type="tel"],
  .signup-gate-form .signup-form input[type="email"],
  .signup-gate-form .signup-form select {
    font-size: 16px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .signup-gate-form .signup-form button {
    font-size: 16px;
    padding: 12px 20px;
  }

  .signup-gate-form .su-msg {
    font-size: 15px;
    min-height: 18px;
  }
}

@media screen and (max-width: 380px), screen and (max-height: 700px) {
  .signup-gate-bear {
    width: min(190px, 52vw);
    max-height: 24vh;
    max-height: 24svh;
  }

  .signup-gate-bear video {
    max-height: 24vh;
    max-height: 24svh;
  }

  .signup-gate-inner {
    gap: 8px;
  }
}

.signup-gate-logo {
  display: block;
  width: min(300px, 68vw);
  max-height: 210px;
  object-fit: contain;
  margin: 0 auto 10px;
}

@media screen and (max-width: 640px) {
  .signup-gate-logo {
    width: min(300px, 62vw);
    max-height:190px;
    margin-bottom: 6px;
  }
}

@media screen and (max-width: 380px) {
  .signup-gate-logo {
    width: min(300px, 58vw);
    max-height: 76px;
  }
}

.su-legal {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  line-height: 1.35;
  text-align: left;
  margin-top: 2px;
}

.su-legal input {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  accent-color: var(--bbf-orange);
}

.su-legal a {
  color: var(--bbf-orange);
  text-decoration: underline;
}

@media screen and (max-width: 640px) {
  .su-legal {
    font-size: 10px;
    line-height: 1.25;
    gap: 8px;
  }
}