/**
 * Child Hummingbird - Custom CSS
 * Thème enfant pour Chef Cédric
 *
 * Ce fichier sera chargé APRÈS les styles du thème parent.
 */

/* Polices Chef Cédric */
@import url("./fonts.css");
@import url("https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap");

/* ============================================
   BASE TYPOGRAPHIE (inspiré de chefcedric.com)
   ============================================ */

:root {
  --cc-font-title: dejavu_sanscondensed_bold, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --cc-font-body: dejavu_sansbook, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --cc-font-hand: dejavu_sansbook, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

body {
  font-size: 16px;
  /* Comme sur l'ancien site: Indie Flower par défaut */
  font-family: var(--cc-font-hand);
  color: var(--cc-black);
  -webkit-font-smoothing: antialiased;
}

/* Titres en uppercase comme sur chefcedric.com */
h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--cc-font-title);
  text-transform: uppercase;
}

/* Rubriques / blocs (titres de sections) en DejaVu */
.section-title,
.block-title,
.hummingbird-section-title,
.page-header h1,
.page-title,
h1.page-title {
  font-family: var(--cc-font-title);
}

/* Formulaires: garder une police lisible (DejaVu) */
input,
select,
textarea,
button {
  font-family: var(--cc-font-body);
}

/* Prix & chiffres (comme demandé) : DejaVu */
.price,
.product-price,
.product-price-and-shipping,
.current-price,
.regular-price,
.discount,
.discount-percentage,
.product-discount,
.product-miniature__prices,
.cart-summary-line,
.cart-products-count,
.js-cart-products-count,
.pagination,
.page-link,
.qty,
.quantity,
.product-quantity,
input[type="number"] {
  font-family: var(--cc-font-body) !important;
}

/* TEST : Si vous voyez cette ligne dans le source, le CSS est bien chargé */

/* === Variables CSS - Couleurs Chef Cédric === */
:root {
  /* Couleurs principales */
  --cc-green: #93ae45;
  --cc-red: #e30917;
  --cc-orange: #ee7501;
  --cc-yellow: #f9b233;
  --cc-black: #1d1d1b;
  --cc-gray: #ededed;

  /* Intégration Bootstrap */
  --bs-primary: #ee7501;
  --bs-primary-rgb: 238, 117, 1;
  --bs-secondary: #f9b233;
  --bs-secondary-rgb: 249, 178, 51;
  --bs-danger: #e30917;
  --bs-danger-rgb: 227, 9, 23;
  --bs-warning: #f9b233;
  --bs-warning-rgb: 249, 178, 51;
  --bs-success: #93ae45;
  --bs-success-rgb: 147, 174, 69;
  --bs-dark: #1d1d1b;
  --bs-dark-rgb: 29, 29, 27;
  --bs-light: #ededed;
  --bs-light-rgb: 237, 237, 237;

  /* Headings */
  --bs-heading-color: var(--cc-yellow);

  /* Liens - restent verts */
  --bs-link-color: #93ae45;
  --bs-link-hover-color: #7a9238;
}

/* === Classes utilitaires Chef Cédric === */
.green { color: #93ae45; }
.red { color: #e30917; }
.orange { color: #ee7501; }
.yellow { color: #f9b233; }
.black { color: #1d1d1b; }
.gray { color: #ededed; }

.bg-green { background-color: #93ae45; }
.bg-red { background-color: #e30917; }
.bg-orange { background-color: #ee7501; }
.bg-yellow { background-color: #f9b233; }
.bg-black { background-color: #1d1d1b; }
.bg-gray { background-color: #ededed; }

/* === Boutons personnalisés === */
/* Style commun boutons (inspiré: border-radius 6px) */
.btn {
  --bs-btn-border-radius: 6px;
}

/* Bouton primaire : Orange #ee7501 */
.btn-primary {
  --bs-btn-bg: #ee7501;
  --bs-btn-border-color: #ee7501;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #d56901;
  --bs-btn-hover-border-color: #bf5e01;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #bf5e01;
  --bs-btn-active-border-color: #a95301;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: #ee7501;
  --bs-btn-disabled-border-color: #ee7501;
  --bs-btn-disabled-color: #fff;
}

/* Bouton secondaire : Yellow #f9b233 */
.btn-secondary {
  --bs-btn-bg: #f9b233;
  --bs-btn-border-color: #f9b233;
  --bs-btn-color: #1d1d1b;
  --bs-btn-hover-bg: #e5a02d;
  --bs-btn-hover-border-color: #d18d27;
  --bs-btn-hover-color: #1d1d1b;
  --bs-btn-active-bg: #d18d27;
  --bs-btn-active-border-color: #bd7a21;
  --bs-btn-active-color: #1d1d1b;
  --bs-btn-disabled-bg: #f9b233;
  --bs-btn-disabled-border-color: #f9b233;
  --bs-btn-disabled-color: #1d1d1b;
}

/* S'assurer que les boutons ont bien les couleurs */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
  background-color: #ee7501 !important;
  border-color: #ee7501 !important;
  color: #fff !important;
}

.btn-primary:hover:not(:disabled):not(.disabled) {
  background-color: #d56901 !important;
  border-color: #bf5e01 !important;
  color: #fff !important;
}

.btn-primary:active:not(:disabled):not(.disabled),
.btn-primary.active:not(:disabled):not(.disabled) {
  background-color: #bf5e01 !important;
  border-color: #a95301 !important;
  color: #fff !important;
}

.btn-secondary,
.btn-secondary:not(:disabled):not(.disabled) {
  background-color: #f9b233 !important;
  border-color: #f9b233 !important;
  color: #1d1d1b !important;
}

.btn-secondary:hover:not(:disabled):not(.disabled) {
  background-color: #e5a02d !important;
  border-color: #d18d27 !important;
  color: #1d1d1b !important;
}

.btn-secondary:active:not(:disabled):not(.disabled),
.btn-secondary.active:not(:disabled):not(.disabled) {
  background-color: #d18d27 !important;
  border-color: #bd7a21 !important;
  color: #1d1d1b !important;
}

/* === Bouton outline primary (remplace le bleu Bootstrap) === */
.btn-outline-primary {
  --bs-btn-color: var(--cc-green);
  --bs-btn-border-color: var(--cc-green);
  --bs-btn-hover-bg: var(--cc-green);
  --bs-btn-hover-border-color: var(--cc-green);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--cc-green);
  --bs-btn-active-border-color: var(--cc-green);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: var(--cc-green);
  --bs-btn-disabled-border-color: var(--cc-green);
}

.btn-outline-primary:not(:disabled):not(.disabled) {
  color: var(--cc-green) !important;
  border-color: var(--cc-green) !important;
}

.btn-outline-primary:hover:not(:disabled):not(.disabled),
.btn-outline-primary:focus:not(:disabled):not(.disabled) {
  background-color: var(--cc-green) !important;
  border-color: var(--cc-green) !important;
  color: #fff !important;
}

/* États disabled (Bootstrap utilise des variables CSS, on force aussi en fallback) */
.btn-primary:disabled,
.btn-primary.disabled,
fieldset:disabled .btn-primary {
  background-color: #ee7501 !important;
  border-color: #ee7501 !important;
  color: #fff !important;
  opacity: 0.65;
}

.btn-secondary:disabled,
.btn-secondary.disabled,
fieldset:disabled .btn-secondary {
  background-color: #f9b233 !important;
  border-color: #f9b233 !important;
  color: #1d1d1b !important;
  opacity: 0.65;
}

/* === Formulaires : checkbox / radio (remplace le bleu Bootstrap) === */
.form-check-input:checked {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.form-check-input:focus {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

/* === Formulaires : focus inputs/textarea (remplace le bleu Bootstrap) === */
.form-control:focus,
.modal.product-comment-modal .form-control:focus,
.modal.product-comment-modal textarea:focus {
  border-color: var(--cc-green) !important;
  box-shadow: 0 0 0 0.25rem rgba(147, 174, 69, 0.25) !important;
}

/* Select (dropdown) focus */
.form-select:focus {
  border-color: var(--cc-green) !important;
  box-shadow: 0 0 0 0.25rem rgba(147, 174, 69, 0.25) !important;
  outline: 0;
}

/* === Checkout : étapes validées (success) === */
.checkout__steps--success .checkout__steps__text {
  color: var(--bs-success) !important;
}

/* === Checkout : étape courante (active) en jaune === */
.checkout__steps .nav-tabs .checkout__steps--current .nav-link.active {
  color: var(--cc-yellow) !important;
}

/* === Checkout : adresse sélectionnée (remplace le bleu Bootstrap) === */
.step .address.selected {
  border: 2px solid var(--cc-green) !important;
  margin: 0;
}

/* === Alertes : info (remplace le bleu Bootstrap) === */
.alert-info {
  --bs-alert-color: var(--cc-black);
  --bs-alert-bg: var(--cc-yellow);
  --bs-alert-border-color: var(--cc-orange);
  --bs-alert-link-color: var(--cc-green);
}

/* Titre de page (équivalent de h1.titre sur l’ancien site) */
.page-header h1,
.page-title,
h1.page-title {
  color: var(--cc-green);
  text-align: center;
}

/* === Produit : thumbnail active (remplace le bleu Bootstrap) === */
.thumbnails__container .thumbnail.active img {
  border: 2px solid var(--cc-green) !important;
}

/* === Footer === */
.footer {
  --footer-background-color: var(--bs-body-bg) !important;
  --footer-text-color: var(--bs-dark) !important;
  --footer-hover-color: var(--cc-green) !important;
  --footer-heading-color: var(--bs-dark) !important;
  background-color: var(--bs-body-bg) !important;
}

.footer__block__title {
  font-family: var(--cc-font-body) !important;
}

/* Footer: forcer un texte lisible (évite blanc sur blanc) */
.footer .copyright,
.footer .copyright span,
.footer .copyright a {
  color: var(--cc-green) !important;
}

.footer .copyright a:hover,
.footer .copyright a:focus {
  color: #7a9238 !important;
}

/* === Header slogan === */
.header-slogan__text {
  font-family: var(--cc-font-title);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--cc-black);
  text-align: left;
  font-weight: bold;
}

/* Sélecteur de langue dans le slogan - alignement identique à la ligne 2 */
.header-slogan__language-selector {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Masquer le slogan au scroll */
.header-slogan {
  transition: opacity 0.3s ease, max-height 0.3s ease, margin 0.3s ease;
  overflow: hidden;
}

.header-slogan--hidden {
  opacity: 0;
  max-height: 0;
  margin: 0;
  padding: 0;
}

/* === Header contact link (Appelez-nous) - style différent et plus petit === */
.header-top .contact-link,
.header-top #contact-link,
.header-top__left .contact-link,
.header-top__left #contact-link {
  font-family: var(--cc-font-body);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--cc-black);
  font-weight: normal;
}

/* === Liens - Tous en vert #93ae45 === */
/* IMPORTANT: on exclut les boutons <a class="btn ..."> pour ne pas casser les couleurs hover des boutons Bootstrap */
a:not(.btn),
a:not(.btn):link,
a:not(.btn):visited {
  color: #93ae45 !important;
}

a:not(.btn):hover,
a:not(.btn):focus {
  color: #7a9238 !important;
}

a:not(.btn):active {
  color: #6e8332 !important;
}

/* Exceptions pour les boutons et éléments spéciaux */
/* IMPORTANT: ne PAS forcer `.btn { color: inherit !important; }` sinon Bootstrap ne peut plus appliquer les couleurs des boutons. */
a.btn,
button.btn {
  color: inherit; /* évite que nos règles de liens verts recolorent certains boutons-liens */
}

/* Liens dans le header (si besoin de personnalisation) */
.header a:not(.btn):not(.dropdown-item) {
  color: #93ae45 !important;
}

.header a:not(.btn):not(.dropdown-item):hover {
  color: #7a9238 !important;
}

/* === Vos styles personnalisés ci-dessous === */

/* Module custom text - fond gris clair */
#custom-text {
  background-color: #ededed;
  padding: 1rem 1rem .5rem;
}
#custom-text h2 {
  color: var(--cc-orange);
  text-align: center;
}

/* Titre des miniatures produit */
.product-miniature .product-miniature__title {
  font-size: 1.2rem;
  margin-bottom: 0;
  font-weight: 500;
}

/* ============================================
   GUIDE DES SÉLECTEURS PRINCIPAUX
   ============================================ */

/* --- HEADER --- */
/*
.header                    → Container principal du header
.header-top                → Barre du haut (contact, langues, devise)
.header-top__left          → Partie gauche du header top
.header-top__right         → Partie droite du header top (panier, compte)
.header-bottom             → Barre du bas (logo, menu, recherche)
.header-bottom__row        → Ligne principale du header bottom
.logo                     → Logo de la boutique

Exemples :
.header-top { background-color: var(--cc-green); }
.header-bottom { border-bottom: 2px solid var(--cc-orange); }
.logo img { max-height: 60px; }
*/

/* --- MENU DE NAVIGATION --- */
/*
.ps_mainmenu              → Menu principal
.menu                      → Container du menu
.menu__item                → Élément de menu
.menu__item--active        → Élément de menu actif
.menu__link                → Lien du menu

Exemples :
.menu__link:hover { color: var(--cc-orange); }
.menu__item--active .menu__link { color: var(--cc-green); }
*/

/* Menu principal - liens en gras */
.main-menu .main-menu__tree__link {
  font-weight: bold !important;
}

/* --- PRODUITS --- */
/*
.js-product-miniature      → Miniature produit (liste)
.product-miniature         → Miniature produit
.product-flags             → Labels produits (promo, nouveau, etc.)
*/ 
.product-flags .new{
  display: none !important;
}

.product-flags .pack {
  display: none !important;
}
/*
.product-title             → Titre du produit
.product-price             → Prix du produit
.product-add-to-cart       → Bouton ajouter au panier

Exemples :
.product-title a:hover { color: var(--cc-green); }
.product-price { color: var(--cc-orange); font-weight: bold; }
.btn-product-add-to-cart { background-color: var(--cc-green); }
*/

/* --- PAGE PRODUIT --- */
/*
.product-page              → Page produit
.product-images             → Images produit
.product-cover               → Image principale
.product-thumbnails         → Miniatures
.product-information        → Infos produit (titre, prix, description)
.product-variants           → Variantes (taille, couleur, etc.)
.product-customization      → Personnalisation produit

Exemples :
.product-cover img { border: 2px solid var(--cc-gray); }
.product-information .product-price { font-size: 1.5rem; color: var(--cc-orange); }
*/

/* --- PANIER --- */
/*
.cart-container            → Container du panier
.cart-summary              → Résumé panier
.cart__item                → Article dans le panier
.cart__total               → Total du panier
.cart-voucher              → Codes promo

Exemples :
.cart-summary { background-color: var(--cc-gray); }
.cart__total { color: var(--cc-green); font-weight: bold; }
*/

/* --- FOOTER --- */
/*
.footer                    → Footer principal
.footer__block              → Bloc du footer
.footer__links              → Liens du footer
.footer__copyright          → Copyright

Exemples :
.footer { background-color: var(--cc-black); color: var(--cc-gray); }
.footer__links a:hover { color: var(--cc-orange); }
*/

/* --- BOUTONS --- */
/*
.btn-primary               → Bouton primaire (vert par défaut)
.btn-secondary             → Bouton secondaire (orange par défaut)
.btn-outline-primary       → Bouton outline primaire
.btn-add-to-cart           → Bouton ajouter au panier
.btn-proceed-to-checkout   → Bouton passer commande

Exemples :
.btn-add-to-cart:hover { transform: scale(1.05); }
.btn-proceed-to-checkout { background-color: var(--cc-orange); }
*/

/* --- FORMULAIRES --- */
/*
.form-control              → Champs de formulaire
.form-label                → Labels de formulaire
.form-select               → Liste déroulante
.form-check                → Checkbox/Radio

Exemples :
.form-control:focus { border-color: var(--cc-green); box-shadow: 0 0 0 0.2rem rgba(147, 174, 69, 0.25); }
*/

/* --- ALERTES / NOTIFICATIONS --- */
/*
.alert                     → Alerte
.alert-success             → Alerte succès
.alert-danger              → Alerte erreur
.toast                     → Toast notification

Exemples :
.alert-success { background-color: var(--cc-green); border-color: var(--cc-green); }
*/

/* --- RESPONSIVE --- */
/*
Utilisez les breakpoints Bootstrap :
- d-none d-md-block       → Masqué sur mobile, visible sur tablette+
- d-md-none               → Visible uniquement sur mobile
- col-md-6                → 6 colonnes sur tablette+

Exemples :
@media (max-width: 767px) {
  .header-bottom { padding: 10px 0; }
  .product-title { font-size: 1rem; }
}
*/

/* ============================================
   EXEMPLES DE PERSONNALISATIONS
   ============================================ */

/* Exemple 1 : Header avec fond vert et texte blanc */
/*
.header-top {
  background-color: var(--cc-green);
  color: white;
}
.header-top a {
  color: white;
}
.header-top a:hover {
  color: var(--cc-yellow);
}
*/

/* Exemple 2 : Prix en orange et gras */
/*
.product-price {
  color: var(--cc-orange);
  font-weight: 700;
  font-size: 1.25rem;
}
*/

/* Exemple 3 : Footer sombre avec accents orange */
/*
.footer {
  background-color: var(--cc-black);
  color: var(--cc-gray);
  border-top: 3px solid var(--cc-orange);
}
.footer a {
  color: var(--cc-gray);
  transition: color 0.3s;
}
.footer a:hover {
  color: var(--cc-orange);
}
*/

/* Exemple 4 : Boutons personnalisés */
/*
.btn-primary {
  background: linear-gradient(135deg, var(--cc-green) 0%, #7a9238 100%);
  border: none;
  border-radius: 25px;
  padding: 12px 30px;
  font-weight: 600;
  text-transform: uppercase;
  transition: all 0.3s;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(147, 174, 69, 0.4);
}
*/

/* ============================================
   SÉLECTEUR DE LANGUE AVEC DRAPEAUX
   ============================================ */

/* Positionnement en haut à droite */
.language-selector-top-right {
  margin-left: 0; /* Pas besoin de margin auto ici car c'est dans le flex du slogan */
}

/* Wrapper du sélecteur */
.language-selector__wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Container des drapeaux côte à côte */
.language-selector-flags {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Lien drapeau */
.language-selector__flag-link {
  display: inline-block;
  padding: 0.25rem;
  border-radius: 4px;
  transition: all 0.3s ease;
  text-decoration: none;
  opacity: 0.7;
}

.language-selector__flag-link:hover {
  opacity: 1;
  transform: scale(1.1);
  background-color: rgba(0, 0, 0, 0.05);
}

.language-selector__flag-link.current {
  opacity: 1;
  background-color: rgba(147, 174, 69, 0.1);
}

.language-selector__flag-link.current .language-selector__flag {
  width: 32px;
  height: 24px;
}

/* Drapeaux */
.language-selector__flag {
  width: 24px;
  height: 18px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
  transition: transform 0.3s ease, width 0.3s ease, height 0.3s ease;
}

.language-selector__flag-link:hover .language-selector__flag {
  transform: scale(1.05);
}

/* Responsive : sur mobile, garder le sélecteur visible mais ajuster la position */
@media (max-width: 767.98px) {
  .language-selector-top-right {
    position: relative;
    margin: 0.5rem;
    display: inline-block;
  }
  
  .header-top__right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}

/* Ajustement pour le header-top */
.header-top {
  position: relative;
}

.header-top__right {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* S'assurer que le sélecteur de langue est bien positionné à droite */
.header-top__right #_desktop_language_selector {
  margin-left: auto; /* Pousse le sélecteur tout à droite */
}

/* Sélecteur de langue dans le slogan - ajustements */
.header-slogan__language-selector .language-selector-top-right {
  margin: 0;
}

/* === Logo avec texte CHEF CEDRIC dans header-top === */
.header-logo-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  min-height: 100%;
}

.header-logo-wrapper .logo-text {
  font-family: var(--cc-font-title);
  font-size: 26px;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--cc-black);
  letter-spacing: 0.06em;
  line-height: 1.1;
  font-weight: 700;
  margin-top:-0.5rem;
}

/* Responsive : ajuster la taille du texte sur mobile */
@media (max-width: 767.98px) {
  .header-logo-wrapper .logo-text {
    font-size: 1rem;
    margin-top: 0.25rem;
  }
}

/* Logo dans header-bottom (si nécessaire pour mobile) */
.logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* === Structure en 2 lignes pour la colonne droite === */
/* Bootstrap gère déjà le flexbox pour les rows, on ne touche pas à display */

/* La colonne de gauche (logo) définit la hauteur */
.header-top .row.align-items-stretch > .col-auto {
  display: flex;
  flex-direction: column;
}

/* La colonne droite prend toute la hauteur disponible (égale au logo) */
.header-top .row.align-items-stretch > .col.header-right-column {
  display: flex;
  flex-direction: column;
}

/* Ligne 1 : centrée verticalement dans la moitié supérieure */
.header-right-line-1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 0;
}

/* Ligne 2 : en bas (poussée vers le bas avec margin-top auto) */
.header-right-line-2 {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin-top: auto;
}

.header-top__right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Slogan aligné à gauche */
.header-slogan__text {
  white-space: nowrap;
  text-transform: uppercase;
}

/* Sélecteur de langue aligné à droite */
.header-slogan__language-selector {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* ============================================
   HEADER AU SCROLL - Réduction de taille
   ============================================ */

/* Transitions pour tous les éléments du header */
.header-top {
  transition: padding 0.3s ease, min-height 0.3s ease;
}

.header-top .header-logo-wrapper {
  transition: flex-direction 0.3s ease, gap 0.3s ease, margin 0.3s ease, height 0.3s ease, min-height 0.3s ease;
}

.header-top .logo,
.header-top .logo img,
.header-top .navbar-brand img,
.header-top .header-logo-wrapper img,
.header-top .header-logo-wrapper .logo,
.header-top .header-logo-wrapper .navbar-brand img,
.header-top .logo-text,
.header-top .header-slogan__text,
.header-top .header-slogan__language-selector {
  transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease, margin 0.3s ease, font-size 0.3s ease, width 0.3s ease, height 0.3s ease;
}

/* Quand on scroll : header plus petit (aussi fin que header-bottom) */
.header-top.header-scrolled {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* Réduire aussi la hauteur de la row */
.header-top.header-scrolled .row {
  min-height: auto;
  align-items: center;
}

.header-top.header-scrolled .header-logo-wrapper  {
  margin-bottom: 0rem !important;
}

/* Ajuster les colonnes pour qu'elles s'adaptent */
.header-top.header-scrolled .row.align-items-stretch > .col-auto,
.header-top.header-scrolled .row.align-items-stretch > .col {
  align-items: center;
  height: auto;
  min-height: auto;
}

/* Masquer le slogan au scroll */
.header-top.header-scrolled .header-slogan__text {
  opacity: 0;
  max-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: none !important;
}

/* Masquer les drapeaux au scroll */
.header-top.header-scrolled .header-slogan__language-selector {
  opacity: 0;
  max-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: none !important;
}

/* Masquer la ligne 1 complète au scroll (slogan + drapeaux) */
.header-top.header-scrolled .header-right-line-1 {
  display: none !important;
}

/* Réduire la taille du logo au scroll - sélecteurs multiples pour être sûr */
.header-top.header-scrolled .logo,
.header-top.header-scrolled .logo img,
.header-top.header-scrolled .logo.img-fluid,
.header-top.header-scrolled .navbar-brand img,
.header-top.header-scrolled .navbar-brand .logo,
.header-top.header-scrolled .navbar-brand .logo.img-fluid,
.header-top.header-scrolled .header-logo-wrapper img,
.header-top.header-scrolled .header-logo-wrapper .logo,
.header-top.header-scrolled .header-logo-wrapper .logo img,
.header-top.header-scrolled .header-logo-wrapper .logo.img-fluid,
.header-top.header-scrolled .header-logo-wrapper .navbar-brand img,
.header-top.header-scrolled .header-logo-wrapper .navbar-brand .logo,
.header-top.header-scrolled .header-logo-wrapper .navbar-brand .logo.img-fluid,
.header-top.header-scrolled img.logo,
.header-top.header-scrolled img.logo.img-fluid {
  max-height: 40px !important;
  max-width: 200px !important;
  width: auto !important;
  height: auto !important;
  transition: max-height 0.3s ease, max-width 0.3s ease, width 0.3s ease, height 0.3s ease;
}

/* Forcer aussi le container du logo à s'adapter */
.header-top.header-scrolled .navbar-brand {
  max-height: 40px !important;
  display: flex !important;
  align-items: center !important;
}

/* Repositionner le logo-text à droite du logo au scroll */
.header-top.header-scrolled .header-logo-wrapper {
  margin-bottom: 0;
  height: auto;
  min-height: auto;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.75rem;
}

.header-top.header-scrolled .logo-text {
  opacity: 1 !important;
  max-height: none !important;
  margin: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  display: block !important;
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;
}

/* Masquer "Appelez-nous" au scroll */
.header-top.header-scrolled .header-top__left,
.header-top.header-scrolled .header-right-line-2 .col-auto:first-child {
  display: none !important;
}

/* Ajuster la colonne droite pour qu'elle prenne moins de place */
.header-top.header-scrolled .header-right-column {
  justify-content: center;
}

/* S'assurer que la ligne 2 reste visible et s'adapte */
.header-top.header-scrolled .header-right-line-2 {
  flex: 1;
  margin-top: 0;
  justify-content: flex-end;
}

/* La partie droite prend toute la largeur quand la gauche est masquée */
.header-top.header-scrolled .header-right-line-2 .col-auto:last-child {
  margin-left: 0 !important;
}


.carousel-control-prev, .carousel-control-next {
  display: none !important;
}

hr:not(.alert-divider) {
  color: var(--bs-gray-900);
}

/* Masquer les badges produit "Nouveau" et "Pack" */
.product-flag.new {
  display: none !important;
}

.product-flag.pack {
  display: none !important;
}