/* ─────────────────────────────────────────────────────────────────────
   child-custom-fil-ariane.css
   Rightech.ma — FIL D'ARIANE UNIFIÉ        (14/09/2026)
   ─────────────────────────────────────────────────────────────────────
   MISSION (demande du décideur) :
   1. généraliser le fil d'Ariane validé — posé à plat sur fond blanc,
      aucune bande gris/bleu, vide identique au-dessus et au-dessous —
      à TOUTES les fiches produit, TOUTES les catégories et TOUTES les
      pages SEO `/maroc/` ;
   2. le faire DÉMARRER au même niveau à gauche que celui du blog
      (`/c/`), qui est retrait de 60 px du bord sur desktop.

   ÉTAT AVANT :
   - fiche produit : forme validée présente UNIQUEMENT sur le produit
     6048 (règles B1-7 de child-custom-correctif6.css, scopées
     `body.product-id-6048`). Toutes les autres fiches gardaient la bande
     bleutée du thème avec le fil centré.
   - catégories : forme validée déjà appliquée (feuille
     child-custom-correctif-breadcrumb-cat.css du 13/09), mais départ à
     gauche à 15 px au lieu de 60.
   - pages SEO : aucune règle, bande du thème.

   ALIGNEMENT : le blog pose son fil dans `.rt-hero-cms__inner`
   (modules/amazzingblog/views/templates/front/rt-hero-style.tpl) :
   `max-width: 1460px` centré, `padding: 28px 60px 52px`, ramené à 36 px
   sous 1024 px et à 24 px sous 768 px. Les autres pages placent le fil
   dans `.container` (`max-width: var(--content-width)`, padding 15 px).
   Le retrait ajouté ci-dessous reconstitue la géométrie du blog à partir
   de la largeur réellement disponible : il vaut 45 px tant que le
   conteneur n'est pas plafonné, et s'élargit ensuite pour suivre le
   centrage du blog sur les très grands écrans.

   PORTÉE : `body.page-product`, `body.page-category`,
   `body#module-af_seopages-seopage`. Le template breadcrumb.tpl n'est
   PAS modifié : le balisage BreadcrumbList reste intact. Aucune règle ne
   touche le blog, l'accueil, les pages CMS ni le tunnel de commande.
   ───────────────────────────────────────────────────────────────────── */

/* ─── 1. Bandeau neutralisé : fond blanc, aucune hauteur imposée ─── */
body.page-product #hero_section,
body.page-product #hero_section .page-title-wrapper,
body.page-category #hero_section,
body.page-category #hero_section .page-title-wrapper,
body#module-af_seopages-seopage #hero_section,
body#module-af_seopages-seopage #hero_section .page-title-wrapper {
  background: #ffffff !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* ─── 2. Fil posé à plat, vide identique au-dessus et au-dessous ─── */
body.page-product .breadcrumb-rightech,
body.page-category .breadcrumb-rightech,
body#module-af_seopages-seopage .breadcrumb-rightech {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  margin: 20px 0 20px;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  width: 100%;
  text-align: left;
}

/* ─── 3. Départ à gauche aligné sur le blog ───
   45 px de retrait s'ajoutent aux 15 px du conteneur, soit 60 px du bord,
   valeur du blog. Sur écran très large, le blog centre son bloc à
   1460 px : la formule suit ce centrage à partir de la largeur
   disponible, sans jamais descendre sous 45 px. */
body.page-product .breadcrumb-rightech ol,
body.page-category .breadcrumb-rightech ol,
body#module-af_seopages-seopage .breadcrumb-rightech ol {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  margin: 0;
  padding: 0;
  padding-left: 45px;
  padding-left: max(45px, calc((100% - 1430px) / 2 + 45px));
  font-size: 13px;
}

/* ─── 4. Typographie du fil (reprise exacte de la forme validée) ─── */
body.page-product .breadcrumb-rightech li,
body.page-category .breadcrumb-rightech li,
body#module-af_seopages-seopage .breadcrumb-rightech li {
  display: inline;
  font-size: 13px;
  color: #9AA3AD;
  line-height: 20px;
}
body.page-product .breadcrumb-rightech li:not(:last-child)::after,
body.page-category .breadcrumb-rightech li:not(:last-child)::after,
body#module-af_seopages-seopage .breadcrumb-rightech li:not(:last-child)::after {
  content: "\203A";
  display: inline;
  margin: 0 6px;
  color: #C4C9CF;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
body.page-product .breadcrumb-rightech li a,
body.page-category .breadcrumb-rightech li a,
body#module-af_seopages-seopage .breadcrumb-rightech li a {
  color: #6B7280;
  text-decoration: none;
  white-space: nowrap;
}
body.page-product .breadcrumb-rightech li a:hover,
body.page-category .breadcrumb-rightech li a:hover,
body#module-af_seopages-seopage .breadcrumb-rightech li a:hover {
  color: #293544;
  text-decoration: underline;
}
body.page-product .breadcrumb-rightech li .current,
body.page-category .breadcrumb-rightech li .current,
body#module-af_seopages-seopage .breadcrumb-rightech li .current {
  color: #293544;
  font-weight: 600;
  white-space: nowrap;
}

/* ─── 5. Tablette : le blog passe à 36 px du bord ─── */
@media (max-width: 1024px) {
  body.page-product .breadcrumb-rightech ol,
  body.page-category .breadcrumb-rightech ol,
  body#module-af_seopages-seopage .breadcrumb-rightech ol {
    padding-left: 21px;
  }
}

/* ─── 6. Mobile : le blog passe à 24 px du bord ─── */
@media (max-width: 767.98px) {
  body.page-product #hero_section,
  body.page-product #hero_section .page-title-wrapper,
  body.page-category #hero_section,
  body.page-category #hero_section .page-title-wrapper,
  body#module-af_seopages-seopage #hero_section,
  body#module-af_seopages-seopage #hero_section .page-title-wrapper {
    min-height: 0 !important;
  }
  body.page-product .breadcrumb-rightech,
  body.page-category .breadcrumb-rightech,
  body#module-af_seopages-seopage .breadcrumb-rightech {
    margin: 18px 0 18px;
  }
  body.page-product .breadcrumb-rightech ol,
  body.page-category .breadcrumb-rightech ol,
  body#module-af_seopages-seopage .breadcrumb-rightech ol {
    padding-left: 9px;
  }
}