/* ==========================================================================
   recherche-ia — barre compacte du header (POC v4), sans la recherche hero.
   ========================================================================== */

:root {
  --sb-surface: #ffffff;
  --sb-surface-hi: #ffffff;
  --sb-border: #d9dce3;
  --sb-text: #1c1f26;
  --sb-muted: #6b7280;
  --sb-bordeaux: #6B1B3E;
  --sb-classic: var(--sb-bordeaux);
  --sb-ai-1: var(--sb-bordeaux);
}

.searchbar .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.searchbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 18px;
  border: 1px solid var(--sb-border);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--sb-surface-hi), var(--sb-surface));
  box-shadow:
    0 1px 2px rgba(16, 24, 40, .06),
    0 8px 24px -16px rgba(16, 24, 40, .35);
  text-align: left;
  font-family: "Work Sans", Arial, sans-serif;
  transition: border-color .3s ease, box-shadow .3s ease;
}

.searchbar:focus-within { border-color: #a9b0bd; }

.searchbar__input {
  flex: 1;
  min-width: 0;
  width: auto;
  height: auto;
  padding: 6px 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--sb-text);
  font: inherit;
  font-size: 15.5px;
  line-height: 1.3;
  outline: none;
}

.searchbar__input::placeholder { color: #9aa1ad; }
.searchbar__input::-webkit-search-cancel-button { display: none; }

/* le plugin jQuery placeholder recopie le texte dans la valeur et pose cette classe */
.searchbar__input.placeholder { color: #9aa1ad; }

.searchbar__divider {
  flex: none;
  width: 1px;
  height: 26px;
  background: var(--sb-border);
}

.modes {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 3px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .06) inset;
}

.searchbar .mode {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--sb-bordeaux);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease,
              border-color .25s ease, transform .25s ease;
}

.searchbar .mode:hover { color: var(--sb-bordeaux); background: rgba(16, 24, 40, .06); }

.searchbar .mode:focus-visible {
  outline: 2px solid var(--sb-ai-1);
  outline-offset: 2px;
}

.mode__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
}

.mode__icon svg { width: 100%; height: 100%; }

/* les deux loupes sont des png : passees en masque, elles prennent la couleur
   du texte de l'onglet, bordeaux quand il est inactif et blanche quand il est
   selectionne. Ce sont les memes fichiers que les titres de la home */
.mode__icon--cl,
.mode__icon--ia {
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.mode__icon--cl {
  -webkit-mask-image: url(/images/loupe_search_b_246.png);
  mask-image: url(/images/loupe_search_b_246.png);
}

.mode__icon--ia {
  -webkit-mask-image: url(/images/ico_search_ia_w_204.png);
  mask-image: url(/images/ico_search_ia_w_204.png);
}

.mode--classic[aria-checked="true"],
.mode--ai[aria-checked="true"] {
  background: var(--sb-bordeaux);
  border-color: rgba(107, 27, 62, .45);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .18) inset,
    0 4px 12px -6px rgba(107, 27, 62, .55);
}

.mode--classic[aria-checked="true"]:hover,
.mode--ai[aria-checked="true"]:hover {
  background: #7a2250;
  color: #fff;
}

/* fleche de lancement : toujours bordeaux, quel que soit le mode */
.searchbar__go {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(107, 27, 62, .45);
  border-radius: 50%;
  background: var(--sb-bordeaux);
  color: #fff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .18) inset,
    0 4px 12px -6px rgba(107, 27, 62, .55);
}

.searchbar__go svg { width: 18px; height: 18px; }

.searchbar__go:hover { background: #7a2250; }

.searchbar__go:focus-visible {
  outline: 2px solid var(--sb-ai-1);
  outline-offset: 2px;
}

/* barre du header : elle reste basse pour laisser voir le bordeaux de la nav
   tout autour, c'est la fleche qui impose sa hauteur */
.searchbar--compact {
  width: 100%;
  max-width: 460px;
  gap: 8px;
  padding: 3px 4px 3px 14px;
  box-shadow:
    0 1px 2px rgba(16, 24, 40, .06),
    0 4px 12px -10px rgba(16, 24, 40, .3);
}

.searchbar--compact .searchbar__input { padding: 2px 0; font-size: 14px; }
.searchbar--compact .searchbar__divider { height: 18px; }
.searchbar--compact .mode { padding: 4px 10px; font-size: 12.5px; gap: 6px; }
.searchbar--compact .mode__icon { width: 14px; height: 14px; }
.searchbar--compact .searchbar__go { width: 28px; height: 28px; }
.searchbar--compact .searchbar__go svg { width: 15px; height: 15px; }

.header__top.navigation #search-form-wrapper .searchbar--compact {
  margin-left: auto;
}

.header__top.navigation .search-form-res {
  top: 46px;
}

@media (max-width: 860px) {
  .searchbar--compact { max-width: none; }
}

@media (max-width: 620px) {
  .searchbar { padding-left: 14px; gap: 8px; }
  .searchbar .mode { padding: 7px 10px; }
  .mode__label { display: none; }
}

/* ==========================================================================
   home : onglets Produits / Outils IA, meme rendu que les modes du header
   ========================================================================== */

.bloc_home_bt_2026 .home_bt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .06) inset;
  font-family: "Work Sans", Arial, sans-serif;
}

.bloc_home_bt_2026 .home_bt a.bt_search_cl,
.bloc_home_bt_2026 .home_bt a.bt_search_ia {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: static;
  left: auto;
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--sb-bordeaux);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* la loupe et l'etincelle des onglets de la home sont plus grandes que celles
   de la barre du header, l'onglet est lui-meme plus large */
.bloc_home_bt_2026 .home_bt .mode__icon {
  width: 22px;
  height: 22px;
}

.bloc_home_bt_2026 .home_bt a.bt_search_cl:hover,
.bloc_home_bt_2026 .home_bt a.bt_search_ia:hover {
  background: rgba(16, 24, 40, .06);
  color: var(--sb-bordeaux);
}

.bloc_home_bt_2026 .home_bt a.bt_search_cl.sel,
.bloc_home_bt_2026 .home_bt a.bt_search_cl.sel:hover,
.bloc_home_bt_2026 .home_bt a.bt_search_ia.sel,
.bloc_home_bt_2026 .home_bt a.bt_search_ia.sel:hover {
  background: var(--sb-bordeaux);
  border-color: rgba(107, 27, 62, .45);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .18) inset,
    0 4px 12px -6px rgba(107, 27, 62, .55);
}

/* encadre de recherche : bordures adoucies, champ aligne sur la fleche */
.bloc_home_bt_2026 .home_border {
  padding: 16px 18px;
  border: 1px solid var(--sb-border);
  border-radius: 24px;
  box-shadow:
    0 1px 2px rgba(16, 24, 40, .06),
    0 12px 28px -22px rgba(16, 24, 40, .45);
}

.bloc_home_bt_2026 .search_cl,
.bloc_home_bt_2026 .search_ai {
  width: calc(100% - 56px);
  height: auto;
  padding: 11px 18px;
  border: 1px solid var(--sb-border);
  border-radius: 999px;
  box-shadow: none;
  color: var(--sb-text);
  font-size: 15.5px;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.bloc_home_bt_2026 .search_cl:focus {
  border-color: var(--sb-bordeaux);
  box-shadow: 0 0 0 3px rgba(107, 27, 62, .16);
}

.bloc_home_bt_2026 .search_ai:focus {
  border-color: var(--sb-bordeaux);
  box-shadow: 0 0 0 3px rgba(107, 27, 62, .16);
}

/* le champ IA est un textarea : la ligne passe en flex pour garder la fleche
   centree sur la hauteur du champ quand la question prend plusieurs lignes */
.bloc_home_bt_2026 .home_ia .home_search {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bloc_home_bt_2026 .home_ia .home_search a.bt_search_free_ia {
  float: none;
  flex: 0 0 auto;
}

.bloc_home_bt_2026 textarea.search_ai {
  width: auto;
  flex: 1 1 auto;
  float: none;
  min-height: 68px;
  /* au-dela, le champ defile plutot que de pousser la page */
  max-height: 160px;
  border-radius: 22px;
  font-family: inherit;
  line-height: 1.4;
  resize: none;
  overflow-y: auto;
}

/* fleche de lancement : meme pastille que celle du header */
.bloc_home_bt_2026 a.bt_search_free_cl,
.bloc_home_bt_2026 a.bt_search_free_ia {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(107, 27, 62, .45);
  border-radius: 50%;
  background: var(--sb-bordeaux);
  color: #fff;
  text-decoration: none;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .18) inset,
    0 4px 12px -6px rgba(107, 27, 62, .55);
}

.bloc_home_bt_2026 a.bt_search_free_cl svg,
.bloc_home_bt_2026 a.bt_search_free_ia svg { width: 20px; height: 20px; }

.bloc_home_bt_2026 a.bt_search_free_cl:hover,
.bloc_home_bt_2026 a.bt_search_free_ia:hover { background: #7a2250; }

@media (max-width: 620px) {
  .bloc_home_bt_2026 .home_bt a.bt_search_cl,
  .bloc_home_bt_2026 .home_bt a.bt_search_ia { padding: 8px 12px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .searchbar *, .searchbar { transition-duration: .01ms !important; }
  .bloc_home_bt_2026 .home_bt a { transition-duration: .01ms !important; }
}