/* =====================================================================================
   novatra-breadcrumb.css
   Principes
   1. Variables encapsulées dans le composant, pas dans :root
   2. Accessibilité : focus-visible au lieu de focus
   3. Z-index paramétrable, pas une valeur “magique”
   4. Contraste et robustesse améliorés, sans surcharger le design
   5. Hiérarchie claire, blocs 1 à 5 alignés avec le HTML injecté
   ===================================================================================== */

/* =====================================================================================
   Bloc 0 : Variables encapsulées
   Parent : .nv-rt-breadcrumb
   ===================================================================================== */
.nv-rt-breadcrumb{
  /* Dimensions et rythmes */
  --nv-bc-max-width: 1180px;
  --nv-bc-pad-y: 10px;
  --nv-bc-pad-x: 16px;
  --nv-bc-gap: 8px;

  /* Couleurs et contrastes */
  --nv-bc-bg: rgba(255, 255, 255, 0.88);
  --nv-bc-border: rgba(0, 0, 0, 0.10);

  --nv-bc-text: #111827;
  --nv-bc-muted: #4b5563;
  --nv-bc-link: #0b5ed7;
  --nv-bc-link-hover: #0a4fb9;

  /* Composants */
  --nv-bc-radius: 18px;
  --nv-bc-shadow: 0 6px 18px rgba(0,0,0,0.08);

  /* Typographie */
  --nv-bc-font-size: 14px;
  --nv-bc-line-height: 1.25;

  /* Élément courant */
  --nv-bc-current-bg: rgba(0,0,0,0.035);
  --nv-bc-current-border: rgba(0,0,0,0.075);

  /* Accessibilité */
  --nv-bc-focus: 0 0 0 3px rgba(11, 94, 215, 0.25);

  /* Empilement */
  --nv-bc-z: 50;

  width: 100%;
  box-sizing: border-box;
}

/* =====================================================================================
   Bloc 1 : Wrapper d’injection dans le header
   Classes : .nv-rt-breadcrumb + .nv-rt-breadcrumb--header
   ===================================================================================== */
.nv-rt-breadcrumb.nv-rt-breadcrumb--header{
  position: relative;
  z-index: var(--nv-bc-z);

  background: var(--nv-bc-bg);
  border-bottom: 1px solid var(--nv-bc-border);
  box-shadow: var(--nv-bc-shadow);

  background: transparent;
  border-bottom: 0;
  box-shadow: none;

}

/* =====================================================================================
   Bloc 2 : Ligne interne
   Classe : .nv-breadcrumb-row
   Rôle : largeur, centrage, padding, alignement
   ===================================================================================== */
.nv-rt-breadcrumb.nv-rt-breadcrumb--header .nv-breadcrumb-row{
  width: min(var(--nv-bc-max-width), calc(100% - 2px));
  margin: 0 auto;
  padding: var(--nv-bc-pad-y) var(--nv-bc-pad-x);
  box-sizing: border-box;

  display: flex;
  align-items: center;
  min-height: 40px;
  max-height: 50px;
  flex-wrap: nowrap;
  
  background: #f1f2f4; /*var(--nv-bc-bg);   --nv-bg); */ 
  border: 0.5px solid var(--nv-bc-border);
  border-radius: var(--nv-bc-radius);
  box-shadow: var(--nv-bc-shadow);
}

/* =====================================================================================
   Bloc 3 : Conteneur fonctionnel du fil
   Classe : .novatra-breadcrumb
   Rôle : flow, wrap, typographie, lisibilité
   ===================================================================================== */
.nv-rt-breadcrumb.nv-rt-breadcrumb--header .novatra-breadcrumb{
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
  gap: var(--nv-bc-gap);

  font-size: var(--nv-bc-font-size);
  line-height: var(--nv-bc-line-height);
  color: var(--nv-bc-text);

  min-height: 24px;
}

/* =====================================================================================
   Bloc 4 : Lien accueil + enfants
   Classes : .novatra-breadcrumb-home, .novatra-breadcrumb-caret, .novatra-breadcrumb-label
   ===================================================================================== */
.nv-rt-breadcrumb.nv-rt-breadcrumb--header a.novatra-breadcrumb-home{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;

  color: var(--nv-bc-link);
  text-decoration: none;

  border-radius: 8px;
  padding: 6px 10px;
  box-sizing: border-box;

  min-height: 32px;
}

.nv-rt-breadcrumb.nv-rt-breadcrumb--header a.novatra-breadcrumb-home:hover{
  color: var(--nv-bc-link-hover);
  text-decoration: underline;
}

.nv-rt-breadcrumb.nv-rt-breadcrumb--header a.novatra-breadcrumb-home:focus-visible{
  outline: none;
  box-shadow: var(--nv-bc-focus);
}

.nv-rt-breadcrumb.nv-rt-breadcrumb--header .novatra-breadcrumb-caret{
  color: var(--nv-bc-muted);
  opacity: 0.9;

  font-size: 13px;
  line-height: 1;
}

.nv-rt-breadcrumb.nv-rt-breadcrumb--header .novatra-breadcrumb-label{
  font-weight: 600;
  color: currentColor;
}

/* =====================================================================================
   Bloc 5 : Séparateur + page courante
   Classes : .novatra-breadcrumb-separator, .novatra-breadcrumb-current
   ===================================================================================== */
.nv-rt-breadcrumb.nv-rt-breadcrumb--header .novatra-breadcrumb-separator{
  color: var(--nv-bc-muted);
  opacity: 0.65;
  user-select: none;
  flex: 0 0 auto;
}

.nv-rt-breadcrumb.nv-rt-breadcrumb--header .novatra-breadcrumb-current{
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;

  color: var(--nv-bc-text);
  font-weight: 600;

  padding: 6px 10px;
  border-radius: 8px;

  background: var(--nv-bc-current-bg);
  border: 1px solid var(--nv-bc-current-border);
  box-sizing: border-box;

  min-height: 32px;
  display: inline-flex;
  align-items: center;
}

/* =====================================================================================
   Option de robustesse (ne force rien)
   Si le header a un fond image, améliore légèrement la lisibilité
   ===================================================================================== */
.nv-rt-breadcrumb.nv-rt-breadcrumb--header .novatra-breadcrumb{
  text-rendering: geometricPrecision;
}

/* =====================================================================================
   Responsive
   Ajuste uniquement les variables du composant
   ===================================================================================== */
@media (max-width: 640px){
  .nv-rt-breadcrumb{
    --nv-bc-max-width: 100%;
    --nv-bc-pad-x: 12px;
    --nv-bc-font-size: 13px;
    --nv-bc-gap: 6px;
  }

  .nv-rt-breadcrumb.nv-rt-breadcrumb--header .nv-breadcrumb-row{
    min-height: 36px;
  }

  .nv-rt-breadcrumb.nv-rt-breadcrumb--header a.novatra-breadcrumb-home,
  .nv-rt-breadcrumb.nv-rt-breadcrumb--header .novatra-breadcrumb-current{
    padding: 5px 8px;
    min-height: 30px;
  }
}