/* Centrage des images dans align-center */
.align-center {
  text-align: center !important;
}

.align-center img {
  display: block !important;
  margin: 0 auto !important;
}



/* Votre CSS personnalisé pour Château Terrasson */

/* Masquer le texte dans le language switcher */
#block-terrassonbelgrade-selecteurdelangue .language-link {
  font-size: 0 !important;
  display: inline-block;
  vertical-align: middle;
}

/* Afficher les drapeaux en émoji */
#block-terrassonbelgrade-selecteurdelangue .language-link:before {
  font-size: 12px !important;
  display: inline-block;
  vertical-align: middle;
}

/* Drapeau anglais */
#block-terrassonbelgrade-selecteurdelangue a[href="/en"]:before {
  content: "🇬🇧";
}

/* Drapeau français */
#block-terrassonbelgrade-selecteurdelangue a[href="/"]:before {
  content: "🇫🇷";
}

/* MASQUER la langue active */
#block-terrassonbelgrade-selecteurdelangue li.is-active {
  display: none !important;
}

/* Forcer l'alignement à droite */
#block-terrassonbelgrade-account-menu {
  margin-left: auto;
}

/* ============================================
   MENUS MOBILE/HAMBURGER UNIQUEMENT - VERTICAL
   Cibler .offcanvas (le conteneur hamburger de Belgrade)
   ============================================ */

/* Forcer tous les menus dans offcanvas en vertical */
.offcanvas .nav {
  display: block !important;
  flex-direction: column !important;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Items de menu en vertical */
.offcanvas .nav-item {
  display: block !important;
  width: 100%;
  margin: 0;
  float: none !important;
}

/* Liens et spans en block */
.offcanvas .nav-link,
.offcanvas .dropdown-toggle {
  display: block !important;
  width: 100%;
  padding: 12px 20px;
  text-decoration: none;
}

/* Sous-menus (dropdown) en vertical */
.offcanvas .dropdown-menu {
  position: static !important;
  display: block !important;
  float: none !important;
  width: 100%;
  padding: 0 0 0 20px !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Supprimer la flèche Bootstrap */
.offcanvas .dropdown-toggle::after {
  display: none !important;
}

/* Items de sous-menu aussi en block */
.offcanvas .dropdown-menu .nav-item {
  display: block !important;
  width: 100%;
}

.offcanvas .dropdown-menu .nav-link {
  display: block !important;
  padding: 10px 20px;
}

/* Dans themes/custom/chateauterrassonbelgrade/css/style.css */

/* Forcer l'ordre des éléments */
.region-top-bar {
  display: flex !important;
  align-items: center !important;
}

.region-top-bar .navigation-toggle {
  order: 1;
  margin-right: auto !important;
}

#block-terrassonbelgrade-selecteurdelangue {
  order: 4;
  margin-left: 0 !important;
  margin-right: 0.5rem !important;
}

#block-terrassonbelgrade-shopping-cart {
  order: 3;
  margin-left: 0 !important;
  margin-right: 0.5rem !important;
}

#block-terrassonbelgrade-account-menu {
  order: 2;
  margin-left: 0 !important;
}



/* Logo pleine largeur responsive */
.navbar-brand img,
.site-logo img {
  max-width: 100%;
  width: 100%;
  height: auto;
}




/* ========================================
   PERSONNALISATIONS BOUTIQUE
   ======================================== */

/* Bouton "Ajouter au panier" - couleur personnalisée */
.form-submit[value*="Add to cart"],
.form-submit[value*="Ajouter au panier"],
.form-submit.button--add-to-cart,
button[name*="add_to_cart"],
input[id*="edit-submit-add-to-cart"] {
  background-color: #e01b24 !important; /* rouge */
  border-color: #e01b24 !important;
  color: #ffffff !important;
  font-weight: 500;
  padding: 0.75rem 1.5rem 0.75rem 3rem !important; /* Plus d'espace à gauche pour l'icône */
  transition: all 0.3s ease;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; /* Espace entre icône et texte */
  min-width: 180px; /* Largeur minimum */
}

/* Icône du panier */
.form-submit[value*="Add to cart"]::before,
.form-submit[value*="Ajouter au panier"]::before,
.form-submit.button--add-to-cart::before,
button[name*="add_to_cart"]::before {
  margin-right: 0.5rem;
}

/* Si l'icône est en background-image */
.form-submit[value*="Add to cart"],
.form-submit[value*="Ajouter au panier"] {
  background-position: 1rem center !important;
  background-size: 1.2rem !important;
  padding-left: 3rem !important;
}

.form-submit[value*="Add to cart"]:hover,
.form-submit[value*="Ajouter au panier"]:hover,
.form-submit.button--add-to-cart:hover,
button[name*="add_to_cart"]:hover,
input[id*="edit-submit-add-to-cart"]:hover {
  background-color: #b31a1e !important; /* rouge foncé */
  border-color: #b31a1e !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(114, 47, 55, 0.3);
}

/* ========================================
   ESPACEMENT ENTRE LES PRODUITS
   ======================================== */

/* Augmenter l'espacement de la grille responsive */
.views-view-responsive-grid {
  --views-responsive-grid--layout-gap: 30px !important;
}

/* Espacement supplémentaire pour chaque item */
.views-view-responsive-grid__item {
  margin-bottom: 2rem !important;
}

/* Padding interne de chaque carte produit */
.views-view-responsive-grid__item-inner {
  padding: 1.5rem !important;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.views-view-responsive-grid__item-inner:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transform: translateY(-3px);
}

/* ========================================
   ESPACEMENT FORMULAIRE PRODUIT
   ======================================== */

/* Masquer les <br> pour mieux contrôler l'espacement */
.views-view-responsive-grid__item-inner > br {
  display: none;
}

/* Espacement général entre les champs */
.views-view-responsive-grid__item-inner > span.views-field {
  display: block;
  margin-bottom: 0.5rem;
}

/* Image - pas d'espace en bas */
.views-field-field-etiquette {
  margin-bottom: 1rem !important;
}

/* Titre */
.views-field-title {
  margin-bottom: 0.5rem !important;
  font-size: 1.15rem;
  font-weight: 600;
}

/* Contenance */
.views-field-field-contenance {
  margin-bottom: 0.5rem !important;
  font-size: 0.9rem;
  color: #666;
}

/* Prix - AUGMENTER l'espace en bas */
.views-field-price__number {
  margin-bottom: 1.5rem !important;
  font-size: 1.25rem;
  font-weight: bold;
  color: #e01b24; /* NOUVELLE COULEUR ROUGE */
}

/* Formulaire (quantité + bouton) - RÉDUIRE l'espace interne */
.views-field-variations-target-id {
  margin-bottom: 0 !important;
}

/* Conteneur de quantité - RÉDUIRE ENCORE l'espace en bas */
.container--edit-quantity-wrapper,
.field--name-quantity {
  margin-bottom: 0 !important;
}

/* Bouton "Ajouter au panier" - RÉDUIRE ENCORE l'espace en haut */
.form-actions,
div[data-drupal-selector="edit-actions"] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* ========================================
   CENTRAGE DES ÉLÉMENTS PRODUIT
   ======================================== */

/* Centrer tout le contenu de la carte produit */
.views-view-responsive-grid__item-inner {
  text-align: center;
}

/* Centrer spécifiquement chaque champ */
.views-field-title,
.views-field-field-contenance,
.views-field-price__number {
  text-align: center !important;
}

/* Centrer le titre (lien) */
.views-field-title a {
  display: inline-block;
}

/* Centrer le formulaire */
.commerce-order-item-add-to-cart-form {
  text-align: center;
}

/* Centrer le sélecteur de quantité */
.quantity-input-wrapper {
  display: inline-flex !important;
  justify-content: center;
}

/* Centrer le bouton "Ajouter au panier" */
.form-actions {
  text-align: center;
}

.button--add-to-cart {
  margin: 0 auto;
}




/* ========================================
   ESPACEMENT COLONNES LAYOUT BUILDER
   ======================================== */

/* Augmenter l'espace entre les colonnes - MÉTHODE PADDING */
.layout--twocol-section .layout__region {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

/* Ou cibler spécifiquement chaque colonne */
.layout--twocol-section .layout__region--first {
  padding-right: 2rem !important;
}

.layout--twocol-section .layout__region--second {
  padding-left: 2rem !important;
}

/* S'assurer que les colonnes restent côte à côte */
.layout--twocol-section {
  display: flex !important;
  flex-wrap: nowrap !important;
}

.layout--twocol-section .layout__region {
  flex: 1 !important;
}


/* ========================================
   FOOTER 4 COLONNES - TEXTE BLANC PUR
   ======================================== */

.site-footer {
  background-color: #1a1a1a;
  color: #ffffff; /* BLANC PUR au lieu de #f8f9fa */
  padding: 1.5rem 0 2rem; /* Réduit de 3rem à 1.5rem */
  margin-top: 0;
  border-top: none;
}

.site-footer .container {
  padding-top: 0.5rem; /* Réduit de 2rem à 0.5rem */
  border-top: none;
}

.footer-col {
  margin-bottom: 2rem;
}

.footer-col h2,
.footer-col .block-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: #ffffff; /* BLANC PUR */
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin-bottom: 0.75rem;
}

.footer-col a {
  color: #ffffff; /* BLANC PUR au lieu de #adb5bd */
  text-decoration: none;
  transition: color 0.2s;
  font-size: 0.95rem;
}

.footer-col a:hover {
  color: #e01b24; /* Rouge au survol */
  text-decoration: none;
}

/* Texte normal dans le footer */
.footer-col p,
.footer-col .block-content {
  color: #ffffff; /* BLANC PUR au lieu de #adb5bd */
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Footer bottom (copyright) */
.site-footer-bottom {
  background-color: #0d0d0d;
  color: #ffffff; /* BLANC PUR au lieu de #6c757d */
  padding: 1.5rem 0;
  font-size: 0.875rem;
  border-top: 1px solid #2d2d2d;
}

.site-footer-bottom a {
  color: #ffffff; /* BLANC PUR */
  text-decoration: none;
}

.site-footer-bottom a:hover {
  color: #e01b24; /* Rouge au survol */
}

/* Icônes réseaux sociaux */
.footer-col .social-media-links a,
.footer-col .social-links a {
  color: #ffffff; /* BLANC PUR */
  font-size: 1.25rem;
  margin-right: 1rem;
  display: inline-block;
}

.footer-col .social-media-links a:hover,
.footer-col .social-links a:hover {
  color: #e01b24; /* Rouge au survol */
}

/* Responsive */
@media (max-width: 768px) {
  .site-footer {
    padding: 2rem 0 1rem;
  }
  
  .footer-col {
    margin-bottom: 2rem;
  }
}




/*****************************************************
****   icones svg footer contact  ********************
*****************************************************/


.footer-contact-info .contact-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.footer-contact-info .contact-item .icon {
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  margin-right: 0.75rem;
  margin-top: 0.25rem;
  color: #ffffff;
}

.footer-contact-info a {
  color: #ffffff;
}

.footer-contact-info a:hover {
  color: #e01b24;
}

.footer-col svg,
.footer-contact-info svg {
  width: 1rem !important;
  height: 1rem !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 0.5rem !important;
}

/* Aligner les items de contact */
.footer-col p {
  display: flex;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}



/* Solution de secours simple pour le responsive sans module */
@media (max-width: 768px) {
  .layout--twocol-section { display: block !important; }
  .layout__region { width: 100% !important; max-width: 100% !important; }
}




/* ============================================
   LAYOUT BUILDER STYLES
   ============================================ */

/* Responsive 2 colonnes */
.responsive-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  padding: 40px 20px;
}

@media (max-width: 768px) {
  .responsive-2col {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px 15px;
  }
}

/* ========================================
   AJUSTEMENT TYPOGRAPHIQUE RAFFINÉ
   ======================================== */

/* Réduction de la taille du texte pour un rendu plus élégant */
.block-inline-blockbasic .field--name-body,
.block-inline-blockbasic .field--name-body p,
.layout__region--content p {
  font-size: 1.05rem !important;
  line-height: 1.65 !important;
}

/* Si c'est dans un contenu de page normale */
.node__content .field--name-body,
.node__content .field--name-body p {
  font-size: 1.05rem !important;
  line-height: 1.65 !important;
}

/* Ajuster la taille générale du body (navigation, menus, etc.) */
body {
  font-size: 0.95rem;
}

/* Réduire les titres pour plus de sobriété */
.node--view-mode-full h1,
.block-inline-blockbasic h1 {
  font-size: 2.2rem !important;
}

.node--view-mode-full h2,
.block-inline-blockbasic h2 {
  font-size: 1.8rem !important;
}

.node--view-mode-full h3,
.block-inline-blockbasic h3 {
  font-size: 1.5rem !important;
}

.node--view-mode-full h4,
.block-inline-blockbasic h4 {
  font-size: 1.3rem !important;
}

.node--view-mode-full h5,
.block-inline-blockbasic h5 {
  font-size: 1.15rem !important;
}

/* Cacher le logo dans le menu mobile/offcanvas */
.offcanvas-header .site-logo {
  display: none !important;
}





/* Supprimer complètement le header du menu offcanvas */
.offcanvas-header {
  display: none !important;
}

/* Remonter le contenu du menu pour qu'il commence en haut */
.offcanvas-body {
  padding-top: 1rem !important;
}






/* Forcer les images dans Layout Builder à respecter la largeur de leur 
colonne */
.layout__region img {
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
}

/* S'assurer que les colonnes respectent leurs proportions */
.layout--twocol-section--67-33 .layout__region--second {
  flex: 0 0 33.333% !important;
  max-width: 33.333% !important;
}

.layout--twocol-section--25-75 .layout__region--first {
  flex: 0 0 25% !important;
  max-width: 25% !important;
}

/* Forcer les champs media à ne pas déborder */
.layout__region .field--name-field-media-image,
.layout__region .field__item {
  max-width: 100% !important;
  overflow: hidden;
}




/* Réduire l'écart entre les colonnes */

.layout--twocol-section {
  gap: 1rem !important;
  padding: 0 !important;  /* ← AJOUTEZ CETTE LIGNE pour supprimer le 
padding de la section */
}
/* Réduire le padding des colonnes (zones rouges) */
.layout--twocol-section > .layout__region {
  padding: 0rem !important;
}
/* Réduire le padding des blocs (zones vertes) */
.layout--twocol-section .block {
  padding: 0rem !important;
  margin-bottom: 1rem !important;
}
/* Enlever le fond gris et le padding de l'image */
.field--name-field-media-image {
  background: transparent !important;
  padding: 0 !important;
}
.field--name-field-media-image .field__item {
  padding: 0 !important;
  margin: 0 !important;
}






/* ========================================
   MENU - RÉDUIRE ESPACEMENT VERTICAL NIVEAU 2
   ======================================== */

/* Réduire le padding vertical des liens de niveau 2 */
.region-header ul ul a,
header ul ul a {
  padding-top: 0.4rem !important;
  padding-bottom: 0.4rem !important;
}

/* Optionnel : réduire aussi l'espacement du conteneur */
.region-header ul ul {
  padding-top: 0.3rem !important;
  padding-bottom: 0.3rem !important;
}

/* MENU OFFCANVAS - Liens niveau 2 */
.block-menu--stacked .main-nav__submenu .main-nav__link, 
.block-menu--stacked .main-nav__submenu-nested .main-nav__link, 
.region-navigation .main-nav__submenu .main-nav__link, 
.region-navigation .main-nav__submenu-nested .main-nav__link {
  padding: 0.2rem 0 !important;
}







/* ========================================
   MENU OFFCANVAS - RÉDUIRE ESPACE SOUS TITRE NIVEAU 1
   ======================================== */

/* Réduire l'espace sous les titres de niveau 1 (Le domaine, Nos vins) */
.offcanvas .main-nav__item--has-submenu > .main-nav__link,
.region-navigation .main-nav__item--has-submenu > .main-nav__link,
.block-menu--stacked .main-nav__item--has-submenu > .main-nav__link {
  padding-bottom: 0.3rem !important;
}

/* Optionnel : ajuster aussi l'espace au-dessus si besoin */
.offcanvas .main-nav__item--has-submenu > .main-nav__link,
.region-navigation .main-nav__item--has-submenu > .main-nav__link,
.block-menu--stacked .main-nav__item--has-submenu > .main-nav__link {
  padding-top: 0.5rem !important;
}

/* Réduire aussi le padding-top du conteneur sous-menu pour plus de proximité */
.offcanvas .main-nav__submenu,
.region-navigation .main-nav__submenu,
.block-menu--stacked .main-nav__submenu {
  padding-top: 0.2rem !important;
}


/* Corriger le hover du bouton outline-primary */
.node--view-mode-full .node__content .field--name-body a.btn.btn-outline-primary:hover,
.node--view-mode-full .node__content .field--name-body a.btn.btn-outline-primary:focus {
  color: #fff !important;
  background-color: #e01b24 !important;
  border-color: #e01b24 !important;
}




/***********  Styles Layout Builder Styles   ****************/
/* Style pour espacer le bas d'un bloc */
div.block.lbs-margin-bottom-medium {
  margin-bottom: 80px !important;
}

.lbs-separator-bottom {
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.lbs-highlight-box {
  background-color: #f9f9f9;
  border-left: 4px solid #7a0000; /* Le rouge de votre domaine ? */
  padding: 20px;
  margin: 20px 0;
  border-radius: 0 4px 4px 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}


/*******   Écartement du caddie et des drapeaux   *****************************/
/* On cible le bloc panier par son ID pour être certain de gagner la priorité */
#block-terrassonbelgrade-shopping-cart {
    margin-right: 40px !important; /* Espace entre le panier et les drapeaux */
    margin-left: 20px !important;  /* Espace entre "Se connecter" et le panier */
    display: flex !important;
    align-items: center;
}




/* Masque le label "Contenance" dans le formulaire de variation */
/* 1. Masque spécifiquement le titre "Contenance" */
#edit-purchased-entity-0-attributes-attribute-contenance--wrapper legend {
    display: none !important;
}

/* 2. Supprime la bordure et le padding du groupe pour que ce soit plus propre */
#edit-purchased-entity-0-attributes-attribute-contenance--wrapper {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Aligne les options (Bouteille / Magnum) horizontalement si vous le souhaitez */
#edit-purchased-entity-0-attributes-attribute-contenance {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

/* 1. Masquer la légende "Contenance" */
#edit-purchased-entity-0-attributes-attribute-contenance--wrapper legend {
    display: none !important;
}

/* 2. Supprimer les bordures du groupe et forcer l'empilement */
#edit-purchased-entity-0-attributes-attribute-contenance--wrapper {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. Ajuster le conteneur des boutons (correction du tronquage) */
#edit-purchased-entity-0-attributes-attribute-contenance {
    display: block !important;
    padding-left: 25px !important; /* On pousse tout le bloc vers la droite */
    margin-top: 10px !important;
}

/* 4. Gérer chaque ligne (Bouteille / Magnum) */
#edit-purchased-entity-0-attributes-attribute-contenance .form-check {
    display: block !important;
    position: relative !important;
    margin-bottom: 12px !important;
    min-height: 1.5rem;
}

/* 5. Positionner le rond sans qu'il sorte du cadre */
#edit-purchased-entity-0-attributes-attribute-contenance .form-check-input {
    position: absolute !important;
    margin-top: 0.3rem;
    margin-left: -1.5rem !important; /* Positionne le rond dans le padding du parent */
}

/* 6. Styliser le texte à côté du rond */
#edit-purchased-entity-0-attributes-attribute-contenance .form-check-label {
    cursor: pointer;
    font-size: 1rem;
    line-height: 1.5;
    display: inline-block;
}



/***********  formulaire de contact ****************/
/* Limiter la largeur du bloc de contact et le centrer */
#block-terrassonbelgrade-webform {
    max-width: 800px;      /* Largeur maximale confortable pour un 
formulaire */
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 40px;
    background-color: #ffffff;
    border: 1px solid #eee;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Un léger relief pour 
l'élégance */
    margin-top: 40px;
    margin-bottom: 60px;
}

/* Ajuster le titre pour qu'il soit bien centré */
#block-terrassonbelgrade-webform h2 {
    text-align: center;
    margin-bottom: 30px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Améliorer l'apparence des champs */
#block-terrassonbelgrade-webform .form-control {
    border-radius: 0; /* Style souvent plus élégant pour les domaines 
viticoles */
    border: 1px solid #ccc;
}

/* Centrer le bouton de soumission s'il n'est pas déjà pleine largeur */
#block-terrassonbelgrade-webform .form-actions {
    text-align: center;
}

/* Désactiver les majuscules forcées sur le titre du bloc Webform */
#block-terrassonbelgrade-webform h2 {
    text-transform: none !important;
    font-variant: normal !important;
    /* Optionnel : ajuster la graisse pour qu'il soit moins imposant */
 /*   font-weight: 600; */
}

/* Si le titre de la page (H1) subit le même sort et que vous voulez le 
changer aussi */
h1.page-title {
    text-transform: none !important;
}



/*======================================================================
=============     réglage du panier rouge en haut à droite     =========
=======================================================================*/

/* 1. Recaler le bloc panier pour qu'il ne sorte pas à droite */
#cart-dropdown {
    right: 0 !important;      /* Aligne le bord droit du panier sur le 
bouton */
    left: auto !important;     /* Désactive le positionnement par la 
gauche */
    min-width: 350px;          /* S'assure qu'il est assez large pour 
lire le texte */
    max-width: 95vw;           /* Empêche de dépasser sur mobile */
    padding: 15px;
}

/* 2. S'assurer que le tableau à l'intérieur ne déborde pas */
.cart-block__summary table {
    width: 100% !important;
    table-layout: auto;
}

/* 3. Ajuster la colonne du prix pour qu'elle soit bien lisible à droite */
.views-field-total-price__number {
    text-align: right;
    padding-right: 10px !important;
    white-space: nowrap; /* Empêche le prix de revenir à la ligne */
}

/* 1. On définit la largeur pour le grand écran */
.cart-block__dropdown {
    width: 600px !important; 
    max-width: 95vw; /* Sécurité pour ne jamais dépasser l'écran */
    min-width: auto !important; /* On libère le verrou du min-width */
}

/* 2. On s'assure que le thème peut toujours CACHER le panier */
/* Belgrade utilise souvent une classe 'show' ou un style inline pour l'ouvrir */
#cart-dropdown:not(.show) {
    /* On ne force PAS le display ici pour laisser le thème gérer l'ouverture */
}

/* 3. Ajustements spécifiques pour Mobile */
@media (max-width: 991px) {
    .cart-block__dropdown {
        /* Sur mobile, on réduit la largeur pour que ça tienne */
        width: 90vw !important;
        min-width: 0 !important; 
        right: 5vw !important;
        left: auto !important;
    }
    
    /* On réduit aussi la largeur forcée du titre pour que le tableau respire */
    .views-field-title {
        min-width: 120px !important;
    }
}

/* Optimiser l'affichage du tableau interne */
.cart-block__dropdown-inner table {
    width: 100%;
}

/* Empêcher le retour à la ligne pour le prix et la quantité */
.views-field-quantity, 
.views-field-total-price__number {
    white-space: nowrap;
    vertical-align: middle;
}

/* Donner plus d'espace au titre pour qu'il reste sur une seule ligne */
.views-field-title {
    min-width: 250px;
    padding-left: 10px;
    padding-right: 10px;
}

/* On cible les cellules du tableau pour forcer l'alignement */

/* 1. Colonne Quantité : on serre à gauche */
td.views-field-quantity {
    width: 60px !important;
    text-align: left !important;
    white-space: nowrap !important;
}

/* 2. Colonne Titre : ON FORCE L'ALIGNEMENT À GAUCHE ET L'EXTENSION */
td.views-field-title {
    width: auto !important;     /* Laisse la colonne prendre l'espace */
    text-align: left !important;  /* FORCE LE TEXTE À GAUCHE */
    display: table-cell !important;
    padding-left: 15px !important;
}

/* 3. Colonne Prix : on serre à droite */
td.views-field-total-price__number {
    width: 100px !important;
    text-align: right !important;
    white-space: nowrap !important;
}

/* On s'assure que le conteneur interne n'est pas en Flexbox centré */
.cart-block__summary .view-content, 
.cart-block__summary table {
    display: table !important;
    width: 100% !important;
}

/* Cibler précisément le bouton de validation dans le panier dropdown */
#cart-dropdown .cart-block__actions a.btn-outline-white {
    background-color: #ffffff !important; /* Fond blanc */
    color: #e01b24 !important;           /* Texte rouge */
    border: 2px solid #ffffff !important; /* Bordure blanche pour un look épuré */
/*    font-weight: bold !important;
    text-transform: uppercase;
*/    opacity: 1 !important;               /* S'assurer qu'il n'est pas semi-transparent */
    display: block;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Ombre légère au repos */
}

/* Effet au survol pour garder une interaction élégante */
#cart-dropdown .cart-block__actions a.btn-outline-white:hover {
    background-color: #f8f8f8 !important; /* Blanc cassé au survol */
    color: #b0151c !important;           /* Rouge légèrement plus foncé */
    border-color: #f8f8f8 !important;
    text-decoration: none;
    /* Le décalage vers le haut */
    transform: translateY(-3px) !important; 
    /* L'ombre qui s'accentue pour simuler l'élévation */
    box-shadow: 0 6px 15px rgba(0,0,0,0.3) !important;
}

/* Effet au clic (Active) pour simuler l'enfoncement */
#cart-dropdown .cart-block__actions a.btn-outline-white:active {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}


/*========================================================================
==========     message d'ajout au panier        ==========================
========================================================================*/

/* Personnalisation de l'alerte d'ajout au panier */
div[data-drupal-messages] .alert-success {
    /* Le fond rouge très transparent (5% d'opacité) */
    background-color: rgba(224, 27, 36, 0.05) !important; 
    
    /* Votre rouge spécifique pour la bordure */
    border: 2px solid #e01b24 !important;
    border-left: 8px solid #e01b24 !important; /* Bordure gauche plus épaisse pour le style */
    
    /* Texte en noir normal */
    color: #000000 !important;
    
    border-radius: 4px; /* Un léger arrondi pour la douceur */
}

/* On s'assure que les liens dans le message utilisent votre rouge */
div[data-drupal-messages] .alert-success a {
    color: #e01b24 !important;
    font-weight: bold;
    text-decoration: underline;
}

/* Le bouton de fermeture reste discret */
div[data-drupal-messages] .alert-success .btn-close {
    opacity: 0.5;
}




/*************************************************************************
************                    panier      ******************************
*************************************************************************/

/* 1. Bouton principal : Passer la commande */
#edit-checkout {
    background-color: #e01b24 !important;
    border-color: #e01b24 !important;
    color: #ffffff !important;
    font-weight: bold;
    padding: 10px 20px;
    transition: background-color 0.3s ease;
}

#edit-checkout:hover {
    background-color: #b3151b !important; /* Un rouge un peu plus sombre au survol */
    border-color: #b3151b !important;
}

/* 2. Bouton secondaire : Mettre à jour le panier */
/*    Ajustement du bouton "Mettre à jour" (UNIQUEMENT sur la page panier)  */
.cart-form input[value="Mettre à jour le panier"] {
    background-color: transparent !important;
    border: 1px solid #e01b24 !important; /* Gris neutre */
    color: #e01b24 !important;
    font-weight: normal;
    font-size: 0.9em; /* Légèrement plus petit */
}

.cart-form input[value="Mettre à jour le panier"]:hover {
    background-color: #eeeeee !important; /* Léger fond gris au survol */
    color: #333333 !important;
    border-color: #333333 !important;
}

/* 3. Gestion Responsive des boutons du panier */

/* On cible le conteneur des deux boutons */
#edit-actions.form-actions {
    display: flex;
    flex-wrap: wrap; /* Permet le retour à la ligne */
    gap: 15px;       /* Ajoute un espace entre les boutons */
    justify-content: flex-end; /* Les garde à droite sur grand écran */
}

@media (max-width: 768px) {
    #edit-actions.form-actions {
        flex-direction: column; /* Force l'affichage en colonne (2 lignes) */
        align-items: stretch;   /* Étire les boutons sur toute la largeur */
    }

    /* On s'assure que chaque bouton prend 100% de la largeur sur mobile */
    #edit-actions.form-actions input {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
}


/**************************************************************************
*************   Produit    ************************************************
**************************************************************************/

/* 1. Centrer tout le contenu de la colonne (Image, Titre, Prix, Bouton) */
.view-boutiquevin .views-col {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 15px;
}

/* 2. Cacher le champ Titre et les labels inutiles du formulaire */
[id^="edit-title-wrapper"], 
.commerce-order-item-variation-cart-form-form label {
    display: none !important;
}

/* 3. Ajuster le formulaire d'ajout au panier */
.commerce-order-item-variation-cart-form-form {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre le bouton et la quantité */
    width: 100%;
}

/* 4. Style du sélecteur de quantité */
.quantity-input-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.quantity-input-wrapper input {
    width: 60px !important;
    margin: 0 5px;
    text-align: center;
}

/* 6. Harmoniser les marges entre les champs de la vue */
.views-field {
    margin-bottom: 8px;
    width: 100%;
}

/* Agrandir la Gamme (ex: Oxymore) */
.views-field-field-gamme {
    font-size: 1.3rem; /* Plus grand que le texte standard */
    font-weight: 700;  /* Plus gras */
    letter-spacing: 1px; /* Un peu d'espace entre les lettres */
    text-decoration: none;
}

/* Agrandir le Millésime (ex: n°23 ou 2021) */
.views-field-field-millesime {
    font-size: 1.2rem;
    font-weight: 500;
    margin-top: -5px; /* Rapproche le millésime de la gamme */
}




/********************************************************************
***********   Checkout   ********************************************
********************************************************************/

/* On cible le formulaire de checkout pour forcer l'alignement */
form.commerce-checkout-flow-multistep-default .layout-checkout-form {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    justify-content: space-between !important;
    width: 100% !important;
}

/* On force chaque bloc (Déjà client, Invité, Nouveau) à se comporter en colonne */
form.commerce-checkout-flow-multistep-default .checkout-pane-login fieldset.form-wrapper__login-option {
    flex: 1 1 30% !important; /* Occupe environ un tiers de la largeur */
    min-width: 280px !important;
    margin: 0 !important;
    display: block !important;
    border: 1px solid #ddd !important;
    padding: 20px !important;
}

/* Pour être certain que le conteneur des fieldsets n'étouffe pas les colonnes */
#edit-login {
    display: flex !important;
    gap: 20px !important;
    width: 100% !important;
}

/* Conteneur principal des 3 choix */
#edit-login {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 25px !important;
    align-items: stretch !important;
    margin-top: 30px !important;
}

/* 1. Nouveau Client (à droite) */
#edit-login-register {
    order: 3 !important;
    flex: 1 !important;
}

/* 2. Déjà client (au milieu) */
#edit-login-returning-customer {
    order: 2 !important;
    flex: 1 !important;
}

/* 3. Sans compte (à gauche) */
#edit-login-guest {
    order: 1 !important;
    flex: 1 !important;
}

/* Style des cartes pour Monsieur */
.path-checkout-login .form-wrapper__login-option {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    padding: 30px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    transition: transform 0.2s ease;
}

.path-checkout-login .form-wrapper__login-option:hover {
    border-color: #e01b24 !important;
    transform: translateY(-5px);
}

/* On s'assure que les titres sont centrés */
.path-checkout-login .fieldset-legend {
    text-align: center !important;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 15px;
    margin-bottom: 20px;
    font-size: 1.2rem;
    color: #272727;
}

/**************   Masquage des champs de nouveau client      **********************/


/* 2. On prépare le bloc pour qu'il soit cliquable et propre */
#edit-login-register {
    cursor: pointer;
    min-height: 150px; /* Pour garder une belle forme de colonne */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Ajustement de la légende pour qu'elle soit bien centrée */
#edit-login-register legend {
    margin-bottom: 2rem !important;
}

/* 2. Gestion du bloc "Déjà client" (Bouton + Lien) */
/* On force le bouton "Se connecter" à être seul sur sa ligne */
#edit-login-returning-customer-submit {
    display: block !important;
    margin: 0 auto 15px auto !important; /* Centre et ajoute de l'espace dessous */
}

/* On force le lien "Mot de passe oublié" à passer à la ligne */
#edit-login-returning-customer-forgot-password {
    display: block !important;
    width: 100%;
    clear: both;
}

/* On cible spécifiquement les wrappers de champs Drupal */
.path-checkout-login .fieldset-wrapper {
    display: grid !important;
    place-items: center !important; /* Centre tout horizontalement et verticalement */
    text-align: center !important;
    width: 100% !important;
}

/* On force les groupes de saisie (input + label) à ne pas dépasser et à se centrer */
.path-checkout-login .js-form-item {
    width: 100% !important;
    max-width: 300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}

/* Centrage du bouton et du lien "Mot de passe oublié" */
#edit-login-returning-customer-submit, 
#edit-login-returning-customer-forgot-password {
    display: block !important;
    margin: 15px auto !important;
    width: fit-content !important;
}

/* On s'assure que le texte explicatif est aussi centré */
.path-checkout-login .fieldset-wrapper p {
    text-align: center !important;
    margin: 0 auto 15px auto !important;
}

/************************* Responsive de la page de checkout **************************/

@media (max-width: 991px) {
    /* 1. On désactive totalement le Flexbox pour le mobile */
    #edit-login {
        display: block !important; 
        width: 100% !important;
        float: none !important;
    }

    /* 2. On force chaque bloc à redevenir un élément indépendant */
    .path-checkout-login .form-wrapper__login-option {
        display: table !important; /* "Table" force le bloc à s'ajuster strictement à son contenu */
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin-bottom: 25px !important;
        padding: 20px !important;
        float: none !important;
        clear: both !important;
    }

    /* 3. L'ORDRE : Puisque nous sommes en "display: block", l'order ne fonctionne plus. 
       On utilise alors une astuce de Flexbox uniquement sur le conteneur parent 
       mais en neutralisant l'étirement. */
    
    #edit-login {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* On force la hauteur auto sur chaque enfant du flex */
    #edit-login-guest, 
    #edit-login-returning-customer, 
    #edit-login-register {
        flex: 0 0 auto !important; /* Interdit toute croissance ou rétrécissement */
        display: block !important;
        height: auto !important;
    }

    /* 4. Réglages spécifiques par bloc */
    #edit-login-guest {
        order: 1 !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    #edit-login-returning-customer {
        order: 2 !important;
    }

    #edit-login-register {
        order: 3 !important;
        margin-bottom: 80px !important; /* Sécurité footer */
    }

    /* 5. Nettoyage final des conteneurs internes Drupal */
    .path-checkout-login .fieldset-wrapper {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
    }
}

/***************** -- Optimisation de la fenêtre volante sur Mobile -- ***********************/
/* On cible la fenêtre volante par ses classes spécifiques Drupal/jQuery UI */
@media screen and (max-width: 800px) {
    .ui-dialog.ui-widget-content {
        /* On force la largeur à s'adapter à l'écran du téléphone */
        width: 96% !important; 
        max-width: 96vw !important;
        
        /* On recentre la fenêtre horizontalement */
        left: 2% !important; 
        
        /* On la positionne en haut pour qu'elle soit visible sans scroller */
        top: 20px !important;
        position: fixed !important;
        height: auto !important;
    }

    /* On s'assure que le contenu (image + texte) ne dépasse pas */
    .ui-dialog .ui-dialog-content {
        height: auto !important;
        max-height: 80vh !important; /* On garde de la place pour voir le fond */
        overflow-y: auto !important; /* On permet de scroller à l'intérieur de la fiche */
    }

/* --- Réactivation d'une croix unique et visible --- */

/* 1. On prépare le bouton lui-même */
.ui-dialog-titlebar-close {
    display: block !important;
    visibility: visible !important;
    background-color: #000000 !important; /* Fond Noir pur */
    width: 35px !important;
    height: 35px !important;
    border-radius: 50% !important;
    border: 2px solid #ffffff !important;
    position: absolute !important;
    right: 10px !important;
    top: 5px !important;
    cursor: pointer !important;
    padding: 0 !important;
    z-index: 10001 !important;
}

/* 2. On supprime TOUT ce qui pourrait faire doublon (icônes natives) */
.ui-dialog-titlebar-close .ui-icon,
.ui-dialog-titlebar-close::before {
    display: none !important;
    content: none !important;
}

/* 3. On injecte l'unique croix avec AFTER */
.ui-dialog-titlebar-close::after {
    content: "×" !important; /* Symbole de multiplication */
    display: block !important;
    color: #ffffff !important;
    font-size: 28px !important;
    line-height: 31px !important; /* Ajuste le centrage vertical */
    text-align: center !important;
    font-weight: bold !important;
    visibility: visible !important;
}

/* --- Suppression du mot "Titre" pour tous les produits --- */

/* 1. On cible la classe générique .ui-dialog-title */
.ui-dialog-title {
    font-size: 0 !important;      /* Rend le texte invisible */
    color: transparent !important; /* Par sécurité supplémentaire */
    line-height: 0 !important;
    display: none !important;     /* Supprime l'espace occupé par le texte */
}

/* 2. On nettoie la barre de titre qui devient vide */
.ui-dialog-titlebar {
    background: transparent !important;
    border: none !important;
    min-height: 40px !important; /* On garde juste la place pour la croix */
    padding: 0 !important;
}

/* 3. On repositionne la croix noire pour qu'elle soit toujours accessible */
.ui-dialog-titlebar-close {
    background-color: #000000 !important;
    opacity: 1 !important;
    top: 5px !important;
    right: 10px !important;
}

}

/* Optionnel : cacher le texte du bouton s'il y en a un caché par Drupal */
.ui-button-icon-only .ui-button-icon {
    display: none !important;
}

/*****************************************************************************************/
/*********    Style pour le bloc "Encadré Mise en Avant" de Layout Builder Styles ********/
/*****************************************************************************************/

.lbs-highlight-box {
  position: relative;
  background-color: #ffcccc; /* Un rouge clair pour le fond */
  border: 1px solid #f0f0f0; /* Bordure grise presque invisible */
  border-left: 6px solid #b30000; /* Accentuation rouge */
  padding: 30px 40px;
  margin: 40px 0;
  box-shadow: 15px 15px 0px -2px #fdf2f2; /* Ombre décalée "Design" au lieu de floue */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Petit effet de dynamisme au survol */
.lbs-highlight-box:hover {
  box-shadow: 8px 8px 0px -2px #fdf2f2;
  transform: translate(7px, 7px);
}

/*****************************************************************************************/
/* Bouton retour boutique primeur
/*****************************************************************************************/

.primeur-return-link a {
  background-color: #e01b24 !important;
  border-color: #e01b24 !important;
  color: #ffffff !important;
}
.primeur-return-link a:hover {
  background-color: #c0161e !important;
  border-color: #c0161e !important;
  color: #ffffff !important;
}