.nouveautes .section-title,
.nouveautes h2 {
  position: relative;
  top: 16px;
}

.header-bottom {
  margin-bottom: 16px;
}

@media (max-width: 575.98px) {
  #header .logo img,
  #header .header__logo img,
  #header .navbar-brand img,
  #header #_mobile_logo img {
    max-width: 200px !important;
  }
}

/* Liens haut de page : Connexion / Panier */
#header .header-top .header-block__title,
#header .header-top .header-block__badge {
  font-family: "Manrope", sans-serif !important;
}

/* Personnalisation du menu */

.main-menu-secondary {
  background: #fff;
}

.main-menu-secondary a {
  font-weight: 500;
}

.main-menu-secondary a:hover {
  text-decoration: underline;
}

.main-menu__wall-link {
  display: inline-block;
  margin: 0;
  padding: 0;
  color: #0d6efd !important;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: underline;
  text-underline-offset: 0.14em;
}

.main-menu__wall-link:hover,
.main-menu__wall-link:focus {
  color: #0b5ed7 !important;
  text-decoration: underline;
}

.main-menu .dropdown-item.main-menu__wall-link {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.menu__link--highlight {
  color: #0d6efd !important;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.14em;
}

.menu__link--highlight:hover,
.menu__link--highlight:focus {
  color: #0b5ed7 !important;
  text-decoration: underline;
}





/* =========================
   HERO
========================= */

.respell-hero {
  margin-top: 10px;
  padding: 0;
  background: #f5f5f3;
  overflow: hidden;
}

.respell-hero .container {
  max-width: 1440px;
  padding-left: 72px;
  padding-right: 24px;
}

.respell-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: center;
  gap: 40px;
  min-height: 370px;
}

.respell-hero__content {
  max-width: none;
  min-width: 0;
}

.respell-hero__content h1 {
  margin: 0 0 26px;
  font-family: "Manrope", sans-serif;
  font-size: clamp(2.9rem, 4.3vw, 4.55rem);
  line-height: 0.97;
  font-weight: 800;
  letter-spacing: -0.06em;
  color: #111;
}

.respell-hero__content h1 span {
  color: #f0b400;
}

.respell-hero__text {
  margin: 0 0 30px;
  max-width: 760px;
  font-family: "Inter", sans-serif;
  font-size: 1.2rem;
  line-height: 1.5;
  color: #444;
}

.respell-hero__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
}

.respell-hero__actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  text-decoration: none !important;
  font-family: "Manrope", sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.respell-btn-primary {
  background: #f0b400;
  border: 2px solid #f0b400;
  color: #111 !important;
  box-shadow: 0 6px 16px rgba(240, 180, 0, 0.14);
}

.respell-btn-primary:hover {
  background: #f6c21a;
  border-color: #f6c21a;
  color: #111 !important;
}

.respell-btn-link {
  background: transparent;
  border: 2px solid rgba(17, 17, 17, 0.12);
  color: #111 !important;
}

.respell-btn-link--nouveautes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.respell-btn-link--nouveautes::before {
  content: "";
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  align-items: center;
  display: inline-block;
  background: url("/themes/hummingbird-12singes/assets/icons/box.png") no-repeat center / contain;
}

.respell-btn-link:hover {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(17, 17, 17, 0.26);
  color: #111 !important;
}

.respell-hero__image {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 45px;
}

.respell-hero__image img {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
}


/* TABLETTE */
@media (max-width: 1199.98px) {
  .respell-hero .container {
    max-width: 100%;
    padding-left: 32px;
    padding-right: 20px;
  }

  .respell-hero__grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    min-height: 340px;
  }

  .respell-hero__content {
    max-width: none;
  }

  .respell-hero__content h1 {
    margin-bottom: 22px;
    font-size: clamp(2.35rem, 3.7vw, 3.6rem);
  }

  .respell-hero__text {
    max-width: none;
    font-size: 1.02rem;
    line-height: 1.5;
    margin-bottom: 24px;
  }

  .respell-hero__actions {
    gap: 10px;
  }

  .respell-hero__actions a {
    min-height: 42px;
    padding: 0 15px;
    font-size: 0.88rem;
  }

  .respell-hero__image img {
    max-width: 320px;
  }
}

/* PETIT DESKTOP / GRANDE TABLETTE */
@media (max-width: 1024px) {
  .respell-hero__grid {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 24px;
  }

  .respell-hero__image img {
    max-width: 280px;
  }

  .respell-hero__text {
    font-size: 0.98rem;
  }
}

/* MOBILE */
@media (max-width: 991.98px) {
  .respell-hero {
    padding: 0;
  }

  .respell-hero .container {
    padding-left: 18px;
    padding-right: 18px;
  }

  .respell-hero__grid {
    grid-template-columns: 1fr;
    gap: 18px;
    min-height: 0;
  }

  .respell-hero__content {
    max-width: none;
    order: 2;
  }

  .respell-hero__image {
    order: 1;
    justify-content: center;
    padding-right: 0;
  }

  .respell-hero__image img {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  .respell-hero__content h1 {
    margin-bottom: 16px;
    font-size: 2.3rem;
  }

  .respell-hero__text {
    margin-bottom: 20px;
    max-width: none;
    font-size: 0.97rem;
    line-height: 1.5;
  }

  .respell-hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .respell-hero__actions a {
    width: 100%;
    min-height: 44px;
    white-space: normal;
  }
}

.respell-hero__image img {
  border-radius: 18px;
}

/* Réglage du slider : fixer le ratio et la largeur */


.ratio-homeSlider {
  --bs-aspect-ratio: 52.5%;
  max-width: 1296px;
  margin: 0 auto;
}

/* Toujours afficher l'image entière */
.ratio-homeSlider img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center center !important;
}

.carousel .carousel-item .caption {
    display: none !important;
}



/* Personnalisation de la page Catégorie */


#js-product-list-header .category-cover img{
  width: 100%;
  height: 260px;     /* ajuste */
  object-fit: cover; /* recadre */
  display: block;
}


/* Augmenter la hauteur de l'image produit en listing */
.product-miniature .product-miniature__image-container.thumbnail-container{
  aspect-ratio: 4 / 5;  /* 1/1 = carré, 3/4 = plus haut, 4/5 = compromis */
  overflow: visible;    /* CHANGÉ : ne coupe plus */
}

.product-miniature .product-miniature__image-container.thumbnail-container img.product-miniature__image{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;          /* CHANGÉ : plus de cropping */
  object-position: center center !important; /* CHANGÉ : centré */
  display: block;
}


/* Cadre fixe */
.product__left .carousel-item img {
  width: 100%;
  height: 720px;          /* ajuste */
  object-fit: contain !important;  /* CHANGÉ : plus de cropping */
  object-position: center center !important; /* CHANGÉ */
  display: block;
}


/* Force same typography for downloads accordion header */
.page-product .product__infos .accordion-button {
  color: #000 !important;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.25;
}

.page-product .product__infos .accordion-button:not(.collapsed),
.page-product .product__infos .accordion-button[aria-expanded="true"] {
  color: #000 !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.page-product .product__infos .accordion-button {
  border-bottom-color: #e5e5e5 !important; /* ou transparent */
}
.page-product .product__infos .accordion-item {
  border-color: #e5e5e5 !important;
}

/* Attachment name is plain text */
.product__attachments .attachment__name {
  color: inherit;
}

/* Optional: make download link less "default blue" but still identifiable */
.product__attachments .attachment__download {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Tableau des propriétés des produits */
/* DL -> tableau simple, sans bord, lignes alternées */
.product-features--table {
  margin: 0;
}

.product-features--table .product-feature {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 12px;
  padding: 8px 10px;
  margin: 0;
}

.product-features--table .product-feature dt,
.product-features--table .product-feature dd {
  margin: 0;
}

.product-features--table .product-feature dt {
  font-weight: 600;
}

.product-features--table .product-feature:nth-child(odd) {
  background: #f5f5f5; /* gris clair */
}

.product-features--table .product-feature:nth-child(even) {
  background: #ffffff;
}

/* Optionnel : meilleure lisibilité sur mobile */
@media (max-width: 576px) {
  .product-features--table .product-feature {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* Etiquette de catégories d'un produit */
.product__col {
  padding-top: 0 !important;
}

.product__name {
  margin-top: 0;
}

.product-tags {
  margin-bottom: 1rem;   /* espace AVANT le titre */
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.product-tag {
  display: inline-block;
  padding: .55rem .9rem;

  background: #0d6efd;        /* bleu Bootstrap bouton */
  color: #fff;

  font-size: .9rem;           /* plus grand */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;

  border-radius: 4px;
  text-decoration: none;
  transition: background .15s ease;
}

.product-tag:hover {
  background: #0b5ed7;
  color: #fff;
}

/* Ne jamais afficher l'étiquette "condition" (Neuf/Occasion/Reconditionné) */
/* Masquer uniquement le badge "Neuf" (classe .new) */
ul.product-flags > li.badge.new,
ul.product-flags > li.new {
  display: none !important;
}

/* =========================================================
   HOME – Section Réseaux + Discord (full width + parallax)
   - Icônes = fichiers SVG dans /themes/hummingbird-12singes/assets/icons/
   - Fond = image dans /themes/hummingbird-12singes/assets/img/
   ========================================================= */


/* Section “full-bleed” : sort du container et prend toute la largeur écran */
.respell-social__full{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.respell-social__bg {
  padding-top: 0px !important;
  padding-bottom: 10px !important;
  margin-top : 0px;
  margin-bottom : 0px;
}

.respell-social__bg .respell-card {
    padding: 10px 24px !important;
  }

body#index .page-footer{
  display: none !important;
}


/* Fond sobre */
.respell-social__bg{
  background: #f5f5f3;
}

/* Contenu */
.respell-social__bg > .container{
  position: relative;
}

/* Cartes */
.respell-card{
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  border: 1px solid rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
}



/* Icône “badge” devant les titres */
.respell-icon{
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(0,0,0,.06);
  flex: 0 0 44px;
}

/* Coloration des badges de titre */
.respell-icon--news{
  background: rgba(245, 158, 11, .16);
}

.respell-icon--discord{
  background: rgba(88, 101, 242, .14);
}

.respell-icon--youtube{
  background: rgba(255, 0, 0, .12);
}

/* Coloration des icônes de titre */
.respell-icon--news .respell-ico{
  filter: invert(67%) sepia(86%) saturate(1209%) hue-rotate(356deg) brightness(98%) contrast(96%);
}

.respell-icon--discord .respell-ico{
  filter: invert(40%) sepia(83%) saturate(1134%) hue-rotate(213deg) brightness(102%) contrast(95%);
}

.respell-icon--youtube .respell-ico{
  filter: invert(14%) sepia(99%) saturate(7408%) hue-rotate(355deg) brightness(102%) contrast(118%);
}

/* Boutons */
.respell-btn{
  border-radius: 999px;
  padding-left: 16px;
  padding-right: 16px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-weight: 600;
}

/* Boutons neutres, non colorés */
.respell-btn--social,
.respell-btn--social.btn,
.respell-btn--social.btn-outline-dark{
  background: #fff;
  color: #1f1f1f;
  border: 1px solid rgba(0,0,0,.14);
  box-shadow: none;
}

.respell-btn--social:hover,
.respell-btn--social.btn:hover,
.respell-btn--social.btn-outline-dark:hover{
  background: #f7f7f7;
  color: #1f1f1f;
  border-color: rgba(0,0,0,.22);
}

/* Icônes (fichiers) */
.respell-ico{
  width: 26px;
  height: 26px;
  display: block;
}

.respell-ico-sm{
  width: 18px;
  height: 18px;
  display: block;
}

/* Conteneur icône dans les boutons */
.respell-social-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Les icônes des boutons restent noires */
.respell-btn .respell-ico-sm{
  filter: none !important;
}

/* Centrage des boutons */
.respell-card-actions{
  justify-content: center;
  margin-top: auto;
}

.respell-card-actions .respell-btn{
  flex: 0 0 auto;
}

/* Bouton unique dans les cartes Discord / YouTube */
.respell-card-actions .respell-btn:only-child{
  min-width: 0;
  padding-left: 20px;
  padding-right: 20px;
}

/* Titres et textes */
.respell-card h2{
  line-height: 1.15;
}

.respell-card p{
  color: #4f4f4f;
}

/* Responsive */
@media (max-width: 991.98px){
  .respell-social__bg{
    padding: 0;
  }
}

@media (max-width: 575.98px){
  .respell-card-actions{
    flex-direction: column;
    align-items: center;
  }

  .respell-card-actions .respell-btn{
    width: 100%;
    max-width: 280px;
  }
}

@media (max-width: 991.98px) {
  .respell-social__bg {
    padding-top: 12px !important;
    padding-bottom: 0 !important;
  }

  .respell-social__bg .row {
    row-gap: 0 !important;
  }

  .respell-social__bg .row > * {
    margin-bottom: 12px !important;
  }

  .respell-card {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 991.98px) {
  .respell-social__bg {
    padding-top: 10px !important;
    padding-bottom: 0 !important;
  }

  .respell-social__bg .row {
    --bs-gutter-y: 0 !important;
    row-gap: 0 !important;
    margin-bottom: 0 !important;
  }

  .respell-social__bg .row > [class*="col-"] {
    margin-bottom: 10px !important;
    padding-bottom: 0 !important;
  }

  .respell-social__bg .row > [class*="col-"]:last-child {
    margin-bottom: 0 !important;
  }
}


/* ===========================
   PAGE CMS : SORTIES (scoped)
   =========================== */

#respell-sorties {
  --respell-max: 1100px;
  --respell-gap: 18px;
  --respell-radius: 16px;
  --respell-border: rgba(0,0,0,.10);
  --respell-muted: rgba(0,0,0,.62);
  --respell-bgSoft: rgba(0,0,0,.03);
  --respell-accent: #111; /* volontairement neutre */
  margin: 0;
}

/* Base typo */
#respell-sorties .respell-muted { color: var(--respell-muted); }
#respell-sorties .respell-link { text-decoration: underline; }
#respell-sorties .respell-link:hover { text-decoration-thickness: 2px; }

#respell-sorties .respell-h2 {
  font-size: 1.6rem;
  margin: 0 0 6px 0;
  letter-spacing: -0.01em;
}
#respell-sorties .respell-h3 {
  font-size: 1.1rem;
  margin: 0 0 8px 0;
}
#respell-sorties .respell-pill {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--respell-border);
  border-radius: 999px;
  background: #fff;
}

/* Hero */
#respell-sorties .respell-sorties__hero {
  background: transparent;
  border-bottom: 1px solid var(--respell-border);
  padding: 26px 0 14px;
}
#respell-sorties .respell-sorties__heroInner {
  background: transparent;
}
#respell-sorties .respell-sorties__heroInner {
  max-width: var(--respell-max);
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
#respell-sorties .respell-sorties__kicker {
  margin: 0 0 6px 0;
  color: var(--respell-muted);
  font-size: .95rem;
}
#respell-sorties .respell-sorties__title {
  margin: 0 0 8px 0;
  font-size: 2rem;
  letter-spacing: -0.02em;
}
#respell-sorties .respell-sorties__lead {
  margin: 0 0 10px 0;
  color: var(--respell-muted);
  max-width: none;
}
#respell-sorties .respell-sorties__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* TOC */
#respell-sorties .respell-sorties__toc {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
#respell-sorties .respell-tocLink {
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--respell-border);
  border-radius: 999px;
  background: #fff;
  text-decoration: none;
}
#respell-sorties .respell-tocLink:hover {
  border-color: rgba(0,0,0,.22);
}

/* Blocks */
#respell-sorties .respell-block {
  max-width: var(--respell-max);
  margin: 18px auto 0;
  padding: 0 16px;
}
#respell-sorties .respell-block__head {
  margin: 0 0 12px 0;
}

/* Cards / grids */
#respell-sorties .respell-grid2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--respell-gap);
}
@media (min-width: 900px) {
  #respell-sorties .respell-grid2 {
    grid-template-columns: 1fr 1fr;
  }

  #respell-sorties .respell-sorties__heroInner {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

#respell-sorties .respell-card {
  background: #fff;
  border: 1px solid var(--respell-border);
  border-radius: var(--respell-radius);
  padding: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}
#respell-sorties .respell-card--accent {
  border-color: rgba(0,0,0,.22);
}
#respell-sorties .respell-card__line {
  margin: 0 0 6px 0;
  font-size: 1.05rem;
}

/* Lists */
#respell-sorties .respell-list {
  margin: 0;
  padding-left: 18px;
}
#respell-sorties .respell-list > li { margin: 6px 0; }
#respell-sorties .respell-list--compact > li { margin: 4px 0; }

/* Covers grid */
#respell-sorties .respell-covers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 700px) {
  #respell-sorties .respell-covers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  #respell-sorties .respell-covers { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

#respell-sorties .respell-cover {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--respell-border);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#respell-sorties .respell-cover:hover {
  transform: translateY(-2px);
  border-color: rgba(0,0,0,.22);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}
#respell-sorties .respell-cover img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}
#respell-sorties .respell-cover__label {
  display: block;
  padding: 10px 10px 12px;
  font-size: .95rem;
  color: rgba(0,0,0,.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Timeline */
#respell-sorties .respell-timeline {
  position: relative;
  margin-top: 8px;
  padding-left: 18px;
}
#respell-sorties .respell-timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(0,0,0,.10);
  border-radius: 2px;
}

#respell-sorties .respell-month {
  margin: 18px 0 0;
}
#respell-sorties .respell-month__head {
  position: relative;
  margin: 0 0 10px 0;
}
#respell-sorties .respell-month__title {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}
#respell-sorties .respell-month__head::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 10px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid rgba(0,0,0,.22);
}

#respell-sorties .respell-event {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  padding: 12px;
  margin: 10px 0;
  border: 1px solid var(--respell-border);
  border-radius: var(--respell-radius);
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}
#respell-sorties .respell-event__date {
  display: flex;
  align-items: flex-start;
}
#respell-sorties .respell-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: 96px;
  padding: 0 16px;
  border-radius: 999px;
  background: #f0b400;
  border: 2px solid #f0b400;
  color: #111;
  font-family: "Manrope", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(240, 180, 0, 0.14);
}
#respell-sorties .respell-event__title {
  margin: 0 0 4px 0;
  font-size: 1.05rem;
}
#respell-sorties .respell-event__meta {
  margin: 0 0 8px 0;
  color: var(--respell-muted);
  font-size: .95rem;
}

/* Encart Ressources en ligne sur les pages Gammes */
.respell-resources {
  margin: 22px 0 26px;
  padding: 22px 24px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.035);
  color: #222;
}

.respell-resources > h3 {
  margin: 0 0 12px 0;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 10px;
}

.respell-resources > h3::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  filter: grayscale(1) brightness(0);
  background-image: url("/themes/hummingbird-12singes/assets/icons/globe.svg");
}

.respell-resources > h4 {
  margin: 18px 0 6px 0;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.3;
}

.respell-resources > p {
  margin: 0 0 8px 0;
  color: rgba(0, 0, 0, 0.72);
  line-height: 1.5;
}

.respell-resources ul {
  list-style: none;
  margin: 0 0 6px 0;
  padding: 0;
}

.respell-resources li {
  position: relative;
  margin: 7px 0;
  padding-left: 22px;
  line-height: 1.45;
}

.respell-resources li::before {
  content: "";
  position: absolute;
  top: 0.35em;
  left: 0;
  width: 12px;
  height: 12px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  filter: grayscale(1) brightness(0.25);
  background-image: url("/themes/hummingbird-12singes/assets/icons/arrow-up-right.svg");
}

.respell-resources a {
  color: #1d5fd0;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.respell-resources a:hover {
  color: #0f4bb3;
  text-decoration-thickness: 2px;
}

/* Lien vers les ressources en ligne */
.ressources-en-ligne {
  position: relative;
  margin: 18px 0 0;
  padding: 14px 16px 14px 48px;
  border-radius: 14px;
  border: 1px solid #ead28a;
  background: #fff3cd;
  color: #5c4400;
  font-weight: 700;
  line-height: 1.4;
}


.ressources-en-ligne::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: url("/themes/hummingbird-12singes/assets/icons/globe.svg") no-repeat center / contain;
  filter: grayscale(1) brightness(0);
}

.ressources-en-ligne a {
  color: #1d5fd0;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ressources-en-ligne a:hover {
  color: #0f4bb3;
  text-decoration-thickness: 2px;
}

@media (max-width: 767.98px) {
  .respell-resources {
    margin: 18px 0 22px;
    padding: 18px 16px;
    border-radius: 16px;
  }

  .respell-resources > h3 {
    font-size: 1.1rem;
    gap: 8px;
  }

  .respell-resources > h3::before {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    background-size: 16px 16px;
  }

  .respell-resources > h4 {
    font-size: 1rem;
    margin-top: 16px;
  }

  .respell-resources li {
    padding-left: 20px;
  }

  .ressources-en-ligne {
    margin-top: 16px;
    padding: 12px 12px 12px 42px;
    border-radius: 12px;
  }

  .ressources-en-ligne::before {
    left: 14px;
    width: 18px;
    height: 18px;
  }
}


/* Page CMS - Offre numérique */
.respell-digital-offer{
  max-width: 1040px;
  margin: 0 auto;
  color: #222;
  font-size: 1.03rem;
  line-height: 1.7;
}

.respell-digital-offer p{
  margin: 0 0 1.15rem;
}

.respell-digital-offer ul,
.respell-digital-offer ol{
  margin: 0 0 1.35rem;
  padding-left: 1.35rem;
}

.respell-digital-offer li{
  margin-bottom: 0.45rem;
}

.respell-digital-offer a{
  color: #2445a2;
  text-decoration: none;
  font-weight: 600;
}

.respell-digital-offer a:hover{
  text-decoration: underline;
}

.respell-digital-offer h1{
  margin: 2.6rem 0 1rem;
  padding-top: 0.25rem;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: #1f2430;
  scroll-margin-top: 110px;
}

.respell-digital-offer h3{
  margin: 2rem 0 0.8rem;
  font-size: 1.45rem;
  line-height: 1.2;
  font-weight: 700;
  color: #1f2430;
}

.respell-digital-offer h4{
  margin: 0 0 0.75rem;
  font-size: 1.75rem;
  line-height: 1.15;
  font-weight: 700;
  color: #1f2430;
}

.respell-digital-offer > p:first-child,
.respell-digital-offer h1 + p{
  font-size: 1.08rem;
}

.respell-digital-offer .respell-anchor-nav{
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 2rem;
}

.respell-digital-offer .respell-anchor-nav a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 2px solid #f0b400;
  border-radius: 999px;
  background: #f0b400;
  color: #111 !important;
  font-family: "Manrope", sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.1;
  box-shadow: 0 6px 16px rgba(240, 180, 0, 0.14);
  transition: all 0.2s ease;
  text-decoration: none !important;
}

.respell-digital-offer .respell-anchor-nav a:hover{
  background: #f6c21a;
  border-color: #f6c21a;
  color: #111 !important;
  box-shadow: 0 6px 16px rgba(240, 180, 0, 0.14);
  transform: none;
  text-decoration: none !important;
}
.respell-digital-offer .respell-hero{
  margin: 1.5rem 0 2rem;
}

.respell-digital-offer .respell-hero img{
  display: block;
  width: 100% !important;
  max-width: 940px;
  height: auto !important;
  margin: 0 auto;
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(0,0,0,.14);
}

.respell-digital-offer .respell-stores{
  width: 100%;
  max-width: 760px;
  margin: 1.75rem auto 2.75rem;
  border-collapse: separate;
  border-spacing: 16px 0;
}

.respell-digital-offer .respell-stores td{
  padding: 0;
  vertical-align: middle;
  text-align: center;
}

.respell-digital-offer .respell-stores td:empty{
  display: none;
}

.respell-digital-offer .respell-stores a{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 118px;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.respell-digital-offer .respell-stores a:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
  border-color: rgba(36,69,162,.22);
  text-decoration: none;
}

.respell-digital-offer .respell-stores img{
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.respell-digital-offer .respell-platform{
  margin: 2rem 0;
  padding: 1.5rem 1.5rem 1.25rem;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 20px;
  background: #fafafc;
  box-shadow: 0 8px 24px rgba(0,0,0,.04);
  overflow: auto;
}

.respell-digital-offer .respell-platform > p:first-child{
  margin-bottom: 0.75rem;
}

.respell-digital-offer .respell-platform img[style*="float: right"]{
  float: right !important;
  display: block;
  width: 100% !important;
  max-width: 170px;
  height: auto !important;
  margin: 0 0 1rem 1.5rem;
}

.respell-digital-offer em{
  color: #555;
}

@media (max-width: 991.98px){
  .respell-digital-offer{
    font-size: 1rem;
  }

  .respell-digital-offer h1{
    margin-top: 2.1rem;
    font-size: clamp(1.8rem, 7vw, 2.5rem);
    scroll-margin-top: 90px;
  }

  .respell-digital-offer h3{
    font-size: 1.25rem;
  }

  .respell-digital-offer h4{
    font-size: 1.45rem;
  }

  .respell-digital-offer .respell-anchor-nav{
    gap: 0.6rem;
    margin-bottom: 1.6rem;
  }

  .respell-digital-offer .respell-anchor-nav a{
    min-height: 40px;
    padding: 0.65rem 0.9rem;
    font-size: 0.95rem;
  }

  .respell-digital-offer .respell-platform{
    padding: 1.2rem 1rem 1rem;
  }

  .respell-digital-offer .respell-platform img[style*="float: right"]{
    float: none !important;
    max-width: 150px;
    margin: 0 auto 1rem;
  }

  .respell-digital-offer .respell-stores,
  .respell-digital-offer .respell-stores tbody,
  .respell-digital-offer .respell-stores tr,
  .respell-digital-offer .respell-stores td{
    display: block;
    width: 100% !important;
    height: auto !important;
  }

  .respell-digital-offer .respell-stores{
    border-spacing: 0;
  }

  .respell-digital-offer .respell-stores td{
    margin-bottom: 0.75rem;
  }
}

@media (max-width: 575.98px){
  .respell-digital-offer{
    line-height: 1.65;
  }

  .respell-digital-offer ul,
  .respell-digital-offer ol{
    padding-left: 1.1rem;
  }

  .respell-digital-offer .respell-anchor-nav{
    display: grid;
    grid-template-columns: 1fr;
  }

  .respell-digital-offer .respell-anchor-nav a{
    min-height: 42px;
    padding: 0 15px;
    font-size: 0.88rem;
  }
}



/* =========================
   NEWSLETTER  (ps_emailsubscription)
   ========================= */

/* Enlève l’espace blanc avant le footer sur la home */
body#index #content-wrapper {
  padding-bottom: 0 !important;
}

/* Wrapper avant footer */
#footer .footer_before,
#footer .footer__before {
  padding: 0 0 0 !important;
  background: #0b0f19 !important;
  overflow-x: hidden !important;
  border: 0 !important;
}

/* Bloc newsletter */
#footer .respell-newsletter {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 18px 0 !important;
  background: #0b0f19 !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* On cale la newsletter sur la même largeur utile que le footer principal */
#footer .respell-newsletter > .container {
  max-width: 1440px !important;
  padding-left: 42px !important;
  padding-right: 42px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Ligne interne */
#footer .respell-newsletter .row {
  --bs-gutter-x: 1rem !important;
  --bs-gutter-y: 0.35rem !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#footer .respell-newsletter .row > * {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

/* Titre */
#footer .respell-newsletter__title {
  margin: 0 !important;
  font-size: clamp(1rem, 1.4vw, 1.25rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  color: #fff !important;
  white-space: nowrap !important;
}

/* Contenu formulaire */
#footer .respell-newsletter__content,
#footer .respell-newsletter__content form {
  margin: 0 !important;
}

/* Contrôles */
#footer .respell-newsletter__controls {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Input */
#footer .respell-newsletter__input {
  width: 100% !important;
  min-width: 0 !important;
  height: 50px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: #111 !important;
  box-shadow: none !important;
  font-size: 1rem !important;
}

#footer .respell-newsletter__input::placeholder {
  color: rgba(0, 0, 0, 0.55) !important;
  opacity: 1 !important;
}

/* Bouton */
#footer .respell-newsletter__btn {
  height: 50px !important;
  padding: 0 22px !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Texte légal */
#footer .respell-newsletter__legal {
  font-size: 0.92rem !important;
  line-height: 1.35 !important;
  margin-top: 10px !important;
  margin-bottom: 0 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  max-width: 70ch !important;
}

/* Desktop */
@media (min-width: 992px) {
  #footer .respell-newsletter .col-lg-5 {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 42% !important;
  }

  #footer .respell-newsletter .col-lg-7 {
    width: 58% !important;
  }

  #footer .respell-newsletter__input {
    flex: 0 0 auto !important;
    width: 420px !important;
  }
}

/* Tablette */
@media (max-width: 1199.98px) {
  #footer .respell-newsletter > .container {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* Sous desktop */
@media (max-width: 991.98px) {
  #footer .respell-newsletter {
    padding: 16px 0 !important;
  }

  #footer .respell-newsletter__title {
    font-size: 1.25rem !important;
    white-space: normal !important;
    margin-bottom: 6px !important;
    text-align: left !important;
  }

  #footer .respell-newsletter__controls {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #footer .respell-newsletter__input,
  #footer .respell-newsletter__btn {
    width: 100% !important;
  }

  #footer .respell-newsletter__legal {
    max-width: none !important;
  }
}

/* Mobile */
@media (max-width: 767.98px) {
  #footer .footer_before,
  #footer .footer__before {
    padding: 0.85rem 0 0.65rem !important;
  }

  #footer .respell-newsletter > .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* =========================================================
   FOOTER PRINCIPAL
   ========================================================= */

#footer.footer {
  background: #0b0f19 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  overflow-x: hidden !important;
}

#footer.footer .footer__main {
  overflow-x: hidden !important;
}

#footer.footer .footer__main > .container {
  max-width: 1440px !important;
  padding-left: 42px !important;
  padding-right: 42px !important;
  overflow-x: hidden !important;
}

#footer.footer .footer__main__top.row {
  --bs-gutter-x: 0 !important;
  --bs-gutter-y: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 210px)) !important;
  justify-content: center !important;
  column-gap: 42px !important;
  row-gap: 8px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 8px 0 8px !important;
}

#footer.footer .footer__main__top.row > .footer__block {
  width: 100% !important;
  max-width: 210px !important;
  min-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* =========================
   TITRES DESKTOP
   ========================= */

#footer.footer p.footer__block__title.d-none.d-md-flex {
  position: relative !important;
  margin: 0 0 0.65rem 0 !important;
  padding-left: 0 !important;
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  overflow: visible !important;
}

@media (min-width: 768px) {
  #footer.footer p.footer__block__title.d-none.d-md-flex {
    display: block !important;
  }
}

/* =========================
   TITRES MOBILE
   ========================= */

#footer.footer .footer__block__toggle .footer__block__title {
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  padding-left: 0 !important;
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  overflow: visible !important;
}

/* =========================
   ICÔNES
   ========================= */

#footer.footer p.footer__block__title.d-none.d-md-flex::before,
#footer.footer .footer__block__toggle .footer__block__title::before {
  content: "" !important;
  position: absolute !important;
  left: -30px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

/* 1. Catalogue */
#footer.footer .footer__main__top.row > .footer__block:nth-of-type(1) p.footer__block__title.d-none.d-md-flex::before,
#footer.footer .footer__main__top.row > .footer__block:nth-of-type(1) .footer__block__toggle .footer__block__title::before {
  background-image: url("/themes/hummingbird-12singes/assets/icons/catalogue.png") !important;
}

/* 2. Pratique */
#footer.footer .footer__main__top.row > .footer__block:nth-of-type(2) p.footer__block__title.d-none.d-md-flex::before,
#footer.footer .footer__main__top.row > .footer__block:nth-of-type(2) .footer__block__toggle .footer__block__title::before {
  background-image: url("/themes/hummingbird-12singes/assets/icons/pratique.png") !important;
}

/* 3. Nous suivre */
#footer.footer .footer__main__top.row > .footer__block:nth-of-type(3) p.footer__block__title.d-none.d-md-flex::before,
#footer.footer .footer__main__top.row > .footer__block:nth-of-type(3) .footer__block__toggle .footer__block__title::before {
  background-image: url("/themes/hummingbird-12singes/assets/icons/nous-suivre.png") !important;
}

/* 4. Informations */
#footer.footer .footer__main__top.row > .footer__block:nth-of-type(4) p.footer__block__title.d-none.d-md-flex::before,
#footer.footer .footer__main__top.row > .footer__block:nth-of-type(4) .footer__block__toggle .footer__block__title::before {
  background-image: url("/themes/hummingbird-12singes/assets/icons/informations.png") !important;
}

/* 5. Votre compte */
#footer.footer .footer__main__top.row > .footer__block:nth-of-type(5) p.footer__block__title.d-none.d-md-flex::before,
#footer.footer .footer__main__top.row > .footer__block:nth-of-type(5) .footer__block__toggle .footer__block__title::before {
  background-image: url("/themes/hummingbird-12singes/assets/icons/compte.png") !important;
}

@media (max-width: 1199.98px) {
  #footer.footer p.footer__block__title.d-none.d-md-flex::before {
    left: -28px !important;
  }
}

@media (max-width: 767.98px) {
  #footer.footer .footer__block__toggle .footer__block__title::before {
    left: -28px !important;
  }
}

/* =========================
   CONTENU
   ========================= */

#footer.footer .footer__block__content {
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
}

#footer.footer .footer__block__content ul {
  margin: 0 !important;
  padding: 0 !important;
}

#footer.footer .footer__block__content li {
  list-style: none !important;
  margin: 0 0 0.22rem 0 !important;
  padding: 0 !important;
}

#footer.footer .footer__block__content a {
  color: rgba(255, 255, 255, 0.78) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: 1.28 !important;
}

#footer.footer .footer__block__content a:hover,
#footer.footer .footer__block__content a:focus {
  color: #fff !important;
  text-decoration: none !important;
}

#footer.footer .copyright {
  margin: 0 !important;
  padding: 6px 0 14px !important;
  text-align: center !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 0.95rem !important;
}

/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width: 1199.98px) {
  #footer.footer .footer__main > .container {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  #footer.footer .footer__main__top.row {
    grid-template-columns: repeat(3, minmax(0, 210px)) !important;
    justify-content: center !important;
    column-gap: 34px !important;
    row-gap: 12px !important;
  }

  #footer.footer .footer__main__top.row > .footer__block {
    max-width: 210px !important;
  }

  #footer.footer p.footer__block__title.d-none.d-md-flex::before {
    left: -28px !important;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {
  #footer .footer__before {
    padding: 0.85rem 0 0.65rem !important;
  }

  #footer .respell-newsletter {
    padding: 0 16px !important;
  }

  #footer .respell-newsletter__title {
    white-space: normal !important;
    text-align: left !important;
    font-size: 1.05rem !important;
  }

  #footer .respell-newsletter__controls {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  #footer .respell-newsletter__input,
  #footer .respell-newsletter__btn {
    width: 100% !important;
    max-width: none !important;
  }

  #footer.footer .footer__main > .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #footer.footer .footer__main__top.row {
    display: block !important;
    padding: 18px 0 8px !important;
  }

  #footer.footer .footer__main__top.row > .footer__block {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  #footer.footer .footer__main__top.row > .footer__block:last-child {
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
  }

  #footer.footer p.footer__block__title.d-none.d-md-flex {
    display: none !important;
  }

  #footer.footer .footer__block__toggle {
    display: block !important;
    padding: 0 0 0 28px !important;
    cursor: default !important;
    pointer-events: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #footer.footer .footer__block__toggle .footer__block__title {
    padding: 0 !important;
  }

  #footer.footer .footer__block__toggle .footer__block__title::before {
    left: -28px !important;
  }

  #footer.footer .footer__block__toggle::after,
  #footer.footer .footer__block__toggle .material-icons,
  #footer.footer .footer__block__toggle [class*="chevron"],
  #footer.footer .footer__block__toggle [class*="arrow"],
  #footer.footer .footer__block__toggle [aria-expanded]::after {
    display: none !important;
    content: none !important;
  }

  #footer.footer .footer__block__content,
  #footer.footer .footer__block__content.collapse,
  #footer.footer .footer__block__content.collapsing,
  #footer.footer .footer__block__content.show {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding-top: 8px !important;
  }

  #footer.footer .footer__block__content[hidden] {
    display: block !important;
  }

  #footer.footer .footer__block__content ul {
    padding-left: 28px !important;
  }

  #footer.footer .copyright {
    padding: 8px 0 14px !important;
  }
}

/* Sous-catégories : cartes plus compactes */

#subcategories.subcategories {
  margin-top: 1.25rem;
  margin-bottom: 1.5rem;
}

#subcategories .subcategory__wrapper {
  margin-bottom: 1rem;
}

#subcategories .subcategory {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  height: 100%;
  padding: 10px;
  border: 1px solid #dcdcdc;
  border-radius: 14px;
  background: #fff;
  color: #222;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

#subcategories .subcategory:hover {
  transform: translateY(-2px);
  border-color: #b9b9b9;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  text-decoration: none;
}

#subcategories .subcategory__image {
  width: 100%;
  height: 150px;
  margin-bottom: 10px;
  overflow: hidden;
  border-radius: 12px;
  background: transparent;
}

#subcategories .subcategory__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 12px;
}

#subcategories .subcategory__name {
  margin: 0;
  width: 100%;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 600;
  color: #222;
  text-align: center;
  word-break: break-word;
}

/* Cartes sans image */
#subcategories .subcategory--no-image {
  justify-content: center;
  min-height: 92px;
  padding: 14px 12px;
}

#subcategories .subcategory--no-image .subcategory__name {
  width: 100%;
}

@media (max-width: 991px) {
  #subcategories .subcategory {
    padding: 9px;
  }

  #subcategories .subcategory__image {
    height: 135px;
  }
}

@media (max-width: 575px) {
  #subcategories .subcategory {
    padding: 8px;
  }

  #subcategories .subcategory__image {
    height: 120px;
    margin-bottom: 8px;
    border-radius: 10px;
  }

  #subcategories .subcategory__image img {
    border-radius: 10px;
  }

  #subcategories .subcategory__name {
    font-size: 0.95rem;
  }

  #subcategories .subcategory--no-image {
    min-height: 80px;
    padding: 12px 10px;
  }
}

/* =========================
   FOOTER + NEWSLETTER :
   même fond partout
   ========================= */

#footer.footer,
#footer .footer_before,
#footer .footer__before,
#footer .respell-newsletter,
#footer .footer__main,
#footer .footer__main__top,
#footer .footer__main__bottom,
#footer .copyright {
  background: #0b0f19 !important;
}

/* Supprime toute séparation visuelle parasite */
#footer.footer,
#footer .footer_before,
#footer .footer__before,
#footer .respell-newsletter,
#footer .footer__main,
#footer .footer__main__top,
#footer .footer__main__bottom,
#footer .copyright {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Réduire l'espace entre newsletter et footer */
#footer .respell-newsletter {
  padding-bottom: 8px !important;
}

#footer.footer .footer__main__top.row {
  padding-top: 8px !important;
}

.new-products {
  margin-bottom: 16px !important;
}


/* =========================
   TYPOGRAPHIE GLOBALE — XII SINGES
   Base : Inter + Manrope
========================= */

/* Base site */
html,
body {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #171717;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Texte courant */
body,
p,
li,
td,
th,
input,
select,
textarea,
label,
small,
.form-control,
.page-content,
.block-category,
.category-description,
.product-description,
.product-description-short,
.cms-content,
.card,
.modal,
.dropdown-menu {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Liens */
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
}

a:hover {
  text-decoration: none;
}

/* =========================
   TITRES
========================= */

h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.block-title,
.section-title,
.card-title,
.product-title,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: "Manrope", sans-serif;
  color: #111;
  letter-spacing: -0.045em;
  line-height: 1.05;
  margin-top: 0;
}

h1,
.h1,
.page-title {
  font-weight: 800;
}

h2,
.h2 {
  font-weight: 800;
}

h3,
.h3 {
  font-weight: 700;
}

h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-weight: 700;
}

h1,
.h1,
.page-title {
  font-size: clamp(2.2rem, 3vw, 3.6rem);
}

h2,
.h2 {
  font-size: clamp(1.7rem, 2.2vw, 2.5rem);
}

h3,
.h3 {
  font-size: clamp(1.35rem, 1.5vw, 1.75rem);
}

h4,
.h4 {
  font-size: 1.2rem;
}

h5,
.h5 {
  font-size: 1.05rem;
}

h6,
.h6 {
  font-size: 0.95rem;
  letter-spacing: -0.02em;
}



/* =========================
   BOUTONS
========================= */

.btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.bootstrap-touchspin button,
.product-add-to-cart .add-to-cart,
.cart-summary .btn,
.checkout .btn,
.respell-btn-primary,
.respell-btn-link {
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.btn-lg,
.btn-primary,
.btn-secondary,
.btn-tertiary,
.btn-outline-primary,
.btn-outline-secondary {
  font-family: "Manrope", sans-serif;
  font-weight: 700;
}

/* =========================
   HERO / BLOCS DE MISE EN AVANT
========================= */

.respell-hero h1,
.respell-hero h2,
.respell-featured-title,
.respell-section-title,
.home-title,
.homepage-title {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.respell-hero__text,
.respell-featured-text,
.home-intro,
.lead,
.subtitle {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

/* =========================
   PRODUITS / CATALOGUE
========================= */

.product-title,
.product-miniature .product-title,
.product-miniature .h3,
.js-product-miniature .product-title,
.product-cover + .product-description .h3,
.product-page h1 {
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.product-price,
.current-price,
.price,
.regular-price,
.discount,
.product-discount {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.product-reference,
.product-availability,
.product-quantities,
.tax-shipping-delivery-label {
  font-family: "Inter", sans-serif;
  font-weight: 400;
}

/* =========================
   FORMULAIRES / RECHERCHE
========================= */

input,
select,
textarea,
.form-control,
.custom-select,
.search-widget input,
.respell-search-input {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}

label,
.form-label,
.control-label {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  letter-spacing: -0.01em;
}

::placeholder {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* =========================
   TABLEAUX / PANIER / CHECKOUT
========================= */

.table,
.table th,
.table td,
.cart-summary,
.cart-item,
.checkout,
.order-confirmation-table,
.order-detail {
  font-family: "Inter", sans-serif;
}

.cart-summary h2,
.checkout h1,
.checkout h2,
.blockcart .cart-products-count {
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* =========================
   FOOTER
========================= */

#footer,
#footer p,
#footer li,
#footer a,
.footer-container,
.footer__main,
.footer__main a,
.footer__title {
  font-family: "Inter", sans-serif;
}

#footer h3,
#footer h4,
#footer .h3,
#footer .h4,
.footer__title {
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* =========================
   PETITS AJUSTEMENTS VISUELS
========================= */

strong,
b {
  font-weight: 600;
}

em,
i {
  font-style: italic;
}

.badge,
.tag,
.label,
.pagination,
.breadcrumb,
.alert,
.tabs,
.nav-tabs {
  font-family: "Inter", sans-serif;
}

.badge,
.btn-sm,
.small,
small {
  letter-spacing: -0.005em;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 991.98px) {
  html,
  body {
    font-size: 15.5px;
  }

  h1,
  .h1,
  .page-title {
    line-height: 1.02;
  }

  h2,
  .h2 {
    line-height: 1.06;
  }

  #header .main-menu a,
  #header .nav a,
  #header .top-menu a {
    font-size: 0.98rem;
  }

  .btn,
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"] {
    letter-spacing: -0.02em;
  }
}

@media (max-width: 575.98px) {
  html,
  body {
    font-size: 15px;
  }

  h1,
  .h1,
  .page-title {
    font-size: clamp(2rem, 7vw, 2.6rem);
  }

  h2,
  .h2 {
    font-size: clamp(1.5rem, 5.4vw, 2rem);
  }

  h3,
  .h3 {
    font-size: clamp(1.2rem, 4.4vw, 1.45rem);
  }
}

/* =========================
   MENU
========================= */

/* Barre du haut / séparation */
.header-top,
.header-bottom {
  border: 0 !important;
  box-shadow: none !important;
}

#header .main-menu__tree[data-depth="0"] > .main-menu__tree__item > .main-menu__tree__link {
  font-family: "Manrope", sans-serif;
}


/* Page CMS - Guide catalogue */
.respell-catalog-guide{
  max-width: 1040px;
  margin: 0 auto;
  color: #222;
  font-size: 1.03rem;
  line-height: 1.7;
}

.respell-catalog-guide p{
  margin: 0 0 1.15rem;
}

.respell-catalog-guide ul,
.respell-catalog-guide ol{
  margin: 0 0 1.35rem;
  padding-left: 1.35rem;
}

.respell-catalog-guide li{
  margin-bottom: 0.45rem;
}

.respell-catalog-guide a{
  color: #2445a2;
  text-decoration: none;
  font-weight: 600;
}

.respell-catalog-guide a:hover{
  text-decoration: underline;
}

.respell-catalog-guide h1{
  margin: 2.75rem 0 1rem;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: #1f2430;
  scroll-margin-top: 110px;
}

.respell-catalog-guide > p:first-child{
  font-size: 1.08rem;
}

.respell-catalog-guide .respell-anchor-nav,
.respell-catalog-guide .respell-subnav{
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.respell-catalog-guide .respell-anchor-nav{
  margin: 1.5rem 0 2.2rem;
}

.respell-catalog-guide .respell-subnav{
  margin: 1rem 0 2rem;
}

.respell-catalog-guide .respell-anchor-nav a,
.respell-catalog-guide .respell-subnav a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 2px solid #f0b400;
  border-radius: 999px;
  background: #f0b400;
  color: #111 !important;
  font-family: "Manrope", sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.1;
  box-shadow: 0 6px 16px rgba(240, 180, 0, 0.14);
  transition: all 0.2s ease;
  text-decoration: none !important;
}

.respell-catalog-guide .respell-anchor-nav a:hover,
.respell-catalog-guide .respell-subnav a:hover{
  background: #f6c21a;
  border-color: #f6c21a;
  color: #111 !important;
  box-shadow: 0 6px 16px rgba(240, 180, 0, 0.14);
  transform: none;
  text-decoration: none !important;
}

.respell-catalog-guide .respell-hero{
  margin: 1.4rem 0;
  text-align: center;
}

.respell-catalog-guide .respell-hero img{
  display: block;
  width: 100% !important;
  max-width: 940px;
  height: auto !important;
  margin: 0 auto;
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(0,0,0,.14);
}

.respell-catalog-guide .respell-note{
  text-align: center;
  color: #555;
  margin-top: 0.6rem;
  margin-bottom: 2rem;
}

.respell-catalog-guide .respell-catalog-images{
  width: 100%;
  border-collapse: separate;
  border-spacing: 18px 0;
  margin: 1.5rem 0 1rem;
}

.respell-catalog-guide .respell-catalog-images td{
  width: 50%;
  padding: 0;
  vertical-align: top;
}

.respell-catalog-guide .respell-catalog-images a{
  display: block;
}

.respell-catalog-guide .respell-catalog-images img{
  display: block;
  width: 100% !important;
  height: auto !important;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

/* Sections repliables */
.respell-catalog-guide .respell-section{
  margin: 1.2rem 0 1.6rem;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  background: #fafafc;
  box-shadow: 0 8px 24px rgba(0,0,0,.04);
  overflow: hidden;
}

.respell-catalog-guide .respell-section summary{
  position: relative;
  display: block;
  margin: 0;
  padding: 1rem 1.2rem 1rem 3rem;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  line-height: 1.15;
  font-weight: 700;
  color: #1f2430;
}



.respell-catalog-guide .respell-section summary::-webkit-details-marker{
  display: none;
}

.respell-catalog-guide .respell-section summary::before{
  content: "";
  position: absolute;
  left: 1.15rem;
  top: 50%;
  width: 12px;
  height: 12px;
  border-right: 2px solid #1f2430;
  border-bottom: 2px solid #1f2430;
  transform: translateY(-60%) rotate(-45deg);
  transition: transform .18s ease;
}

.respell-catalog-guide .respell-section[open] summary::before{
  transform: translateY(-70%) rotate(45deg);
}

.respell-catalog-guide .respell-section:not(.respell-section--genre) summary:hover{
  background: rgba(36,69,162,.04);
}

.respell-catalog-guide .respell-section--genre summary:hover{
  background-color: #fafafc;
}

.respell-catalog-guide .respell-section--genre summary:hover {
  box-shadow: 
    inset 0 0 0 1px rgba(0,0,0,.10),
    0 8px 22px rgba(0,0,0,.12);
  transform: translateY(-2px);
}

.respell-catalog-guide .respell-section__body{
  padding: 0.4rem 1.2rem 0.4rem;
}

.respell-catalog-guide .respell-section__body > *:first-child{
  margin-top: 0.15rem;
}

/* Listes avec icône dans les sections */
.respell-catalog-guide .respell-section__body ul{
  list-style: none;
  padding-left: 0;
}

.respell-catalog-guide .respell-section__body li{
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.55rem;
}

.respell-catalog-guide .respell-section__body li::before{
  content: "";
  position: absolute;
  top: 0.35em;
  left: 0;
  width: 12px;
  height: 12px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  filter: grayscale(1) brightness(0.25);
  background-image: url("/themes/hummingbird-12singes/assets/icons/arrow-up-right.svg");
}

@media (max-width: 991.98px){
  .respell-catalog-guide{
    font-size: 1rem;
  }

  .respell-catalog-guide h1{
    margin-top: 2.2rem;
    font-size: clamp(1.8rem, 7vw, 2.5rem);
    scroll-margin-top: 90px;
  }

  .respell-catalog-guide .respell-anchor-nav,
  .respell-catalog-guide .respell-subnav{
    gap: 0.6rem;
  }

.respell-catalog-guide .respell-anchor-nav a,
.respell-catalog-guide .respell-subnav a{
  min-height: 42px;
  padding: 0 15px;
  font-size: 0.88rem;
}
  .respell-catalog-guide .respell-section summary{
    padding: 0.9rem 1rem 0.9rem 2.7rem;
    font-size: 1.35rem;
  }

  .respell-catalog-guide .respell-section__body{
    padding: 0 1rem 1rem;
  }

  .respell-catalog-guide .respell-catalog-images,
  .respell-catalog-guide .respell-catalog-images tbody,
  .respell-catalog-guide .respell-catalog-images tr,
  .respell-catalog-guide .respell-catalog-images td{
    display: block;
    width: 100% !important;
  }

  .respell-catalog-guide .respell-catalog-images{
    border-spacing: 0;
  }

  .respell-catalog-guide .respell-catalog-images td{
    margin-bottom: 1rem;
  }
}

@media (max-width: 575.98px){
  .respell-catalog-guide{
    line-height: 1.65;
  }

  .respell-catalog-guide ul,
  .respell-catalog-guide ol{
    padding-left: 1.1rem;
  }

  .respell-catalog-guide .respell-anchor-nav,
  .respell-catalog-guide .respell-subnav{
    display: grid;
    grid-template-columns: 1fr;
  }

  .respell-catalog-guide .respell-anchor-nav a,
  .respell-catalog-guide .respell-subnav a{
    width: 100%;
    justify-content: flex-start;
  }
}

/* =========================================================
   GUIDE CATALOGUE — Bandeaux de genre avec image + dégradé
   ========================================================= */

.respell-catalog-guide .respell-section--genre {
  border-radius: 18px;
  overflow: hidden;
}

/* On garde le gabarit visuel d'origine */
.respell-catalog-guide .respell-section--genre summary {
  padding: 1rem 1.2rem 1rem 3rem;
  border-radius: 18px;
  background-color: #fafafc;
  background-image:
    linear-gradient(
      90deg,
      #fafafc 0%,
      #fafafc 40%,
      rgba(250, 250, 252, 0.96) 48%,
      rgba(250, 250, 252, 0.78) 54%,
      rgba(250, 250, 252, 0.42) 60%,
      rgba(250, 250, 252, 0.12) 65%,
      rgba(250, 250, 252, 0.00) 100%
    ),
    var(--respell-banner);
  background-repeat: no-repeat, no-repeat;
  background-position: left top, right center;
  background-size: 100% 100%, auto 100%;
}

/* Hover discret, sans changer le fond */
.respell-catalog-guide .respell-section--genre summary:hover {
  background-color: #fafafc;
  background-image:
    linear-gradient(
      90deg,
      #fafafc 0%,
      #fafafc 40%,
      rgba(250, 250, 252, 0.96) 48%,
      rgba(250, 250, 252, 0.78) 54%,
      rgba(250, 250, 252, 0.42) 60%,
      rgba(250, 250, 252, 0.12) 65%,
      rgba(250, 250, 252, 0.00) 100%
    ),
    var(--respell-banner);
}

/* Flèche : on garde ton placement normal */
.respell-catalog-guide .respell-section--genre summary::before {
  left: 1.15rem;
}

/* Si pas d'image définie, rendu normal */
.respell-catalog-guide .respell-section--genre:not([style*="--respell-banner"]) summary {
  background-image: none;
  background-color: #fafafc;
}

@media (max-width: 991.98px) {
  .respell-catalog-guide .respell-section--genre summary {
    padding: 0.9rem 1rem 0.9rem 2.7rem;
    background-size: 100% 100%, auto 100%;
  }
}

@media (max-width: 575.98px) {
  .respell-catalog-guide .respell-section--genre summary {
    background-image:
      linear-gradient(
        90deg,
        #fafafc 0%,
        #fafafc 48%,
        rgba(250, 250, 252, 0.94) 56%,
        rgba(250, 250, 252, 0.68) 64%,
        rgba(250, 250, 252, 0.22) 72%,
        rgba(250, 250, 252, 0.00) 100%
      ),
      var(--respell-banner);
    background-repeat: no-repeat, no-repeat;
    background-position: left top, right center;
    background-size: 100% 100%, auto 100%;
  }

  .respell-catalog-guide .respell-section--genre summary:hover {
    background-image:
      linear-gradient(
        90deg,
        #fafafc 0%,
        #fafafc 48%,
        rgba(250, 250, 252, 0.94) 56%,
        rgba(250, 250, 252, 0.68) 64%,
        rgba(250, 250, 252, 0.22) 72%,
        rgba(250, 250, 252, 0.00) 100%
      ),
      var(--respell-banner);
  }
}

/* =========================
   BOUTONS PRINCIPAUX JAUNES
========================= */


/* Boutons principaux à passer en jaune */
.btn-primary:not(.all-product-link),
.btn-outline-primary:not(.all-product-link),
.product-add-to-cart .add-to-cart,
#blockcart-modal .btn-primary,
.cart-summary .checkout .btn,
.checkout .btn-primary,
#checkout-payment-step .btn-primary,
#payment-confirmation button,
button.btn-primary,
a.btn-primary:not(.all-product-link),
.block_newsletter form button[type="submit"],
.ps-emailsubscription-block form button[type="submit"],
.respell-newsletter button[type="submit"],
.respell-newsletter .btn,
#footer .respell-newsletter__btn,
.product-tag,
.product-flag {
  background: #f2c200 !important;
  border-color: #f2c200 !important;
  color: #111 !important;
  box-shadow: none !important;
}

/* Ajustements spécifiques bouton newsletter footer */
#footer .respell-newsletter__btn {
  height: 50px !important;
  padding: 0 22px !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  border: 0 !important;
}

/* Hover / focus */
.btn-primary:not(.all-product-link):hover,
.btn-outline-primary:not(.all-product-link):hover,
.product-add-to-cart .add-to-cart:hover,
#blockcart-modal .btn-primary:hover,
.cart-summary .checkout .btn:hover,
.checkout .btn-primary:hover,
#checkout-payment-step .btn-primary:hover,
#payment-confirmation button:hover,
button.btn-primary:hover,
a.btn-primary:not(.all-product-link):hover,
.block_newsletter form button[type="submit"]:hover,
.ps-emailsubscription-block form button[type="submit"]:hover,
.respell-newsletter button[type="submit"]:hover,
.respell-newsletter .btn:hover,
#footer .respell-newsletter__btn:hover,
.product-tag:hover,
.product-flag:hover,
.btn-primary:not(.all-product-link):focus,
.btn-outline-primary:not(.all-product-link):focus,
.product-add-to-cart .add-to-cart:focus,
#blockcart-modal .btn-primary:focus,
.cart-summary .checkout .btn:focus,
.checkout .btn-primary:focus,
#checkout-payment-step .btn-primary:focus,
#payment-confirmation button:focus,
button.btn-primary:focus,
a.btn-primary:not(.all-product-link):focus,
.block_newsletter form button[type="submit"]:focus,
.ps-emailsubscription-block form button[type="submit"]:focus,
.respell-newsletter button[type="submit"]:focus,
.respell-newsletter .btn:focus,
#footer .respell-newsletter__btn:focus,
.product-tag:focus,
.product-flag:focus {
  background: #ddb000 !important;
  border-color: #ddb000 !important;
  color: #111 !important;
  box-shadow: none !important;
}

#header .header-block__badge,
#header .blockcart__badge,
#header .cart-products-count,
#header #_desktop_cart .header-block__badge,
#header #_mobile_cart .header-block__badge {
  background: #f0b800 !important;
  color: #111 !important;
  border-color: #f0b800 !important;
}

/* Disabled */
.btn-primary:not(.all-product-link).disabled,
.btn-primary:not(.all-product-link):disabled,
.product-add-to-cart .add-to-cart:disabled,
#payment-confirmation button:disabled,
.block_newsletter form button[type="submit"]:disabled,
.ps-emailsubscription-block form button[type="submit"]:disabled,
.respell-newsletter button[type="submit"]:disabled,
.respell-newsletter .btn:disabled,
#footer .respell-newsletter__btn:disabled {
  background: #f2c200 !important;
  border-color: #f2c200 !important;
  color: #111 !important;
  opacity: 0.65;
}

#header .header-block__icon,
#header .material-icons.header-block__icon {
  color: #f0b800 !important;
}

.all-product-link svg,
.all-product-link img,
.all-product-link .material-icons,
.all-product-link i {
  color: #f2c200 !important;
  fill: #f2c200 !important;
  stroke: #f2c200 !important;
}

.all-product-link::after {
  color: #f2c200 !important;
}

/* Ne PAS styler le bouton "Tous les nouveaux produits" en jaune */
.all-product-link,
a.all-product-link,
.btn.all-product-link {
  background: initial !important;
  border-color: initial !important;
  color: inherit !important;
  box-shadow: none !important;
}

#footer.footer .footer__main {
  padding-top: 8px !important;
  padding-bottom: 0 !important;
}