.banner {
  min-height: 154px;
  padding: 80px 0;
}
.banner__title-satellite {
  font-weight: 900;
  font-size: 32px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: #0F124C;
}
.banner__title-satellite--position {
  font-size: 24px;
}
.banner__change-country {
  margin-bottom: 30px;
}
.banner__change-satellite {
  font-weight: 900;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 0%;
  color: #0F124C;
}

.satellite__title {
    font-weight: 700;
    font-style: Bold;
    font-size: 23px;
    line-height: 31px;
    letter-spacing: 0%;
    text-align: center;
    margin: 70px auto 30px;
    max-width: 720px;
}
.satellite__country-title {
    font-weight: 700;
    font-style: Bold;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    margin: 60px 0 16px;
}
.satellite__country {
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 0%;
    text-decoration-skip-ink: auto;
    color: #004488;
    margin-bottom: 16px;
    display: inline-block;
    padding: 0 32px 0 0;
}

.header-with-banner {
    top: 32px;
}
main.with-banner {
    margin-top: 115px;
}

@media (max-width: 720px) {
  .banner__title-satellite {
    font-size: 24px;
  }
  .banner__title-satellite--position {
    font-size: 16px;
  }
  .satellite__title {
    font-size: 18px;
    line-height: 100%;
    margin: 35px 0;
  }
  .satellite__country-title {
    font-size: 16px;
    margin: 46px 0 16px;
  }
}

.banner-alert {
  display: flex;                 /* affiché seulement si html.banner-visible */
  z-index: 1000;
  position: fixed;
  top: 0;
  width: 100%;
  height: 32px;
  box-sizing: border-box;
  padding: 0 20px 0 55px;
  background: #FFD0D0;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  line-height: 100%;
}

/* Remplace .header-with-banner et main.with-banner (adapte les sélecteurs) */
.banner-visible .header { top: 32px; }
.banner-visible main    { margin-top: 115px; }

.banner-alert a { color: #E50E0E; text-decoration: underline; }

.banner-alert__viewport { flex: 1; min-width: 0; overflow: hidden; }
.banner-alert__track    { display: inline-flex; white-space: nowrap; }
.banner-alert__content  { flex: none; }

.banner-alert__close {
  flex: none; background: none; border: 0; cursor: pointer;
  font-size: 20px; line-height: 1; padding: 4px 8px; color: #000;
}

/* Défilement (classe ajoutée par le JS uniquement si le texte déborde) */
.banner-alert.is-scrolling .banner-alert__content { padding-right: 64px; } /* espace entre deux boucles */
.banner-alert.is-scrolling .banner-alert__track {
  animation: banner-marquee var(--marquee-duration, 15s) linear infinite;
}
.banner-alert.is-scrolling:hover .banner-alert__track,
.banner-alert.is-scrolling:focus-within .banner-alert__track {
  animation-play-state: paused;
}
@keyframes banner-marquee     { to { transform: translateX(-50%); } }
@keyframes banner-marquee-rtl { to { transform: translateX(50%); } }
[dir="rtl"] .banner-alert.is-scrolling .banner-alert__track { animation-name: banner-marquee-rtl; }

/* Accessibilité : pas d'animation, scroll manuel */
@media (prefers-reduced-motion: reduce) {
  .banner-alert.is-scrolling .banner-alert__track { animation: none; }
  .banner-alert__viewport { overflow-x: auto; }
}

.home__autocomplete {
    margin-top: -53px;
}

/* ==========================================================
   COMPOSANT : .search-switch
   ========================================================== */
.search-switch {
  --ss-navy: #0F124C;
  --ss-blue: #00a7e3;
  --ss-blue-dark: #0b4f8a;
  --ss-font: "Roboto", Arial, sans-serif;  /* "inherit" pour reprendre la police du thème */
  --ss-text: #1c1c1c;
  --ss-placeholder: #7a7a7a;
  --ss-border: #e3e8f2;
  --ss-radio-idle: #7b8fa1;
  --ss-radius: 2px;
  --ss-gap: 21px;
  --ss-h: 64px;                                   /* hauteur des cartes et champs */
  --ss-shadow-card: 0 0 15px 3px rgba(120, 150, 200, .28);
  --ss-shadow-panel: 0 8px 19px rgba(30, 50, 90, .18);

  font-family: var(--ss-font);
  color: var(--ss-text);
  max-width: 900px;
  margin: 0 auto;
  box-sizing: border-box;
}
.search-switch *, .search-switch *::before, .search-switch *::after { box-sizing: inherit; }
.search-switch [hidden] { display: none !important; }

.search-switch__title {
  font-weight: 700;
  font-size: 14px;
  line-height: 100%;
  margin: 0 0 11px;
  color: var(--ss-navy);
}

/* ---- Disposition ---- */
.search-switch__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ss-gap);
  align-items: start;
}
.search-switch__row > form { margin: 0; width: 100%; min-width: 0; }

/* ---- Carte "Pays / Satellite en clair" ---- */
.search-switch__card {
  background: #fff;
  box-shadow: var(--ss-shadow-card);
  border-radius: var(--ss-radius);
}
.search-switch__modes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  height: var(--ss-h);
  min-width: 0;
  margin: 0;
  padding: 0 24px;
  border: 0;
}
.search-switch__mode { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.search-switch__mode input {
  appearance: none; -webkit-appearance: none;
  display: grid; place-content: center; flex: none;
  width: 16px; height: 16px; margin: 0;
  border: 2px solid #111; border-radius: 50%;
  background: #fff; cursor: pointer;
}
.search-switch__mode input::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ss-blue); transform: scale(0); transition: transform .12s ease-out;
}
.search-switch__mode input:checked { border-color: var(--ss-blue); }
.search-switch__mode input:checked::before { transform: scale(1); }
.search-switch__mode input:focus-visible { outline: 3px solid rgba(0,167,227,.45); outline-offset: 2px; }
.search-switch__mode .ico { display: inline-flex; line-height: 1; }
.search-switch__mode .ico img.emoji { width: 16px; height: 16px; margin: 0; }
.search-switch__mode .label { font-size: 14px; line-height: 100%; font-weight: 400; }
.search-switch__mode input:checked ~ .label { font-weight: 700; }

/* ---- Mode PAYS : champ autoComplete.js ---- */
.autoComplete_wrapper { position: relative; display: block; width: 100%; }

#select-country {
  display: block;
  width: 100%;
  height: var(--ss-h);
  padding: 0 56px 0 21px;
  border: 0;
  border-radius: var(--ss-radius);
  background: #fff url('../assets/icons/search.svg') no-repeat right 21px center / 23px;
  box-shadow: var(--ss-shadow-card);
  font: inherit;
  font-size: 15px;
  color: var(--ss-text);
  text-overflow: ellipsis;
  outline: none;
  appearance: none; -webkit-appearance: none;
}
#select-country::placeholder { color: var(--ss-placeholder); opacity: 1; }
#select-country:focus-visible { outline: 2px solid rgba(0,167,227,.45); outline-offset: 2px; }

/* Panneau de résultats */
.autoComplete_wrapper > ul {
  position: absolute; z-index: 20;
  top: calc(100% + 1px); left: 0; right: 0;
  margin: 0; padding: 0; list-style: none;
  max-height: 334px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #b9c3d0 transparent;
  background: #fff;
  border-radius: 0 0 9px 9px;
  box-shadow: var(--ss-shadow-panel);
}
.autoComplete_wrapper > ul[hidden] { display: none; }

.autoComplete_wrapper li[role="option"] {
  display: flex; align-items: center; gap: 15px;
  min-height: 55px; padding: 0 24px 0 50px;
  border-bottom: 1px solid var(--ss-border);
  font-size: 16px; color: var(--ss-text);
  cursor: pointer;
}
.autoComplete_wrapper li[role="option"]:last-child { border-bottom: 0; }
.autoComplete_wrapper li[role="option"]::before {
  content: ""; flex: none; width: 16px; height: 16px;
  border: 1.5px solid var(--ss-radio-idle); border-radius: 50%;
}
.autoComplete_wrapper li[role="option"]:hover,
.autoComplete_wrapper li[role="option"][aria-selected="true"] { background: #f2f7fc; }
.autoComplete_wrapper mark { background: none; color: inherit; font-weight: inherit; }

/* ---- Mode SATELLITE : <select> personnalisable ---- */
@supports (appearance: base-select) {
  .sat-select,
  .sat-select::picker(select) { appearance: base-select; }

  .sat-select {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    height: var(--ss-h);
    padding: 0 21px;
    border: 0;
    border-radius: var(--ss-radius);
    background: #fff;
    box-shadow: var(--ss-shadow-card);
    font: inherit;
    font-size: 15px;
    color: var(--ss-placeholder);
    cursor: pointer;
  }
  .sat-select:has(option:checked:not([value=""])) { color: var(--ss-text); }
  .sat-select:focus-visible { outline: 2px solid rgba(0,167,227,.45); outline-offset: 2px; }

  /* Chevron */
  .sat-select::picker-icon {
    content: "";
    width: 8px; height: 8px;
    border: solid var(--ss-blue-dark);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .15s;
  }
  .sat-select:open::picker-icon { transform: rotate(-135deg) translateY(-2px); }

  /* Panneau */
  .sat-select::picker(select) {
    margin: 0; padding: 0; border: 0;
    border-radius: 0 0 9px 9px;
    background: #fff;
    box-shadow: var(--ss-shadow-panel);
    top: calc(anchor(bottom) + 1px);
    left: anchor(left);
    width: anchor-size(width);
    max-height: 334px;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #b9c3d0 transparent;
  }

  /* Options */
  .sat-select option {
    display: flex; align-items: center; gap: 15px;
    min-height: 55px; padding: 0 24px;
    border-bottom: 1px solid var(--ss-border);
    font-size: 16px; color: var(--ss-text);
    cursor: pointer;
  }
  .sat-select option:last-of-type { border-bottom: 0; }
  .sat-select option:hover,
  .sat-select option:focus { background: #f2f7fc; }
  .sat-select option::checkmark { display: none; }
  .sat-select option[hidden] { display: none; }

  .sat-select option::before {
    content: ""; flex: none; width: 16px; height: 16px;
    border: 1.5px solid var(--ss-radio-idle); border-radius: 50%;
  }
  .sat-select option:checked::before {
    border-color: var(--ss-blue);
    box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 8px var(--ss-blue);
  }
}

/* ---- Mobile : cartes empilées pleine largeur ---- */
@media (max-width: 720px) {
  .search-switch { --ss-h: 50px; --ss-gap: 20px; }
  .search-switch__row { grid-template-columns: 1fr; }
  .search-switch__modes { padding: 0 16px; gap: 22px; }

  #select-country,
  .sat-select { font-size: 16px; padding-left: 16px; }   /* 16px mini : évite le zoom auto d'iOS */
  #select-country { padding-right: 52px; background-position: right 16px center; }

  .autoComplete_wrapper > ul { top: calc(100% + 4px); border-radius: 9px; max-height: 300px; }
  .autoComplete_wrapper li[role="option"] { min-height: 48px; padding: 0 16px; gap: 12px; }

  .sat-select::picker(select) { top: calc(anchor(bottom) + 4px); border-radius: 9px; max-height: 300px; }
  .sat-select option { min-height: 48px; padding: 0 16px; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .search-switch * { transition: none !important; }
}

@media (max-width: 720px) {
  .home .banner { padding-bottom: 96px; }        /* adaptez au sélecteur réel de votre bandeau bleu */
  .home__autocomplete { margin-top: -53px; }
  .home__autocomplete .container { padding-inline: 16px; }
}