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

/* ===== Registration form fixes ===== */
#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;
}

#customer-form .pratinium-phone-wrap {
  display: flex;
  gap: 10px;
  align-items: center;
}

#customer-form .pratinium-country-select {
  max-width: 260px;
  height: 42px;
  line-height: 42px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#customer-form .pratinium-country-select option { white-space: nowrap; }
#customer-form .pratinium-phone-wrap input { flex: 1 1 auto; min-width: 160px; }

#customer-form .pratinium-eye-toggle {
  background: #d0d0d0;
  border: 0;
  border-radius: 6px;
  height: 42px;
  min-width: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#customer-form .pratinium-eye-toggle svg { display: block; }

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) */
.page-my-account #content .links,
.page-my-account #content .links ul {
  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 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin: 0;
  padding: 10px;
  list-style: none;
}

.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: center;
  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: center;
  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: center;
  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: center;
  gap: 16px;
  margin: 8px 0 18px;
  width: 100%;
  justify-content: flex-start;
}

.pratinium-account-return-links a {
  display: inline-flex;
  align-items: center;
  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: center;
  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: center;
  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: center;
  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;
}


/* ===== 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: 1 column */
@media (max-width: 575px) {
  body#my-account details[data-section="vc"] ul.pratinium-tiles-grid > li {
    flex: 0 0 100% !important;
    max-width: 100% !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;
}