/* /////////////////////////////////////////////////////////////////////////// */
/*  0.IMPORT TYPO
/*  1.ARTICLES
/*      LARGEUR COLONNE ARTICLE (class "narrow-desktop")
/*      TITRE ARTICLE
/*      NOM DE L'AUTEUR (dans les articles & dans les card)
/*      TERME DE TAXO (dans les articles & dans les card)
/*      DATE
/*      COULEURS BACKGROUND
/*      IMAGES DES BODY ARTICLE
/*  2.CARDS
/*      COULEUR BACKGROUND / DEGRADE (class "gradient-card-view")
/*      PUCE (Suppression des puces)
/*      SURVOLE IMAGES
/*      LIENS
/*  3.ACCUEIL CATEGORIES AVEC LIGNES
/*      TITRE
/*      BOUTONS ACCUEIL ABONNEMENT WEB & MAGAZINE
/*  4.PAGE TAXONOMIE
/*  5.FOOTER
/*  6.VIEW ABONNEMENT
/*      FOND
/*      BOUTON
/*      TEXTE EFFET
/*  7.FORMULAIRE DE CONTACT / LOGIN / REGISTER / REINITIALISATION PASSWORD
/*  8.MENU ONGLET USER
/*    8.1 MENU PARAMÈTRES UTILISATEUR
/*    8.2 ONGLET CARNET D'ADRESSES
/*    8.3 ONGLET FORMULAIRE AJOUT ADRESSE
/*    8.4 ONGLET PROFIL UTILISATEUR
/*    8.5 ONGLET PROFIL - TABLEAU DES COMMANDES -
/*    8.6 ONGLET MODES DE PAIEMENT
/*  9.TUNNEL D'ACHAT.PAGE DE CONFIRMATION DE COMMANDE
/*    9.1 PANIER
/*    9.2 CONFIRMATION DE COMMANDE
/*  10.BLOCK PAYWALL
/*  11.IMAGE GALERIE GLIGHTBOX
/*  12.COOKIE KLARO
/*  13.PAGE GARDIEN
/*  14.ABONNEMENT AU MAGAZINE
/*  15.TEXTE FRAIS DE LIVRAISON
/*  16.TEXTE PRIX
/*  17.TUNNEL DE PAIEMENT 
/*      GRILLE DE COMMANDE (CHECKOUT)
/* /////////////////////////////////////////////////////////////////////////// */
@font-face {
  font-family: 'Fraunces Variable';
  src: url('../fonts/fraunces-variablefont.woff2') format('woff2');
  font-weight: 100 900; 
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces Variable';
  src: url('../fonts/fraunces-italic-variablefont.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Variable';
  src: url('../fonts/notosans-variablefont.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Variable';
  src: url('../fonts/notosans-italic-variablefont.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
/* 2. Application globale via les variables Bootstrap 5 */
:root {
  --bs-body-font-family: 'Noto Sans Variable', sans-serif; /* FONT BODY */
  --bs-headings-font-family: 'Noto Sans', sans-serif;      /* FONT TITRES */
}
p {                                                        /* FONT PARAGRAPHE */
  font-family: 'Noto Sans Variable', sans-serif; 
  font-size: 1rem;
  font-weight: 250;
  line-height: 1.6;                                       /* INTERLIGNAGE */
  margin-bottom: 0.7rem;                                  /* INTERBLOCS */
}
h1, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {        /* FONT TITRE */
  font-family: var(--bs-headings-font-family);
  font-weight: 500;                                       /* EPAISSEUR */
}
strong, b {                                               /* REGLAGE GRAS */
  font-size: 110%;
  font-variation-settings: 'wght' 900, 'wdth' 100;        /* EPAISSEUR 100 a 900, LARGEUR 62.5 a 100 */
}
h1, .h1 {
  font-size: 2.25rem;
  margin-bottom: 1.25rem;
}
h2, .h2 {
  font-family:'Fraunces Variable';                                    /* REGLAGES FONT VARIABLE: */
  font-size: 2.25rem;                                                 /* opsz OPTICAL SIZE 9 A 144 */
  font-variation-settings: 'opsz' 14, 'wght' 650, 'SOFT' 0, 'WONK' 1; /* wght EPAISSEUR 100 A 900 */
  margin-bottom: 1rem;                                                /* SOFT FINESSE 0 A 100 */
}                                                                     /* WONK INCLINAISON BIAIS 0 A 1 */
h3, .h3 {
  font-size: 2rem;
  margin-bottom: 1.25rem;
  font-variation-settings: 'wght' 900, 'wdth' 100;        /* EPAISSEUR 100 a 900, LARGEUR 62.5 a 100 */
}
h4, .h4 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
}
h5, .h5 {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}
h6, .h6 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05rem;
}
  /* ///////////////////////////////////////////////////// */
 /* /////////////////////// 1.ARTICLE /////////////////// */
/* ///////////////////////////////////////////////////// */

/* ///////////////// LARGEUR ARTICLE //////////////// */  /* SECTION LAYOUT BUILDER AVEC "narrow-desktop" en class css */
.narrow-desktop {                                         /* Mobile par défaut = full largeur */
  width: 100%;                                            /* LARGEUR */
  margin: 0 auto;                                         /* MARGE */
  padding: 0 1rem;                                        /* REMBOURAGE */
}
/* Tablette (>= 768px) */
@media (min-width: 768px)                                 /* LIMITE DE TAILLE TABLETTE */
{
  .narrow-desktop {
    max-width: 700px;                                     /* LARGEUR MAX TABLETTE */
  }
}
/* Desktop (>= 1200px) */
@media (min-width: 1200px){                               /* LIMITE DE TAILLE ORDINATEUR */
  .narrow-desktop {        
    max-width: 800px;                                     /* LARGEUR MAX ORDINATEUR */
  }
}
/* /////////////////// TITRE ARTICLE /////////////////// */
.field--name-title {
  font-family: 'Fraunces Variable', serif;               /* POLICE */
  font-size: clamp(3rem, 8vw, 4rem);                     /* TAILLE FLUIDE, DIMINUE LA TAILLE SUR LES PETITS ECRANS */
  font-variation-settings: 'opsz' 90, 'wght' 800, 'SOFT' 10, 'WONK' 1; /* REGLAGES EPAISSEUR, FINESSE, ETC */
}
/* /////////////////// NOM DE L'AUTEUR ///////////////// */
.post-author a, 
.field--name-field-name a,
.field__item a{
  color: #795410;                                      /* COULEUR DE L'AUTEUR */
  text-decoration: none;                                 /* SANS SOUSLIGNAGE */
}
.post-author a:hover,                                    /* SURVOLE */
.field--name-field-name a:hover,
.field__item a:hover {
  color: #ffcc00;                                      /* COULEUR DE L'AUTEUR SURVOLE */
  text-decoration: none;                                 /* SANS SOUSLIGNAGE */
}
/* ///////////// LIENS TAXONOMIE CATEGORIES ///////////// */
.post-category a, 
.field--name-field-categorie-editoriale a { 
  color: #916412 !important;                          /* COULEUR */
  background: #11111100;                              /* COULEUR BACKGROUND */
  padding: 0.25rem;                                      /* REMPLISSAGE INTERIEUR */
  text-decoration: none !important;                     /* SANS SOUSLIGNAGE */
  font-weight: 600;                                     /* EPAISSEUR */
  text-transform: uppercase;                            /* MAJUSCULE */
  letter-spacing: 0.5px;                                /* ESPACEMENT */
}
.post-category a:hover,                                 /* SURVOLE */
.field--name-field-categorie-editoriale a:hover{
  color: #ffcc00 !important;                          /* COULEUR */
}
/* //////////////////////// DATE ////////////////////// */
.field--name-created .datetime {
  color: #ffffffcc;                                   /* COULEUR DATE */
  text-decoration: none;                                /* SANS SOUSLIGNAGE */
}
/* ///////////////// COULEURS BACKGROUND ////////////// */
body {
  background-color: #111111;                          /* COULEUR BACKGROUND */
  color: #ffffff;                                     /* COULEUR TEXTE */
}
.text-muted{
  color: #ffffff;                                     /* COULEUR ????????????? */
}
/*///////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////// Rend fluides les images de tous vos champs de texte dans les articles ///////////////// */
/*/////////////////////////////////////////////////////////////////////////////////////////////////////// */
.node--type-article .field--name-body img,
.node--type-article .field--name-field-body2 img,
.node--type-article .field--name-field-body3 img,
.node--type-article .field--name-field-body4 img {
  max-width: 100% !important;
  height: auto !important;
}
  /* ///////////////////////////////////////////////////// */
 /* ////////////////////// 2.CARDS ////////////////////// */
/* ///////////////////////////////////////////////////// */
.my-card-bg {
  background-color: #0e0e0e;                           /* COULEUR BACKGROUND */
}
.gradient-card-view .my-card-bg {                        /* CLASS AVEC DEGRADE A ACTIVER DANS VIEWS CLASS CSS */
  background: linear-gradient(135deg, #0e0e0e 0%, #1d1b19 100%); /* DEGRE DU DEGRADE ET COULEURS */
  /* DEGRADE RADIAL POSSIBLE :
  background: radial-gradient(circle at top left, #6a11cb, #2575fc); */
}
.custom-body-color {
  color: #b8b8b8;                                      /* COULEUR TEXTE BODY */
  padding: 0.5rem;                                       /* ?????? */
}
/* /////// Suppression des puces DATE & AUTEUR ///////// */
.post-meta {
  list-style: none;                                      /* SANS PUCES/SOUSLIGNAGE */
  padding: 0.5rem;                                          /* ?????? */
}
.post-meta li {
  list-style: none;                                      /* SANS PUCES */
}
/* ///////////////// SURVOLE IMAGE CARDS /////////////// */
figure.position-relative img {
  transition: transform 0.4s ease;                        /* TEMPS DE TRANSFORMATION */
}
figure.position-relative:hover img {
  transform: scale(1.1);                                  /* AGRANDISSEMENT */
}
figure figcaption {
  transition: opacity 0.4s ease;                          /* TEMPS */
}
figure:hover figcaption {
  opacity: 1 !important;                                  /* SURVOLE */
}
/* /////////////////// LIENS TITRES //////////////////// */
.post-title a {
  font-size: 1.5rem;
  font-weight: 900;
  /* 1. Active la césure automatique */
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    /* 2. Indique au navigateur comment gérer les débordements */
    overflow-wrap: break-word;
    word-wrap: break-word;
  color: #c9c9c9;                                       /* COULEUR */
  background: #111111;                                  /* COULEUR BACKGROUND */
  padding: 0.5rem;                                        /*  */
  text-decoration: none !important;                       /* SANS SOULIGNAGE */
  display: inline-block;                                  /* ou block si tu veux que chaque lien prenne toute la ligne */
  line-height: 1.1;                                       /* ajustable pour espacement vertical du texte */
}
.post-title a:hover {
  color: #ffffff;                                       /* COULEUR */
  background: #202020;                                  /* COULEUR BACKGROUND*/
  text-decoration: none !important;                       /* SANS SOUSLIGNAGE */
}

/* /////////////////////////////////////////////////////// */
/* //////////// 3.ACCUEIL CATEGORIES AVEC LIGNES ///////// */
/* /////////////////////////////////////////////////////// */
.lined-title {
  text-align: left;
  position: relative;
  margin: 0em 0;
}
.lined-title span {
  position: relative;
  padding: 0 0.5em;
  /* On utilise une variable, avec #202020 comme couleur par défaut */
  background: var(--title-bg, #202020); 
  z-index: 1;
}
.lined-title::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-bottom: 0.1px solid #303030;
  z-index: 0;
}
/* //////////// 3.BOUTONS ACCUEIL ABONNEMENT WEB & MAGAZINE ///////// */
/* Force la couleur blanche sur le texte et la bordure malgré le thème */
.custom-abo-btns .btn-outline-light {
    color: #b6b6b6 !important;
    border-color: #b6b6b6 !important;
    background-color: transparent !important;
    display: inline-block; /* Permet aux boutons d'avoir la taille de leur texte */
    padding: 10px 20px;
}

/* Effet au survol (optionnel) */
.custom-abo-btns .btn-outline-light:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Ajustement mobile : force un comportement flexible */
@media (max-width: 767px) {
    .custom-abo-btns {
        width: 100%;
    }
    .custom-abo-btns .btn {
        width: 90%; /* Un peu moins de 100% pour aérer sur mobile */
        margin-left: auto;
        margin-right: auto;
    }
}
  /* //////////////////////////////////////////////////////// */
 /* //////////// 4.PAGE TAXONOMIE : TITRE REGLAGE ////////// */
/* //////////////////////////////////////////////////////// */
.taxonomie-titre .view-header{
  text-align: center;
  text-transform: uppercase;
}
/* ///////////////////////////////////*/
/* //////////// 5.FOOTER /////////// */
/* //////////////////////////////// */
#block-bootstrap-sub-footer ul.navbar-nav {
    display: flex;            /* Active flexbox */
    flex-direction: row;      /* Aligne horizontalement */
    justify-content: center;  /* CENTRE les éléments au milieu */
    width: 100%;              /* Prend toute la largeur */
    gap: 20px;                /* Espace entre chaque lien */
    padding: 0;
}
#block-bootstrap-sub-footer .nav-link {
  color: #6c757d;           /* Couleur grise par défaut */
  transition: all 0.3s ease;  /* Rend l'effet fluide */
  text-decoration: none;
}
/* L'effet au survol */
#block-bootstrap-sub-footer .nav-link:hover {
  color: #ffcc006e; /* Change la couleur (ex: bleu Bootstrap) */
}
  /* ///////////////////////////////////////////// */
 /* //////////// 6.VIEW ABONNEMENT ////////////// */
/* ///////////////////////////////////////////// */
.view-id-abonnement .view-content .row article {              /* On cible le rectangle interne (l'article) pour créer le pavé coloré */
    background: linear-gradient(180deg, #242121 0%, #33302f 100%);
    color: #ffffff;                                         /* Texte en blanc */
    border-radius: 5px;                                       /* Coins arrondis (rounded-4) */
    padding: 40px 20px;                                       /* Espacement interne (py-5) */
    height: 100%;                                             /* Pour que les 3 pavés fassent la même taille */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.322);            /* Ombre légère */
    border: 1px solid #585555;
    display: flex;
    flex-direction: column;
    text-align: center;                                       /* Aligne tout au centre dans le pavé */
}
.view-id-abonnement .view-content .row article .layout {      /* On s'assure que le contenu prend toute la hauteur */
    height: 100%;
    display: flex;
    flex-direction: column;
}
/* 1. On dit au conteneur du bloc d'abonnement de centrer tout ce qu'il contient */
.view-id-abonnement .view-content .row article .block-field-blockcommerce-productabonnementvariations {  
    margin-top: auto; 
    padding-top: 10px;
    display: flex;         /* On passe en flex */
    flex-direction: column;/* On aligne verticalement */
    align-items: center;    /* On centre horizontalement tout le contenu (formulaire et bouton) */
    width: 100%;           /* On s'assure qu'il prend toute la largeur de l'article */
}

/* 2. On s'assure que le formulaire et les actions ne bloquent pas le centrage */
.view-id-abonnement .view-content .row article .block-field-blockcommerce-productabonnementvariations form,
.view-id-abonnement .view-content .row article .block-field-blockcommerce-productabonnementvariations .form-actions {
    display: contents;     /* "Ignore" ces conteneurs pour que le bouton réponde directement au flex du parent */
}
/* 3. Ton bouton (ajustement mineur) */
.view-id-abonnement .view-content .row article .button--add-to-cart {
    display: block;        /* Force le mode bloc */
    margin: 0 auto;        /* Sécurité supplémentaire */
    background-color: #dfdbda !important;
    color: #242121 !important;
    border: 1px solid #ffffff !important;
    border-radius: 10px;
    padding: 12px 30px;
    font-weight: 900;
    text-transform: uppercase;
    transition: all 0.3s ease;
    cursor: pointer;
}
.view-id-abonnement .view-content .row article .button--add-to-cart:hover {   /* SURVOLE BOUTON */
    background-color: transparent !important;                                 /* BACKGROUND TRANSPARENT */
    color: #ffffff !important;                                              /* COULEUR TEXTE */
    border-color: #ffffff !important;                                       /* CONTOUR */
}
.view-id-abonnement .form-actions {             /* Nettoyage des marges Drupal pour le bouton */
    margin: 0;
    padding: 0;
}
@media (max-width: 767px) {
    .view-id-abonnement .view-content .row article .button--add-to-cart {
        padding: 14px 60px;         /* TAILLE BOUTON MOBILE */
        font-size: 1.1rem;        /* Optionnel : on grossit légèrement le texte pour la lisibilité */
    }
    .view-id-abonnement .view-content .row article {
        padding: 30px 15px;                             
    }
}
/* Style du surlignage pour "1 mois" */
.view-id-abonnement h5 strong {
    background-color: #ffcc00; /* Jaune vif (couleur surligneur) */
    color: #000000;            /* Texte noir pour la lisibilité */
    padding: 3px 6px;          /* Petit espace autour du texte */
    border-radius: 2px;        /* Coins légèrement arrondis */
    font-weight: bold;
    display: inline-block;     /* Pour que le padding s'applique bien */
}
/* Cibler uniquement le strong de GARDIEN pour changer sa couleur*/
.view-id-abonnement ul.row > li:nth-child(4) h5 strong {
    background-color: #00ccff !important; /* couleur */
    color: #ffffff !important;            /* Couleur du texte adaptée (ex: blanc) */
}
   /*/////////////////////////////////////////////////////////////////*/
  /*/// 7.CONTACT FORM / LOGIN / REGISTER / REINITIALISATION PASS ///*/
 /*/////////////////////////////////////////////////////////////////*/
.simplenews-subscriber-account-form,
.user-form,
.view-commerce-user-orders,
.contact-form,
.user-login-form,
.user-register-form,
form#user-pass {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    background: linear-gradient(180deg, #242121 0%, #33302f 100%);
    border-radius: 0.375rem;
    border: 1px solid var(--border-color);
}
 /*/// BOUTON : CONTACT FORM / LOGIN / REGISTER / REINITIALISATION PASS ///*/
/* 1. On définit le style ET l'espacement en même temps pour éviter les conflits */
.contact-form .form-actions input[type="submit"],
.user-login-form .form-actions input[type="submit"],
.user-register-form .form-actions input[type="submit"],
form#user-pass .form-actions input[type="submit"],
.form-actions .form-submit {
    background-color: #726f6e;
    padding: 0.5rem 1.5rem;
    border: none;
    border-radius: 0.375rem;
    transition: all .15s ease-in-out;
}
/* 2. LE HOVER GROUPÉ (Correction de ta virgule ligne 270) */
.contact-form .form-actions input[type="submit"]:hover,
.user-login-form .form-actions input[type="submit"]:hover,
.user-register-form .form-actions input[type="submit"]:hover,
form#user-pass .form-actions input[type="submit"]:hover,
.form-actions .form-submit:hover {
    background-color: #555252;
}
/* On force le conteneur à gérer l'espace entre ses enfants */
.form-actions.js-form-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;   /* Permet d'aller à la ligne si besoin */
    gap: 12px !important;         /* Crée un espace réel entre les boutons qui ne peut pas disparaître */
    margin-top: 20px !important;
    justify-content: flex-start;  /* Aligne à gauche */
}
/* Style des boutons et correction mobile */
.contact-form .form-actions .btn,
.user-login-form .form-actions .btn,
.user-register-form .form-actions .btn,
form#user-pass .form-actions .btn,
.form-actions .form-submit {
    background-color: #726f6e;
    padding: 0.6rem 1.5rem;
    border: none;
    border-radius: 0.375rem;
    transition: all .15s ease-in-out;
    /* On enlève les marges ici car le 'gap' du parent s'en occupe mieux */
    margin: 0 !important;
}
/* LE RESPONSIVE : Force l'empilement sur tous les téléphones (en dessous de 768px pour être sûr) */
@media (max-width: 767px) {
    .form-actions.js-form-wrapper {
        flex-direction: column !important; /* Force l'un au-dessus de l'autre */
        gap: 15px !important;              /* Augmente l'espace sur mobile */
    }
    .form-actions .btn,
    .form-actions .form-submit {
        width: 100% !important;            /* Largeur totale */
        display: block !important;
    }
}

/* ==========================================================================
   8  MENU ONGLET USER 8
   ========================================================================== */

/* ==========================================================================
   8.1 MENU PARAMÈTRES UTILISATEUR (RESPONSIVE)
   ========================================================================== */
/* 0.1/* Masquer l'onglet Carnet d'adresses du premier niveau*/
.user-settings-nav__list a[href*="/address-book"],
.nav-tabs a[href*="/address-book"],
[data-drupal-nav-tabs] a[href*="/address-book"] {
  display: none !important;
}
/* 0.2/*Masquer l'onglet Modes de paiement du premier niveau */
.user-settings-nav__list a[href*="/payment-methods"],
.nav-tabs a[href*="/payment-methods"],
[data-drupal-nav-tabs] a[href*="/payment-methods"] {
  display: none !important;
} 
/* 1. Nettoyage de la liste (on enlève les puces standards) */
.user-settings-nav__list {
  list-style: none !important;
  padding-left: 0;
  margin: 0;
}
/* 2. Alignement et espacement des liens */
.user-settings-nav__list .nav-link {
  display: flex;
  align-items: center;
  padding: 0.6rem 1rem;
  color: #858585; /* Couleur du texte par défaut */
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  border-radius: 4px;
}
/* 3. Style de l'icône (on lui donne de l'espace par rapport au texte) */
.user-settings-nav__icon {
  margin-right: 12px;
  font-size: 1.2rem; /* On grossit légèrement l'icône */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* 4. Effet au survol (Hover) et onglet actif (Active) */
.user-settings-nav__list .nav-link:hover,
.user-settings-nav__list .nav-link.active {
  background-color: #f0f4f8; /* Un léger fond bleu/gris clair */
  color: #8d8d8d; /* Le bleu officiel de Bootstrap 5 */
}
.user-settings-nav__list .nav-link:hover .user-settings-nav__icon,
.user-settings-nav__list .nav-link.active .user-settings-nav__icon {
  color: #8d8d8d;
}
/* 5.1. Personnalisation du bouton "Paramètres du compte" (visible en mode mobile) en gris clair */
button[data-bs-target="#userMobileMenu"] {
  color: #6c757d !important;             /* Texte et icônes en gris anthracite/noir pour le contraste */
  border-color: #6c757d !important;
}
/* 5.2. Changement de couleur quand on passe le doigt ou qu'on clique dessus */
button[data-bs-target="#userMobileMenu"]:hover,
button[data-bs-target="#userMobileMenu"]:active,
button[data-bs-target="#userMobileMenu"]:focus {
  background-color: #6c757d !important; /* Gris un poil plus foncé au clic */
  border-color: #6c757d !important;
  color: #ffffff !important;
}
/* ==========================================================================
   8.2 ONGLET CARNET D'ADRESSES MENUPROFIL
   ========================================================================== */
/* 1. Conteneur principal */
.address-book__profiles {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}
/* 2. Chaque bloc d'adresse (Profil + Opérations) */
.address-book__profile {
  background: linear-gradient(180deg, #242121 0%, #33302f 100%);
  border-radius: 8px;
  padding: 20px;
  flex: 1 1 300px; /* S'adapte à la largeur, mini 300px */
  max-width: 450px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* 3. Style de la carte (Design similaire au Checkout) */
.address-book__profile .profile--view-mode--full {
  border-left: 4px solid #b8b8b8 !important; /* Ta couleur bleue */
  padding: 15px !important;
  margin-bottom: 15px;
  border-radius: 4px;
}
/* 4. Mise en blanc du texte (Uniquement ici) */
.address-book__profile .address,
.address-book__profile .address span,
.address-book__profile .field__label {
  color: #ececec !important;
  font-style: normal;
  text-transform: none; /* Pour ne pas hériter des majuscules du checkout si besoin */
}
.address-book__profile .field__label {
  font-weight: 700;
  margin-bottom: 5px;
  display: block;
}
/* 5. Liens d'opérations (Edit, Delete, Set default) */
.address-book__operations {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 1px dashed #eeeeee42;
  padding-top: 15px;
}
.address-book__operations a {
  font-size: 0.85rem;
  text-decoration: none;
  font-weight: 600;
  color: #ececec;
}
.address-book__operations a:hover {
  text-decoration: underline;
}
/* Style spécial pour le bouton "Supprimer" */
.address-book__delete-link {
  color: #d63031 !important; /* Rouge */
}
/* 6.Ciblage du conteneur pour centrer le bouton "Add address" */
.address-book__container--customer {
  text-align: center; /* Centre le bouton inline-block */
  width: 100%;
}
/* Ton bouton (ajustement des marges pour le centrage) */
.address-book__add-link {
  display: inline-block;
  background-color: #726f6e;
  color: #fff !important;
  padding: 10px 20px;
  border: none;
  border-radius: 0.375rem;
  text-decoration: none;
  font-weight: 700;
  margin: 0 auto 20px auto;                             /* "auto" sur les côtés pour la sécurité + marge basse */
  transition: all .15s ease-in-out;
}
.address-book__add-link:hover {
  background-color: #555252;
}
/* IMPORTANT : On redonne l'alignement à gauche pour les cartes d'adresses 
   car elles héritent du text-align: center du parent */
.address-book__profiles {
  text-align: left;
}
/* ==========================================================================
   8.3 ONGLET FORMULAIRE AJOUT ADRESSE
   ========================================================================== */
#profile-customer-address-book-add-form {               /* 1. Conteneur principal du formulaire */
    background: linear-gradient(180deg, #242121 0%, #33302f 100%);
    border-radius: 8px !important;
    padding: 30px !important;
    margin: 20px auto !important;
    max-width: 700px !important;                        /* Un peu plus large pour les champs côte à côte */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
}
#profile-customer-address-book-add-form label {         /* 2. Style des étiquettes (Labels) */
    color: #ececec !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 0.85rem;
    margin-bottom: 8px;
    display: block;
}
#profile-customer-address-book-add-form .form-control,
#profile-customer-address-book-add-form .form-select {  /* 3. Style des champs de saisie (Inputs et Select) */
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    color: #333 !important;
    padding: 10px !important;
    background-color: #fcfcfc !important;
}

#profile-customer-address-book-add-form .form-control:focus {
    border-color: #04396d !important;
    box-shadow: 0 0 0 0.2rem rgba(4, 57, 109, 0.1) !important;
}
.address-container-inline {                             /* 4. Alignement des champs Prénom / Nom sur une ligne */
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}
.address-container-inline > div {
    flex: 1 1 200px;
}
#profile-customer-address-book-add-form .form-actions { /* 5. Bouton Enregistrer */
    margin-top: 20px;
    text-align: right;                                  /* Aligne le bouton à droite */
    border-top: 1px solid #eee;
    padding-top: 20px;
}
#profile-customer-address-book-add-form #edit-submit {
    background-color: #726f6e !important;
    padding: 10px 30px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
}
#profile-customer-address-book-add-form #edit-submit:hover {
    background-color: #555252 !important;
}
.messages--status {                                     /* 6. Style du message d'état (Maintenance / Messages Drupal) */
    max-width: 700px;
    margin: 10px auto !important;
    border-left: 5px solid #28a745 !important;        /* Vert pour succès */
    background: #ffffff;
    color: #000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* ==========================================================================
   8.4 ONGLET PROFIL UTILISATEUR
   ========================================================================== */
/* 1. Conteneur principal transformé en carte */
.layout-builder__layout > .col-12:has(.block-field-blockuserusername) {
    background: linear-gradient(180deg, #242121 0%, #33302f 100%);
    border-radius: 8px;
    padding: 30px !important;
    margin-top: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important; /* Annule le comportement flottant de Bootstrap si présent */
    display: block;
    max-width: 600px; /* Taille maximale de la carte */
    }
/* 2. Style des blocs de champs (Nom, Mail, Date...) */
.layout-builder__layout > .col-12:has(.block-field-blockuserusername) .block-layout-builder {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #eeeeee42; /* Séparation légère entre les infos */
}
.layout-builder__layout .block-layout-builder:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
/* 3. Harmonisation des textes en NOIR */
.layout-builder__layout .field__label,
.layout-builder__layout .label,
.layout-builder__layout .field__item,
.layout-builder__layout .form-type-item {
    color: #ececec !important;
    font-size: 1rem;
}
/* 4. Mise en valeur des étiquettes (Labels) */
.layout-builder__layout .field__label,
.layout-builder__layout .label {
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    min-width: 150px; /* Aligne les valeurs verticalement */
    display: inline-block;
}
/* 5. Cas particulier du bloc "Membre depuis" (H4 détourné par Drupal) */
.layout-builder__layout h4.label {
    display: inline-block;
    margin: 0;
    padding: 0;
}
/* 6. Style du Courriel (Lien) */
.layout-builder__layout .field--name-mail .field__item {
    font-weight: 600;
    color: #ebebeb !important;
}

/* ==========================================================================
   8.5 ONGLET PROFIL - TABLEAU DES COMMANDES -
   ========================================================================== */
/* 1. Bloc global : il s'adapte à la largeur du parent */
.view-id-commerce_user_orders {
    background: linear-gradient(180deg, #242121 0%, #33302f 100%);
    border-radius: 8px;
    padding: 20px;
    margin: 20px auto;
    width: 100% !important;                             /* Prend toute la largeur du bloc parent */
    max-width: 100%;
    box-sizing: border-box;
}
/* 2. Style du tableau : s'étale sur toute la largeur du bloc interne */
.view-id-commerce_user_orders table.views-table {
    width: 100% !important; 
    border-collapse: collapse;
    table-layout: auto;
}
/* 3. Ajustement des cellules */
.view-id-commerce_user_orders th, 
.view-id-commerce_user_orders td {
    padding: 10px 5px !important;
    font-size: 0.75rem;
    color: #ebebeb !important;
    background: transparent !important;
    border: none !important;
    text-align: left;
}
/* 4. Gestion du "Numéro de commande" pour éviter qu'il ne sorte du cadre */
.view-id-commerce_user_orders th.views-field-order-number,
.view-id-commerce_user_orders td.views-field-order-number {
    white-space: normal !important; 
    max-width: 70px;                                                /* Force le retour à la ligne pour gagner de la place */
    line-height: 1.1;
}
.view-id-commerce_user_orders td:not(.views-field-order-number) {   /* Les autres colonnes peuvent rester sur une ligne */
    white-space: nowrap;
}
/* 5. Bordures et séparateurs */
.view-id-commerce_user_orders thead th {
    text-transform: uppercase;
    font-weight: bold;
    border-bottom: 1px dashed #555252 !important;
    vertical-align: bottom;
    padding-bottom: 12px !important;
}
.view-id-commerce_user_orders td {
    border-bottom: 1px dashed #555252 !important;
}
.view-id-commerce_user_orders tr:last-child td {
    border-bottom: none !important;
}
.view-id-commerce_user_orders tr {                  /* Suppression des variables Bootstrap */
    --bs-table-accent-bg: transparent !important;
    --bs-table-striped-bg: transparent !important;
}
.view-id-commerce_user_orders .view-header {        /* Titre "Commandes" */
    color: #ebebeb;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-align: center;
}
/* 6. Mobile : sécurité pour le débordement */
@media (max-width: 767px) {
    .view-id-commerce_user_orders .view-content {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}
/* ==========================================================================
   8.6 ONGLET MODES DE PAIEMENT - CIBLAGE PRÉCIS (N'impacte pas le panier/commande)
   ========================================================================== */
/* 1. Conteneur du tableau : On cible UNIQUEMENT si le tableau est 'responsive-enabled' 
      ET à l'intérieur du bloc de contenu principal */
#block-bootstrap-sub-content table.responsive-enabled {
  width: 100%;
  border: none !important;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(180deg, #242121 0%, #33302f 100%) !important;
  margin-top: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  border-collapse: separate;
}
/* 2. En-tête : Uniquement pour le tableau de gestion des cartes */
#block-bootstrap-sub-content table.responsive-enabled thead th {
  background-color: transparent !important;
  background: none !important;
  color: #ebebeb !important;
  text-transform: uppercase;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 15px;
  border-bottom: 1px dashed #555252 !important;
  border-top: none !important;
}
/* 3. Corps du tableau */
#block-bootstrap-sub-content table.responsive-enabled td {
  padding: 15px;
  color: #ebebeb !important;
  vertical-align: middle;
  border-bottom: none !important;
  background: transparent !important;
}
/* 4. Style du message vide spécifique à cette page */
#block-bootstrap-sub-content table.responsive-enabled td.empty.message {
  padding: 40px !important;
  text-align: center !important;
  font-style: italic;
  color: #918f8e !important;
  background-color: #33302f !important;
}
/* 5. Boutons d'actions */
#block-bootstrap-sub-content table.responsive-enabled a {
  color: #ebebeb !important;
  font-weight: 600;
}
#block-bootstrap-sub-content table.responsive-enabled .dropbutton-wrapper a {
  background: #33302f !important;
}
/* 6. Centrage uniquement pour ce tableau spécifique */
@media (min-width: 992px) {
  #block-bootstrap-sub-content table.responsive-enabled {
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
    display: table;
  }
}
/* ==========================================================================
   9.TUNNEL D'ACHAT.PAGE DE CONFIRMATION DE COMMANDE - ISOLATION STRICTE
   ========================================================================== */
/* On cible le formulaire UNIQUEMENT s'il contient le message de succès 'checkout-complete' */
#commerce-checkout-flow-multistep-default:has(.checkout-complete) fieldset {
    padding-left: 35px !important;
    color: #000000
}
#commerce-checkout-flow-multistep-default:has(.checkout-complete) fieldset legend { /* On s'assure que la légende suit le même alignement */
    padding-left: 0 !important;
    margin-left: 0 !important;
    color: #000000
}
#commerce-checkout-flow-multistep-default .checkout-complete {  /* Message de succès (Le texte en haut) */
    background: #04396d; 
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    text-align: center;
}

/* /////////////////////////////////////////////////////// */
/*    9.1 STYLE DU PANIER DE COMMANDE (DRUPAL COMMERCE)    */
/* /////////////////////////////////////////////////////// */

/* 1. Structure globale du conteneur du panier */
.cart-form .view-commerce-cart-form {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  margin-bottom: 2rem;
}

/* 2. Style du tableau des articles */
.cart-form table.views-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 2rem;
}

.cart-form table.views-table thead th {
  background-color: #f8f9fa;
  color: #353434;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  padding: 14px 16px;
  border-bottom: 2px solid #e9ecef;
}

.cart-form table.views-table tbody td {
  padding: 16px;
  vertical-align: middle;
  border-bottom: 1px solid #f1f3f5;
  color: #353434;
}

/* 3. Image et détails du produit */
.cart-form .views-field-purchased-entity img {
  border-radius: 8px;
  max-width: 480px !important;
  width: 100% !important;
  height: auto !important;
  box-shadow: none !important; /* SUPPRESSION DÉFINITIVE DE L'OMBRE */
  display: block;
  margin: 0 auto;
}

.cart-form table.views-table .views-field-purchased-entity {
  min-width: 240px;
}

.cart-form .field--name-field-texte-fraislivraison {
  font-size: 0.85rem;
  color: #7e7776;
  margin-top: 6px;
  font-style: italic;
}

/* 4. Champ de quantité */
.cart-form input.quantity-edit-input {
  width: 70px !important;
  text-align: center;
  border-radius: 6px;
  border: 1px solid #ced4da;
  padding: 6px 10px;
  font-weight: 600;
}

.cart-form input.quantity-edit-input:focus {
  border-color: #e43c09;
  box-shadow: 0 0 0 0.2rem rgba(228, 60, 9, 0.25);
  outline: none;
}

/* 5. Bouton "Retirer" */
.cart-form .delete-order-item {
  background-color: transparent;
  color: #dc3545 !important;
  border: 1px solid #dc3545;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.85rem;
  transition: all 0.2s ease-in-out;
}

.cart-form .delete-order-item:hover {
  background-color: #dc3545;
  color: #ffffff !important;
}

/* 6. Encart Récapitulatif / Totaux */
[data-drupal-selector="order-total-summary"] {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 20px;
  max-width: 380px;
  margin-left: auto; /* Aligne le récapitulatif à droite */
  border: 1px solid #e9ecef;
}

.order-total-line {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  color: #353434;
  font-size: 0.95rem;
}

.order-total-line__total {
  border-top: 2px solid #dee2e6;
  margin-top: 8px;
  padding-top: 12px;
  font-weight: bold;
  font-size: 1.2rem;
  color: #000000;
}

.order-total-line__total .order-total-line-value {
  color: #e43c09;
}

/* 7. Boutons d'action (Mettre à jour & Commander) */
.cart-form .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-top: 25px;
}

/* Bouton : Mettre à jour le panier */
.cart-form #edit-submit {
  background-color: #353434;
  color: #ffffff !important;
  border: none;
  border-radius: 6px;
  padding: 12px 24px;
  font-weight: 600;
  transition: all 0.2s ease-in-out;
}

.cart-form #edit-submit:hover {
  background-color: #555252;
}

/* Bouton principal : Passer la commande */
.cart-form #edit-checkout {
  background-color: #ffcc00;
  color: #ffffff !important;
  border: none;
  border-radius: 6px;
  padding: 12px 30px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(228, 60, 9, 0.25);
}

.cart-form #edit-checkout:hover {
  background-color: #ad2800;
  color: #ffffff !important;
}

/* ==========================================================================
   SUPPRESSION DE TOUS LES FONDS GRIS DANS LE TABLEAU
   ========================================================================== */

/* 1. cibler tous les conteneurs internes de la Vue et du Formulaire */
.cart-form .view-content,
.cart-form .views-form,
.cart-form form,
.cart-form table,
.cart-form table tr,
.cart-form table td,
.cart-form table th {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* 2. Annuler les variables de fond Bootstrap (Bootstrap 5+) sur les cellules et lignes */
.cart-form .table {
  --bs-table-bg: #ffffff !important;
  --bs-table-accent-bg: transparent !important;
  --bs-table-striped-bg: #ffffff !important;
  --bs-table-active-bg: #ffffff !important;
  --bs-table-hover-bg: #ffffff !important;
}

/* 3. Masquer le prix en double sous l'image sur desktop également */
.cart-form .views-field-purchased-entity .field--name-price {
  display: none !important;
}

/* ==========================================================================
   CORRECTIFS MOBILE (TRANSFORMATION EN CARTES & CORRECTION TEXTES)
   ========================================================================== */

@media (max-width: 768px) {

  /* 1. Rendre la table responsive et supprimer l'affichage sous forme de tableau */
  .cart-form table.views-table, 
  .cart-form table.views-table tbody, 
  .cart-form table.views-table tr, 
  .cart-form table.views-table td {
    display: block;
    width: 100% !important;
  }

  /* Cache l'entête du tableau (ITEM, PRIX, QUANTITÉ...) sur mobile */
  .cart-form table.views-table thead {
    display: none;
  }

  /* 2. Transformer chaque ligne du panier en carte */
  .cart-form table.views-table tbody tr {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  }

  .cart-form table.views-table tbody td {
    padding: 8px 0;
    border-bottom: 1px dashed #f1f3f5;
    text-align: left;
  }

  .cart-form table.views-table tbody td:last-child {
    border-bottom: none;
  }

  /* 3. Ajustement de l'image et correction du chevauchement de texte sur Mobile */
  .cart-form .views-field-purchased-entity {
    text-align: center;
    padding-bottom: 15px !important;
  }

  .cart-form .views-field-purchased-entity img {
    max-width: 280px !important; /* Ajusté pour le mobile pour garder une image bien lisible sans écraser */
    margin: 0 auto 10px auto;
    display: block;
  }

  .cart-form .field--name-field-texte-fraislivraison {
    font-size: 0.8rem;
    color: #7e7776;
    margin-top: 5px;
  }

  /* 4. Centrage des lignes (Prix, Quantité, Retirer, Total) et espacement */
  .cart-form .views-field-edit-quantity,
  .cart-form .views-field-remove-button,
  .cart-form .views-field-unit-price__number,
  .cart-form .views-field-total-price__number {
    display: flex;
    justify-content: center; /* Centre horizontalement l'ensemble */
    align-items: center;     /* Aligne verticalement le texte et les boutons */
    gap: 8px;                /* Ajoute un bel espace entre le texte et la valeur */
    text-align: center;
  }

  /* Ajout des labels avec un petit espace après les deux-points */
  .cart-form .views-field-unit-price__number::before { content: "Prix unitaire : "; font-weight: 600; color: #555; }
  .cart-form .views-field-edit-quantity::before      { content: "Quantité : "; font-weight: 600; color: #555; }
  .cart-form .views-field-remove-button::before     { content: "Action : "; font-weight: 600; color: #555; }
  .cart-form .views-field-total-price__number::before { content: "Total : "; font-weight: 700; color: #000; }
  
  /* 5. Récapitulatif et Boutons */
  .cart-form [data-drupal-selector="order-total-summary"] {
    max-width: 100%;
    margin-top: 15px;
  }

  .cart-form .form-actions {
    flex-direction: column-reverse;
    gap: 10px;
  }

  .cart-form .form-actions input {
    width: 100%;
  }
}
/* ////////////////////////////////////////////////////////////////////// */
/* ==========================================================================
   PAGE DE CONFIRMATION DE COMMANDE (Épurée & Sans fond gris)
   ========================================================================== */

/* 1. Conteneur principal (Fond blanc uni forcé pour éliminer la démarcation) */
form[action$="/complete"] .layout-checkout-form {
    background: #ffffff !important; 
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
    padding: 2.5rem;
    margin: 3rem auto 5rem auto;
    max-width: 650px; 
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* 2. Message de succès (Bleu) */
.checkout-complete {
    background-color: #3e74a1;
    color: #ffffff;
    padding: 2rem;
    border-radius: 10px;
    margin: 0;
    text-align: left;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.checkout-complete:before {
    content: "✓";
    font-size: 2rem;
    font-weight: bold;
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 50%;
    padding: 0 0.8rem;
    flex-shrink: 0;
}

.checkout-complete p {
    margin-bottom: 0;
    font-size: 1.1rem;
}

/* 3. Blocs d'informations : Suppression totale du fond gris et du contour */
fieldset[id^="edit-completion-message"] {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
}

/* 4. Titres des blocs (Légendes) & Réduction de l'écart avec le contenu */
fieldset[id^="edit-completion-message"] legend {
    display: block;
    width: 100%;
    padding: 0 0 0.25rem 0;
    margin-bottom: 0.4rem; /* Écart très réduit entre le titre et l'information */
    font-size: 1.1rem;
    font-weight: 600;
    color: #111827;
    border-bottom: 1px solid #e5e7eb; /* Ligne de séparation subtile sous le titre */
    float: none;
}

/* 5. Contenu textuel dans les blocs */
fieldset[id^="edit-completion-message"] .fieldset-wrapper {
    color: #4b5563;
    font-size: 1.05rem;
    padding-top: 0 !important;
}

/* 6. Formatage de la carte bancaire */
fieldset[id^="edit-completion-message"] article .field--name-label {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.15rem;
}

fieldset[id^="edit-completion-message"] article .field--name-expires {
    color: #6b7280;
    font-size: 0.95rem;
}
  /* //////////////////////////////////// */
 /* //////////// 10.PAYWALL //////////// */
/* //////////////////////////////////// */
.btn-abo-paywall  {
    background-color: #e43c09;                        /* COULEUR BOUTON */
    color: #ffffff !important;                                   /* COULEUR TEXTE */
    padding: 10px 35px;                                 /* TAILLE */
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(255, 86, 34, 0.212);  /* OMBRE */
}
.btn-abo-paywall:hover {                                /* BOUTON ABO SURVOL */
    background-color: #ad2800;
    color: #ffd943 !important;
    transform: translateY(-2px);
    transition: all 0.2s ease-in-out;
}
.btn-connexion-paywall  {
    background-color: #353434;                        /* COULEUR BOUTON */
    color: #ffffff !important;                                   /* COULEUR TEXTE */
}
.btn-connexion-paywall:hover  {
    background-color: #555252;                        /* COULEUR BOUTON HOVER */
    color: #ffffff !important;                        /* BOUTON CONNEXION SURVOL */
}
/* --- VERSION DESKTOP (Horizontal) --- */
.nav.nav-tabs.primary {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 15px;
  background: #4d494838;
  border: 2px solid #4d4948;
  border-radius: 15px;
  width: max-content;
  margin: 0 auto 2rem auto;
}
.nav.nav-tabs.primary .nav-link {
  display: flex;
  align-items: center;
  padding: 10px 10px;
  color: #f1edeb !important;
  font-weight: 500;
  border: none !important;
  border-radius: 8px;
  transition: all 0.2s;
}
.nav.nav-tabs.primary .nav-link.active {        /* Onglet Actif Desktop */
  background-color: #e9e4e3 !important;
  color: #000000 !important;
  box-shadow: inset 0 -2px 0 #c45858;
}

@media (max-width: 992px) {                     /* 7. Responsive : On repasse en horizontal sur Mobile */
  .region-content {
    flex-direction: column;
  }
    .nav.nav-tabs.primary {
    width: 100%;
    min-width: 100%;
    flex-direction: row;                        /* Horizontal sur mobile pour scroller */
    overflow-x: auto;
    white-space: nowrap;
  }
}
.nav-tabs .tab-toggle {         
  color: #7e7776 !important;                  /* COULEUR DE LA FLECHE */
  text-decoration: none !important;
}
.nav-tabs .tab-toggle:hover {
  color: #ffffff !important;                  /* COULEUR SURVOLE DE LA FLECHE */
}
.nav-tabs .nav-item.active {                    /* 1. On retire le fond et les bordures du <li> parent */
  background-color: transparent !important;
  border: none !important;
}
.nav-tabs.primary {                             /* 3. Suppression de la bordure basse par défaut de l'ensemble de la liste */
  border-bottom: none !important;
}
  /* ///////////////////////////////////////// */
 /* //////////// 11.IMAGE GALERIE /////////// */
/* ///////////////////////////////////////// */
.field--name-field-galerie1.field__items,
.field--name-field-galerie2.field__items,
.field--name-field-galerie3.field__items {      /* 1. Le conteneur parent pour les deux galeries */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;                      /* Centre les images orphelines sur la dernière ligne */
  gap: 20px;
  margin: 0 auto;
  padding: 0;
}
.field--name-field-galerie1 .field__item,
.field--name-field-galerie2 .field__item,
.field--name-field-galerie3 .field__item {      /* 2. Configuration des colonnes (Mobile par défaut : 100%) */
  flex: 0 0 calc(50% - 10px);                   /* 10px = la moitié du gap de 20px */
  max-width: calc(50% - 10px);
}
@media (min-width: 768px) {                     /* 3. Tablettes et PC : 3 images par ligne */
  .field--name-field-galerie1 .field__item,
  .field--name-field-galerie2 .field__item,
  .field--name-field-galerie3 .field__item {
    flex: 0 0 calc(33.333% - 20px);
    max-width: calc(33.333% - 20px);
  }
}
.field--name-field-galerie1 .field__item img,
.field--name-field-galerie2 .field__item img,
.field--name-field-galerie3 .field__item img {    /* 4. Style des images / état initial */
 display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;                            /* Garde toutes les images à la même taille pour une grille parfaite */
  object-fit: cover;
  transform: scale(1.10) translateX(-3%);         /* On zoome à 1.15 et on part d'une position -5% à gauche */
  opacity: 1;                                     /* Opacité pleine au repos */
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
/* 5. Correctif pour le saut en haut de page (Glightbox) */
html.glightbox-open, 
body.glightbox-open {                            /* On force le scroll à rester là où il est */
    overflow: visible !important;
    height: auto !important;
    width: auto !important;
    position: static !important;
}
/*/////////////////////////////////// SURVOL /////////////////////////////////////////////*/
/* 1. Préparation du cadre (pour ne pas que l'image dépasse du bloc) */
.field--name-field-galerie1 .field__item,
.field--name-field-galerie2 .field__item,
.field--name-field-galerie3 .field__item {
  overflow: hidden;
  border-radius: 8px;
}
/* 2. Effet au survol : Déplacement vers la droite */
.field--name-field-galerie1 .field__item:hover img,
.field--name-field-galerie2 .field__item:hover img,
.field--name-field-galerie3 .field__item:hover img {
  transform: scale(1.10) translateX(2px);                /* Décale l'image de 15 pixels vers la droite */
  opacity: 0.50;                                         /* Légère baisse de luminosité pour faire ressortir l'image */
  cursor: pointer;
}
/*////////////////////////////BOUTON DE FERMETURE D'IMAGE//////////////////////////////////*/
@media (max-width: 767.98px) {
  /* Deplacement du bouton de fermeture de GLightbox (sinon il passe sous la barre d'adresse en mode mobile) */
  .gclose {
    top: env(safe-area-inset-top, 20px) !important; /* Utilise la zone sécurisée des encoches/barres, sinon 20px */
    right: 15px !important;
  }
}
/*///////////////////////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////// 12.COOKIE KLARO ////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* 1. Le conteneur principal (la bannière en bas) */
#klaro-cookie-notice.cookie-notice {
    background-color: #ffffff !important;
    box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.15);
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* 2. Le titre (h2) */
#id-cookie-title {
    color: #333;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 10px;
}
/* 3. Le texte de description */
#id-cookie-notice {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.5;
}
#id-cookie-notice strong {                  /* Mise en gras des finalités (Functional & Embedded...) */
    color: #000;
}
/* 4. Alignement des boutons et du lien */
.cn-ok {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    flex-wrap: wrap;
    gap: 15px;
}
/* 5. Style des boutons */
.klaro .cm-btn {
    padding: 10px 20px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease;
    border: none !important;
}
.klaro .cm-btn-success {                    /* Bouton Accepter (Success) */
    background-color: #28a745 !important;
    color: #fff !important;
}
.klaro .cm-btn-danger {                     /* Bouton Décliner (Danger) */
    background-color: #c02c19 !important;
    color: #fff !important;
}
/* 6. Le lien "Personnaliser" */
.cn-learn-more {
    color: #0056b3 !important;
    text-decoration: none !important;
    font-size: 0.9rem;
    border-bottom: 1px solid transparent;
}
.cn-learn-more:hover {
    border-bottom: 1px solid #0056b3;
}
/*/////////////KLARO POPUP MODAL (PARAMETRAGE)///////////////*/
/* --- 1. LE CONTENEUR GLOBAL DU MODAL --- */
.cm-modal.cm-klaro {
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    border: none !important;
    max-width: 550px !important;
}
/* --- 2. L'EN-TÊTE (Header) --- */
.cm-modal .cm-header {
    background-color: #f8f9fa;
    padding: 25px !important;
    border-bottom: 1px solid #eee;
}
.cm-modal .cm-header h1.title {
    font-size: 1.4rem !important;
    color: #222;
    margin-bottom: 10px;
}
.cm-modal .cm-header p {
    font-size: 0.9rem;
    color: #666;
}
.cm-modal .cm-header button.hide svg {      /* Bouton de fermeture (X) */
    stroke: #999;
}
/* --- 3. LISTE DES SERVICES (Body) --- */
.cm-modal .cm-body {
    padding: 0 !important;
}
.cm-services {
    background-color: #f8f9fa;
    list-style: none;
    padding: 0;
    margin: 0;
}
.cm-service {
    padding: 15px 70px !important;
    border-bottom: 1px solid #f0f0f0;
}
.cm-list-title {                          /* Titres des services */
    font-weight: 600 !important;
    color: #333;
}
.cm-list-description, .purposes {         /* Description et objectifs */
    font-size: 0.85rem !important;
    color: #777 !important;
    margin-top: 5px;
}
.purposes {
    font-style: italic;
    color: #0056b3 !important;
}
/* --- 4. LES INTERRUPTEURS (Switches) --- */
.cm-switch .slider {
    background-color: #ffffff !important;
    margin-left: 10px;
}
.cm-switch .slider.active {             /* Interrupteur quand il est actif */
    background-color: #28a745 !important;
}
input.cm-list-input.required + .cm-list-label .cm-switch .slider { /* Style spécifique pour les services obligatoires (disabled) */
    background-color: #6c757d !important;
    opacity: 0.6;
}
/* --- 5. LE PIED DE PAGE ET BOUTONS --- */
.cm-footer {
    padding: 20px 25px !important;
    background-color: #f8f9fa;
}
.cm-footer-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.cm-btn-accept-all {                          /* Bouton "Tout accepter" (Principal) */
    background-color: #28a745 !important;
    order: 3;                                 /* Le met à droite */
}
.cm-btn-info.cm-btn-accept {                  /* Bouton "Accepter la sélection" */
    background-color: #0056b3 !important;
    order: 2;
}
.cm-btn-danger {                              /* Bouton "Décliner" */
    background-color: #fff !important;
    color: #dc3545 !important;
    border: 1px solid #dc3545 !important;
    order: 1;
}
.cm-powered-by {                               /* Lien "Powered by" (discret) */
    text-align: center;
    margin-top: 15px !important;
    font-size: 0.7rem !important;
}
.cm-powered-by a {
    color: #bbb !important;
    text-decoration: none;
}
/*///////////////////////////////////////////*/
/*////////////13.PAGE GARDIEN///////////////*/
/*/////////////////////////////////////////*/
.btn-gardien {
    background: #00aeff !important;
    color: #e7f7ff !important;
    transition: all 0.3s ease;
}

/* Vos styles de survol d'origine (inchangés) */
.btn-gardien:hover,
.btn-gardien:focus,
.btn-gardien:active {
    color: #ffffff !important; 
    background: #49c6ff !important; 
    transform: scale(1.01);
}

/* AJOUT UNIQUEMENT POUR LA TAILLE SUR TABLETTE & ORDINATEUR */
@media (min-width: 384px) {
    .btn-gardien {
        display: inline-block;
        width: 100%;
        max-width: 500px; /* Force les deux boutons à avoir la même largeur maximale */
        text-align: center;
    }
}

/*///////////////////////////////////////////*/
/*///////14.ABONNEMENT AU MAGAZINE//////////*/
/*/////////////////////////////////////////*/
/* 1. ON FORCE TOUTE LA CHAÎNE PARENTE À S'OUVRIR */
#block-bootstrap-sub-content,
article.contextual-region,
.field--name-variations,
.field--name-variations .field__item,
#commerce-product-add-to-cart-form,
.field--name-purchased-entity,
.fieldset-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}
/* 2. LE CONTENEUR DES PAVÉS */
/* 2. LE CONTENEUR DES PAVÉS */
.field--name-purchased-entity .form-radios { 
    display: flex !important;
    flex-wrap: wrap !important; /* Modifié pour permettre le passage à la ligne */
    gap: 20px; 
    justify-content: center;
    margin: 25px auto; 
    width: 100% !important; 
    max-width: 1200px !important; 
}
/* 3. LES PAVÉS (ÉLARGIS) */
.field--name-purchased-entity .form-check { 
    flex: 1 0 320px !important; /* 320px est la base de largeur forcée */
    position: relative;
    padding: 0 !important;
    margin: 0;
    max-width: none !important; 
}
/* 4. LE STYLE VISUEL (PAVÉ) */
.field--name-purchased-entity .form-check-label { 
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    width: 100% !important;
    padding: 35px 20px !important; 
    background: linear-gradient(180deg, #242121 0%, #33302f 100%);
    color: #ffffff;
    border: 1px solid #585555;
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1rem; 
    transition: all 0.3s ease;
}
/* --- ADAPTATION MOBILE --- */
@media (max-width: 767px) {
    /* 1. On permet aux pavés de revenir à la ligne (empilement vertical) */
    .field--name-purchased-entity .form-radios { 
        flex-wrap: wrap !important; 
        gap: 10px; /* On réduit l'espace entre les blocs sur mobile */
    }
    /* 2. On ajuste la taille des pavés pour qu'ils ne dépassent pas de l'écran */
    .field--name-purchased-entity .form-check { 
        flex: 1 1 100% !important; /* Prend toute la largeur disponible */
        min-width: 0 !important;    /* Annule le blocage des 320px */
        max-width: 100% !important;
    }
    /* 3. On réduit un peu le rembourrage interne pour gagner de la place */
    .field--name-purchased-entity .form-check-label { 
        padding: 20px 10px !important; 
        font-size: 1rem; /* Texte légèrement plus petit */
    }
}
/* --- ADAPTATION TABLETTE (2 produits par ligne) --- */
@media (min-width: 768px) and (max-width: 1024px) {
    .field--name-purchased-entity .form-radios { 
        flex-wrap: wrap !important; /* Sécurité pour autoriser le retour à la ligne */
    }
    .field--name-purchased-entity .form-check { 
        /* calc(50% - 10px) correspond à la moitié de la largeur moins la moitié du gap (20px) */
        flex: 0 0 calc(50% - 10px) !important; 
        max-width: calc(50% - 10px) !important;
    }
}

/* 5. ÉTAT SÉLECTIONNÉ : On crée un contraste fort (Surlignage) */
.field--name-purchased-entity .form-check-input:checked + .form-check-label {
    border-color: #ffcc00 !important; /* Ton jaune surligneur pour le contour */
    background: #5e5752; /* Un peu plus clair pour montrer la sélection */
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.4);
    transform: scale(1.03);
}
/*/////////////////////*/
/* Image de variation */
/*///////////////////*/
.product--variation-field--variation_field_image_abo_mag__5.field__item,
.product--variation-field--variation_field_image_abo_mag__5 .field__item {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 20px !important; /* Espace sous l'image */
}
/* S'assurer que l'image elle-même est responsive et centrée */
.product--variation-field--variation_field_image_abo_mag__5 img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/*//////////////////////////////////////////////////////////////*/
/* 5. INPUT CACHÉ (effacer la phrase temporaire de chargement) */
/*////////////////////////////////////////////////////////////*/
.field--name-purchased-entity .form-check-input {  
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}
/*//////////////////////////*/
/* 6. Bouton "Je m'abonne" */
/*////////////////////////*/
.form-actions {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    background: none !important; /* Enlève d'éventuels fonds par défaut */
    border: none !important;
}
#edit-submit--PZb7lqXA9Ps, 
#edit-submit--Eoz4mLQhguw, /* Ajout de ton nouvel ID dynamique */
.button--add-to-cart {
    display: inline-flex !important; /* inline-flex est mieux pour un bouton seul */
    justify-content: center;
    margin: 20px 0 0 0 !important; /* On enlève le auto car le parent gère le centrage */
    background-color: #dfdbda !important;
    color: #242121 !important;
    border: 1px solid #ffffff !important;
    border-radius: 10px;
    padding: 12px 40px;
    font-weight: 900;
    text-transform: uppercase;
    transition: all 0.3s ease;
    cursor: pointer;
    width: auto;
}
/* hover */
.button--add-to-cart:hover {
    background-color: transparent !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}
/* Responsive mobile */
@media (max-width: 767px) {
    .field--name-purchased-entity .form-radios {
        flex-direction: column;
        align-items: center;
    }
    .field--name-purchased-entity .form-check {
        width: 100%;
        max-width: 100px;
    }
}
/*//////////////////////////*/
/* 15.TEXTE FRAIS DE LIVRAISON */
/*//////////////////////////*/
/* 1. On cible le conteneur du texte de frais de livraison */
.field--name-field-texte-fraislivraison {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: -15px !important; /* Pour coller au prix jaune */
    margin-bottom: 25px !important;
    text-align: center !important;
}
/* 2. On stylise le texte lui-même */
.field--name-field-texte-fraislivraison.field__item,
.field--name-field-texte-fraislivraison {
    font-size: 0.95rem !important;
    color: #b3b3b3 !important; /* Gris discret */
    font-style: italic !important;
    font-weight: 400 !important;
}
/* 3. Sécurité au cas où un label apparaîtrait par erreur */
.field--name-field-texte-fraislivraison .field__label {
    display: none !important;
}
/*////////////////////////////////////////////////////////////*/
/*////////////////////////16.Texte Prix/////////////////////////*/
/* 1. On cible le conteneur exact avec une spécificité supérieure */
div.field--name-price.product--variation-field--variation_price__5 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important; /* Ajouté pour le centrage vertical si besoin */
    text-align: center !important;
    font-size: 2.5rem !important;
    font-weight: 900 !important;
    color: #ffcc00 !important;
    width: 100% !important;
    margin: 20px 0 !important;
}
/*//////////////////////////////Centrer le bloc de légende/////////////////////////////////*/
.fieldgroup.form-composite legend {
    float: none; /* Annule le comportement par défaut qui pousse à gauche */
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 15px;
}
/* Style du texte de la légende */
.fieldgroup.form-composite legend .fieldset-legend {
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff; /* Pour ton thème Dark */
    text-align: center;
}
/* Optionnel : masquer l'astérisque rouge si elle te gêne */
.fieldgroup.form-composite legend .form-required::after {
    display: none;
}
/*/////// Cache le message de chargement AJAX (enlève le message "en cours de traitement" quand on selectionne un des bouton 1an/2ans/3ans) */
.ajax-progress {
    display: none !important;
}
/* Si Bootstrap ou Drupal ajoute un wrapper de chargement */
.ajax-progress-throbber {
    display: none !important;
}

/*////////////////////////////////*/
/*/////17.TUNNEL DE PAIEMENT/////*/
/*//////////////////////////////*/

/* //// 17.1 INSCRIPTION DANS LE TUNNEL D'ACHAT ////// */
/* ==========================================================================
   REFONTE PROPRE : PAGE DE CONNEXION / INSCRIPTION EN 2 COLONNES
   ========================================================================== */
@media (min-width: 992px) {
  /* 1. Si la page contient le formulaire de login, on force la grille globale à faire 1 seule colonne (suppression de la colonne grise de droite) */
  body.path-checkout form.commerce-checkout-flow:has(.checkout-pane-login) .layout-checkout-form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    background: #ffffff !important;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 0 !important;
  }

  /* 2. On masque totalement la région secondaire (la zone grise de droite avec le résumé) sur cette page précise */
  body.path-checkout form.commerce-checkout-flow:has(.checkout-pane-login) .layout-region-checkout-secondary,
  body.path-checkout form.commerce-checkout-flow:has(.checkout-pane-login) .layout-region-checkout-footer {
    display: none !important;
  }

  /* 3. À l'intérieur, on réapplique notre grille à 2 colonnes pour le Client Existant et le Nouveau Client */
  body.path-checkout .checkout-pane-login {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
    align-items: start !important;
    width: 100% !important;
    background: #ffffff !important;
    padding: 40px !important;
    box-sizing: border-box;
    border: none !important;
  }

  /* 4. Colonne de gauche : Client Existant */
  body.path-checkout .checkout-pane-login .form-wrapper__returning-customer {
    grid-column: 1 !important;
    margin: 0 !important;
    padding-right: 40px !important;
    border-right: 1px solid #e0e0e0 !important;
    box-sizing: border-box;
    width: 100% !important;
  }

  /* 5. Colonne de droite : Nouveau Client */
  body.path-checkout .checkout-pane-login .form-wrapper__guest-checkout {
    grid-column: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-sizing: border-box;
    width: 100% !important;
  }
}
/* Cible uniquement la page de connexion / inscription du tunnel de commande */
body[class*="page-route-commerce-checkout-form"][class*="login"] #block-bootstrap-sub-content,
body.path-checkout #block-bootstrap-sub-content .checkout-pane-login {
  color: #2c3e50; /* Remplacez par la couleur sombre de votre choix */
}
/* Force la couleur des titres de blocs (Returning Customer / New Customer) */
body.path-checkout .checkout-pane-login legend span.fieldset-legend {
  color: #2c3e50; 
}
/* Force la couleur des labels (Username, Password, Email address...) */
body.path-checkout .checkout-pane-login label {
  color: #2c3e50; 
}
/* Force la couleur des textes d'aide / descriptions (ex: règles pour le nom d'utilisateur ou l'email) */
body.path-checkout .checkout-pane-login .description {
  color: #6c757d; /* Gris lisible pour les descriptions */
}
/* Force la couleur du texte de confirmation de mot de passe (Passwords match:) */
body.path-checkout .checkout-pane-login .password-confirm-message {
  color: #2c3e50;
}




/* ///////PAGE CHECKOUT : Information de Contact & Informations de paiement//////// */
/* Change la couleur de l'adresse e-mail (Information de contact) sur la page de checkout */
body.page-route-commerce-checkout-form #edit-review-contact-information .fieldset-wrapper {
  color: #2c3e50; /* Remplacez par la couleur de votre choix */
}
/* Change la couleur du texte "Paiement sécurisé par carte bancaire" sur la page de checkout */
body.page-route-commerce-checkout-form #edit-review-payment-information .fieldset-wrapper {
  color: #2c3e50; /* Remplacez par la couleur de votre choix */
}
/* ==========================================================================
   GRILLE DE COMMANDE (CHECKOUT) - ISOLATION STRICTE
   Ce code ne s'applique qu'aux éléments ENFANTS de .layout-checkout-form
   ========================================================================== */
/* --- 1. STRUCTURE DE LA GRILLE --- */
.layout-checkout-form {
  display: grid;
  gap: 0;
  margin: 2rem 0;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff; 
  width: 100%;
  box-sizing: border-box;
}
/* --- 2. MOBILE FIRST (Par défaut) --- */
.layout-checkout-form .layout-region-checkout-main,
.layout-checkout-form .layout-region-checkout-secondary,
.layout-checkout-form .layout-region-checkout-footer {
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
}
.layout-checkout-form .layout-region-checkout-secondary {
  background-color: #cecece; /* Gris */
}
.layout-checkout-form .layout-region-checkout-footer {
  background-color: #04396d; /* Bleu foncé */
}
/* --- 3. MODE LARGE (Ordinateurs et Tablettes) --- */
@media (min-width: 992px) {
  .layout-checkout-form {
    grid-template-columns: 1fr 380px; 
    grid-template-rows: auto 1fr; /* Définit les rangées pour le résumé et le footer */
    /* On crée un fond bicolore à droite pour que les couleurs descendent jusqu'en bas */
    background: linear-gradient(to right, #ffffff 0%, #ffffff calc(100% - 380px), #cecece calc(100% - 380px), #cecece 100%);
  }
  .layout-checkout-form .layout-region-checkout-main {
    grid-column: 1;
    grid-row: 1 / 4; 
    padding: 40px;
    border-right: 1px solid #e0e0e0;
  }
  .layout-checkout-form .layout-region-checkout-secondary {
    grid-column: 2;
    grid-row: 1;
    padding: 30px 30px 10px 30px;
    background-color: #cecece; 
  }
  .layout-checkout-form .layout-region-checkout-footer {
    grid-column: 2;
    grid-row: 3; 
    padding: 20px 30px; /* Hauteur réduite */
    background-color: #04396d; /* Le bleu prend le relais sous le gris */
    align-self: end; /* LE CHANGEMENT : Le bloc ne s'étire plus vers le bas */
    margin-top: -1px; /* Optionnel : pour éviter un micro-espace blanc avec le bloc gris du dessus */
}
}
/* --- 4. TEXTES ET TITRES (Ciblés Checkout uniquement) --- */
/* Alignement forcé à gauche pour les légendes et labels */
.layout-checkout-form .fieldset-legend,
.layout-checkout-form legend,
.layout-checkout-form .form-item label,
.layout-checkout-form h3 {
  text-align: left !important;
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  width: 100% !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  color: #2d3436 !important;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.1rem;
}
/* Couleurs spécifiques par zone */
.layout-checkout-form .layout-region-checkout-main label { color: #2d3436 !important; }
.layout-checkout-form .layout-region-checkout-secondary * { color: #000000 !important; }
.layout-checkout-form .layout-region-checkout-footer,
.layout-checkout-form .layout-region-checkout-footer label { color: #ffffff !important; }
/* Ciblage chirurgical de l'adresse uniquement dans la grille de checkout */
.layout-checkout-form .field--name-address,
.layout-checkout-form .field--name-address .field__label,
.layout-checkout-form .field--name-address .field__item,
.layout-checkout-form .address {
  color: #000000 !important;
  font-style: normal; /* Optionnel : pour enlever l'italique souvent présent sur la balise address */
}
/* On s'assure que toutes les spans à l'intérieur (nom, rue, ville) héritent bien du noir */
.layout-checkout-form .address span {
  color: #000000 !important;
}
/* --- CENTRAGE DU RÉSUMÉ DES PRIX (Uniquement dans le checkout) --- */
/* --- RÉSUMÉ (DROITE) : TITRE ET PRIX UNIQUEMENT --- */
.layout-checkout-form .layout-region-checkout-secondary h3 {/* 1. Uniquement le titre H3 est centré */
  text-align: center !important;
  width: 100% !important;
  display: block !important;
  margin-bottom: 25px !important;
}
.layout-checkout-form .order-total-line {                   /* 2. Lignes de prix : Alignement Gauche/Droite (Libellé à gauche, Prix à droite) */
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 8px 0;
}
.layout-checkout-form .order-total-line__total {            /* 3. Style spécifique pour le TOTAL (Plus gros et plus gras) */
  margin-top: 15px;
  padding-top: 15px;
  border-top: 2px solid #2d3436;
}
.layout-checkout-form .order-total-line__total .order-total-line-label,
.layout-checkout-form .order-total-line__total .order-total-line-value {
  font-size: 1.2rem !important; /* Plus gros */
  font-weight: 900 !important;  /* Plus gras */
  color: #000000 !important;
}
/* On ne touche pas au tableau (.view-commerce-checkout-order-summary table) */
/* --- 5. ÉLÉMENTS DE FORMULAIRE --- */
.layout-checkout-form fieldset.checkout-pane {
  border: none !important;
  padding: 0 !important;
  margin: 0 0 2rem 0 !important;
  background: transparent !important;
}
.layout-checkout-form .profile--view-mode-full {                         /* Bloc adresse sélectionnée */
  background: #ffffff !important;
  color: #2d3436 !important;
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid #04396d !important;
  margin: 15px 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
/* --- 6. BOUTONS --- */
.layout-checkout-form .layout-region-checkout-footer #edit-actions-next,
.layout-region-checkout-footer [data-drupal-selector="edit-actions-next"] {/* Bouton principal "Continuer" */
  width: 100% !important;
  background-color: #007bff !important;
  color: #fff !important;
  padding: 16px 20px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  border: none !important;
  cursor: pointer;
  display: block;
}
.layout-checkout-form .layout-region-checkout-footer #edit-actions-next:hover,
.layout-region-checkout-footer [data-drupal-selector="edit-actions-next"] {
  background-color: #0056b3 !important;
}
.layout-checkout-form .address-book-edit-button {                         /* Bouton Modifier l'adresse */
  background: white !important;
  border: 1px solid #007bff !important;
  color: #007bff !important;
  padding: 6px 12px !important;
  font-size: 0.85rem !important;
  border-radius: 4px !important;
}