/* Version: 08-10-2026-c */
/* Fil d'Ariane public (arktefakt_portfolio_public_breadcrumb) :
   <nav class="ariane"><ol><li><a>…</a></li> … <li><span aria-current="page">…</span></li></ol></nav>
   Discret : texte atténué et plus petit, pastille floutée au survol seulement, page courante en texte simple.
   Les anciens <ul class="ariane"> des thèmes personnalisés restent couverts. */

nav.ariane {
  display: block;
  min-width: 0;
}

nav.ariane > ol, ul.ariane, .breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: .15rem;
  align-items: center;
  flex-wrap: wrap;
  font-size: .85em;
}

.ariane li, .breadcrumbs li {
  display: flex;
  align-items: center;
  gap: .15rem;
  min-width: 0;
}

/* Alignement calé sur le titre qui suit (title-align-*). */
nav.ariane:has(+ h1.title-align-center) > ol { justify-content: center; }
nav.ariane:has(+ h1.title-align-right) > ol { justify-content: flex-end; }

/* Zones « À propos » (hero, blocs) : l'alignement est posé sur le conteneur (title-align-*),
   le fil suit le texte. Centré / droite : pas de décalage de la pastille du premier lien. */
.title-align-center nav.ariane > ol { justify-content: center; }
.title-align-right nav.ariane > ol { justify-content: flex-end; }
.title-align-left nav.ariane > ol { justify-content: flex-start; }
:is(.title-align-center, .title-align-right) nav.ariane li:first-child > a,
#portfolio_page :is(.title-align-center, .title-align-right) :is(.content-article, .pf-read) nav.ariane li:first-child > a,
#portfolio_page :is(.content-article, .pf-read):is(.title-align-center, .title-align-right) nav.ariane li:first-child > a {
  margin-left: 0;
}

/* Séparateur : petit chevron dessiné, couleur du texte atténuée. */
.ariane li + li::before,
.breadcrumbs li + li::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin: 0 4px 0 2px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  color: var(--portfolios-text-main-color, #666);
  opacity: .35;
}

.ariane a, .breadcrumbs a {
  position: relative;
  display: inline-block;
  max-width: 18rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--portfolios-text-main-color, #666)!important;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: var(--portfolios-button-radius, 0px);
  background: transparent;
  opacity: .6;
  transition: background .2s linear, opacity .2s linear;
}

.ariane a:hover, .breadcrumbs a:hover,
.ariane a:focus-visible, .breadcrumbs a:focus-visible {
  outline: none;
  opacity: 1;
  background: var(--portfolios-bg-contrast-transparence-color, rgba(255,255,255,0.6));
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.ariane a:focus-visible, .breadcrumbs a:focus-visible {
  box-shadow: 0 0 0 2px var(--portfolios-text-main-color, #666);
}

/* Le texte du premier lien s'aligne sur le titre ; la pastille de survol déborde à gauche. */
nav.ariane li:first-child > a,
#portfolio_page :is(.content-article, .pf-read) nav.ariane li:first-child > a {
  margin-left: -10px;
}

/* Page courante : texte simple, sans pastille. */
.ariane [aria-current="page"] {
  display: inline-block;
  max-width: 24rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 4px 0 4px 4px;
  color: var(--portfolios-text-main-color, #666);
  opacity: .45;
}

/* Titres de catégorie des listes : lien vers la page de la catégorie, discret. */
.category-title-link {
  color: inherit !important;
  text-decoration: none;
  transition: opacity .2s linear;
}

.category-title-link:hover,
.category-title-link:focus-visible {
  opacity: .7;
}

/* Dans une zone de texte (.content-article / .pf-read, ex. hero des pages légales), les styles
   éditoriaux (puces, liens soulignés, interligne de lecture, taille visiteur) ne touchent pas au fil. */
#portfolio_page :is(.content-article, .pf-read) nav.ariane > ol {
  max-width: none;
  margin: 0;
  padding: 0;
  hyphens: manual;
}

#portfolio_page :is(.content-article, .pf-read) nav.ariane li {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.4 !important;
  font-size: inherit !important;
}

#portfolio_page :is(.content-article, .pf-read) nav.ariane :is(a, span) {
  font-size: inherit !important;
  line-height: 1.4 !important;
}

#portfolio_page :is(.content-article, .pf-read) nav.ariane a {
  display: inline-block;
  padding: 4px 10px;
  margin: 0;
  font: inherit !important;
  color: var(--portfolios-text-main-color, #666) !important;
  background: transparent !important;
  border-radius: var(--portfolios-button-radius, 0px);
  text-decoration: none !important;
}

#portfolio_page :is(.content-article, .pf-read) nav.ariane a:is(:hover, :focus-visible) {
  background: var(--portfolios-bg-contrast-transparence-color, rgba(255,255,255,0.6)) !important;
}

#portfolio_page :is(.content-article, .pf-read) nav.ariane a::after {
  content: none !important;
  display: none !important;
}

#portfolio_page :is(.content-article, .pf-read) nav.ariane [aria-current="page"] {
  padding: 4px 0 4px 4px;
}

@media (max-width: 600px) {
  /* Mobile : un seul lien de retour vers le parent (« ‹ Romans »). */
  nav.ariane li:not(.is-parent) {
    display: none;
  }

  nav.ariane li.is-parent > a,
  #portfolio_page :is(.content-article, .pf-read) nav.ariane li.is-parent > a {
    margin-left: -10px;
  }

  nav.ariane li.is-parent::before {
    display: none;
  }

  nav.ariane li.is-parent > a::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 8px 1px 2px;
    border-bottom: 1.5px solid currentColor;
    border-left: 1.5px solid currentColor;
    transform: rotate(45deg);
  }

  ul.ariane li:not(:last-child) a,
  .breadcrumbs li:not(:last-child) a {
    max-width: 8rem;
  }
}

@media print {
  .ariane, .breadcrumbs { display: none; }
}