/* ============================================================
FIL D'ARIANE — css/breadcrumb.css
Micro-bande pleine largeur, alignée sur le bord gauche de la navbar.
Aplat sur le fond beige, type muette, séparateur mid-dot brand.
Gabarit réutilisable sur toutes les pages-ville (pro + particulier).
À lier dans le APRÈS variables.css et navbar.css :
============================================================ */
.breadcrumb {
width: 100%;
background-color: var(--color-bg);
/* Respiration verticale généreuse, raccord avec l'esthétique aérée :
- 32px sous la navbar (sépare nettement du header)
- 28px avant l'image full-bleed (ne la touche JAMAIS)
Padding horizontal = tokens navbar → démarre pile sous le logo. */
padding: 32px var(--nav-padding-x-desktop) 28px;
}
.breadcrumb__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 10px; /* espace horizontal régulier autour des séparateurs */
margin: 0;
padding: 0;
list-style: none;
}
.breadcrumb__item {
display: inline-flex;
align-items: center;
}
.breadcrumb__link,
.breadcrumb__current {
font-family: var(--font-family);
font-size: 13px;
line-height: 1;
letter-spacing: 0.04em; /* léger interlettrage : lisibilité + côté premium */
text-decoration: none;
}
/* Liens cliquables : brun de marque atténué (#352D2C ~55% sur beige),
chaud et raccord — pas un gris froid orphelin comme le #7a7068 actuel. */
.breadcrumb__link {
color: #8a807a;
font-weight: var(--fw-medium);
transition: color var(--transition-fast);
}
.breadcrumb__link:hover {
color: var(--color-text);
}
/* Focus accessible net, cohérent avec les bordures dures de la marque */
.breadcrumb__link:focus-visible {
outline: 2px solid var(--color-text);
outline-offset: 3px;
border-radius: 1px;
color: var(--color-text);
}
/* Page courante : ancre franche, texte de marque plein, semibold */
.breadcrumb__current {
color: var(--color-text);
font-weight: var(--fw-semibold);
}
/* Séparateur mid-dot « · » — déjà présent dans le kicker corail et la ligne
trust de la marque. Atténué (~40%) : structure sans attirer l'œil.
Décoratif → porté par un (absent de l'arbre a11y). */
.breadcrumb__sep {
color: #b0a89f;
font-size: 13px;
line-height: 1;
user-select: none;
}
/* ============================
TABLET (768-1199px)
Bord gauche sur la navbar tablet (30px), cohérent avec .hero__inner (40px 30px).
============================ */
@media (max-width: 1199px) {
.breadcrumb {
padding: 28px var(--nav-padding-x-tablet) 24px;
}
}
/* ============================
MOBILE (< 768px)
Bord gauche sur la navbar mobile (20px). Hero stacked :
le fil reste au-dessus de l'image carrée, bien aéré.
============================ */
@media (max-width: 767px) {
.breadcrumb {
padding: 22px var(--nav-padding-x-mobile) 20px;
}
.breadcrumb__link,
.breadcrumb__current,
.breadcrumb__sep {
font-size: 12px;
}
}