/* ===== Base globale ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ===== Registration form fixes ===== */

/* 1) Force error messages to display on failed registration */
#customer-form .alert,
#customer-form .alert-danger,
#customer-form .notification,
#customer-form .help-block,
#customer-form .invalid-feedback {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 2) Phone: country/indicatif select must stay on one line (no text dropping) */
#customer-form .pratinium-phone-wrap {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

#customer-form .pratinium-country-select {
  max-width: 260px;
  min-height: 0;
  box-sizing: border-box;
  height: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Force exact vertical alignment with the phone input */
#customer-form .pratinium-phone-wrap > * {
  align-self: stretch;
}

#customer-form .pratinium-country-select option {
  white-space: nowrap;
}

#customer-form .pratinium-phone-wrap input {
  flex: 1 1 auto;
  min-width: 160px;
}

/* 3) Password toggle: modern eye icon on grey background
      - registration (#customer-form)
      - login (#login-form)
*/
#customer-form .pratinium-eye-toggle,
#login-form .pratinium-eye-toggle {
  background: #d0d0d0;
  border: 0;
  border-radius: 6px;
  height: 42px;
  min-width: 54px;
  display: inline-flex;
  align-items: stretch;
  justify-content: center;
  cursor: pointer;
}

#customer-form .pratinium-eye-toggle svg,
#login-form .pratinium-eye-toggle svg {
  display: block;
}

/* Fallback (no JS needed): restyle the native show-password control if the theme injects it.
   This covers Prestashop classic (data-action="show-password") and common variants.
*/
#customer-form button[data-action="show-password"],
#customer-form a[data-action="show-password"],
#customer-form button.js-show-password,
#customer-form a.js-show-password,
#customer-form .input-group-append button[data-action="show-password"],
#customer-form .input-group-append .btn[data-action="show-password"],
#customer-form .input-group-btn button[data-action="show-password"],
#customer-form .input-group-btn .btn[data-action="show-password"],
#login-form button[data-action="show-password"],
#login-form a[data-action="show-password"],
#login-form button.js-show-password,
#login-form a.js-show-password,
#login-form .input-group-append button[data-action="show-password"],
#login-form .input-group-append .btn[data-action="show-password"],
#login-form .input-group-btn button[data-action="show-password"],
#login-form .input-group-btn .btn[data-action="show-password"] {
  background: #d0d0d0;
  border: 0;
  border-radius: 6px;
  height: 42px;
  min-width: 54px;
  display: inline-flex;
  align-items: stretch;
  justify-content: center;
  cursor: pointer;

  /* Hide the label ("Montrer") without breaking click target */
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-shadow: none;
}

#customer-form button[data-action="show-password"]::before,
#customer-form a[data-action="show-password"]::before,
#customer-form button.js-show-password::before,
#customer-form a.js-show-password::before,
#login-form button[data-action="show-password"]::before,
#login-form a[data-action="show-password"]::before,
#login-form button.js-show-password::before,
#login-form a.js-show-password::before {
  content: "";
  width: 18px;
  height: 18px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  /* simple eye icon */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M12 5c-7 0-10 7-10 7s3 7 10 7 10-7 10-7-3-7-10-7zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3Cpath fill='%23333' d='M12 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4z'/%3E%3C/svg%3E");
}

html,
body {
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
    system-ui, "Segoe UI", sans-serif;
  color: #111;

  /* Layout global pour coller le footer en bas */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Le <main> PrestaShop contient header, wrapper, footer */
body > main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

/* Zone de contenu qui doit pousser le footer vers le bas */
#wrapper,
#content-wrapper,
#columns,
#page,
.page {
  flex: 1 0 auto;
}

/* ===== Conteneur global (boîte centrée) ===== */
@media (min-width: 1200px) {
  body:not(#index):not(.layout-full-width) .container {
    max-width: 1200px;
  }
}

/* ===== Page Mon compte ===== */

/* Fond doux derrière la zone de contenu */
.page-my-account #content {
  background: radial-gradient(
    circle at top left,
    #ffffff 0,
    #f7f7f8 40%,
    #f4f4f6 100%
  );
}

/* Grille des cartes : cible le conteneur réel (UL/LIST) — hors accordéon */
.page-my-account #content .links:not(.pratinium-tiles-grid),
.page-my-account #content .links ul:not(.pratinium-tiles-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 10px;
  list-style: none;
}

/* ===== Accordéon (Mon compte) : 3 blocs repliables + grille 3×2 ===== */
.page-my-account #content .pratinium-accordion {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 10px;
}

.page-my-account #content .pratinium-accordion__item {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 22px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.04);
  margin-bottom: 18px;
  overflow: hidden;
}

.page-my-account #content .pratinium-accordion__summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  user-select: none;
}

/* Hide default marker */
.page-my-account #content .pratinium-accordion__summary::-webkit-details-marker {
  display: none;
}

.page-my-account #content .pratinium-accordion__summary::after {
  content: "\25BE";
  float: right;
  opacity: 0.75;
  transform: translateY(1px);
}

.page-my-account #content details[open] > .pratinium-accordion__summary::after {
  content: "\25B4";
}

.page-my-account #content .pratinium-accordion__content {
  padding: 0 10px 18px;
}

/* Animation d’ouverture/fermeture plus douce */
.page-my-account #content .pratinium-accordion details > .pratinium-accordion__content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 520ms cubic-bezier(0.22, 1, 0.36, 1), opacity 420ms ease;
  will-change: max-height, opacity;
}

.page-my-account #content .pratinium-accordion details[open] > .pratinium-accordion__content {
  max-height: 1200px; /* suffisamment grand pour le contenu */
  opacity: 1;
}


/* Force grid 3 columns inside each block */
.page-my-account #content .pratinium-accordion .links.pratinium-tiles-grid,
details[data-section] ul.pratinium-tiles-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  margin: 0 !important;
  padding: 10px !important;
  list-style: none !important;
}

.page-my-account #content .pratinium-accordion .links.pratinium-tiles-grid li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Nettoyage des LI pour éviter les décalages */
.page-my-account #content .links li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ===== Carte (lien) ===== */
.page-my-account #content .links a,
.page-my-account #content .links .link-item a {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  text-align: center;

  width: 100%;
  min-height: 95px;
  padding: 26px 20px;

  background: #fff;
  color: #111;
  text-decoration: none;

  border-radius: 22px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.04);

  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    border-color 0.18s ease-out,
    background-color 0.18s ease-out,
    color 0.18s ease-out;
}

/* Hover & Focus (accessibilité incluse) */
.page-my-account #content .links a:hover,
.page-my-account #content .links .link-item a:hover,
.page-my-account #content .links a:focus,
.page-my-account #content .links .link-item a:focus,
.page-my-account #content .links a:focus-visible,
.page-my-account #content .links .link-item a:focus-visible {
  transform: translateY(-4px);
  border-color: #0a84ff;
  background-color: #f7f9ff;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.1);
  outline: 2px solid #0a84ff;
  outline-offset: 4px;
}

/* ===== Icônes ===== */
.page-my-account #content .links a i,
.page-my-account #content .links a svg,
.page-my-account #content .links .link-item a i,
.page-my-account #content .links .link-item a svg {
  width: 44px;
  height: 22px;
  display: inline-flex;
  align-items: stretch;
  justify-content: center;

  margin-bottom: 14px;
  border-radius: 999px;
  font-size: 22px;

  border: 1px solid rgba(0, 0, 0, 0.14);
  background: linear-gradient(180deg, #fafafa, #f3f3f4);
  color: #111;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);

  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    border-color 0.18s ease-out,
    background-color 0.18s ease-out,
    color 0.18s ease-out;
}

.page-my-account #content .links a svg,
.page-my-account #content .links .link-item a svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}

/* Micro-anim icône au survol/focus */
.page-my-account #content .links a:hover i,
.page-my-account #content .links a:hover svg,
.page-my-account #content .links a:focus-visible i,
.page-my-account #content .links a:focus-visible svg,
.page-my-account #content .links .link-item a:hover i,
.page-my-account #content .links .link-item a:hover svg,
.page-my-account #content .links .link-item a:focus-visible i,
.page-my-account #content .links .link-item a:focus-visible svg {
  transform: translateY(-2px) scale(1.04);
  border-color: #0a84ff;
  background: #f1f6ff;
  color: #0a84ff;
  box-shadow: 0 10px 26px rgba(10, 132, 255, 0.26);
}

/* ===== Titres & sous-titres ===== */
.page-my-account #content .links a span,
.page-my-account #content .links a .link-item__title,
.page-my-account #content .links .link-item a span,
.page-my-account #content .links .link-item a .link-item__title {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #111;
}

.page-my-account #content .links a small,
.page-my-account #content .links .link-item a small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: #7c7c80;
}

/* ===== Robustesse tuiles compte : icône toujours visible + libellé sous l’icône ===== */
.page-my-account #content .links a .link-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

/* Forcer l’affichage des wrappers d’icônes (selon variantes de markup) */
.page-my-account #content .links a .link-item__icon,
.page-my-account #content .links a .link-item__icon * {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.page-my-account #content .links a i,
.page-my-account #content .links a svg {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Libellé injecté/normalisé */
.page-my-account #content .links a .pratinium-tile-label {
  display: block;
  margin-top: 12px;
}

/* ===== Éléments hors compte (exemple produits) ===== */
#products .product-miniature {
  border-radius: 0.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* ===== Nettoyage d’anciens styles contradictoires ===== */
.page-my-account #content .links {
  display: grid;
}

.page-my-account #content .links a {
  flex: none;
  max-width: 100%;
}

/* ===== Pied de page personnalisé ===== */
#footer,
.footer-container,
.footer-bottom {
  padding: 5px 0 !important;
  font-size: 8px;
  line-height: 1.4;

  flex-shrink: 0;
  margin-top: auto;
}

/* ===== Navigation "Retour compte" (pages compte client) ===== */
.pratinium-account-return-links {
  display: flex;
  align-items: stretch;
  gap: 16px;
  margin: 8px 0 18px;
  width: 100%;
  justify-content: flex-start;
}

.pratinium-account-return-links a {
  display: inline-flex;
  align-items: stretch;
  gap: 6px;
  text-decoration: none;
}

.pratinium-account-return-links__home i.material-icons {
  font-size: 18px;
  line-height: 1;
}

.footer-bottom {
  margin-top: 5px !important;
}

@media (max-width: 768px) {
  body.page-my-account #content ul.links {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ===== Ajustements mobile : 3 colonnes, tuiles identiques & texte adapté ===== */
@media (max-width: 768px) {
  .page-my-account #content .links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-my-account #content .links li {
    height: 100%;
  }

  .page-my-account #content .links a {
    height: 115px;
    min-height: 0;
    padding: 18px 10px;
  }

  /* Libellés tuiles : uniformiser police + taille (calquées sur "AVOIRS") */
  .page-my-account #content .links a span,
  .page-my-account #content .links a .pratinium-tile-label,
  .page-my-account #content .links a .link-item__title {
    font-family: inherit !important;
    font-size: 8px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
  }

  .page-my-account #content .links a small {
    font-size: 8px;
    line-height: 1.3;
  }
}

/* --- Tuiles BLOCKS : Anthracite Premium (moins foncé) --- */
.page-my-account #content .links.pratinium-blocks .pratinium-block-tile {
  background: #2b2b2f !important;
  border: 2px solid #1a1a1a !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* Texte de la tuile block */
.page-my-account #content .links.pratinium-blocks .pratinium-block-tile span,
.page-my-account #content .links.pratinium-blocks .pratinium-block-tile small {
  color: #ffffff !important;
}

/* Icône dans rond inversé */
.page-my-account #content .links.pratinium-blocks .pratinium-block-tile i,
.page-my-account #content .links.pratinium-blocks .pratinium-block-tile svg {
  background: #ffffff !important;
  color: #2b2b2f !important;
  border-color: #ffffff !important;
  box-shadow: none !important;
}

/* Effet hover : sombre premium */
.page-my-account #content .links.pratinium-blocks .pratinium-block-tile:hover,
.page-my-account #content .links.pratinium-blocks .pratinium-block-tile:focus,
.page-my-account #content .links.pratinium-blocks .pratinium-block-tile:focus-visible {
  background: #1f2023 !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

body#index .header_user_info,
body#index #_desktop_user_info {
  display: none !important;
}

.header_user_info span,
#_desktop_user_info span {
  display: none !important;
}

/* ===== Correction du décalage horizontal sur les pages Pratinium Academy ===== */
@media (min-width: 992px) {
  body[id^="module-pratiniumacademy-"] #wrapper .container {
    max-width: 100%;
  }
}

/* ===== Layout full-width : header / wrapper / footer ===== */
body.layout-full-width #wrapper > .container {
  max-width: none !important;
  width: 100% !important;
}

body.layout-full-width #header .container,
body.layout-full-width #wrapper > .container,
body.layout-full-width #footer .container {
  max-width: none !important;
  width: 100% !important;
}

body.layout-full-width #header .container,
body.layout-full-width #wrapper > .container,
body.layout-full-width #footer .container {
  padding-left: 16px;
  padding-right: 16px;
}


/* Contenu principal : supprime la largeur max Bootstrap */
#wrapper .container,
#wrapper .container-fluid {
  max-width: none !important;
  width: 100% !important;
}

/* Optionnel : bord à bord (sinon garde une gouttière) */
#wrapper .container,
#wrapper .container-fluid {
  padding-left: 16px;   /* mets 0 si tu veux bord-à-bord */
  padding-right: 16px;  /* mets 0 si tu veux bord-à-bord */
}


/* ====================================================================== */
/* ====================== HOME : FIX PS_BANNER ULTRA ROBUSTE ============= */
/* ====================================================================== */

/* 1) Sur la home : on déverrouille le container du contenu */
body#index #wrapper > .container,
body#index #wrapper .container {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2) Cible le module ps_banner + ses wrappers possibles */
body#index #wrapper .ps_banner,
body#index #wrapper .ps_banner .banner,
body#index #wrapper .ps_banner a,
body#index #wrapper .ps_banner a.banner,
body#index #wrapper a.banner,
body#index #wrapper .banner {
  position: relative !important;

  /* full-bleed */
  width: 100vw !important;
  max-width: none !important;
  left: 50% !important;
  margin-left: -50vw !important;
  margin-right: 0 !important;

  display: block !important;
  overflow: hidden !important;

  /* hauteur desktop */
  min-height: 90vh !important;

  /* enlève l'effet "carte centrée" si porté par ce wrapper */
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 3) Si l'arrondi est porté par un wrapper interne (très fréquent) */
body#index #wrapper .ps_banner * {
  max-width: none !important;
}
body#index #wrapper .ps_banner .banner-container,
body#index #wrapper .ps_banner .banner-inner,
body#index #wrapper .ps_banner .block_content,
body#index #wrapper .ps_banner .card,
body#index #wrapper .ps_banner .wrapper {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* 4) Image/picture : remplit */
body#index #wrapper .ps_banner img,
body#index #wrapper .ps_banner picture,
body#index #wrapper .ps_banner picture img,
body#index #wrapper a.banner img,
body#index #wrapper .banner img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

/* 5) Home : occuper plus de hauteur globale */
body#index #wrapper,
body#index #content-wrapper,
body#index #content {
  min-height: calc(100vh - 120px);
}

/* Mobile */
@media (max-width: 768px) {
  body#index #wrapper .ps_banner,
  body#index #wrapper .ps_banner a,
  body#index #wrapper a.banner,
  body#index #wrapper .banner {
    min-height: 90vh !important;
  }

  /* si tu utilises l'image de fond mobile */
  body#index a.banner {
    background: #f2f2f2 url("/modules/ps_banner/img/banner-home-mobile....png")
      center center / cover no-repeat;
  }

  body#index a.banner img.img-fluid {
    display: none !important;
  }
}

.cta-pratinium {
  background: linear-gradient(145deg, #e0e0e0, #f0f0f0);
  border-radius: 12px;
  padding: 12px 24px;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 16px;
  color: #333;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  touch-action: manipulation;
}

.cta-pratinium:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.cta-pratinium:active {
  animation: hapticClick 0.15s ease;
}

@keyframes hapticClick {
  0% { transform: scale(1); }
  50% { transform: scale(0.96); }
  100% { transform: scale(1); }
}

a.cta-pratinium {
  display: inline-block;
  border-radius: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

a.cta-pratinium:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

a.cta-pratinium:active {
  animation: hapticClick 0.15s ease;
}


/* ===== HOME : PRATINIUM SLIDER (full width mais hauteur maîtrisée) ===== */
body#index #pratinium-hero {
  position: relative !important;

  width: 100vw !important;
  max-width: none !important;

  left: 50% !important;
  margin-left: -50vw !important;
  margin-right: 0 !important;

  overflow: hidden !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  /* hauteur maîtrisée */
  min-height: 260px;
  height: 60vh;
  max-height: 350px;
}

/* Images : remplissage */
body#index #pratinium-hero picture,
body#index #pratinium-hero img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Annule le "remplissage écran" qui crée le vide */
body#index #content,
body#index #content-wrapper,
body#index #wrapper {
  min-height: auto !important;
}



/* ========================================================= */
/* HOME – Pratinium Slider : full width propre (sans overflow) */
/* ========================================================= */

/* Empêche tout débordement horizontal dû au 100vw */
body#index {
  overflow-x: hidden;
}

/* Conteneur home : enlève les paddings qui rétrécissent */
body#index #wrapper > .container,
body#index #wrapper .container {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* HERO : breakout sans "100vw" (évite le débordement à droite) */
body#index #pratinium-hero {
  position: relative !important;

  /* Au lieu de width:100vw, on utilise 100% + breakout centré */
  width: 100% !important;
  max-width: none !important;

  left: 50% !important;
  transform: translateX(-50%) !important;

  /* largeur viewport sans bug scrollbar */
  min-width: 100% !important;
  margin: 0 !important;

  /* Hauteur raisonnable */
  height: clamp(360px, 52vh, 560px) !important;

  /* Coins arrondis + coupe l’image */
  border-radius: 28px !important;  /* ajuste si tu veux */
  overflow: hidden !important;

  box-shadow: none !important;
}

/* Si ton module met le fond sur un wrapper interne, on applique aussi l'arrondi */
body#index #pratinium-hero .pratinium-hero__bg,
body#index #pratinium-hero .pratinium-hero__media,
body#index #pratinium-hero .pratinium-hero__inner {
  border-radius: inherit !important;
  overflow: hidden !important;
}

/* Image/picture : remplit le bloc sans déformer */
body#index #pratinium-hero picture,
body#index #pratinium-hero img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Mobile : un peu moins haut */
@media (max-width: 768px) {
  body#index #pratinium-hero {
    height: clamp(320px, 60vh, 520px) !important;
    border-radius: 22px !important;
  }
}


body#index #pratinium-hero {
  margin: 24px auto !important;
  width: min(100%, 1600px) !important; /* optionnel si tu veux une largeur max */
}



/* ========================================================= */
/* HOME – Pratinium Slider : LARGE MAIS CONTENU (SANS OVERFLOW) */
/* ========================================================= */

/* Sécurité anti-scroll horizontal */
body#index {
  overflow-x: hidden;
}

/* On laisse le container normal (PAS full-bleed) */
body#index #wrapper > .container {
  max-width: 100% !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* HERO PRINCIPAL */
body#index #pratinium-hero {
  position: relative !important;

  /* Largeur contrôlée */
  width: 100% !important;
  max-width: 1400px !important;   /* 👈 ajuste ici si besoin */
  margin: 32px auto !important;   /* 👈 marge gauche/droite + espace vertical */

  /* Hauteur maîtrisée */
  height: clamp(360px, 50vh, 520px) !important;

  /* Design */
  border-radius: 32px !important;
  overflow: hidden !important;

  background: #f3f4f6; /* fallback */
}

/* Wrapper interne du module (sécurité) */
body#index #pratinium-hero *,
body#index #pratinium-hero .pratinium-hero__inner,
body#index #pratinium-hero .pratinium-hero__bg {
  border-radius: inherit !important;
}

/* Image / picture */
body#index #pratinium-hero img,
body#index #pratinium-hero picture,
body#index #pratinium-hero picture img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Mobile */
@media (max-width: 768px) {
  body#index #wrapper > .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body#index #pratinium-hero {
    margin: 20px auto !important;
    height: clamp(300px, 60vh, 440px) !important;
    border-radius: 22px !important;
  }
}



/* ========================================================= */
/* HEADER : full width sur TOUTES les pages (Classic + modules) */
/* ========================================================= */

#header .container,
#header .container-fluid,
#header .header-top .container,
#header .header-nav .container,
#header .header-top .container-fluid,
#header .header-nav .container-fluid {
  max-width: none !important;
  width: 100% !important;
}

/* Garde un padding cohérent (aligné avec tes pages) */
@media (min-width: 1200px) {
  #header .container,
  #header .container-fluid,
  #header .header-top .container,
  #header .header-nav .container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

@media (max-width: 1199px) {
  #header .container,
  #header .container-fluid,
  #header .header-top .container,
  #header .header-nav .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* ========================================================= */
/* ALIGNEMENT TITRES = ALIGNEMENT CONTENU (desktop + mobile) */
/* ========================================================= */

/* 1) Le contenu définit la référence */
body:not(#index) #content,
body:not(#index) #content-wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2) Le container interne gère l’alignement réel */
body:not(#index) #content > .container,
body:not(#index) #content-wrapper > .container {
  padding-left: 24px;
  padding-right: 24px;
}

@media (max-width: 768px) {
  body:not(#index) #content > .container,
  body:not(#index) #content-wrapper > .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* 3) Les titres suivent EXACTEMENT le flux du contenu */
body:not(#index) h1,
body:not(#index) .page-title,
body:not(#index) header.page-header,
body:not(#index) header.page-header h1 {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* 4) Breadcrumb = même règle */
body:not(#index) .breadcrumb {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Breadcrumb / liens "Accueil" et "Retour" alignés à gauche sur les pages Compte */
body.page-my-account .breadcrumb,
body#my-account .breadcrumb,
body#identity .breadcrumb,
body#addresses .breadcrumb,
body#history .breadcrumb,
body#order-detail .breadcrumb,
body#module-blockwishlist-lists .breadcrumb,
body#module-blockwishlist-mywishlist .breadcrumb,
body#module-psgdpr-gdpr .breadcrumb {
  display: flex !important;
  justify-content: flex-start !important;
}

body.page-my-account .breadcrumb ol,
body.page-my-account .breadcrumb ul,
body#my-account .breadcrumb ol,
body#my-account .breadcrumb ul,
body#identity .breadcrumb ol,
body#identity .breadcrumb ul,
body#addresses .breadcrumb ol,
body#addresses .breadcrumb ul,
body#history .breadcrumb ol,
body#history .breadcrumb ul,
body#order-detail .breadcrumb ol,
body#order-detail .breadcrumb ul,
body#module-blockwishlist-lists .breadcrumb ol,
body#module-blockwishlist-lists .breadcrumb ul,
body#module-blockwishlist-mywishlist .breadcrumb ol,
body#module-blockwishlist-mywishlist .breadcrumb ul,
body#module-psgdpr-gdpr .breadcrumb ol,
body#module-psgdpr-gdpr .breadcrumb ul {
  margin-left: 0 !important;
}

/* Liens "Retour à votre compte" + "Accueil" (page-footer) alignés à gauche */
body#identity .page-footer,
body#addresses .page-footer,
body#history .page-footer,
body#order-detail .page-footer,
body#module-blockwishlist-lists .page-footer,
body#module-blockwishlist-mywishlist .page-footer,
body#module-psgdpr-gdpr .page-footer,
body#authentication .page-footer,
body#registration .page-footer {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: stretch;
  gap: 16px;
  text-align: left;
}

body#identity .page-footer a,
body#addresses .page-footer a,
body#history .page-footer a,
body#order-detail .page-footer a,
body#module-blockwishlist-lists .page-footer a,
body#module-blockwishlist-mywishlist .page-footer a,
body#module-psgdpr-gdpr .page-footer a,
body#authentication .page-footer a,
body#registration .page-footer a {
  margin: 0 !important;
}

/* Supprimer le titre "Mes listes" (wishlist) */
body#module-blockwishlist-lists h1,
body#module-blockwishlist-lists .page-heading,
body#module-blockwishlist-lists header.page-header h1 {
  display: none !important;
}


/* ========================================================= */
/* GOUTTIÈRES (marges gauche/droite) PARTOUT, y compris layout-full-width */
/* Objectif: contenu + titres avec une petite marge comme le header */
/* ========================================================= */

:root{
  --ps-gutter-desktop: 20px;
  --ps-gutter-mobile: 10px;
}

/* 1) Gouttière sur les conteneurs classiques (wrapper / content) */
body:not(#index) #wrapper,
body:not(#index) #content-wrapper,
body:not(#index) #content {
  padding-left: var(--ps-gutter-desktop) !important;
  padding-right: var(--ps-gutter-desktop) !important;
}

@media (max-width: 768px){
  body:not(#index) #wrapper,
  body:not(#index) #content-wrapper,
  body:not(#index) #content {
    padding-left: var(--ps-gutter-mobile) !important;
    padding-right: var(--ps-gutter-mobile) !important;
  }
}

/* 2) Évite le double padding si un .container existe déjà à l’intérieur */
body:not(#index) #wrapper > .container,
body:not(#index) #content-wrapper > .container,
body:not(#index) #content > .container,
body:not(#index) #wrapper > .container-fluid,
body:not(#index) #content-wrapper > .container-fluid,
body:not(#index) #content > .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* 3) Titres: restent alignés au contenu (pas de décalage négatif) */
body:not(#index) h1,
body:not(#index) .page-title,
body:not(#index) header.page-header,
body:not(#index) header.page-header h1 {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* ===== Ajustements navigation compte & header ===== */

/* 1) Supprimer totalement la zone "Déconnexion" (et éviter l’espace fantôme) */
#_desktop_user_info,
.header_user_info,
#header .header-nav .user-info {
  display: none !important;
}

/* Recolle les éléments à droite (Devise / Panier) */
#header .header-nav .right-nav {
  display: flex !important;
  align-items: stretch;
  justify-content: flex-end;
  gap: 16px;
}

#header .header-nav .right-nav > div,
#header .header-nav .right-nav > a {
  margin-left: 0 !important;
}

/* 2) Renommer certaines tuiles du compte (sans toucher au template parent)
   On masque les libellés existants (span + small) puis on réinjecte le nouveau titre. */

/* Adresse
   NB: selon la config SEO, l’URL peut contenir addresses / address / adresses / adresse(s) */
.page-my-account #content .links a[href*="controller=addresses"],
.page-my-account #content .links a[href*="addresses"],
.page-my-account #content .links a[href*="address"],
.page-my-account #content .links a[href*="adresses"],
.page-my-account #content .links a[href*="adresse"],
.page-my-account #content .links .link-item a[href*="controller=addresses"],
.page-my-account #content .links .link-item a[href*="addresses"],
.page-my-account #content .links .link-item a[href*="address"],
.page-my-account #content .links .link-item a[href*="adresses"],
.page-my-account #content .links .link-item a[href*="adresse"] {
  position: relative;
}

.page-my-account #content .links a[href*="controller=addresses"] span,
.page-my-account #content .links a[href*="controller=addresses"] small,
.page-my-account #content .links a[href*="controller=addresses"] .link-item__title,
.page-my-account #content .links a[href*="controller=addresses"] .link-item__text,
.page-my-account #content .links a[href*="addresses"] span,
.page-my-account #content .links a[href*="addresses"] small,
.page-my-account #content .links a[href*="addresses"] .link-item__title,
.page-my-account #content .links a[href*="addresses"] .link-item__text,
.page-my-account #content .links a[href*="address"] span,
.page-my-account #content .links a[href*="address"] small,
.page-my-account #content .links a[href*="address"] .link-item__title,
.page-my-account #content .links a[href*="address"] .link-item__text,
.page-my-account #content .links a[href*="adresses"] span,
.page-my-account #content .links a[href*="adresses"] small,
.page-my-account #content .links a[href*="adresses"] .link-item__title,
.page-my-account #content .links a[href*="adresses"] .link-item__text,
.page-my-account #content .links a[href*="adresse"] span,
.page-my-account #content .links a[href*="adresse"] small,
.page-my-account #content .links a[href*="adresse"] .link-item__title,
.page-my-account #content .links a[href*="adresse"] .link-item__text,
.page-my-account #content .links .link-item a[href*="controller=addresses"] span,
.page-my-account #content .links .link-item a[href*="controller=addresses"] small,
.page-my-account #content .links .link-item a[href*="controller=addresses"] .link-item__title,
.page-my-account #content .links .link-item a[href*="controller=addresses"] .link-item__text,
.page-my-account #content .links .link-item a[href*="addresses"] span,
.page-my-account #content .links .link-item a[href*="addresses"] small,
.page-my-account #content .links .link-item a[href*="addresses"] .link-item__title,
.page-my-account #content .links .link-item a[href*="addresses"] .link-item__text,
.page-my-account #content .links .link-item a[href*="address"] span,
.page-my-account #content .links .link-item a[href*="address"] small,
.page-my-account #content .links .link-item a[href*="address"] .link-item__title,
.page-my-account #content .links .link-item a[href*="address"] .link-item__text,
.page-my-account #content .links .link-item a[href*="adresses"] span,
.page-my-account #content .links .link-item a[href*="adresses"] small,
.page-my-account #content .links .link-item a[href*="adresses"] .link-item__title,
.page-my-account #content .links .link-item a[href*="adresses"] .link-item__text,
.page-my-account #content .links .link-item a[href*="adresse"] span,
.page-my-account #content .links .link-item a[href*="adresse"] small,
.page-my-account #content .links .link-item a[href*="adresse"] .link-item__title,
.page-my-account #content .links .link-item a[href*="adresse"] .link-item__text {
  display: none !important;
}

.page-my-account #content .links a[href*="controller=addresses"]::after,
.page-my-account #content .links a[href*="addresses"]::after,
.page-my-account #content .links a[href*="address"]::after,
.page-my-account #content .links a[href*="adresses"]::after,
.page-my-account #content .links a[href*="adresse"]::after,
.page-my-account #content .links .link-item a[href*="controller=addresses"]::after,
.page-my-account #content .links .link-item a[href*="addresses"]::after,
.page-my-account #content .links .link-item a[href*="address"]::after,
.page-my-account #content .links .link-item a[href*="adresses"]::after,
.page-my-account #content .links .link-item a[href*="adresse"]::after {
  content: "Adresse";
  display: block;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #111;
}

/* NOTE : le renommage des tuiles est maintenant géré en JS (assets/js/pratinium-account.js)
   pour ne jamais masquer les icônes (certaines tuiles portent l’icône dans un <span>). */

/* ====================================================================== */
/* ========== OVERRIDES v4 : icones visibles + labels sous icones ========= */
/* ====================================================================== */

/* 1) Ne pas teinter le fond de la tuile au focus (évite le "contenant" bleu)
   et enlever l'outline bleu trop visible. */
.page-my-account #content .links a:focus,
.page-my-account #content .links .link-item a:focus,
.page-my-account #content .links a:focus-visible,
.page-my-account #content .links .link-item a:focus-visible {
  background-color: #fff !important;
  outline: none !important;
  outline-offset: 0 !important;
}

/* 2) Label toujours sous l'icone : forcer un flux vertical dans le "link-item" */
.page-my-account #content .links a .link-item,
.page-my-account #content .links .link-item a .link-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
}

/* 3) RENAME ROBUSTE SANS CASSER LES ICONES
   - On masque tout le texte interne sauf l'icone (i/svg)
   - On injecte le nouveau libellé via ::after sur .link-item (dans le flux) */

/* Adresse */
.page-my-account #addresses-link .link-item *:not(i):not(svg) {
  display: none !important;
}
.page-my-account #addresses-link .link-item i,
.page-my-account #addresses-link .link-item svg {
  display: inline-flex !important;
}
.page-my-account #addresses-link .link-item::after {
  content: "Adresse";
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #111;
}

/* Historique */
.page-my-account #history-link .link-item *:not(i):not(svg) {
  display: none !important;
}
.page-my-account #history-link .link-item i,
.page-my-account #history-link .link-item svg {
  display: inline-flex !important;
}
.page-my-account #history-link .link-item::after {
  content: "Commandes";
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #111;
}

/* RGPD (si le lien est détectable par href) */
.page-my-account #content .links a[href*="gdpr"] .link-item *:not(i):not(svg),
.page-my-account #content .links a[href*="psgdpr"] .link-item *:not(i):not(svg) {
  display: none !important;
}
.page-my-account #content .links a[href*="gdpr"] .link-item::after,
.page-my-account #content .links a[href*="psgdpr"] .link-item::after {
  content: "RGPD";
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #111;
}


/* 3) Renommage des tuiles sans masquer les icones
   (on masque uniquement les éléments texte, puis on réinjecte un libellé). */

/* Adresse */
.page-my-account #addresses-link .link-item i,
.page-my-account #addresses-link .link-item svg {
  display: inline-flex !important;
}
.page-my-account #addresses-link .link-item > *:not(i):not(svg) {
  display: none !important;
}
.page-my-account #addresses-link .link-item::after {
  content: "Adresse";
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #111;
}

/* Historique de commandes */
.page-my-account #history-link .link-item i,
.page-my-account #history-link .link-item svg {
  display: inline-flex !important;
}
.page-my-account #history-link .link-item > *:not(i):not(svg) {
  display: none !important;
}
.page-my-account #history-link .link-item::after {
  content: "Commandes";
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #111;
}

/* RGPD : on cible par href (module), mais on garde l'icone */
.page-my-account #content .links a[href*="gdpr"] .link-item i,
.page-my-account #content .links a[href*="gdpr"] .link-item svg,
.page-my-account #content .links a[href*="psgdpr"] .link-item i,
.page-my-account #content .links a[href*="psgdpr"] .link-item svg {
  display: inline-flex !important;
}
.page-my-account #content .links a[href*="gdpr"] .link-item > *:not(i):not(svg),
.page-my-account #content .links a[href*="psgdpr"] .link-item > *:not(i):not(svg) {
  display: none !important;
}
.page-my-account #content .links a[href*="gdpr"] .link-item::after,
.page-my-account #content .links a[href*="psgdpr"] .link-item::after {
  content: "RGPD";
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #111;
}

/* 4) Enlever le petit "contenant" autour de l'icone+texte (souvent un span/link-item stylé)
   => on neutralise fonds/bordures/ombres sur le wrapper interne si présent. */
.page-my-account #content .links a .link-item,
.page-my-account #content .links .link-item a .link-item {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}

/* ====================================================================== */
/* ========== OVERRIDES v5 : renommage sans casser les icones ============ */
/* ====================================================================== */

/* On annule les masquages agressifs et on cache le texte via font-size:0,
   puis on injecte le libellé voulu. Cette technique conserve les icônes
   même si elles sont portées par un pseudo-élément ou un background. */

.page-my-account #addresses-link .link-item,
.page-my-account #history-link .link-item,
.page-my-account #content .links a[href*="gdpr"] .link-item,
.page-my-account #content .links a[href*="psgdpr"] .link-item {
  font-size: 0 !important; /* masque le texte natif */
  line-height: 0 !important;
}

/* S'assure que les icônes restent visibles */
.page-my-account #addresses-link .link-item i,
.page-my-account #addresses-link .link-item svg,
.page-my-account #history-link .link-item i,
.page-my-account #history-link .link-item svg,
.page-my-account #content .links a[href*="gdpr"] .link-item i,
.page-my-account #content .links a[href*="gdpr"] .link-item svg,
.page-my-account #content .links a[href*="psgdpr"] .link-item i,
.page-my-account #content .links a[href*="psgdpr"] .link-item svg {
  display: inline-flex !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

/* Libellés */
.page-my-account #addresses-link .link-item::after {
  content: "Adresse";
}
.page-my-account #history-link .link-item::after {
  content: "Commandes";
}
.page-my-account #content .links a[href*="gdpr"] .link-item::after,
.page-my-account #content .links a[href*="psgdpr"] .link-item::after {
  content: "RGPD";
}

.page-my-account #addresses-link .link-item::after,
.page-my-account #history-link .link-item::after,
.page-my-account #content .links a[href*="gdpr"] .link-item::after,
.page-my-account #content .links a[href*="psgdpr"] .link-item::after {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #111;
}

/* ====================================================================== */
/* ========== OVERRIDES v6 : icones visibles + libelles sous icones ====== */
/* ====================================================================== */

/* 1) Annuler les hacks précédents qui pouvaient mettre les icones à 0px */
.page-my-account #addresses-link .link-item,
.page-my-account #history-link .link-item,
.page-my-account #content .links a[href*="gdpr"] .link-item,
.page-my-account #content .links a[href*="psgdpr"] .link-item {
  font-size: inherit !important;
  line-height: normal !important;
}

/* 2) Forcer l'affichage des icones (selon variantes de markup) */
.page-my-account #addresses-link .link-item i,
.page-my-account #addresses-link .link-item svg,
.page-my-account #addresses-link .link-item .material-icons,
.page-my-account #addresses-link .link-item .link-item__icon,
.page-my-account #history-link .link-item i,
.page-my-account #history-link .link-item svg,
.page-my-account #history-link .link-item .material-icons,
.page-my-account #history-link .link-item .link-item__icon,
.page-my-account #content .links a[href*="gdpr"] .link-item i,
.page-my-account #content .links a[href*="gdpr"] .link-item svg,
.page-my-account #content .links a[href*="gdpr"] .link-item .material-icons,
.page-my-account #content .links a[href*="gdpr"] .link-item .link-item__icon,
.page-my-account #content .links a[href*="psgdpr"] .link-item i,
.page-my-account #content .links a[href*="psgdpr"] .link-item svg,
.page-my-account #content .links a[href*="psgdpr"] .link-item .material-icons,
.page-my-account #content .links a[href*="psgdpr"] .link-item .link-item__icon {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.page-my-account #addresses-link .link-item .material-icons,
.page-my-account #history-link .link-item .material-icons,
.page-my-account #content .links a[href*="gdpr"] .link-item .material-icons,
.page-my-account #content .links a[href*="psgdpr"] .link-item .material-icons {
  font-size: 22px !important;
  line-height: 1 !important;
}

/* 3) Mettre icone au dessus + libellé en dessous */
.page-my-account #addresses-link .link-item,
.page-my-account #history-link .link-item,
.page-my-account #content .links a[href*="gdpr"] .link-item,
.page-my-account #content .links a[href*="psgdpr"] .link-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 12px !important;
}

/* 4) Cacher uniquement le texte natif (sans toucher aux conteneurs d'icones) */
.page-my-account #addresses-link .link-item__title,
.page-my-account #addresses-link .link-item__text,
.page-my-account #addresses-link small,
.page-my-account #history-link .link-item__title,
.page-my-account #history-link .link-item__text,
.page-my-account #history-link small,
.page-my-account #content .links a[href*="gdpr"] .link-item__title,
.page-my-account #content .links a[href*="gdpr"] .link-item__text,
.page-my-account #content .links a[href*="gdpr"] small,
.page-my-account #content .links a[href*="psgdpr"] .link-item__title,
.page-my-account #content .links a[href*="psgdpr"] .link-item__text,
.page-my-account #content .links a[href*="psgdpr"] small {
  display: none !important;
}

/* Si le thème place le titre dans un <span> (sans classe), on le masque
   mais on préserve les spans d'icones (material-icons / *icon* / link-item__icon). */
.page-my-account #addresses-link .link-item span:not(.material-icons):not(.link-item__icon):not([class*="icon"]),
.page-my-account #history-link .link-item span:not(.material-icons):not(.link-item__icon):not([class*="icon"]),
.page-my-account #content .links a[href*="gdpr"] .link-item span:not(.material-icons):not(.link-item__icon):not([class*="icon"]),
.page-my-account #content .links a[href*="psgdpr"] .link-item span:not(.material-icons):not(.link-item__icon):not([class*="icon"]) {
  display: none !important;
}

/* 5) Injecter les libellés souhaités sous l'icône */
.page-my-account #addresses-link .link-item::after {
  content: "Adresse";
}
.page-my-account #history-link .link-item::after {
  content: "Commandes";
}
.page-my-account #content .links a[href*="gdpr"] .link-item::after,
.page-my-account #content .links a[href*="psgdpr"] .link-item::after {
  content: "RGPD";
}

.page-my-account #addresses-link .link-item::after,
.page-my-account #history-link .link-item::after,
.page-my-account #content .links a[href*="gdpr"] .link-item::after,
.page-my-account #content .links a[href*="psgdpr"] .link-item::after {
  display: block;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #111;
}

/* ====================================================================== */
/* ========== OVERRIDE FINAL : renommage en JS + icônes intactes ========= */
/* ====================================================================== */

/* 1) On désactive tous les renommages CSS (qui masquaient parfois l'icône) */
.page-my-account #addresses-link::after,
.page-my-account #history-link::after,
.page-my-account #addresses-link .link-item::after,
.page-my-account #history-link .link-item::after,
.page-my-account #content .links a[href*="gdpr"]::after,
.page-my-account #content .links a[href*="psgdpr"]::after,
.page-my-account #content .links a[href*="gdpr"] .link-item::after,
.page-my-account #content .links a[href*="psgdpr"] .link-item::after {
  content: none !important;
  display: none !important;
}

/* 2) On restaure l'affichage normal du contenu interne */
.page-my-account #addresses-link .link-item,
.page-my-account #history-link .link-item,
.page-my-account #content .links a[href*="gdpr"] .link-item,
.page-my-account #content .links a[href*="psgdpr"] .link-item {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Réaffiche les éléments texte si des règles précédentes les avaient masqués */
.page-my-account #addresses-link .link-item span,
.page-my-account #addresses-link .link-item small,
.page-my-account #history-link .link-item span,
.page-my-account #history-link .link-item small,
.page-my-account #content .links a[href*="gdpr"] .link-item span,
.page-my-account #content .links a[href*="gdpr"] .link-item small,
.page-my-account #content .links a[href*="psgdpr"] .link-item span,
.page-my-account #content .links a[href*="psgdpr"] .link-item small {
  display: block !important;
}

/* 3) Mise en colonne : icône au-dessus, libellé en dessous */
.page-my-account #content .links a .link-item,
.page-my-account #content .links .link-item a .link-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

/* On évite que le "wrapper" interne crée un fond autour de l'icône */
.page-my-account #content .links a .link-item {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}

/* 4) Label standard injecté/ajusté par JS */
.page-my-account #content .links .pratinium-tile-label {
  display: block;
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #111;
}

/* v13 - Structure robuste: on met le lien en colonne (icône au-dessus, texte en dessous)
   et on évite que d'anciens styles empêchent l'affichage du libellé injecté. */
.page-my-account #content .links a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.page-my-account #content .links a .pratinium-tile-label {
  display: block !important;
  margin-top: 12px !important;
}

/* 5) On masque les sous-titres pour garder une seule ligne sous l'icône */
.page-my-account #content .links a small {
  display: none !important;
}

/* ====================================================================== */
/* =============== v11 - Fix icons + reliable tile labels =============== */
/* ====================================================================== */

/* 1) Neutralise tous les anciens masquages susceptibles de cacher les icônes */
.page-my-account #content .links a#addresses-link .link-item__title,
.page-my-account #content .links a#history-link .link-item__title,
.page-my-account #content .links a#addresses-link .link-item__text,
.page-my-account #content .links a#history-link .link-item__text,
.page-my-account #content .links a#addresses-link .link-item__content,
.page-my-account #content .links a#history-link .link-item__content,
.page-my-account #content .links a[href*="gdpr"] .link-item__title,
.page-my-account #content .links a[href*="psgdpr"] .link-item__title,
.page-my-account #content .links a[href*="gdpr"] .link-item__text,
.page-my-account #content .links a[href*="psgdpr"] .link-item__text,
.page-my-account #content .links a[href*="gdpr"] .link-item__content,
.page-my-account #content .links a[href*="psgdpr"] .link-item__content {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 2) Force l’affichage des éléments icône (quel que soit le markup) */
.page-my-account #content .links a#addresses-link i,
.page-my-account #content .links a#history-link i,
.page-my-account #content .links a#addresses-link svg,
.page-my-account #content .links a#history-link svg,
.page-my-account #content .links a#addresses-link img,
.page-my-account #content .links a#history-link img,
.page-my-account #content .links a#addresses-link .material-icons,
.page-my-account #content .links a#history-link .material-icons,
.page-my-account #content .links a[href*="gdpr"] i,
.page-my-account #content .links a[href*="psgdpr"] i,
.page-my-account #content .links a[href*="gdpr"] svg,
.page-my-account #content .links a[href*="psgdpr"] svg,
.page-my-account #content .links a[href*="gdpr"] img,
.page-my-account #content .links a[href*="psgdpr"] img,
.page-my-account #content .links a[href*="gdpr"] .material-icons,
.page-my-account #content .links a[href*="psgdpr"] .material-icons,
.page-my-account #content .links a#addresses-link [class*="icon"],
.page-my-account #content .links a#history-link [class*="icon"],
.page-my-account #content .links a[href*="gdpr"] [class*="icon"],
.page-my-account #content .links a[href*="psgdpr"] [class*="icon"] {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Si une règle précédente a masqué des spans "génériques", on les réaffiche */
.page-my-account #content .links a#addresses-link .link-item span,
.page-my-account #content .links a#history-link .link-item span {
  display: inline-block !important;
}

/* 3) Layout : icône au-dessus, libellé en dessous (uniquement dashboard compte) */
.page-my-account#my-account #content .links a .link-item,
body#my-account .page-my-account #content .links a .link-item,
body#my-account #content .links a .link-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 12px !important;
}

/* 4) On ne masque plus systématiquement les petits textes ici :
      le JS s’occupe du nettoyage sur les tuiles ciblées */

/* ===============================
   Homepage: keep carousel only + reduce height (x4 smaller)
   =============================== */
body#index #carousel,
body#index .ps_imageslider,
body#index .homeslider-container {
  max-height: 80px; /* ~1/4 of typical slider height */
  overflow: hidden;
}

body#index #carousel .carousel-inner,
body#index #carousel .carousel-item {
  height: 80px;
}

body#index #carousel .carousel-item img,
body#index .homeslider-container img {
  height: 80px;
  width: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  body#index #carousel,
  body#index .ps_imageslider,
  body#index .homeslider-container {
    max-height: 55px;
  }
  body#index #carousel .carousel-inner,
  body#index #carousel .carousel-item {
    height: 55px;
  }
  body#index #carousel .carousel-item img,
  body#index .homeslider-container img {
    height: 55px;
  }
}

/* ===============================
   Homepage: pratiniumslider just under carousel + no gap to footer
   =============================== */
body#index #pratinium-hero,
body#index .pratinium-hero {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Remove any extra spacing after homepage content so the footer touches the slide */
body#index #content-wrapper,
body#index #wrapper,
body#index main,
body#index section#wrapper {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

body#index footer,
body#index #footer {
  margin-top: 0 !important;
}

/* ===============================
   Homepage: align carousel + slide with header container (left/right margins)
   + hide indicators (3 dots) on mobile
   =============================== */
/* Match HEADER gutters (same as #header .container padding) */
body#index #carousel,
body#index #pratinium-hero,
body#index .pratinium-hero {
  width: 100%;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box;
}

@media (max-width: 1199px) {
  body#index #carousel,
  body#index #pratinium-hero,
  body#index .pratinium-hero {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Keep inner elements full width inside the padded wrapper */
body#index #carousel .carousel-inner,
body#index #carousel .carousel-item {
  width: 100%;
}

/* Mobile: empêcher tout décalage latéral (carrousel parfaitement centré) */
@media (max-width: 768px) {
  body#index #carousel,
  body#index .ps_imageslider,
  body#index .homeslider-container {
    left: auto !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body#index #carousel .carousel-inner {
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
  }

  body#index #carousel .carousel-item {
    left: auto !important;
    right: auto !important;
  }

  body#index #carousel .carousel-item img,
  body#index .homeslider-container img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Hide the 3 indicator dots on mobile (Bootstrap carousel) */
@media (max-width: 768px) {
  body#index #carousel .carousel-indicators {
    display: none !important;
  }
}

/* ===============================
   Footer: centrer UNIQUEMENT la ligne copyright
   (sans impacter les autres éléments potentiels du footer)
   =============================== */
#footer .pratinium-copyright,
.footer-container .pratinium-copyright,
.footer-bottom .pratinium-copyright {
  display: block;
  width: 100%;
  margin: 0;
  text-align: center !important;
}

/* ===============================
   My account (mobile): center the logout link
   =============================== */
@media (max-width: 768px) {
  body#my-account a.logout,
  body#my-account .logout,
  .page-my-account a.logout,
  .page-my-account .logout {
    display: block !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Some PrestaShop builds use a plain link with ?mylogout=1 (without .logout class) */
  body#my-account a[href*="mylogout"],
  .page-my-account a[href*="mylogout"] {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* =====================================================================
   Account tiles: disable legacy CSS label injection for Adresse/Commandes/RGPD
   (labels are now normalized/injected in JS: assets/js/pratinium-account.js)
   This fixes cases where the "Adresse" tile kept a different font-size.
   ===================================================================== */

/* Hide old pseudo-element labels */
.page-my-account #addresses-link::after,
.page-my-account #history-link::after,
.page-my-account #addresses-link .link-item::after,
.page-my-account #history-link .link-item::after,
.page-my-account #content .links a[href*="gdpr"]::after,
.page-my-account #content .links a[href*="psgdpr"]::after,
.page-my-account #content .links a[href*="gdpr"] .link-item::after,
.page-my-account #content .links a[href*="psgdpr"] .link-item::after,
.page-my-account #content .links a[href*="controller=addresses"]::after,
.page-my-account #content .links a[href*="addresses"]::after,
.page-my-account #content .links a[href*="address"]::after,
.page-my-account #content .links a[href*="adresses"]::after,
.page-my-account #content .links a[href*="adresse"]::after {
  content: none !important;
  display: none !important;
}

/* Re-enable the JS-injected label spans that some legacy rules were hiding */
.page-my-account #content .links a[href*="controller=addresses"] span.pratinium-tile-label,
.page-my-account #content .links a[href*="addresses"] span.pratinium-tile-label,
.page-my-account #content .links a[href*="address"] span.pratinium-tile-label,
.page-my-account #content .links a[href*="adresses"] span.pratinium-tile-label,
.page-my-account #content .links a[href*="adresse"] span.pratinium-tile-label,
.page-my-account #content .links a[href*="history"] span.pratinium-tile-label,
.page-my-account #content .links a[href*="order-history"] span.pratinium-tile-label,
.page-my-account #content .links a[href*="gdpr"] span.pratinium-tile-label,
.page-my-account #content .links a[href*="psgdpr"] span.pratinium-tile-label {
  display: block !important;
}


/* Hide slider/carousel arrows (desktop + mobile) */
.carousel-control-prev,
.carousel-control-next,
.carousel-control-prev-icon,
.carousel-control-next-icon,
.carousel-control.left,
.carousel-control.right,
#carousel .carousel-control,
#carousel .carousel-control-prev,
#carousel .carousel-control-next,
#carousel a.carousel-control-prev,
#carousel a.carousel-control-next,
#carousel button.carousel-control-prev,
#carousel button.carousel-control-next,
#carousel [data-bs-slide="prev"],
#carousel [data-bs-slide="next"],
#carousel [data-slide="prev"],
#carousel [data-slide="next"],
.homeslider-container .bx-prev,
.homeslider-container .bx-next,
#homepage-slider .bx-prev,
#homepage-slider .bx-next,
.slick-prev,
.slick-next,
.slick-arrow,
.swiper-button-prev,
.swiper-button-next,
.owl-prev,
.owl-next,
.flex-prev,
.flex-next {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* Remove big page titles on customer / GDPR / wishlist pages */
body#my-account .page-header,
body#identity .page-header,
body#addresses .page-header,
body#address .page-header,
body#history .page-header,
body#order-slip .page-header,
body#module-psgdpr-gdpr .page-header,
body[id*="gdpr"] .page-header,
body[id*="wishlist"] .page-header,
body[id*="blockwishlist"] .page-header,
body[id*="pswishlist"] .page-header,
body#module-blockwishlist-mywishlist .page-header {
  display: none !important;
}

/* =========================================================
   Fix: "Adresse" (and a few legacy tiles) not affected by
   global/mobile tile label sizing.
   Reason: older CSS rules were injecting labels via ::after and
   hiding all spans inside specific tiles. Labels are now handled
   by JS (assets/js/pratinium-account.js).
   ========================================================= */

/* Disable legacy pseudo-label injection (Adresse / Commandes / RGPD) */
.page-my-account #addresses-link::after,
.page-my-account #history-link::after,
.page-my-account #addresses-link .link-item::after,
.page-my-account #history-link .link-item::after,
.page-my-account #content .links a[href*="gdpr"]::after,
.page-my-account #content .links a[href*="psgdpr"]::after,
.page-my-account #content .links a[href*="gdpr"] .link-item::after,
.page-my-account #content .links a[href*="psgdpr"] .link-item::after,
.page-my-account #content .links a[href*="controller=addresses"]::after,
.page-my-account #content .links a[href*="addresses"]::after,
.page-my-account #content .links a[href*="address"]::after,
.page-my-account #content .links a[href*="adresses"]::after,
.page-my-account #content .links a[href*="adresse"]::after {
  content: none !important;
  display: none !important;
}

/* Re-enable the injected JS label <span class="pratinium-tile-label"> for those tiles */
.page-my-account #content .links a[href*="controller=addresses"] span.pratinium-tile-label,
.page-my-account #content .links a[href*="addresses"] span.pratinium-tile-label,
.page-my-account #content .links a[href*="address"] span.pratinium-tile-label,
.page-my-account #content .links a[href*="adresses"] span.pratinium-tile-label,
.page-my-account #content .links a[href*="adresse"] span.pratinium-tile-label,
.page-my-account #content .links a[href*="history"] span.pratinium-tile-label,
.page-my-account #content .links a[href*="order-history"] span.pratinium-tile-label,
.page-my-account #content .links a[href*="gdpr"] span.pratinium-tile-label,
.page-my-account #content .links a[href*="psgdpr"] span.pratinium-tile-label {
  display: block !important;
}


/* ===== Mobile: réduire la taille de police des noms de tuiles ===== */
@media (max-width: 768px) {
  .page-my-account #content .pratinium-tile-label,
  .page-my-account #content .links a .link-item::after,
  .page-my-account #content .links .link-item__title {
    font-size: 8px !important; /* -2px (min) */
  }
}


/* ===== Lock VC tile visual order even if modules re-order DOM ===== */
.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li { order: 999; }
.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li[data-key="CLUB"] { order: 1; }
.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li[data-key="PROJETS"] { order: 2; }
.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li[data-key="INDEX"] { order: 3; }
.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li[data-key="TITRES SPV"] { order: 4; }
.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li[data-key="MON KYC"] { order: 5; }
.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li[data-key="SEQUESTRES"] { order: 6; }

/* ===== Lock displayed label when our injected label exists ===== */
.page-my-account #content .pratinium-accordion a[data-force-label] { position: relative; }
.page-my-account #content .pratinium-accordion a[data-force-label] .pratinium-tile-label {
  position: relative;
  z-index: 2;
}

/* ===== Hauteur uniforme des tuiles (desktop + mobile) =====
   Certains modules injectent des wrappers qui font que certaines tuiles (ex: Projets / Index)
   n'héritent pas toujours des mêmes contraintes. On force donc la hauteur au niveau CSS,
   en complément du verrouillage JS. */
.page-my-account #content .links a,
.page-my-account #content ul.pratinium-tiles-grid > li > a,
.page-my-account #content .pratinium-accordion .links a {
  height: 180px;
  min-height: 180px;
}



/* ===== Fix40: Projets & Index sometimes miss the direct-child selector, resulting in shorter cards.
   Force the same height constraints on their actual clickable wrapper, without impacting other tiles. ===== */
.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li[data-key="PROJETS"],
.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li[data-key="INDEX"]{
  min-height: 180px !important;
  height: 180px !important;
}
.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li[data-key="PROJETS"] a,
.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li[data-key="INDEX"] a{
  min-height: 180px !important;
  height: 180px !important;
}
.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li[data-key="PROJETS"] a > *,
.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li[data-key="INDEX"] a > *{
  height: 100% !important;
}
/* ===== CLUB label hard override (module-proof) ===== */
.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li[data-key="CLUB"] .link-item { font-size: 0 !important; }
.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li[data-key="CLUB"] .link-item .material-icons { font-size: 24px !important; }
.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li[data-key="CLUB"] .link-item .pratinium-tile-label {
  font-size: 10px !important;
  display: block;
}


/* ===== href-based VC lock (does not depend on JS / data-key) ===== */
.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li { order: 999; }

/* Order by destination href */
.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li a[href*="pratiniuminvest"],
.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li a[href*="pratinium_invest"],
.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li a[href*="invest"][href*="account"] { order: 1; }

.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li a[href*="projets"],
.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li a[href*="projects"] { order: 2; }

.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li a[href*="index"] { order: 3; }

.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li a[href*="pratiniumspv"],
.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li a[href*="myinvestments"],
.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li a[href*="spv"] { order: 4; }

.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li a[href*="kyc"] { order: 5; }

.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li a[href*="sequest"],
.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li a[href*="sequestr"] { order: 6; }

/* ===== href-based CLUB label hard override (module-proof) ===== */
.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li a[href*="pratiniuminvest"] .link-item,
.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li a[href*="pratinium_invest"] .link-item,
.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li a[href*="invest"][href*="account"] .link-item {
  font-size: 0 !important; /* hide any injected text */
}

.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li a[href*="pratiniuminvest"] .link-item .material-icons,
.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li a[href*="pratinium_invest"] .link-item .material-icons,
.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li a[href*="invest"][href*="account"] .link-item .material-icons {
  font-size: 24px !important;
}

.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li a[href*="pratiniuminvest"] .link-item::after,
.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li a[href*="pratinium_invest"] .link-item::after,
.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li a[href*="invest"][href*="account"] .link-item::after {
  content: "CLUB";
  display: block;
  font-size: 10px !important;
  letter-spacing: .06em;
}
\n\n
/* ===============================
   FIX18 – VC tiles: hard sizing (Flex layout)
   Goal: make all VC tiles same size even if modules inject Bootstrap col-* on <a>
   Strategy: use UL as flex-wrap container; size is controlled by LI (not by A classes).
   =============================== */

/* VC container becomes flex, LI controls width */
body#my-account details[data-section="vc"] ul.pratinium-tiles-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

/* Desktop: 3 columns */
body#my-account details[data-section="vc"] ul.pratinium-tiles-grid > li {
  list-style: none !important;
  flex: 0 0 calc((100% - 48px) / 3) !important; /* 3 cols, 2 gaps */
  max-width: calc((100% - 48px) / 3) !important;
  margin: 0 !important;
}

/* Tablet: 2 columns */
@media (max-width: 991px) {
  body#my-account details[data-section="vc"] ul.pratinium-tiles-grid > li {
    flex: 0 0 calc((100% - 24px) / 2) !important; /* 2 cols, 1 gap */
    max-width: calc((100% - 24px) / 2) !important;
  }
}

/* Mobile: keep 3 columns like other blocks */
@media (max-width: 575px) {
  body#my-account details[data-section="vc"] ul.pratinium-tiles-grid {
    gap: 16px !important;
  }
  body#my-account details[data-section="vc"] ul.pratinium-tiles-grid > li {
    flex: 0 0 calc((100% - 32px) / 3) !important; /* 3 cols, 2 gaps */
    max-width: calc((100% - 32px) / 3) !important;
  }
}

/* A must always fill the LI; kill any Bootstrap col sizing */
body#my-account details[data-section="vc"] ul.pratinium-tiles-grid > li > a,
body#my-account details[data-section="vc"] ul.pratinium-tiles-grid a[class*="col-"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  float: none !important;
}

/* Guard: prevent any tile from spanning multiple columns */
body#my-account details[data-section="vc"] ul.pratinium-tiles-grid > li {
  grid-column: auto !important;
}



/* ===============================
   FIX25 – Cache-bust + SPV/CLUB disambiguation (CSS fallback)
   =============================== */

/* NEVER label generic 'invest' as CLUB (myinvestments etc.) */
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid a[href*="invest"]::after {
  content: "" !important;
  display: none !important;
}

/* CLUB fallback only for club module */
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid a[href*="module/pratiniuminvest"]::after,
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid a[href*="pratiniuminvest"]::after,
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid a[href*="pratinium_invest"]::after {
  content: "CLUB";
  display: block;
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #111;
}

/* SPV fallback */
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid a[href*="pratiniumspv"]::after,
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid a[href*="myinvestments"]::after,
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid a[href*="spv"]::after,
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid a[href*="participation"]::after {
  content: "TITRES SPV";
  display: block;
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #111;
}



/* ===============================
   FIX26 – VC layout: match Community tile size
   Fix25 is based on Fix18 which forced VC tiles into small flex items.
   Here we remove that and re-align VC to the same grid behaviour as other sections.
   =============================== */

body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  justify-items: stretch !important;
  align-items: stretch !important;
}

/* ===============================
   FIX33 – SOURCING layout: keep 3 tiles on one row
   Some installations inject bootstrap col-* sizing that makes the 3rd tile wrap/center.
   =============================== */

body#my-account.page-my-account #content details[data-section="sourcing"] ul.pratinium-tiles-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  justify-items: stretch !important;
  align-items: stretch !important;
}

body#my-account.page-my-account #content details[data-section="sourcing"] ul.pratinium-tiles-grid > li {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body#my-account.page-my-account #content details[data-section="sourcing"] ul.pratinium-tiles-grid > li > a,
body#my-account.page-my-account #content details[data-section="sourcing"] ul.pratinium-tiles-grid > a {
  height: 180px !important;
  min-height: 180px !important;
}

body#my-account.page-my-account #content details[data-section="sourcing"] ul.pratinium-tiles-grid a[class*="col-"] {
  float: none !important;
  flex: none !important;
  flex-basis: auto !important;
  width: auto !important;
  max-width: none !important;
}

@media (max-width: 991px) {
  body#my-account.page-my-account #content details[data-section="sourcing"] ul.pratinium-tiles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 575px) {
  body#my-account.page-my-account #content details[data-section="sourcing"] ul.pratinium-tiles-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===============================
   FIX34 – Hide category menu in the header
   (Top menu: "Boissons / Légumes / Mobiliers"…)
   =============================== */

/* Desktop */
#_desktop_top_menu,
#header .top-menu,
#header .menu,
.header-top .menu {
  display: none !important;
}

/* Mobile */
#_mobile_top_menu_wrapper,
#mobile_top_menu_wrapper,
.mobile_menu_container {
  display: none !important;
}

/* Responsive: 2 cols tablet, 1 col mobile (same as others) */
@media (max-width: 991px) {
  body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 575px) {
  body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Ensure LI is the grid item and stretches */
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Ensure the clickable card fills the full cell (like Community) */
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li > a,
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > a {
  height: 180px !important;
  min-height: 180px !important;
}

/* Neutralize Bootstrap col-* sizing on VC links (some modules inject col-*) */
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid a[class*="col-"] {
  float: none !important;
  flex: none !important;
  flex-basis: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Kill Fix18 VC flex sizing if still present (override) */
body#my-account details[data-section="vc"] ul.pratinium-tiles-grid > li {
  flex: unset !important;
}



/* ===============================
   FIX27 – VC tile height: align exactly with other sections
   Root cause: FIX26 forced VC <a> to height:100% which stretches tiles vertically.
   =============================== */

body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li > a,
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > a {
  height: auto !important;   /* let base .links a min-height/padding drive the size */
  min-height: 95px !important; /* same as base rule in this theme */
}



/* ===============================
   FIX28 – Normalize VC tile heights (Projets / Index)
   Projets & Index were taller than Mon KYC.
   =============================== */

body#my-account.page-my-account details[data-section="vc"] 
ul.pratinium-tiles-grid a[href*="project"],
body#my-account.page-my-account details[data-section="vc"] 
ul.pratinium-tiles-grid a[href*="projet"],
body#my-account.page-my-account details[data-section="vc"] 
ul.pratinium-tiles-grid a[href*="index"] {
  min-height: 95px !important;
  padding-top: 26px !important;
  padding-bottom: 26px !important;
  align-items: center !important;
}



/* ===============================
   FIX29 – VC: Projets & Index height must match Mon KYC (ROBUST)
   Previous selectors based on href didn't match in production.
   We now target by data-key (set by pratinium-account JS) + data-force-label.
   =============================== */

/* Target by data-key on LI */
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li[data-key="PROJETS"] > a,
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li[data-key="INDEX"] > a {
  height: 180px !important;
  min-height: 180px !important;
  padding: 26px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Fallback: target by forced label attribute on <a> */
/* Fallback: target by forced label attribute on <a> */
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid a[data-force-label="Projets"],
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid a[data-force-label="Index"] {
  height: 180px !important;
  min-height: 180px !important;
  padding: 26px 20px !important;
}

/* Ensure no extra vertical spacing is added by inner wrappers */
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li[data-key="PROJETS"] > a > *,
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li[data-key="INDEX"] > a > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Keep label margin identical to other tiles */
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li[data-key="PROJETS"] > a .pratinium-tile-label,
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li[data-key="INDEX"] > a .pratinium-tile-label {
  margin-top: 12px !important;
}



/* ===============================
   FIX30 – VC: force identical tile height (eliminate Projets/Index taller cards)
   We align VC cards to a single fixed height matching the other accordions.
   =============================== */

/* Apply to all VC tiles so every card is identical */
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li > a,
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > a {
  height: 180px !important;
  min-height: 180px !important;
  max-height: 180px !important;
  padding: 26px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* Normalize icon box so different glyphs can't stretch the card */
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid .link-item__icon,
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid .link-item__icon * {
  max-height: 64px !important;
}

/* Keep label spacing consistent */
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid .pratinium-tile-label {
  margin-top: 12px !important;
}



/* ===============================
   FIX31 – Global tile height normalization (VC + Community + Sourcing)
   Goal: make ALL tiles match the (slightly shorter) height now used by Projets/Index.
   Strategy: apply a fixed card height within pratinium accordions on my-account.
   =============================== */

body#my-account.page-my-account #content .pratinium-accordion ul.links.pratinium-tiles-grid a,
body#my-account.page-my-account #content .pratinium-accordion ul.links.pratinium-tiles-grid > li > a,
body#my-account.page-my-account #content .pratinium-accordion .pratinium-accordion__content ul.links a {
  height: 180px !important;
  min-height: 180px !important;
  max-height: 180px !important;
  padding: 26px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* Normalize icon box so different glyphs can't stretch the card */
body#my-account.page-my-account #content .pratinium-accordion ul.links.pratinium-tiles-grid .link-item__icon,
body#my-account.page-my-account #content .pratinium-accordion ul.links.pratinium-tiles-grid .link-item__icon * {
  max-height: 64px !important;
}

/* Consistent label spacing */
body#my-account.page-my-account #content .pratinium-accordion ul.links.pratinium-tiles-grid .pratinium-tile-label {
  margin-top: 12px !important;
}



/* FIX32 – Stronger selector for global tile height (CSS) */
body#my-account.page-my-account #content ul.links a,
body#my-account.page-my-account #content ul.links > li > a,
body#my-account.page-my-account #content ul.links.pratinium-tiles-grid a,
body#my-account.page-my-account #content .pratinium-accordion__content ul.links a {
  height: 180px !important;
  min-height: 180px !important;
  max-height: 180px !important;
}


/* --- FIX45: VC tiles must stay 3 columns (3x2) on ALL screen sizes --- */
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
@media (max-width: 991px){
  body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 575px){
  body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
/* --- /FIX45 --- */


/* =========================================================
   FIX48 – VC: espacement icône ↔ libellé (PROJETS / INDEX)

   Constat : sur ces deux tuiles, le pictogramme (mallette / pouce) est plus haut
   dans l’ovale que sur CLUB, ce qui réduit l’espace perçu entre icône et libellé.

   Solution : on verrouille un token CSS et on l’applique UNIQUEMENT à PROJETS/INDEX.
   Ce token est stable et évite les régressions.
   ========================================================= */

:root {
  /* Valeur de référence (utilisée par la plupart des tuiles VC) */
  --vc-icon-label-gap: 12px;
  /* Ajustement visuel spécifique à PROJETS/INDEX (pour aligner l’écart perçu sur CLUB) */
  --vc-projets-index-icon-label-gap: 12px;
}

/* Projets / Index (VC) : on pousse le libellé plus bas pour retrouver le même écart visuel que CLUB */
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li[data-key="PROJETS"] > a .pratinium-tile-label,
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li[data-key="INDEX"] > a .pratinium-tile-label,
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li[data-key="PROJETS"] > a[data-force-label="Projets"] .pratinium-tile-label,
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li[data-key="INDEX"] > a[data-force-label="Index"] .pratinium-tile-label {
  margin-top: var(--vc-projets-index-icon-label-gap) !important;
}

/* Si le libellé est rendu autrement (span.title / strong / p), on applique aussi la même marge */
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li[data-key="PROJETS"] > a > :not(.link-item__icon):not(.link-item__icon-wrapper):not(svg):not(i):not(img):not(.material-icons):not([class*="icon"]):not([data-icon]),
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li[data-key="INDEX"] > a > :not(.link-item__icon):not(.link-item__icon-wrapper):not(svg):not(i):not(img):not(.material-icons):not([class*="icon"]):not([data-icon]) {
  /* N’appliquer qu’aux éléments texte directs */
  margin-top: var(--vc-projets-index-icon-label-gap) !important;
}



/* =========================================================
   FIX48 – VC: espacement icône ↔ libellé (PROJETS / INDEX)

   Constat : sur ces deux tuiles, le pictogramme (mallette / pouce) est plus haut
   dans l’ovale que sur CLUB, ce qui réduit l’espace perçu entre icône et libellé.

   Solution : on verrouille un token CSS et on l’applique UNIQUEMENT à PROJETS/INDEX
   (desktop/tablette/mobile) pour conserver un rendu constant.
   ========================================================= */

:root {
  /* Espace de référence utilisé par les tuiles VC (ex: CLUB via ::after) */
  --vc-icon-label-gap: 12px;
  /* Compensation spécifique PROJETS/INDEX pour égaliser l’espace perçu */
  --vc-projets-index-icon-label-gap: 12px;
}

/* Cible la grille VC (pas les autres sections) */
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li[data-key="PROJETS"] > a .pratinium-tile-label,
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li[data-key="INDEX"] > a .pratinium-tile-label {
  margin-top: var(--vc-projets-index-icon-label-gap) !important;
}

/* Si jamais le libellé est encore rendu via ::after (fallback), on aligne aussi */
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li[data-key="PROJETS"] > a::after,
body#my-account.page-my-account #content details[data-section="vc"] ul.pratinium-tiles-grid > li[data-key="INDEX"] > a::after {
  margin-top: var(--vc-projets-index-icon-label-gap) !important;
}

/* ===== Password field native "eye" icon suppression ===== */
/* Edge / IE : cache l’icône native “révéler le mot de passe” */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none !important;
}

/* Chrome/Chromium : cache certains boutons natifs (autofill / credentials) */
input[type="password"]::-webkit-credentials-auto-fill-button {
  visibility: hidden !important;
  display: none !important;
  pointer-events: none !important;
}

/* Aligner les blocs checkbox (CGU + message confidentialité) */
.custom-checkbox,
.psgdpr-checkbox {
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
}

/* Ajuster la position de la checkbox */
.custom-checkbox input[type="checkbox"],
.psgdpr-checkbox input[type="checkbox"] {
  margin-top: 3px;
}

/* Supprimer marges parasites du label */
.custom-checkbox label,
.psgdpr-checkbox label {
  margin: 0;
}


/* Fix alignement checkbox "confidentialité des données clients" sur le formulaire compte */
#customer-form input#field-customer_privacy,
#customer-form input#field-psgdpr {
  /* décale la checkbox + son label pour s'aligner sur la colonne des champs (col-md-3) */
  margin-left: 25%;
}

/* Sur mobile, pas de décalage */
@media (max-width: 767.98px) {
  #customer-form input#field-customer_privacy,
  #customer-form input#field-psgdpr {
    margin-left: 0;
  }
}

/* Fallback: masquer le label gauche du bloc "customer_privacy" (sinon désalignement) */
#customer-form label[for="field-customer_privacy"],
#customer-form label[for="customer_privacy"],
form[name="customer_form"] label[for="field-customer_privacy"],
form[name="customer_form"] label[for="customer_privacy"] {
  display: none !important;
}


/* Ensure password eye icon visible even if theme sets svg fill:none */
.pratinium-eye-toggle{color:#111;}
.pratinium-eye-toggle svg, .pratinium-eye-toggle svg path{fill:currentColor !important; stroke:none !important;}

.pratinium-eye-toggle svg{display:block;fill:currentColor;}


/* --- Pratinium: phone selector alignment (keep same visual metrics as .form-control input) --- */
.pratinium-phone-wrap {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.pratinium-phone-wrap .pratinium-country-select.form-control {
  height: auto; /* JS will set exact px height */
  min-height: 0;
}
.pratinium-phone-wrap input[type="tel"], 
.pratinium-phone-wrap input[name="phone"] {
  height: auto; /* keep theme default */
}






/* ===== Password eye state (barred when hidden, unbarred when showing) ===== */
#customer-form button[data-action="show-password"].pratinium-eye-hidden::before,
#login-form button[data-action="show-password"].pratinium-eye-hidden::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23333%27%20d%3D%27M12%207c2.76%200%205%202.24%205%205%200%20.65-.13%201.26-.36%201.83l2.92%202.92C21.02%2015.13%2022%2013.12%2022%2012c0%200-3-7-10-7-1.54%200-2.95.33-4.23.82l2.17%202.17C10.61%207.13%2011.29%207%2012%207z%27%2F%3E%3Cpath%20fill%3D%27%23333%27%20d%3D%27M2.81%204.19L1.39%205.61l2.06%202.06C2.03%209.27%201%2010.96%201%2012c0%200%203%207%2010%207%202.07%200%203.93-.62%205.55-1.64l2.84%202.84%201.41-1.41L2.81%204.19zM12%2017c-2.76%200-5-2.24-5-5%200-.77.18-1.5.49-2.14l1.57%201.57C9.03%2011.61%209%2011.8%209%2012c0%201.66%201.34%203%203%203%20.2%200%20.39-.03.57-.06l1.57%201.57C13.5%2016.82%2012.77%2017%2012%2017zm2.93-5.8l1.58%201.58c.04-.25.08-.51.08-.78%200-1.66-1.34-3-3-3-.27%200-.53.04-.78.08l1.58%201.58z%27%2F%3E%3C%2Fsvg%3E");
}
#customer-form button[data-action="show-password"].pratinium-eye-showing::before,
#login-form button[data-action="show-password"].pratinium-eye-showing::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23333%27%20d%3D%27M12%205c-7%200-10%207-10%207s3%207%2010%207%2010-7%2010-7-3-7-10-7zm0%2012a5%205%200%201%201%200-10%205%205%200%200%201%200%2010z%27%2F%3E%3Cpath%20fill%3D%27%23333%27%20d%3D%27M12%2010a2%202%200%201%200%200%204%202%202%200%200%200%200-4z%27%2F%3E%3C%2Fsvg%3E");
}


/* ===============================
   FIX35 – SOURCING BOOK: force 3 tuiles sur la même ligne (desktop)
   La tuile "Place de Marché" apparaissait seule sur la 2ème ligne.
   On force la grille à 3 colonnes sur toutes les résolutions desktop.
   =============================== */

body#my-account.page-my-account #content details[data-section="sourcing"] ul.pratinium-tiles-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  justify-items: stretch !important;
  align-items: stretch !important;
}

/* Tablet (≤ 991px): 3 colonnes aussi pour 3 tuiles */
@media (max-width: 991px) {
  body#my-account.page-my-account #content details[data-section="sourcing"] ul.pratinium-tiles-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Mobile (≤ 575px): 1 colonne */
@media (max-width: 575px) {
  body#my-account.page-my-account #content details[data-section="sourcing"] ul.pratinium-tiles-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Neutralise tout col-* Bootstrap sur les liens de la section sourcing */
body#my-account.page-my-account #content details[data-section="sourcing"] ul.pratinium-tiles-grid > li {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body#my-account.page-my-account #content details[data-section="sourcing"] ul.pratinium-tiles-grid > li > a,
body#my-account.page-my-account #content details[data-section="sourcing"] ul.pratinium-tiles-grid > a {
  height: 180px !important;
  min-height: 180px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Neutralize order on LI so items flow naturally left-to-right */
body#my-account.page-my-account #content details[data-section="sourcing"] ul.pratinium-tiles-grid > li {
  order: unset !important;
}


/* ===============================
   FIX36 – SOURCING: 3 colonnes SANS dépendre du body#id
   Sélecteurs ultra-larges pour garantir l'application
   =============================== */

/* Règle principale sans body id */
details[data-section="sourcing"] ul.pratinium-tiles-grid,
.pratinium-accordion__item details[data-section="sourcing"] ul.pratinium-tiles-grid,
.pratinium-accordion details[data-section="sourcing"] ul.pratinium-tiles-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

/* Neutralise tout retour à 2 colonnes (tablet override) */
@media (min-width: 576px) {
  details[data-section="sourcing"] ul.pratinium-tiles-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 991px) and (min-width: 576px) {
  details[data-section="sourcing"] ul.pratinium-tiles-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* LI : block, sans width forcée */
details[data-section="sourcing"] ul.pratinium-tiles-grid > li {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Lien : remplit la cellule */
details[data-section="sourcing"] ul.pratinium-tiles-grid > li > a {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
}


/* ===============================
   FIX38 – SOURCING 3 cols: règle nucléaire, aucun sélecteur plus spécifique possible
   =============================== */

/* Cible TOUT ul dans un details[data-section="sourcing"] — quel que soit le contexte */
details[data-section="sourcing"] ul,
details[data-section="sourcing"] ul.links,
details[data-section="sourcing"] .pratinium-accordion__content ul,
details[data-section="sourcing"] .pratinium-tiles-grid,
details[data-section="sourcing"] ul.pratinium-tiles-grid,
details[data-section="sourcing"] > * ul,
[data-section="sourcing"] ul {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

/* Annule minmax(280px) qui peut s'appliquer depuis une règle parente */
details[data-section="sourcing"] ul > li,
[data-section="sourcing"] ul > li {
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  display: block !important;
}


/* ===============================
   FIX39 – SOURCING: neutralise Bootstrap col-md-6 et wrapper account-list
   Le vrai problème : certaines tuiles ont un <div class="account-list"> intermédiaire
   et un <a class="col-lg-4 col-md-6 col-sm-6 col-xs-12"> qui force 2 colonnes Bootstrap.
   =============================== */

/* 1) Le <li> doit occuper exactement 1 cellule de grille */
details[data-section="sourcing"] ul > li,
details[data-section="sourcing"] ul.links > li,
details[data-section="sourcing"] ul.pratinium-tiles-grid > li {
  display: contents !important; /* li disparaît visuellement, ses enfants deviennent items de grille */
}

/* 2) Le wrapper <div class="account-list"> doit aussi être transparent */
details[data-section="sourcing"] ul > li > div.account-list,
details[data-section="sourcing"] ul.links > li > div.account-list {
  display: contents !important;
}

/* 3) L'<a> réel devient l'item de grille — annule les classes Bootstrap col-* */
details[data-section="sourcing"] ul > li > a,
details[data-section="sourcing"] ul > li > div > a,
details[data-section="sourcing"] ul.links > li > a,
details[data-section="sourcing"] ul.links > li > div > a,
details[data-section="sourcing"] a.account-list-item,
details[data-section="sourcing"] a[class*="col-"] {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  /* Force même hauteur */
  height: 180px !important;
  min-height: 180px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}