/* =====================================================
   Orthomax – Navigation blog
   Les valeurs ci-dessous sont les réglages par défaut.
   Elles se modifient dans le module Divi (onglet Design) ;
   inutile de toucher à ce fichier.
   ===================================================== */

.obn {
  --obn-text:         var(--gcid-heading-color, #1f1540);
  --obn-bg:           #fff;
  --obn-accent:       var(--gcid-primary-color, #7c53ff);
  --obn-active-text:  #fff;
  --obn-border:       color-mix(in srgb, var(--obn-accent) 25%, #fff);
  --obn-hover-text:   var(--obn-accent);
  --obn-hover-bg:     var(--gcid-ff6170ca-a9b0-46bc-9625-b288b595c4da, #efeaff);
  --obn-field-border: var(--gcid-heading-color, #1f1540);
  --obn-field-bg:     #fff;
  --obn-button:       var(--gcid-a24d3b40-3f63-493c-abd5-621361bce9ef, #db0099);
  --obn-button-icon:  #fff;
  --obn-placeholder:  #8a83a3;
  --obn-radius:       999px;
  --obn-pad-y:        10px;
  --obn-pad-x:        18px;
  --obn-gap:          10px;
  --obn-search-width: 280px;
  --obn-height:       46px;
  --obn-field-radius: min(var(--obn-radius), calc(var(--obn-height) / 2));

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--obn-gap) calc(var(--obn-gap) * 2);
  width: 100%;
  font-family: inherit;
}

/* Garde-fous : rien ne dépasse du module, quels que soient les styles du thème. */
.obn,
.obn *,
.obn *::before,
.obn *::after {
  box-sizing: border-box;
}
.obn {
  max-width: 100%;
}
.obn > * {
  min-width: 0;
}
.obn .obn__search-input,
.obn .obn__dropdown-toggle {
  max-width: 100%;
}

/* ---------- Liste des catégories ---------- */
.obn .obn__pills {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--obn-gap);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.2;
}
.obn .obn__pills li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.obn--align-center .obn__pills  { justify-content: center; }
.obn--align-end .obn__pills     { justify-content: flex-end; }
.obn--align-between .obn__pills { justify-content: space-between; }

/* ---------- Format : boutons arrondis (par défaut) ---------- */
.obn .obn__pill {
  display: inline-flex;
  align-items: center;
  padding: var(--obn-pad-y) var(--obn-pad-x);
  border: 1px solid var(--obn-border);
  border-radius: var(--obn-radius);
  background: var(--obn-bg);
  color: var(--obn-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .2s, border-color .2s, color .2s;
}
.obn .obn__pill:hover {
  background: var(--obn-hover-bg);
  border-color: var(--obn-accent);
  color: var(--obn-hover-text);
}
.obn .obn__pill:focus-visible {
  outline: 2px solid var(--obn-accent);
  outline-offset: 2px;
}
.obn .obn__pills .obn__pill.is-active {
  background: var(--obn-accent);
  border-color: var(--obn-accent);
  color: var(--obn-active-text);
}

/* ---------- Format : onglets soulignés ---------- */
.obn--format-underline .obn__pills {
  column-gap: calc(var(--obn-gap) * 2.5);
}
.obn--format-underline .obn__pill {
  padding: var(--obn-pad-y) 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
}
.obn--format-underline .obn__pill:hover {
  background: transparent;
  border-bottom-color: var(--obn-border);
  color: var(--obn-hover-text);
}
.obn--format-underline .obn__pills .obn__pill.is-active {
  background: transparent;
  border-bottom-color: var(--obn-accent);
  color: var(--obn-accent);
}

/* ---------- Format : liens simples ---------- */
.obn--format-text .obn__pills {
  column-gap: calc(var(--obn-gap) * 2.5);
}
.obn--format-text .obn__pill {
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.obn--format-text .obn__pill:hover {
  background: transparent;
  color: var(--obn-hover-text);
}
.obn--format-text .obn__pills .obn__pill.is-active {
  background: transparent;
  color: var(--obn-accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* ---------- Recherche ---------- */
.obn .obn__search {
  position: relative;
  /* La recherche cède un peu de place (jusqu'à 200 px) avant que les catégories
     ne débordent ; elle reprend sa largeur dès que possible. */
  flex: 1 1 240px;
  min-width: 200px;
  max-width: var(--obn-search-width);
  margin: 0;
}

/* Desktop : catégories et recherche toujours sur la même ligne. */
@media (min-width: 981px) {
  .obn--search-right,
  .obn--search-left {
    flex-wrap: nowrap;
  }
}
.obn--search-left .obn__search {
  order: -1;
}
.obn--search-below .obn__pills {
  flex-basis: 100%;
}
.obn--search-below .obn__search {
  flex: 1 1 100%;
  max-width: var(--obn-search-width);
}
.obn--search-below.obn--align-center .obn__search { margin-inline: auto; }
.obn--search-below.obn--align-end .obn__search    { margin-left: auto; }

.obn .obn__search .obn__search-input,
.obn .obn__dropdown .obn__dropdown-toggle {
  box-sizing: border-box;
  width: 100%;
  height: var(--obn-height);
  margin: 0;
  border: 1px solid var(--obn-field-border);
  border-radius: var(--obn-field-radius);
  background-color: var(--obn-field-bg);
  color: var(--obn-text);
  font-family: inherit;
  font-size: 15px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s, box-shadow .2s;
}
.obn .obn__search .obn__search-input {
  padding: 0 calc(var(--obn-height) + 6px) 0 20px;
}
.obn .obn__search-input::placeholder {
  color: var(--obn-placeholder);
  opacity: 1;
}
.obn .obn__search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.obn .obn__search .obn__search-input:focus,
.obn .obn__dropdown .obn__dropdown-toggle:focus-visible,
.obn .obn__dropdown[open] .obn__dropdown-toggle {
  outline: none;
  border-color: var(--obn-accent);
  box-shadow: 0 0 0 3px var(--obn-hover-bg);
}
.obn .obn__search-btn {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--obn-height) - 8px);
  height: calc(var(--obn-height) - 8px);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: max(0px, calc(var(--obn-field-radius) - 4px));
  background: var(--obn-button);
  color: var(--obn-button-icon);
  cursor: pointer;
  transition: filter .2s;
}
.obn .obn__search-btn:hover {
  filter: brightness(.88);
}
.obn .obn__search-btn:focus-visible {
  outline: 2px solid var(--obn-accent);
  outline-offset: 2px;
}
.obn .obn__search-btn svg {
  display: block;
}

/* ---------- Liste déroulante (mobile) ---------- */
.obn .obn__dropdown {
  position: relative;
  display: none;
  flex: 1 1 100%;
  margin: 0;
}
.obn .obn__dropdown .obn__dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px 0 20px;
  color: var(--obn-text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  list-style: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.obn .obn__dropdown-toggle::-webkit-details-marker {
  display: none;
}
.obn .obn__dropdown-toggle::marker {
  content: '';
}
.obn .obn__dropdown-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.obn .obn__dropdown-chevron {
  flex: 0 0 auto;
  color: var(--obn-accent);
  transition: transform .2s;
}
.obn .obn__dropdown[open] .obn__dropdown-chevron {
  transform: rotate(180deg);
}
.obn .obn__dropdown .obn__dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 60vh;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--obn-border);
  border-radius: min(var(--obn-radius), 22px);
  background: var(--obn-field-bg);
  box-shadow: 0 14px 34px rgba(31, 21, 64, .14);
  animation: obn-drop .16s ease-out;
}
.obn .obn__dropdown-menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.obn .obn__dropdown-menu li + li {
  margin-top: 2px;
}
.obn .obn__dropdown .obn__dropdown-link {
  display: block;
  padding: 12px 16px;
  border-radius: min(var(--obn-radius), 16px);
  color: var(--obn-text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
}
.obn .obn__dropdown .obn__dropdown-link:hover,
.obn .obn__dropdown .obn__dropdown-link:focus-visible {
  outline: none;
  background: var(--obn-hover-bg);
  color: var(--obn-hover-text);
}
.obn .obn__dropdown .obn__dropdown-link.is-active {
  background: var(--obn-accent);
  color: var(--obn-active-text);
}
/* Menu ouvert : passe au-dessus des lignes suivantes (grille d'articles…).
   Les conteneurs Divi qui l'entourent créent souvent leur propre « plan »,
   on les remonte donc tous le temps que la liste est ouverte. */
.et_pb_section:has(.obn__dropdown[open]),
.et_pb_row:has(.obn__dropdown[open]),
.et_pb_column:has(.obn__dropdown[open]),
.et_pb_module:has(.obn__dropdown[open]) {
  position: relative;
  z-index: 1000 !important;
}

@keyframes obn-drop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Écrans d'ordinateur compacts ----------
   Boutons resserrés pour rester sur une ligne. */
@media (min-width: 1180px) and (max-width: 1439px) {
  .obn {
    column-gap: 16px;
  }
  .obn .obn__pills {
    gap: 6px;
  }
  .obn .obn__pill {
    padding: 8px 13px;
    font-size: 14px;
  }
  .obn .obn__search {
    flex-basis: 220px;
  }
  .obn .obn__search .obn__search-input {
    padding-left: 16px;
    font-size: 14px;
  }
}
@media (min-width: 1024px) and (max-width: 1179px) {
  .obn {
    column-gap: 12px;
  }
  .obn .obn__pills {
    gap: 5px;
  }
  .obn .obn__pill {
    padding: 7px 11px;
    font-size: 13px;
  }
}

/* ---------- Recherche repliée en loupe (1024 à 1380 px) ----------
   La loupe s'ouvre vers la gauche au clic, par-dessus les catégories. */
@media (min-width: 1024px) and (max-width: 1380px) {
  .obn--search-right .obn__search {
    flex: 0 0 var(--obn-height);
    width: var(--obn-height);
    min-width: 0;
    max-width: none;
    height: var(--obn-height);
  }
  .obn--search-right .obn__search .obn__search-input {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    width: var(--obn-height);
    max-width: none;
    padding: 0;
    cursor: pointer;
    transition: width .25s ease, padding .25s ease, border-color .2s, box-shadow .2s;
  }
  .obn--search-right .obn__search .obn__search-input::placeholder {
    opacity: 0;
  }
  .obn--search-right .obn__search-btn {
    z-index: 6;
  }
  .obn--search-right .obn__search.is-open .obn__search-input,
  .obn--search-right .obn__search:focus-within .obn__search-input {
    width: var(--obn-search-width);
    padding: 0 calc(var(--obn-height) + 6px) 0 20px;
    cursor: text;
    box-shadow: 0 0 0 3px var(--obn-hover-bg), 0 8px 24px rgba(31, 21, 64, .12);
  }
  .obn--search-right .obn__search.is-open .obn__search-input::placeholder,
  .obn--search-right .obn__search:focus-within .obn__search-input::placeholder {
    opacity: 1;
  }
}

/* ---------- Liste déroulante à la place des boutons ----------
   Seuil choisi dans le module : « Liste déroulante à partir de ». */
@media (max-width: 1023px) {
  .obn--mobile-select.obn--dd-1024 .obn__pills    { display: none; }
  .obn--mobile-select.obn--dd-1024 .obn__dropdown { display: block; }
}
@media (max-width: 980px) {
  .obn--mobile-select.obn--dd-981 .obn__pills    { display: none; }
  .obn--mobile-select.obn--dd-981 .obn__dropdown { display: block; }
}
/* Entre 981 et 1023 px : liste déroulante et recherche sur la même ligne. */
@media (min-width: 981px) and (max-width: 1023px) {
  .obn--mobile-select.obn--dd-1024 .obn__dropdown {
    flex: 1 1 260px;
    max-width: 360px;
  }
  .obn--mobile-select.obn--dd-1024.obn--search-right .obn__search {
    margin-left: auto;
  }
  .obn--mobile-select.obn--dd-1024.obn--search-left .obn__dropdown {
    margin-left: auto;
  }
}

/* ---------- Accessibilité ---------- */
.obn .obn-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .obn * { transition: none; animation: none; }
}

/* ---------- Tablette ---------- */
@media (max-width: 980px) {
  .obn .obn__search {
    flex: 1 1 100%;
    max-width: none;
    margin: 0;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .obn--mobile-select .obn__pills {
    display: none;
  }
  .obn--mobile-select .obn__dropdown {
    display: block;
  }

  .obn--mobile-scroll .obn__pills {
    flex-basis: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .obn--mobile-scroll .obn__pills::-webkit-scrollbar {
    display: none;
  }
  .obn--mobile-scroll .obn__pills li {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .obn .obn__search .obn__search-input {
    font-size: 16px; /* évite le zoom auto sur iOS */
  }
}

/* ---------- Titre de la page de résultats ([orthomax_search_title]) ----------
   Même principe que « Des articles à lire sans modération » :
   le nombre de résultats en gras et rose, la suite dans la couleur du titre
   (réglée dans le module Texte, Design > Texte H1). */
.obn-search-title strong {
  color: var(--gcid-a24d3b40-3f63-493c-abd5-621361bce9ef, #db0099);
  font-weight: 700;
}

/* Aucun résultat : masque le module Blog de Divi (classe CSS « obn-results »),
   dont le message par défaut fait doublon avec celui du titre. */
.search-no-results .obn-results {
  display: none !important;
}

/* Derniers articles (classe « obn-if-empty ») : seulement quand la recherche
   ne trouve rien. WordPress ajoute « search-results » au body s'il y a des résultats. */
.search-results .obn-if-empty {
  display: none !important;
}