/* ===== AFO – Search Bar (bloc plein largeur) ===== */

.afo-searchbar-block{
  --afo-purple:#33224d;
  --afo-gray-bg:#f5f5f7;
  --afo-border:#d4d4de;
  --afo-search-h:64px;         /* hauteur commune input + bouton */

  margin-bottom:32px;
  font-family:'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  padding-left: 0;
  padding-right:0;
}

.afo-search-form{
  margin:0;
}

.afo-searchbar-inner{
  /*background:var(--afo-gray-bg);*/
  border-radius:16px;
}

/* Titre “Recherche par mot-clé” */
.afo-search-label{
  display:block;
  margin:0 0 8px 0;
  font-family:'BBB Poppins TN Display', Helvetica, Arial;
  font-size:24px;
  font-weight:600;
  line-height:1.2;
  color:var(--global-palette2);
}

/* Ligne input + bouton */
.afo-search-input-wrap{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap;
}

/* Champ de recherche : 70% largeur sur desktop */
.afo-search-input{
  flex:0 0 70%;
  max-width:70%;
  width:100%;

  /* même hauteur extérieure que le bouton */
  min-height:var(--afo-search-h);

  padding:0 24px;             /* on laisse la hauteur gérée par min-height */
  border-radius:80px;         /* même arrondi que le bouton */
  border:1px solid var(--global-palette1);
  font-size:18px;
  line-height:1.3;
  outline:none;
  background:#fff;
  box-sizing:border-box;
}

.afo-search-input:focus{
  border:2px solid var(--global-palette1);
  /*box-shadow:0 0 0 2px rgba(51,34,77,.15);*/
}
.afo-search-input:focus::placeholder{
  opacity:0.6;
}

/* Bouton Rechercher  */
.afo-search-btn{
  /*flex:0 0 30%;*/
  max-width:30%;
  width:100%;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:13px; /* Figma */

  /* même hauteur extérieure que l’input */
  min-height:var(--afo-search-h);
  padding:0 40px;

  border-radius:80px;
  border:2px solid var(--global-palette1);   /* 2px comme dans Figma */
  background:#fff;
  color:var(--global-palette1);              /* texte violet */

  font-weight:600;
  font-size:24px;
  line-height:1.1;
  font-family:'BBB Poppins TN Display', Helvetica, Arial;

  text-decoration:none;
  text-align:center;
  cursor:pointer;
  box-sizing:border-box;
  transition:
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .15s ease;
}

/* Icône loupe : noir au repos, hérite de currentColor du span icon */
.afo-search-btn-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
  color:#000; /* loupe noire en état normal */
}

.afo-search-btn-icon svg{
  display:block;
}

/* Texte du bouton */
.afo-search-btn-text{
  white-space:nowrap;
}

/* Hover / focus-visible : fond violet, bord blanc, texte + icône blancs */
.afo-search-btn:hover,
.afo-search-btn:focus-visible{
  background:var(--global-palette1);
  color:#fff;
  border-color:#fff;
  outline:none;
  border:2px solid var(--global-palette1); 
}

/* Icône devient blanche en hover/focus */
.afo-search-btn:hover .afo-search-btn-icon,
.afo-search-btn:focus-visible .afo-search-btn-icon{
  color:#fff;
}

/* Adaptation tablette : taille de texte un peu réduite */
@media (max-width:1024px){
  .afo-search-btn{
    font-size:var(--global-kb-font-size-md, 1.25rem);
  }
}

/* Responsive mobile : input puis bouton l'un sous l'autre */
@media (max-width:768px){
  

  .afo-search-input-wrap{
    flex-direction:column;
    align-items:stretch;
  }

  .afo-search-input{
    flex:1 1 100%;
    max-width:100%;
    width:100%;
  }

  .afo-search-btn{
    flex:1 1 100%;
    max-width:100%;
    width:100%;
    justify-content:center;
  }
}