/* ==========================================================================
   PermisPack — Refonte v2 « Premium » (2026)
   Surcouche du thème classic (chargée après theme.css)
   Identité : navy profond #0C2242 · or #C99715 · typographie éditoriale
   ========================================================================== */

:root {
  --pp-ink: #0A1830;
  --pp-brand: #0C2242;
  --pp-brand-2: #14396E;
  --pp-gold: #C99715;
  --pp-gold-strong: #E0B12F;
  --pp-gold-soft: #F6EDD4;
  --pp-bg: #F7F9FC;
  --pp-surface: #FFFFFF;
  --pp-line: #E4E9F1;
  --pp-text: #263349;
  --pp-muted: #6B7A93;
  --pp-link: #1A56DB;
  --pp-green: #1E8E5A;
  --pp-radius: 10px;
  --pp-radius-lg: 14px;
  --pp-shadow: 0 1px 2px rgba(10, 24, 48, .06), 0 8px 24px rgba(10, 24, 48, .05);
  --pp-shadow-hover: 0 2px 4px rgba(10, 24, 48, .08), 0 16px 40px rgba(10, 24, 48, .12);
  --pp-font-title: 'Poppins', 'Segoe UI', sans-serif;
  --pp-font-body: 'Inter', 'Segoe UI', sans-serif;
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

body {
  font-family: var(--pp-font-body);
  color: var(--pp-text);
  background: var(--pp-bg);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(224, 177, 47, .35);
  color: var(--pp-ink);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(201, 151, 21, .55);
  outline-offset: 2px;
}

#wrapper {
  background: var(--pp-bg);
  box-shadow: none;
  padding-top: 0;
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--pp-font-title);
  color: var(--pp-ink);
  font-weight: 600;
  letter-spacing: -0.015em;
}

a { color: var(--pp-link); }
a:hover { color: #1243AC; }

/* Petit sur-titre de section */
.pp-kicker {
  display: block;
  font-family: var(--pp-font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pp-gold);
  margin-bottom: .6rem;
}

.page-home h2,
.featured-products > h2,
h2.products-section-title {
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  font-weight: 600;
  text-align: center;
  text-transform: none !important;
  letter-spacing: -0.015em;
  color: var(--pp-ink);
  margin: 0 0 1.6rem;
}

/* --------------------------------------------------------------------------
   2. Boutons
   -------------------------------------------------------------------------- */

.btn {
  font-family: var(--pp-font-title);
  font-weight: 600;
  border-radius: var(--pp-radius);
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}

.btn-primary, .btn-primary:focus {
  background-color: var(--pp-brand);
  border-color: var(--pp-brand);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--pp-brand-2);
  border-color: var(--pp-brand-2);
  color: #fff;
}

.btn-secondary, .btn-tertiary {
  background: #fff;
  border: 1px solid var(--pp-line);
  color: var(--pp-ink);
  font-weight: 600;
}

.btn-secondary:hover, .btn-tertiary:hover {
  border-color: var(--pp-brand);
  background: #fff;
  color: var(--pp-brand);
}

/* CTA or — à réserver à l'action principale */
.btn-pp-gold {
  display: inline-block;
  background: var(--pp-gold);
  color: #0A1830 !important;
  font-family: var(--pp-font-title);
  font-weight: 600;
  font-size: .98rem;
  padding: .78rem 1.7rem;
  border-radius: var(--pp-radius);
  text-decoration: none !important;
  transition: background-color .15s ease, transform .12s ease;
}

.btn-pp-gold:hover {
  background: var(--pp-gold-strong);
  transform: translateY(-1px);
}

.btn-pp-ghost {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, .55);
  color: #fff !important;
  font-family: var(--pp-font-title);
  font-weight: 500;
  padding: .74rem 1.55rem;
  border-radius: var(--pp-radius);
  text-decoration: none !important;
  transition: background-color .15s ease, border-color .15s ease;
}

.btn-pp-ghost:hover {
  background: rgba(255, 255, 255, .1);
  border-color: #fff;
}

/* --------------------------------------------------------------------------
   3. Header — une seule barre visuelle
   -------------------------------------------------------------------------- */

.header-banner { display: none; }

#header {
  background: #fff;
  box-shadow: none;
  border-bottom: 1px solid var(--pp-line);
}

/* La barre utilitaire n'existe plus sur ordinateur : tout est dans la barre principale.
   Elle ne sert plus qu'au header mobile (burger + logo + panier). */
#header .header-nav {
  background: #fff;
  border-bottom: 1px solid var(--pp-line);
  margin-bottom: 0;
  max-height: none;
}

@media (min-width: 768px) {
  #header .header-nav { display: none; }
}

/* Barre principale unique : logo + menu + compte/panier + téléphone — sticky, effet verre */
#header .header-top {
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
  backdrop-filter: blur(12px) saturate(1.6);
  padding-top: .55rem;
  padding-bottom: .55rem;
  position: sticky;
  top: 0;
  z-index: 1020;
  box-shadow: 0 1px 0 var(--pp-line);
}

@supports not (backdrop-filter: blur(12px)) {
  #header .header-top { background: #fff; }
}

@media (min-width: 768px) {
  #header .header-top .container > .row {
    display: flex;
    align-items: center;
  }

  #header #_desktop_logo {
    display: flex;
    align-items: center;
  }

  #header #_desktop_logo h1 { margin: 0; }

  #header .header-top-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .9rem;
  }

  /* Le menu occupe l'espace, le reste est poussé à droite */
  #header .header-top-right .menu,
  #header .header-top-right #_desktop_top_menu {
    margin-right: auto;
    margin-bottom: 0;
  }
}

/* Langue / connexion / panier intégrés à la barre principale */
.pp-nav-inline {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  white-space: nowrap;
}

.pp-nav-inline > div { display: inline-flex; align-items: center; }

.pp-nav-inline,
.pp-nav-inline a,
.pp-nav-inline span,
.pp-nav-inline .expand-more {
  color: var(--pp-muted) !important;
  font-size: .85rem;
}

.pp-nav-inline a:hover { color: var(--pp-ink) !important; }

.pp-nav-inline .material-icons { font-size: 1.1rem; }
/* Icônes compte/panier en SVG (pilule desktop) : taille adaptée, centrées par flex */
.pp-nav-inline .pp-ico { display: block; width: 19px; height: 19px; }

.pp-nav-inline .cart-preview {
  padding: .3rem .55rem;
}

.pp-nav-inline .cart-preview.active {
  background: var(--pp-brand);
  border-radius: 8px;
}

.pp-nav-inline .cart-preview.active,
.pp-nav-inline .cart-preview.active a,
.pp-nav-inline .cart-preview.active span,
.pp-nav-inline .cart-preview.active .material-icons {
  color: #fff !important;
}

.pp-nav-inline .blockcart { background: transparent; }

/* Ancien logo conservé : taille naturelle (comme la prod) */
#header .logo {
  max-width: 100%;
  height: auto;
}

#header .top-menu { font-family: var(--pp-font-title); }

#header .top-menu a[data-depth="0"] {
  font-weight: 500;
  font-size: .95rem;
  color: var(--pp-ink);
  text-transform: none;
  padding: .5rem .35rem;
  border-bottom: 2px solid transparent;
}

#header .top-menu a[data-depth="0"]:hover {
  color: var(--pp-brand);
  border-bottom-color: var(--pp-gold);
}

#header .top-menu .sub-menu {
  border-radius: 0 0 var(--pp-radius) var(--pp-radius);
  box-shadow: var(--pp-shadow-hover);
  border: 1px solid var(--pp-line);
}

.pp-header-phone {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--pp-brand);
  color: #fff !important;
  font-family: var(--pp-font-title);
  font-weight: 600;
  font-size: .92rem;
  border-radius: var(--pp-radius);
  padding: .5rem 1rem;
  margin-left: 1rem;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color .15s ease;
}

.pp-header-phone:hover { background: var(--pp-brand-2); }
.pp-header-phone .pp-phone-ico { font-size: 1rem; line-height: 1; }

#search_widget form input[type="text"] {
  border-radius: var(--pp-radius);
  border: 1px solid var(--pp-line);
  background: var(--pp-bg);
  min-width: 200px;
}

#search_widget form input[type="text"]:focus {
  border-color: var(--pp-brand);
  background: #fff;
  outline: none;
}

/* --------------------------------------------------------------------------
   4. Accueil : ordre des sections
   -------------------------------------------------------------------------- */

#content.page-home { display: flex; flex-direction: column; }

#content.page-home > * { order: 20; }
#content.page-home > .pp-hero-wrap { order: 1; }
#content.page-home > .pp-finder { order: 1; } /* v10 : le finder colle au hero (même ordre, le DOM le place juste après) */
#content.page-home > .pp-usp { order: 2; }
#content.page-home > .pp-cats { order: 3; }
#content.page-home > .featured-products { order: 4; }
#content.page-home > .pp-steps { order: 5; }
#content.page-home > .pp-team { order: 6; }
#content.page-home > .pp-local { order: 7; }
#content.page-home > .pp-faq { order: 8; }
#content.page-home > .pp-cta { order: 9; }

/* L'ancienne bannière promo et le carrousel éventuel restent masqués */
#content.page-home > .banner { display: none; }

.pp-fullbleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* --------------------------------------------------------------------------
   5. Hero typographique
   -------------------------------------------------------------------------- */

.pp-hero-wrap {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.pp-hero {
  position: relative;
  background: linear-gradient(118deg, #0A1830 0%, var(--pp-brand) 45%, var(--pp-brand-2) 100%);
  color: #fff;
  padding: clamp(2.6rem, 5.5vw, 4.6rem) 0 clamp(2.4rem, 4.5vw, 3.8rem);
  overflow: hidden;
}

.pp-hero .pp-hero-road {
  position: absolute;
  right: -4%;
  top: 0;
  height: 100%;
  width: 52%;
  opacity: .5;
  pointer-events: none;
}

.pp-hero .container { position: relative; }

.pp-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.6rem, 4vw, 3.6rem);
  align-items: center;
}

.pp-hero .pp-kicker { color: var(--pp-gold-strong); }

.pp-hero h2 {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 15em;
  margin: 0 0 1rem;
  text-align: left; /* la règle .page-home h2 centre les titres : pas celui du hero */
}

/* Mot-clé souligné au « marqueur » or */
.pp-hero h2 em {
  font-style: normal;
  color: var(--pp-gold-strong);
  background: linear-gradient(0deg, rgba(224, 177, 47, .28), rgba(224, 177, 47, .28)) no-repeat left bottom / 100% .28em;
  padding-bottom: .06em;
}

.pp-hero p.pp-hero-sub {
  font-size: clamp(.98rem, 1.5vw, 1.08rem);
  color: rgba(255, 255, 255, .82);
  max-width: 34em;
  margin: 0 0 1.6rem;
}

.pp-hero .pp-hero-actions {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1.4rem;
}

.pp-hero .pp-hero-actions .btn-pp-gold {
  font-size: 1.04rem;
  padding: .85rem 1.9rem;
  box-shadow: 0 10px 28px rgba(201, 151, 21, .35);
}

/* Rangée de prix d'appel — la transparence, argument n°1.
   Toujours alignée : une seule ligne de 3 puces identiques. */
.pp-hero-prices {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 0 0 1.5rem !important;
}

.pp-hero-prices li { list-style: none; }

.pp-hero-prices a {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .06);
  border-radius: 100px;
  padding: .3rem .8rem;
  font-size: .8rem;
  white-space: nowrap;
  color: rgba(255, 255, 255, .85) !important;
  text-decoration: none !important;
  transition: background-color .15s ease, border-color .15s ease;
}

.pp-hero-prices a:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .45);
}

.pp-hero-prices strong {
  font-family: var(--pp-font-title);
  font-weight: 700;
  color: var(--pp-gold-strong);
  font-size: .92rem;
}

/* Liste de confiance : en colonne, chaque ligne alignée sur sa coche —
   plus de retour à la ligne hasardeux quel que soit l'écran */
.pp-hero .pp-hero-trust {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.pp-hero .pp-hero-trust li {
  display: flex;
  align-items: center;
  gap: .55rem;
  list-style: none;
  font-size: .88rem;
  color: rgba(255, 255, 255, .85);
}

.pp-hero .pp-hero-trust svg { flex: 0 0 auto; }

.pp-hero ul { margin: 0; padding: 0; }

/* Photo réelle + badges flottants */
.pp-hero-visual {
  position: relative;
  padding: .6rem 1rem 1.4rem .4rem;
}

.pp-hero-photo {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  transform: rotate(-1.4deg);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 24px 60px rgba(4, 10, 24, .55);
}

.pp-hero-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.pp-hero-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .6rem;
  background: #fff;
  color: var(--pp-ink);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(4, 10, 24, .35);
  padding: .6rem .85rem;
  font-family: var(--pp-font-body);
  font-size: .78rem;
  line-height: 1.25;
  color: var(--pp-muted);
}

.pp-hero-badge strong {
  font-family: var(--pp-font-title);
  font-weight: 600;
  color: var(--pp-ink);
  font-size: .84rem;
}

.pp-hero-badge-top { top: -.4rem; left: -.6rem; }
.pp-hero-badge-bottom { right: -.2rem; bottom: -.2rem; }

.pp-badge-ico {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--pp-gold-soft);
  color: var(--pp-brand);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pp-badge-price {
  flex: 0 0 auto;
  background: var(--pp-gold);
  color: #0A1830;
  font-family: var(--pp-font-title);
  font-weight: 700;
  font-size: 1.05rem;
  border-radius: 9px;
  padding: .45rem .6rem;
}

/* Entrée en scène du hero (désactivée si l'utilisateur préfère éviter les animations) */
@media (prefers-reduced-motion: no-preference) {
  @keyframes ppFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
  }

  .pp-hero-copy > * { animation: ppFadeUp .55s ease both; }
  .pp-hero-copy > *:nth-child(2) { animation-delay: .07s; }
  .pp-hero-copy > *:nth-child(3) { animation-delay: .14s; }
  .pp-hero-copy > *:nth-child(4) { animation-delay: .21s; }
  .pp-hero-copy > *:nth-child(5) { animation-delay: .28s; }
  .pp-hero-copy > *:nth-child(6) { animation-delay: .35s; }
  .pp-hero-visual { animation: ppFadeUp .65s ease .2s both; }

  /* Apparition douce des sections au défilement (activée par le script de l'accueil) */
  html.pp-io .pp-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s ease, transform .55s ease;
  }

  html.pp-io .pp-reveal.pp-in {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   6. Sections accueil
   -------------------------------------------------------------------------- */

.pp-section { padding: 3.4rem 0 2.8rem; }

.pp-section-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 2.1rem;
}

.pp-section-head h2 { margin-bottom: .5rem; }

.pp-section-head p {
  color: var(--pp-muted);
  font-size: 1rem;
  margin: 0;
}

/* 6a. Réassurance */
.pp-usp {
  background: #fff;
  border-bottom: 1px solid var(--pp-line);
  padding: 1.5rem 0;
}

.pp-usp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}

.pp-usp-item {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
}

.pp-usp-item > div { min-width: 0; }

.pp-usp-item .pp-usp-ico {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--pp-gold-soft);
  color: var(--pp-brand);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pp-usp-item strong {
  display: block;
  font-family: var(--pp-font-title);
  font-size: .9rem;
  font-weight: 600;
  color: var(--pp-ink);
  line-height: 1.3;
}

.pp-usp-item span {
  font-size: .8rem;
  color: var(--pp-muted);
  line-height: 1.3;
}

/* 6b. Cartes formations */
.pp-cats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}

.pp-cat-card {
  position: relative;
  display: block;
  border-radius: var(--pp-radius-lg);
  overflow: hidden;
  box-shadow: var(--pp-shadow);
  border: 1px solid var(--pp-line);
  transition: transform .18s ease, box-shadow .18s ease;
  aspect-ratio: 4 / 5;
  text-decoration: none !important;
  background: var(--pp-brand);
}

.pp-cat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pp-shadow-hover);
}

.pp-cat-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.pp-cat-card:hover img { transform: scale(1.04); }

.pp-cat-card .pp-cat-label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.2rem 1.1rem 1rem;
  background: linear-gradient(180deg, rgba(10, 24, 48, 0) 0%, rgba(10, 24, 48, .88) 80%);
  color: #fff;
  font-family: var(--pp-font-title);
}

.pp-cat-card .pp-cat-label strong {
  display: block;
  font-size: 1.08rem;
  font-weight: 600;
}

.pp-cat-card .pp-cat-label span {
  font-size: .82rem;
  color: rgba(255, 255, 255, .75);
  font-family: var(--pp-font-body);
}

/* Pastille de prix sur les cartes formations */
.pp-cat-card .pp-cat-price {
  position: absolute;
  top: .85rem;
  left: .85rem;
  background: var(--pp-gold);
  color: #0A1830;
  font-family: var(--pp-font-title);
  font-weight: 700;
  font-size: .84rem;
  border-radius: 100px;
  padding: .28rem .8rem;
  box-shadow: 0 4px 14px rgba(4, 10, 24, .25);
}

.pp-cat-card .pp-cat-arrow {
  position: absolute;
  top: .85rem;
  right: .85rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pp-gold);
  color: #0A1830;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .18s ease, transform .18s ease;
}

.pp-cat-card:hover .pp-cat-arrow { opacity: 1; transform: translateX(0); }

/* 6c. Étapes */
.pp-steps { background: #fff; border-top: 1px solid var(--pp-line); border-bottom: 1px solid var(--pp-line); width: 100vw; margin-left: calc(50% - 50vw); padding: 3.4rem 0; }

.pp-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.pp-step {
  position: relative;
  background: var(--pp-bg);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-lg);
  padding: 1.7rem 1.5rem 1.5rem;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.pp-step:hover {
  transform: translateY(-3px);
  box-shadow: var(--pp-shadow-hover);
  border-color: rgba(201, 151, 21, .45);
}

/* Grand numéro en filigrane, style éditorial */
.pp-step::after {
  content: attr(data-step);
  position: absolute;
  top: .1rem;
  right: .8rem;
  font-family: var(--pp-font-title);
  font-size: 4.8rem;
  font-weight: 700;
  line-height: 1.1;
  color: rgba(12, 34, 66, .06);
  pointer-events: none;
}

.pp-step .pp-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--pp-gold);
  color: var(--pp-ink);
  font-family: var(--pp-font-title);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: .95rem;
  background: #fff;
}

.pp-step h3 { font-size: 1.06rem; margin-bottom: .45rem; }

.pp-step p { color: var(--pp-muted); font-size: .92rem; margin: 0; }

/* 6d. Équipe — promesse des fondateurs + portraits */
.pp-team-wrap {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 1.5rem;
  align-items: stretch;
  max-width: 1020px;
  margin: 0 auto;
}

.pp-team-quote {
  position: relative;
  margin: 0;
  background: linear-gradient(135deg, #0A1830, var(--pp-brand) 65%, var(--pp-brand-2));
  color: #fff;
  border-radius: var(--pp-radius-lg);
  padding: 2.1rem 2rem 1.8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  border: 0;
}

.pp-team-quote::after {
  content: '';
  position: absolute;
  right: -70px;
  bottom: -70px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 177, 47, .22), transparent 70%);
  pointer-events: none;
}

.pp-team-quote .pp-quote-mark {
  font-family: var(--pp-font-title);
  font-size: 4.6rem;
  line-height: .55;
  color: var(--pp-gold-strong);
  display: block;
  margin-bottom: 1.2rem;
}

.pp-team-quote p {
  font-family: var(--pp-font-title);
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.55;
  color: #fff;
  margin: 0 0 1.2rem;
}

.pp-team-quote footer {
  font-size: .84rem;
  color: rgba(255, 255, 255, .72);
}

.pp-team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.pp-team-card {
  background: #fff;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-lg);
  overflow: hidden;
  box-shadow: var(--pp-shadow);
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}

.pp-team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pp-shadow-hover);
}

.pp-team-photo {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.pp-team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
  transition: transform .3s ease;
}

.pp-team-card:hover .pp-team-photo img { transform: scale(1.04); }

.pp-team-info { padding: 1rem 1.2rem 1.25rem; }

.pp-team-info h3 { font-size: 1.06rem; margin: 0 0 .15rem; }

.pp-team-info p {
  color: var(--pp-muted);
  font-size: .87rem;
  margin: 0 0 .7rem;
}

.pp-team-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--pp-gold-soft);
  color: var(--pp-brand);
  font-family: var(--pp-font-title);
  font-weight: 600;
  font-size: .74rem;
  border-radius: 100px;
  padding: .24rem .72rem;
}

.pp-team-more { text-align: center; margin-top: 1.8rem; }

/* 6e. Ancrage local + SEO */
.pp-local {
  background: var(--pp-brand);
  color: #fff;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 3.4rem 0;
}

.pp-local .pp-kicker { color: var(--pp-gold-strong); }

.pp-local h2 { color: #fff; text-align: left; margin-bottom: .8rem; }

.pp-local p {
  color: rgba(255, 255, 255, .8);
  font-size: .96rem;
  max-width: 60em;
}

.pp-local-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 2.5rem;
  align-items: start;
}

.pp-local-towns {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.pp-local-towns li {
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 100px;
  padding: .3rem .85rem;
  font-size: .84rem;
  color: rgba(255, 255, 255, .9);
}

.pp-local-card {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--pp-radius-lg);
  padding: 1.5rem 1.6rem;
}

.pp-local-card h3 {
  color: #fff;
  font-size: 1rem;
  margin-bottom: .8rem;
}

.pp-local-card ul { margin: 0; padding: 0; list-style: none; }

.pp-local-card li {
  display: flex;
  gap: .6rem;
  align-items: baseline;
  font-size: .92rem;
  color: rgba(255, 255, 255, .85);
  padding: .32rem 0;
}

.pp-local-card li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pp-gold);
  flex: 0 0 6px;
  position: relative;
  top: -2px;
}

/* 6f. FAQ */
.pp-faq .pp-faq-list {
  max-width: 760px;
  margin: 0 auto;
}

.pp-faq details {
  background: #fff;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  margin-bottom: .65rem;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.pp-faq details:hover,
.pp-faq details[open] {
  border-color: rgba(201, 151, 21, .5);
  box-shadow: var(--pp-shadow);
}

.pp-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .95rem 1.2rem;
  font-family: var(--pp-font-title);
  font-weight: 600;
  font-size: .97rem;
  color: var(--pp-ink);
}

.pp-faq summary::-webkit-details-marker { display: none; }

.pp-faq summary::after {
  content: '+';
  font-size: 1.3rem;
  color: var(--pp-gold);
  font-weight: 600;
  line-height: 1;
  transition: transform .15s ease;
}

.pp-faq details[open] summary::after { transform: rotate(45deg); }

.pp-faq details > div {
  padding: 0 1.2rem 1.1rem;
  font-size: .93rem;
  color: var(--pp-muted);
}

/* 6g. CTA final */
.pp-cta {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: linear-gradient(118deg, #0A1830, var(--pp-brand-2));
  padding: 3.2rem 0;
  text-align: center;
}

.pp-cta h2 { color: #fff; font-size: clamp(1.5rem, 2.7vw, 2rem); margin-bottom: .55rem; }

.pp-cta p { color: rgba(255, 255, 255, .82); font-size: 1rem; margin-bottom: 1.5rem; }

.pp-cta .pp-cta-actions {
  display: flex;
  gap: .85rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   7. Produits
   -------------------------------------------------------------------------- */

.featured-products { padding: 3.4rem 0 1.5rem; }

.products { justify-content: center; }

.product-miniature .thumbnail-container {
  border-radius: var(--pp-radius-lg);
  overflow: hidden;
  box-shadow: var(--pp-shadow);
  border: 1px solid var(--pp-line);
  background: #fff;
  transition: transform .18s ease, box-shadow .18s ease;
  margin-bottom: 1.4rem;
}

.product-miniature .thumbnail-container:hover {
  transform: translateY(-4px);
  box-shadow: var(--pp-shadow-hover);
}

.product-miniature .product-thumbnail img { width: 100%; height: auto; }

.product-miniature .product-description {
  background: #fff;
  box-shadow: none;
  padding: .5rem .9rem 1rem;
}

.product-miniature .product-title a {
  font-family: var(--pp-font-title);
  font-weight: 500;
  font-size: .94rem;
  color: var(--pp-ink);
}

.product-miniature .product-title a:hover { color: var(--pp-brand-2); }

.product-miniature .product-price-and-shipping {
  font-family: var(--pp-font-title);
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--pp-brand);
}

.product-miniature .discount-product,
.product-flag.discount {
  background: var(--pp-gold);
  color: #0A1830;
  font-weight: 700;
}

.product-flag.new { background: var(--pp-green); }

.product-miniature .highlighted-informations {
  box-shadow: none;
  background: rgba(247, 249, 252, .97);
}

.all-product-link,
.featured-products .all-product-link {
  float: none !important; /* la classe float-xs-left du thème collait le bouton à gauche */
  font-family: var(--pp-font-title);
  font-weight: 600;
  color: var(--pp-brand);
  border: 1px solid var(--pp-brand);
  border-radius: var(--pp-radius);
  padding: .55rem 1.5rem;
  margin: .4rem auto 1.4rem;
  display: table;
  transition: background-color .15s ease, color .15s ease;
}

.all-product-link:hover { background: var(--pp-brand); color: #fff; }
.all-product-link .material-icons { display: none; }

/* Fiche produit */
.product-container {
  background: #fff;
  border-radius: var(--pp-radius-lg);
  border: 1px solid var(--pp-line);
  box-shadow: var(--pp-shadow);
  padding: 1.8rem;
}

#product .images-container .product-cover {
  border-radius: var(--pp-radius);
  overflow: hidden;
  box-shadow: none;
  border: 1px solid var(--pp-line);
}

#product h1 { font-size: 1.55rem; text-transform: none; font-weight: 600; }

#product .current-price,
#product .current-price span {
  font-family: var(--pp-font-title);
  color: var(--pp-brand);
  font-size: 1.85rem;
  font-weight: 700;
}

#product .product-add-to-cart .add-to-cart {
  background: var(--pp-gold);
  color: #0A1830;
  font-weight: 600;
  font-size: 1rem;
  padding: .8rem 1.9rem;
  border-radius: var(--pp-radius);
  border: none;
}

#product .product-add-to-cart .add-to-cart:hover { background: var(--pp-gold-strong); }
#product .product-add-to-cart .add-to-cart .shopping-cart { color: #0A1830; }

#product .tabs {
  border-radius: var(--pp-radius-lg);
  border: 1px solid var(--pp-line);
  box-shadow: var(--pp-shadow);
}

#product .tabs .nav-tabs .nav-link.active {
  border-bottom: 3px solid var(--pp-gold);
  color: var(--pp-ink);
}

#block-reassurance { border-radius: var(--pp-radius); }
#block-reassurance li { border-bottom: 1px solid var(--pp-line); }

#block-reassurance li .block-title {
  font-family: var(--pp-font-title);
  font-weight: 600;
  color: var(--pp-ink);
}

/* --------------------------------------------------------------------------
   8. Catégories / listing
   -------------------------------------------------------------------------- */

.block-categories {
  border-radius: var(--pp-radius-lg);
  border: 1px solid var(--pp-line);
  box-shadow: var(--pp-shadow);
}

.block-categories .category-top-menu a {
  font-family: var(--pp-font-title);
  color: var(--pp-ink);
  font-weight: 600;
}

#js-product-list-header .block-category {
  border-radius: var(--pp-radius-lg);
  border: 1px solid var(--pp-line);
  box-shadow: var(--pp-shadow);
  overflow: hidden;
  min-height: 0;
}

.block-category h1 { font-size: 1.5rem; text-transform: none; }

#js-product-list-top {
  border-radius: var(--pp-radius);
  border: 1px solid var(--pp-line);
  box-shadow: var(--pp-shadow);
  background: #fff;
}

.pagination .current a { color: var(--pp-brand); font-weight: 700; }

/* --------------------------------------------------------------------------
   9. Panier / tunnel
   -------------------------------------------------------------------------- */

.card {
  border-radius: var(--pp-radius-lg);
  border: 1px solid var(--pp-line);
  box-shadow: var(--pp-shadow);
}

.cart-summary-line .value,
.cart-total .value {
  font-family: var(--pp-font-title);
  color: var(--pp-ink);
}

.checkout.cart-detailed-actions .btn,
.cart-detailed-actions .btn-primary {
  background: var(--pp-gold);
  border-color: var(--pp-gold);
  color: #0A1830;
  font-weight: 600;
  font-size: 1rem;
}

.checkout.cart-detailed-actions .btn:hover,
.cart-detailed-actions .btn-primary:hover {
  background: var(--pp-gold-strong);
  border-color: var(--pp-gold-strong);
  color: #0A1830;
}

#checkout section.checkout-step {
  border-radius: var(--pp-radius);
  border: 1px solid var(--pp-line);
  box-shadow: var(--pp-shadow);
  margin-bottom: 1rem;
}

#checkout section.checkout-step .step-title {
  font-family: var(--pp-font-title);
  color: var(--pp-ink);
}

/* --------------------------------------------------------------------------
   10. Formulaires
   -------------------------------------------------------------------------- */

.form-control {
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  background: #fff;
  padding: .55rem .9rem;
}

.form-control:focus {
  border-color: var(--pp-brand);
  box-shadow: 0 0 0 3px rgba(12, 34, 66, .12);
  outline: none;
  background: #fff;
  color: var(--pp-text);
}

.input-group .input-group-btn > .btn { border-radius: 0 var(--pp-radius) var(--pp-radius) 0; }

.form-control-label { font-weight: 600; color: var(--pp-ink); }

/* --------------------------------------------------------------------------
   11. Pré-footer + footer
   -------------------------------------------------------------------------- */

.pp-trust {
  background: #fff;
  border-top: 1px solid var(--pp-line);
  padding: 1.6rem 0;
}

.footer-container {
  background: var(--pp-brand);
  padding-top: 2.6rem;
  margin-top: 0;
  box-shadow: none;
  overflow: hidden;
  border-top: 3px solid var(--pp-gold);
}

.footer-container .h3,
.footer-container .footer__title,
.footer-container p.h3 {
  font-family: var(--pp-font-body);
  color: rgba(255, 255, 255, .55);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.footer-container li a,
.footer-container .contact-rich,
.footer-container .contact-rich span,
.footer-container p {
  color: rgba(255, 255, 255, .82) !important;
  font-size: .92rem;
}

.footer-container li a:hover { color: var(--pp-gold-strong) !important; }

.footer-container .contact-rich .icon i { color: var(--pp-gold-strong); }

.block_newsletter { font-size: .95rem; }

.block_newsletter form input[type=email] {
  border-radius: var(--pp-radius) 0 0 var(--pp-radius);
  border: none;
}

.block_newsletter form input.btn {
  border-radius: 0 var(--pp-radius) var(--pp-radius) 0;
  background: var(--pp-gold);
  color: #0A1830;
  font-weight: 600;
  border: none;
}

.footer-container .row > .col-md-12 p.text-sm-center,
.footer-container .row > .col-md-12 p.text-sm-center a {
  color: rgba(255, 255, 255, .4) !important;
  font-size: .78rem;
}

/* Équilibre des colonnes du footer : liens à gauche, coordonnées à droite */
@media (min-width: 768px) {
  .footer-container .container > .row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .footer-container .block-contact.col-md-3 {
    margin-left: auto;
    flex: 0 0 30%;
    max-width: 30%;
  }
}

/* Réseaux sociaux : centrés sous les colonnes, plus de bloc qui flotte à gauche */
.footer-container .block-social {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 1.2rem 0 .2rem;
  float: none;
}

.block-social ul { display: flex; justify-content: center; margin: 0; }

.block-social li {
  background-color: rgba(255, 255, 255, .1);
  border-radius: 50%;
  margin: .125rem;
}

.block-social li:hover { background-color: var(--pp-gold); }

/* --------------------------------------------------------------------------
   12. Divers
   -------------------------------------------------------------------------- */

.breadcrumb { background: transparent; padding: 1rem 0 .4rem; }
.breadcrumb li a { color: var(--pp-muted); font-size: .85rem; }
.breadcrumb li:last-child a { color: var(--pp-ink); font-weight: 600; }

.alert-success {
  background: #E9F6F0;
  color: #14663F;
  border: 1px solid #BEE3D0;
  border-radius: var(--pp-radius);
}

.alert-danger { border-radius: var(--pp-radius); }

.page-not-found {
  border-radius: var(--pp-radius-lg);
  border: 1px solid var(--pp-line);
  box-shadow: var(--pp-shadow);
  background: #fff;
  padding: 2.5rem;
}

.custom-text {
  border-radius: var(--pp-radius-lg);
  border: 1px solid var(--pp-line);
  box-shadow: var(--pp-shadow);
  background-color: #fff;
  margin: 2.5rem auto;
  padding: 2rem;
}

#blockcart-modal .modal-header { background: var(--pp-green); border-radius: 0; }

#blockcart-modal .cart-content .btn {
  background: var(--pp-gold);
  border-color: var(--pp-gold);
  color: #0A1830;
  font-weight: 600;
}

.material-icons { vertical-align: middle; }

/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  .pp-usp-grid { grid-template-columns: repeat(2, 1fr); }
  .pp-cats-grid { grid-template-columns: repeat(2, 1fr); }
  .pp-steps-grid { grid-template-columns: 1fr; }
  .pp-team-wrap { grid-template-columns: 1fr; }
  .pp-local-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .pp-header-phone { display: none; }
  .pp-hero-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .pp-hero-visual { max-width: 560px; }
}

/* ==========================================================================
   Mobile : logique verticale stricte — l'essentiel d'abord, zéro doublon.
   Ordre : titre → prix → réserver/appeler → photo → formations → packs
   (carrousel) → étapes → moniteurs → local → FAQ → CTA.
   ========================================================================== */
@media (max-width: 767px) {
  /* --- Hero compacté --- */
  .pp-hero { padding: 2rem 0 1.9rem; }
  .pp-hero .pp-hero-road { display: none; }

  .pp-hero .pp-kicker {
    font-size: .68rem;
    letter-spacing: .1em;
    line-height: 1.5;
    margin-bottom: .5rem;
  }

  .pp-hero h2 { font-size: 1.72rem; margin-bottom: .7rem; }

  .pp-hero p.pp-hero-sub { font-size: .94rem; margin-bottom: 1.1rem; }

  /* Boutons pleine largeur : gros pouces, zéro hésitation */
  .pp-hero .pp-hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: .55rem;
    margin-bottom: 1.1rem;
  }

  .pp-hero .pp-hero-actions .btn-pp-gold,
  .pp-hero .pp-hero-actions .btn-pp-ghost {
    text-align: center;
    padding: .85rem 1rem;
  }

  /* Prix en mini-liste alignée : libellé à gauche, prix à droite */
  .pp-hero-prices { flex-direction: column; gap: .4rem; margin-bottom: 0 !important; }

  .pp-hero-prices a {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-radius: 10px;
    padding: .5rem .85rem;
    font-size: .86rem;
  }

  /* La liste de confiance disparaît : la bande réassurance suit juste après */
  .pp-hero .pp-hero-trust { display: none; }

  .pp-hero-visual { padding: 0 0 1.2rem; margin-top: 1.3rem; max-width: none; }
  .pp-hero-photo { transform: none; border-radius: 14px; }
  .pp-hero-badge-top { display: none; }
  .pp-hero-badge-bottom { right: .6rem; bottom: .4rem; }

  /* --- Bande réassurance compacte --- */
  .pp-usp { padding: 1.1rem 0; }

  /* --- Sections resserrées --- */
  .pp-section { padding: 2.2rem 0 1.8rem; }
  .pp-section-head { margin-bottom: 1.4rem; }
  .pp-section-head p { font-size: .92rem; }
  .page-home h2, .featured-products > h2, h2.products-section-title { font-size: 1.35rem; }

  .pp-cats-grid { gap: .8rem; }
  /* 4/5 (et non 1/1) : en carré, le bloc titre débordait et remontait sous la
     pastille de prix — chevauchement visible sur 3 cartes sur 4 */
  .pp-cat-card { aspect-ratio: 4 / 5; }
  .pp-cat-card .pp-cat-price { font-size: .78rem; padding: .22rem .65rem; top: .6rem; left: .6rem; }
  .pp-cat-card .pp-cat-arrow { display: none; }
  .pp-cat-card .pp-cat-label strong { font-size: .95rem; }
  .pp-cat-card .pp-cat-label { line-height: 1.2; }

  /* --- Packs populaires : carrousel horizontal (une carte ≈ 3/4 d'écran) --- */
  .featured-products { padding: 2.2rem 0 1rem; }

  .featured-products .products {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: .8rem;
    margin: 0 -15px;
    padding: .2rem 15px .6rem;
    scrollbar-width: none;
  }

  .featured-products .products::-webkit-scrollbar { display: none; }

  /* Les cartes sont enveloppées dans des div.js-product : c'est elles qu'on dimensionne */
  .featured-products .products > .js-product,
  .featured-products .products > div {
    flex: 0 0 76%;
    max-width: 76%;
    width: 76%;
    scroll-snap-align: center;
    padding-left: 0;
    padding-right: 0;
  }

  .featured-products .products article,
  .featured-products .products .product-miniature {
    width: 100%;
    max-width: 100%;
  }

  /* --- Étapes / équipe / local compactés --- */
  .pp-steps { padding: 2.2rem 0; }
  .pp-step { padding: 1.3rem 1.2rem 1.2rem; }
  .pp-step::after { font-size: 3.6rem; }

  .pp-team-quote { padding: 1.6rem 1.4rem 1.4rem; }
  .pp-team-quote .pp-quote-mark { font-size: 3.6rem; margin-bottom: .9rem; }
  .pp-team-quote p { font-size: .98rem; }

  .pp-local { padding: 2.4rem 0; }
  .pp-local p { font-size: .92rem; }
  .pp-local-towns li { font-size: .78rem; padding: .24rem .7rem; }
  .pp-local-card { padding: 1.2rem 1.2rem; }

  .pp-faq summary { font-size: .92rem; padding: .85rem 1rem; }

  /* --- CTA final : boutons empilés, le téléphone est déjà dans la barre fixe --- */
  .pp-cta { padding: 2.4rem 0; }

  .pp-cta .pp-cta-actions {
    flex-direction: column;
    align-items: stretch;
    gap: .55rem;
  }

  .pp-cta .pp-cta-actions a { text-align: center; }
  .pp-cta .pp-cta-actions a[href^="tel"] { display: none; }

  /* --- Doublon supprimé : la bande réassurance du bas n'apporte rien sur mobile --- */
  .pp-trust { display: none; }

  .footer-container { padding-top: 1.9rem; }

  #header .header-top { position: static; }

  /* Laisser la place à la barre d'action fixe.
     ⚠️ La réserve vit sur #footer, PAS sur body : theme.css pose
     body,html{height:100%} donc un padding-bottom du body n'ajoute AUCUN
     espace au défilement (le copyright finissait sous la barre). */
  #footer { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }

  /* Fiche produit / panier / commande : la barre Appeler-Réserver s'efface,
     l'achat en cours a la priorité */
  body#product .pp-mobile-cta,
  body#cart .pp-mobile-cta,
  body#checkout .pp-mobile-cta { display: none; }

  body#cart #footer, body#checkout #footer { padding-bottom: 0; }

  /* Fiche produit mobile compacte */
  #product h1 { font-size: 1.3rem; }
  #product .current-price, #product .current-price span { font-size: 1.5rem; }
  .product-container { padding: 1rem; }

  #product .product-add-to-cart .add-to-cart {
    width: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    padding: .9rem 1rem;
  }

  #product .product-quantity { flex-wrap: wrap; row-gap: .8rem; }

  /* Panier / commande mobile : boutons pleine largeur */
  .cart-detailed-actions .btn,
  #payment-confirmation .btn { width: 100%; }

  #checkout section.checkout-step { padding: 0; }
}

/* ==========================================================================
   14. Tunnel d'achat & fiche produit — fluidité maximale
   ========================================================================== */

/* Les produits sont des services : la ligne « Livraison : gratuit » n'apporte
   que de la confusion — on la retire du récapitulatif */
#cart-subtotal-shipping { display: none !important; }

/* Étapes du tunnel : l'étape en cours est clairement marquée */
#checkout section.checkout-step .step-title {
  font-size: 1.05rem;
  padding: .35rem 0;
}

#checkout section.checkout-step .step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  color: #fff;
  font-size: .95rem;
  margin-right: .5rem;
}

/* Bordure gauche identique sur toutes les étapes (l'or marque la courante) :
   sinon les pastilles se décalaient de 3px d'une carte à l'autre */
#checkout section.checkout-step { border-left: 3px solid transparent; }
#checkout section.checkout-step.-current { border-left: 3px solid var(--pp-gold); }

/* Titre replié : pas de filet « pendouillant » sous les étapes fermées */
#checkout section.checkout-step:not(.-current) .step-title { border-bottom: 0; padding-bottom: .6rem; }

#checkout section.checkout-step.-current .step-number {
  border-color: var(--pp-gold);
  background: var(--pp-gold-soft);
  color: var(--pp-brand);
}

#checkout section.checkout-step.-complete .step-number {
  border-color: var(--pp-green);
  color: var(--pp-green);
}

/* Options de paiement : de vraies cartes cliquables, faciles au doigt */
.payment-options .payment-option {
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  padding: .85rem 1rem;
  margin-bottom: .6rem;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.payment-options .payment-option:hover {
  border-color: rgba(201, 151, 21, .55);
  box-shadow: var(--pp-shadow);
}

.payment-options .payment-option label {
  margin: 0;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 600;
  color: var(--pp-ink);
  cursor: pointer;
}

/* Bouton de commande : gros, doré, impossible à rater */
#payment-confirmation .btn,
#payment-confirmation .btn-primary {
  background: var(--pp-gold);
  border-color: var(--pp-gold);
  color: #0A1830;
  font-weight: 700;
  font-size: 1.05rem;
  padding: .85rem 2rem;
}

#payment-confirmation .btn:hover {
  background: var(--pp-gold-strong);
  border-color: var(--pp-gold-strong);
  color: #0A1830;
}

#conditions-to-approve label { font-size: .9rem; }

/* Fiche produit : compteur de quantité confortable (doigts, pas souris) */
#product .product-quantity .qty { margin-right: .8rem; }

#product #quantity_wanted {
  width: 64px;
  height: 46px;
  border-radius: var(--pp-radius) 0 0 var(--pp-radius);
  border: 1px solid var(--pp-line);
  text-align: center;
  font-family: var(--pp-font-title);
  font-weight: 600;
}

#product .bootstrap-touchspin .btn {
  min-width: 34px;
  border: 1px solid var(--pp-line);
  background: #fff;
  color: var(--pp-ink);
}

#product .bootstrap-touchspin .btn:hover { background: var(--pp-bg); }

/* Barre « Ajouter au panier » collante (fiche produit mobile, injectée en JS) */
.pp-sticky-atc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1041;
  display: none;
  align-items: center;
  gap: .8rem;
  background: #fff;
  box-shadow: 0 -4px 18px rgba(4, 10, 24, .18);
  padding: .55rem .9rem calc(.55rem + env(safe-area-inset-bottom, 0px));
}

.pp-sticky-atc-price {
  font-family: var(--pp-font-title);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--pp-brand);
  white-space: nowrap;
}

.pp-sticky-atc-btn {
  flex: 1 1 auto;
  border: none;
  background: var(--pp-gold);
  color: #0A1830;
  font-family: var(--pp-font-title);
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--pp-radius);
  padding: .8rem 1rem;
}

.pp-sticky-atc-btn:active { background: var(--pp-gold-strong); }

/* Barre d'action mobile fixe : appeler / réserver */
.pp-mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  display: flex;
  box-shadow: 0 -4px 18px rgba(4, 10, 24, .18);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #fff;
}

.pp-mobile-cta a {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  height: 58px;
  font-family: var(--pp-font-title);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none !important;
}

.pp-mobile-cta .pp-mcta-call {
  background: #fff;
  color: var(--pp-brand) !important;
}

.pp-mobile-cta .pp-mcta-book {
  background: var(--pp-gold);
  color: #0A1830 !important;
}

@media (max-width: 543px) {
  .pp-usp-grid { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .pp-usp-item .pp-usp-ico { flex-basis: 36px; width: 36px; height: 36px; }
  .pp-usp-item span { display: none; }
  .pp-team-grid { gap: .8rem; }
  .pp-team-info { padding: .8rem .9rem 1rem; }
  .pp-team-info p { font-size: .8rem; }
}

/* --- v6 : illustration page 404 / introuvable ----------------------------- */
.page-not-found .pp-404-illu {
  display: block;
  margin: 0 auto 1.4rem;
  width: min(320px, 70vw);
  height: auto;
  border-radius: 14px;
}

/* ==========================================================================
   15. v6 — DÉ-PRESTASHOP-ISATION GLOBALE
   Plus aucune surface ne doit ressembler au thème classic par défaut.
   Tout s'appuie sur les tokens PermisPack (bleu nuit + or, Poppins/Inter).
   ========================================================================== */

/* ---- 15.1 Cartes produit sur-mesure (listing, accueil, suggestions) ------ */
.quick-view,
.js-quick-view,
.highlighted-informations { display: none !important; }

.product-miniature .thumbnail-top { position: relative; }
.product-miniature .product-description {
  position: static;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  text-align: left;
  padding: .95rem 1rem 1.05rem;
}
.product-miniature .product-title { margin: 0; text-align: left; }
.product-miniature .product-title a {
  display: block;
  text-align: left; /* le thème centre le lien lui-même */
  font-size: .98rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--pp-ink);
}
.product-miniature .product-price-and-shipping { text-align: left; margin-top: .15rem; }
.product-miniature .pp-card-variants { margin: 0; }
.product-miniature .pp-card-variants .variant-links { background: transparent; text-align: left; padding-top: 0; min-height: 0; }

.product-miniature .pp-card-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: .7rem;
  min-height: 44px;
  padding: .55rem 1.1rem;
  border: 1.5px solid var(--pp-brand);
  border-radius: 999px;
  font-family: var(--pp-font-title);
  font-weight: 600;
  font-size: .92rem;
  color: var(--pp-brand);
  background: transparent;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.product-miniature .pp-card-cta svg { transition: transform .15s ease; }
.product-miniature .thumbnail-container:hover .pp-card-cta,
.product-miniature .pp-card-cta:focus {
  background: var(--pp-brand);
  color: #fff;
  text-decoration: none;
}
.product-miniature .thumbnail-container:hover .pp-card-cta svg { transform: translateX(3px); }

/* ---- 15.2 Barre d'outils listing (tri, compteur) -------------------------- */
#js-product-list-top { padding: .65rem .9rem; }
.total-products p { color: var(--pp-muted); font-size: .92rem; margin: 0; }
.products-sort-order .select-title {
  border: 1px solid var(--pp-line);
  border-radius: 999px;
  box-shadow: none;
  font-family: var(--pp-font-title);
  font-weight: 500;
  font-size: .92rem;
  color: var(--pp-ink);
  padding: .5rem 1rem;
  background: #fff;
}
.products-sort-order .dropdown-menu {
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-shadow-hover);
  overflow: hidden;
}
.products-sort-order .select-list { color: var(--pp-text); padding: .55rem 1rem; }
.products-sort-order .select-list:hover { background: var(--pp-gold-soft); color: var(--pp-ink); text-decoration: none; }
.sort-by { color: var(--pp-muted); }

/* ---- 15.3 Filtres à facettes ---------------------------------------------- */
#search_filters {
  background: #fff;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-lg);
  box-shadow: var(--pp-shadow);
  padding: 1.1rem 1.1rem .6rem;
}
#search_filters .text-uppercase.h6,
#search_filters .facet .facet-title {
  font-family: var(--pp-font-title);
  font-weight: 600;
  color: var(--pp-ink);
  text-transform: none;
  font-size: 1rem;
}
#search_filters .facet { padding-top: .6rem; border-top: 1px solid var(--pp-line); }
#search_filters .facet:first-of-type { border-top: none; }
#search_filters .facet .facet-label a { color: var(--pp-text); font-size: .93rem; }
#search_filters .facet .facet-label a:hover { color: var(--pp-brand); }
#search_filters .custom-checkbox input[type="checkbox"] + span {
  border: 1.5px solid var(--pp-muted);
  border-radius: 4px;
  background: #fff;
  width: 1rem;
  height: 1rem;
}
#search_filters .custom-checkbox input[type="checkbox"] + span .checkbox-checked { color: var(--pp-brand); }
#search_filters .magnitude { color: var(--pp-muted); }
.active_filters {
  background: var(--pp-gold-soft);
  border: none;
  border-radius: var(--pp-radius);
  padding: .8rem 1rem;
}
.active_filters .active-filter-title { font-family: var(--pp-font-title); color: var(--pp-ink); }
.active_filters .filter-block {
  background: #fff;
  border: 1px solid var(--pp-line);
  border-radius: 999px;
  box-shadow: none;
  color: var(--pp-text);
  font-size: .88rem;
}
#search_filter_toggler {
  background: var(--pp-brand);
  color: #fff;
  border-radius: var(--pp-radius);
  font-family: var(--pp-font-title);
  font-weight: 600;
}

/* ---- 15.4 Pagination -------------------------------------------------------- */
.pagination { font-family: var(--pp-font-title); font-size: .95rem; }
.pagination .page-list {
  box-shadow: none;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  padding: .4rem;
  background: #fff;
}
.pagination a, .pagination .current {
  border-radius: 8px;
  color: var(--pp-text);
}
.pagination a:hover { color: var(--pp-brand); text-decoration: none; }
.pagination .current a { color: #fff; background: var(--pp-brand); border-radius: 8px; padding: .15rem .55rem; }

/* ---- 15.5 Modal d'ajout au panier ------------------------------------------ */
#blockcart-modal .modal-content {
  border: none;
  border-radius: var(--pp-radius-lg);
  box-shadow: var(--pp-shadow-hover);
  overflow: hidden;
}
#blockcart-modal .modal-header {
  background: var(--pp-brand);
  border-bottom: none;
  padding: 1rem 1.4rem;
}
#blockcart-modal .modal-title {
  color: #fff;
  font-family: var(--pp-font-title);
  font-weight: 600;
  font-size: 1.05rem;
}
#blockcart-modal .modal-title .material-icons { color: var(--pp-gold-strong); }
#blockcart-modal .close { color: #fff; opacity: .85; text-shadow: none; }
#blockcart-modal .modal-body { background: #fff; }
#blockcart-modal .product-name { color: var(--pp-ink); font-family: var(--pp-font-title); font-weight: 600; }
#blockcart-modal .product-image { border: 1px solid var(--pp-line); border-radius: var(--pp-radius); }
#blockcart-modal .cart-content .cart-content-btn .btn-primary {
  background: var(--pp-gold);
  border-color: var(--pp-gold);
  color: #0A1830;
  font-weight: 600;
}
#blockcart-modal .cart-content .cart-content-btn .btn-primary:hover { background: var(--pp-gold-strong); border-color: var(--pp-gold-strong); }
#blockcart-modal .cart-content .cart-content-btn .btn-secondary {
  background: #fff;
  border: 1.5px solid var(--pp-line);
  color: var(--pp-ink);
  font-weight: 600;
}

/* ---- 15.6 Alertes / notifications ------------------------------------------ */
.alert { border-radius: var(--pp-radius); font-size: .95rem; }
.alert-success { background: #EAF7F0; border-color: #BFE5D2; color: #14532D; }
.alert-warning { background: #FDF6E3; border-color: #F0DFA8; color: #7A5A00; }
.alert-danger { background: #FDECEC; border-color: #F2C4C4; color: #8A1F1F; }
.alert-info { background: #EAF1FB; border-color: #C9DAF2; color: var(--pp-brand-2); }

/* ---- 15.7 Compte client / connexion ---------------------------------------- */
.page-my-account #content .links a span.link-item {
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-lg);
  box-shadow: var(--pp-shadow);
  padding: 1.15rem 1rem;
  font-family: var(--pp-font-title);
  font-weight: 600;
  color: var(--pp-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.page-my-account #content .links a i.material-icons { color: var(--pp-brand); }
.page-my-account #content .links a:hover span.link-item {
  border-color: var(--pp-gold);
  box-shadow: var(--pp-shadow-hover);
  color: var(--pp-ink);
}
.page-customer-account #content {
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-lg);
  box-shadow: var(--pp-shadow);
  background: #fff;
}
.page-customer-account #content .btn-primary,
.page-authentication .btn-primary {
  background: var(--pp-gold);
  border-color: var(--pp-gold);
  color: #0A1830;
  font-weight: 600;
}
.page-customer-account #content .btn-primary:hover,
.page-authentication .btn-primary:hover { background: var(--pp-gold-strong); border-color: var(--pp-gold-strong); }
.page-customer-account .forgot-password a,
.page-authentication .no-account a { color: var(--pp-link); }
#footer .account-list a:hover, .account-links a:hover { color: var(--pp-brand); }
.page-my-account .logout-link, #my-account .logout { color: var(--pp-muted); }

/* ---- 15.8 Tableaux (historique commandes, avoirs…) ------------------------- */
.table { border-color: var(--pp-line); }
.table-labeled th {
  font-family: var(--pp-font-title);
  font-weight: 600;
  color: var(--pp-ink);
  border-color: var(--pp-line);
}
.table-labeled td { border-color: var(--pp-line); vertical-align: middle; }
.table-labeled .label {
  border-radius: 999px;
  font-weight: 600;
  padding: .3rem .8rem;
}

/* ---- 15.9 Contact ------------------------------------------------------------ */
.contact-rich {
  background: #fff;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-lg);
  box-shadow: var(--pp-shadow);
  padding: 1.2rem;
}
.contact-rich h4 { font-family: var(--pp-font-title); color: var(--pp-ink); text-transform: none; }
.contact-rich .icon i { color: var(--pp-brand); }
.contact-form {
  background: #fff;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-lg);
  box-shadow: var(--pp-shadow);
}
.contact-form h3 { font-family: var(--pp-font-title); color: var(--pp-ink); text-transform: none; }
.contact-form .btn-primary { background: var(--pp-gold); border-color: var(--pp-gold); color: #0A1830; font-weight: 600; }
.contact-form .btn-primary:hover { background: var(--pp-gold-strong); border-color: var(--pp-gold-strong); }

/* ---- 15.10 Fil d'ariane -------------------------------------------------------- */
.breadcrumb { background: transparent; padding: .9rem 0 .1rem; margin-bottom: .4rem; }
.breadcrumb ol { padding-left: 0; margin: 0; }
.breadcrumb li a { color: var(--pp-muted); font-size: .88rem; }
.breadcrumb li a:hover { color: var(--pp-brand); }
.breadcrumb li:last-child a, .breadcrumb li:last-child span { color: var(--pp-ink); font-weight: 500; }
.breadcrumb li::after { color: var(--pp-line); }

/* ---- 15.11 Fiche produit : finitions ------------------------------------------ */
.images-container .thumb {
  border: 2px solid transparent;
  border-radius: 8px;
  transition: border-color .15s ease;
}
.images-container .thumb.selected,
.images-container .thumb:hover { border-color: var(--pp-gold); }
.scroll-box-arrows i { color: var(--pp-brand); }
.social-sharing { display: none !important; } /* icônes de partage datées du classic */
.bootstrap-touchspin {
  box-shadow: none;
  border: 1px solid var(--pp-line);
  border-radius: 8px;
  overflow: hidden;
}
.bootstrap-touchspin .btn-touchspin { background: #fff; color: var(--pp-brand); border-color: var(--pp-line); }
.bootstrap-touchspin .btn-touchspin:hover { background: var(--pp-gold-soft); }
.bootstrap-touchspin input.form-control { border: none; }
.product-discounts .table-product-discounts thead th { background: var(--pp-brand); color: #fff; font-family: var(--pp-font-title); }
#product-availability { font-family: var(--pp-font-title); font-weight: 500; }
#product-availability .product-available { color: var(--pp-green); }
.product-accessories .products-section-title,
.product-accessories .h5 {
  font-family: var(--pp-font-title);
  color: var(--pp-ink);
  text-transform: none;
  font-weight: 600;
  font-size: 1.2rem; /* au-dessus des titres de cartes (hiérarchie inversée sinon) */
  margin: 0 0 .8rem;
}

#product .product-accessories { margin-top: 1.4rem; }

/* ---- 15.12 Pages CMS / commande confirmée -------------------------------------- */
/* ⚠️ PrestaShop met aussi la classe .page-cms sur le <body> : cibler #content
   sinon tout le site se retrouve dans une « carte » (bug mobile repéré v10). */
#cms .page-content, #content.page-cms {
  background: #fff;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-lg);
  box-shadow: var(--pp-shadow);
  line-height: 1.7;
  color: var(--pp-text);
}
.page-cms h1, .page-cms h2, .page-cms h3 { font-family: var(--pp-font-title); color: var(--pp-ink); text-transform: none; }
#order-confirmation .card, .order-confirmation-table {
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-lg);
}
#order-confirmation h3.h1, .h1.card-title { font-family: var(--pp-font-title); color: var(--pp-ink); }

/* ---- 15.13 Divers anti-classic --------------------------------------------------- */
#products .up { display: none; } /* bouton « Retour en haut » du classic */
.dropdown-menu { border: 1px solid var(--pp-line); border-radius: var(--pp-radius); box-shadow: var(--pp-shadow-hover); }
input:focus, select:focus, textarea:focus, .form-control:focus {
  border-color: var(--pp-brand-2);
  box-shadow: 0 0 0 3px rgba(20, 57, 110, .12);
  outline: none;
}
.custom-radio input[type="radio"]:checked + span { background-color: var(--pp-brand); }
.form-control-label { font-family: var(--pp-font-title); font-weight: 500; color: var(--pp-ink); }
.page-not-found .search-widget form input[type="text"] {
  border: 1px solid var(--pp-line);
  border-radius: 999px 0 0 999px;
  padding-left: 1rem;
}
.page-not-found .search-widget form button[type="submit"] {
  background: var(--pp-gold);
  color: #0A1830;
  border-radius: 0 999px 999px 0;
  border: none;
}
.block_newsletter form input[type="email"] { border: 1px solid var(--pp-line); border-radius: 999px 0 0 999px; padding-left: 1rem; }
.block_newsletter form .btn { background: var(--pp-gold); color: #0A1830; font-weight: 600; border-radius: 0 999px 999px 0; border: none; }
.block_newsletter form .btn:hover { background: var(--pp-gold-strong); }
.pp-copyright { color: var(--pp-muted); font-size: .85rem; }

/* ---- 15.14 Mobile ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .product-miniature .pp-card-cta { min-height: 48px; }
  .products-sort-order .select-title { font-size: 16px; } /* anti-zoom iOS */
  #search_filters { padding: .9rem .9rem .4rem; }
  .pagination .page-list { width: 100%; justify-content: center; display: flex; }
}

/* ==========================================================================
   16. v7 — BASE PARFAITE
   Grosse passe globale : plus un seul reste du thème classic, formulaires
   modernisés, compacité et accessibilité sur tout le site.
   ========================================================================== */

/* ---- 16.0 Anti-uppercase définitif + titres de page ----------------------- */
.h1, .h2, .h3,
h1, h2, h3,
.page-header h1,
.card-title,
.text-uppercase,
.step-title,
.page-order-detail h3,
.subcategory-name,
.sitemap h2 {
  text-transform: none !important;
  letter-spacing: -0.01em;
}

#main .page-header {
  background: transparent;
  margin: .3rem 0 1rem;
  padding: 0;
}

#main .page-header h1 {
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  font-weight: 600;
  margin: 0;
}

/* Carte de contenu standard des pages internes */
#content.page-content.card {
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-lg);
  box-shadow: var(--pp-shadow);
  background: #fff;
  padding: 1.5rem 1.6rem;
  margin-bottom: 2rem;
}

#main .page-footer { margin-bottom: 2rem; }
#main .page-footer:empty { display: none; }

/* Lien d'évitement (accessibilité clavier) */
.pp-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--pp-ink);
  color: #fff !important;
  padding: .7rem 1.3rem;
  border-radius: 0 0 10px 0;
  font-family: var(--pp-font-title);
  font-weight: 600;
  text-decoration: none;
}

.pp-skip:focus { left: 0; }

/* Focus visible complet */
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid rgba(201, 151, 21, .55);
  outline-offset: 2px;
}

/* ---- 16.1 Formulaires modernisés (labels empilés partout) ------------------ */
/* La grille du thème est en float : on neutralise largeur ET float. */
form .form-group.row > .form-control-label,
form .form-group.row > label[class*="col-"] {
  float: none;
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
  text-align: left;
  padding-top: 0;
  padding-bottom: .35rem;
  font-family: var(--pp-font-title);
  font-weight: 600;
  font-size: .9rem;
  color: var(--pp-ink);
}

form .form-group.row > [class*="col-md-6"],
form .form-group.row > [class*="col-md-9"],
form .form-group.row > [class*="col-md-4"],
form .form-group.row > [class*="col-md-5"] {
  float: none;
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
}

form .form-group.row { margin-bottom: 1.05rem; }

/* Notes d'aide : discrètes, sous le champ */
form .form-control-comment,
form .form-group.row > .form-control-comment[class*="col-"] {
  float: none;
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
  text-align: left;
  padding: .3rem 0 0;
  font-size: .78rem;
  line-height: 1.4;
  color: var(--pp-muted);
}

/* Anti-zoom iOS : jamais moins de 16px dans un champ sur mobile */
@media (max-width: 767px) {
  .form-control, select.form-control, textarea.form-control, select.link { font-size: 16px !important; }
}

/* Selects : chevron sur-mesure, fini la flèche système grise */
select.form-control {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236B7A93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  padding-right: 2.3rem;
  color: var(--pp-text);
}

/* Bouton « Montrer » du mot de passe */
.input-group .input-group-btn > .btn,
.input-group .input-group-btn > .btn[data-action="show-password"] {
  background: #fff;
  border: 1px solid var(--pp-line);
  border-left: 0;
  border-radius: 0 var(--pp-radius) var(--pp-radius) 0;
  color: var(--pp-brand);
  font-family: var(--pp-font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: .55rem .8rem;
  box-shadow: none;
}

.input-group .input-group-btn > .btn:hover { color: var(--pp-gold); background: #fff; }

.input-group .form-control:not(:last-child) { border-right: 0; }

/* Champ fichier (bootstrap-filestyle) : fini le turquoise PrestaShop */
.bootstrap-filestyle input.form-control {
  background: var(--pp-bg);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius) 0 0 var(--pp-radius);
}

.bootstrap-filestyle .group-span-filestyle .btn-default,
.group-span-filestyle .btn-default,
.group-span-filestyle label.btn {
  background: var(--pp-brand);
  color: #fff;
  border: 1px solid var(--pp-brand);
  border-radius: 0 var(--pp-radius) var(--pp-radius) 0;
  font-family: var(--pp-font-title);
  font-weight: 600;
  font-size: .82rem;
  text-transform: none;
  letter-spacing: 0;
  padding: .55rem 1rem;
  margin-bottom: 0;
}

.group-span-filestyle .btn-default:hover { background: var(--pp-brand-2); border-color: var(--pp-brand-2); color: #fff; }

/* Cases à cocher : grandes, nettes, aux couleurs de la marque */
.custom-checkbox { position: relative; }

.custom-checkbox input[type="checkbox"] + span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 0 .5rem 0 0;
  vertical-align: text-bottom;
  border: 1.5px solid var(--pp-muted);
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}

.custom-checkbox input[type="checkbox"] + span .checkbox-checked {
  display: none;
  font-size: 15px;
  margin: 0;
  color: #fff;
}

.custom-checkbox input[type="checkbox"]:checked + span {
  background: var(--pp-brand);
  border-color: var(--pp-brand);
}

.custom-checkbox input[type="checkbox"]:checked + span .checkbox-checked { display: block; }

.custom-checkbox input[type="checkbox"]:focus-visible + span {
  outline: 3px solid rgba(201, 151, 21, .55);
  outline-offset: 2px;
}

/* ---- 16.2 Connexion / inscription : cartes compactes et centrées ----------- */
.page-authentication #content {
  max-width: 540px;
  margin: 0 auto 2rem;
  padding: 1.7rem 1.6rem 1.5rem;
}

.page-authentication #login-form .form-footer .btn,
.page-authentication #customer-form .form-footer .btn {
  width: 100%;
  padding: .8rem 1rem;
  font-size: 1rem;
}

.page-authentication .forgot-password { text-align: center; margin: .8rem 0 .2rem; }
.page-authentication .no-account { text-align: center; margin-top: .4rem; }
.page-authentication #customer-form .form-footer { margin-top: .4rem; }

/* ---- 16.3 Panier ------------------------------------------------------------ */
.cart-grid { margin-top: .4rem; }

.cart-container .card-block h1 {
  font-size: 1.35rem;
  margin: 0;
}

.cart-container .card-block { padding: 1.1rem 1.4rem; }

.separator { border-color: var(--pp-line); }

.cart-item { padding: 1.1rem 0; border-bottom: 1px solid var(--pp-line); }
.cart-items > .cart-item:last-child { border-bottom: 0; }

.cart-grid-body .cart-container { padding: 0 1.4rem; }
.cart-grid-body .cart-container .card-block { padding: 1.1rem 0; margin: 0 -1.4rem; padding-left: 1.4rem; padding-right: 1.4rem; }

.product-line-info .label,
.product-line-grid-body > .product-line-info > .label {
  font-family: var(--pp-font-title);
  font-weight: 600;
  color: var(--pp-ink);
  font-size: .98rem;
}

.product-line-info .current-price { color: var(--pp-brand); font-family: var(--pp-font-title); font-weight: 700; }

.product-price.h5 { font-family: var(--pp-font-title); color: var(--pp-brand); }

.cart-line-product-actions .remove-from-cart { color: var(--pp-muted); }
.cart-line-product-actions .remove-from-cart:hover { color: #C0392B; }

/* Compteur de quantité du panier : boutons plus grands */
.cart-item .bootstrap-touchspin input.js-cart-line-product-quantity { height: 42px; width: 52px; }
.cart-item .input-group-btn-vertical .btn { min-width: 32px; padding: .35rem; }

/* « Continuer mes achats » */
.cart-grid-body a.label {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-family: var(--pp-font-title);
  font-weight: 600;
  font-size: .92rem;
  color: var(--pp-brand);
  margin: .9rem 0 0;
}

.cart-grid-body a.label:hover { color: var(--pp-brand-2); }

/* Récapitulatif */
.cart-summary .card-block { padding: 1.2rem 1.4rem .6rem; }
.cart-summary-line { padding: .2rem 0; }
.cart-summary-line .label { color: var(--pp-muted); }
.cart-total { padding: .55rem 0 !important; }
.cart-total .label { font-family: var(--pp-font-title); font-weight: 600; color: var(--pp-ink) !important; }
.cart-total .value { font-size: 1.25rem; }

.block-promo .promo-code-button {
  display: inline-block;
  margin: .2rem 0 .9rem;
  font-size: .9rem;
}

.block-promo .promo-code .btn {
  background: var(--pp-brand);
  border-color: var(--pp-brand);
  color: #fff;
  font-weight: 600;
}

.block-promo form { text-align: left; }

/* ---- 16.4 Tunnel de commande ------------------------------------------------- */
/* Le logo du tunnel était masqué par la règle générale : on le rétablit */
@media (min-width: 768px) {
  body#checkout #header .header-nav {
    display: block;
    background: #fff;
    border-bottom: 1px solid var(--pp-line);
    padding: .6rem 0;
    max-height: none;
  }

  body#checkout #header .header-nav #_desktop_logo { display: inline-block; }
}

body#checkout section.checkout-step .step-title {
  font-size: 1.02rem;
  font-weight: 600;
  text-transform: none;
}

body#checkout section.checkout-step .content { padding: 0 1.3rem 1.2rem; }

/* Choix d'adresse : fini le bleu turquoise PrestaShop */
.address-item {
  background: #fff;
  border: 1.5px solid var(--pp-line);
  border-radius: var(--pp-radius);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.address-item:hover { border-color: rgba(201, 151, 21, .5); }

.address-item.selected {
  background: #fff;
  border: 1.5px solid var(--pp-gold);
  box-shadow: var(--pp-shadow);
}

.address-item .address { font-size: .92rem; color: var(--pp-text); }
.address-item .radio-block { padding: 1rem; }
.address-footer { padding: .6rem 1rem .9rem; }
.address-footer a { color: var(--pp-muted); font-size: .88rem; margin-right: 1rem; }
.address-footer a:hover { color: var(--pp-brand); }

#checkout .add-address a { color: var(--pp-link); font-weight: 500; }

/* Conditions générales : ligne aérée, case bien visible */
#conditions-to-approve { padding-top: .6rem; }
#conditions-to-approve label { display: inline; }

/* ---- 16.5 Sous-catégories : cartes propres --------------------------------- */
#subcategories {
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-lg);
  box-shadow: var(--pp-shadow);
  background: #fff;
  padding: 1.2rem 1.4rem 1.4rem;
}

#subcategories .subcategory-heading {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--pp-ink);
  margin-bottom: 1rem;
}

#subcategories .subcategories-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .9rem;
  margin: 0;
  padding: 0;
}

@media (min-width: 992px) {
  #subcategories .subcategories-list { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}

#subcategories .subcategories-list li {
  float: none;
  width: auto;
  margin: 0;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  background: #fff;
  overflow: hidden;
  text-align: center;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

#subcategories .subcategories-list li:hover {
  transform: translateY(-3px);
  box-shadow: var(--pp-shadow-hover);
  border-color: rgba(201, 151, 21, .45);
}

#subcategories .subcategory-image,
#subcategories ul li .subcategory-image { padding: 0; margin: 0; }

#subcategories .subcategory-image a,
#subcategories ul li .subcategory-image a {
  display: block;
  padding: 0;
  border: 0;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--pp-brand), var(--pp-brand-2));
  overflow: hidden;
}

#subcategories .subcategory-image a img,
#subcategories ul li .subcategory-image a img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* Catégorie sans visuel (ex. Bateau) : tuile bleu nuit avec repère or */
#subcategories .subcategory-image a:not(:has(img)) {
  position: relative;
}

#subcategories .subcategory-image a:not(:has(img))::after {
  content: '→';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pp-gold-strong);
  font-size: 1.6rem;
  font-weight: 700;
}

#subcategories h5 { margin: 0; }

#subcategories .subcategory-name {
  display: block;
  padding: .65rem .5rem .75rem;
  font-family: var(--pp-font-title);
  font-weight: 600;
  font-size: .92rem;
  color: var(--pp-ink);
}

#subcategories .subcategory-name:hover { color: var(--pp-brand-2); }

#subcategories .cat_desc { display: none; }

/* En-tête de catégorie compact */
#js-product-list-header .block-category {
  padding: 1.1rem 1.4rem;
  margin-bottom: 1rem;
}

.block-category h1 { font-size: 1.35rem; margin-bottom: 0; }
.block-category .category-cover { display: none; }
.block-category #category-description p:last-child { margin-bottom: 0; }
.block-category #category-description { color: var(--pp-muted); font-size: .95rem; margin-top: .5rem; }

/* ---- 16.6 Pagination : plus de chiffres qui se chevauchent ------------------ */
.pagination .page-list {
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-wrap: wrap;
}

.pagination .page-list li { display: inline-flex; }

.pagination a,
.pagination .current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  padding: .15rem .5rem;
  border-radius: 8px;
}

.pagination a:hover { background: var(--pp-gold-soft); color: var(--pp-brand); }

.pagination .current a {
  color: #fff;
  background: var(--pp-brand);
  padding: 0;
  min-width: 34px;
  min-height: 34px;
}

.pagination .previous, .pagination .next { font-weight: 600; }

/* ---- 16.7 Pages CMS : lecture confortable ----------------------------------- */
#cms .page-content, #content.page-cms {
  text-align: left !important;
  padding: 1.8rem 1.9rem;
}

.page-cms h1, .page-cms h2 { font-size: 1.3rem; margin: .2rem 0 .8rem; }
.page-cms h3 { font-size: 1.1rem; }

.page-cms img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: .3rem 1rem .6rem 0;
}

.page-cms td { vertical-align: top; padding: .3rem .6rem .3rem 0; }
.page-cms table { max-width: 100%; }

/* ---- 16.8 Footer ------------------------------------------------------------- */
/* Bloc réseaux sociaux hors footer (hook footerBefore) : enfin visible */
.block-social {
  float: none;
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  margin: .2rem 0 .9rem;
}

.block-social ul { margin: 0; display: flex; justify-content: center; }

.block-social ul li {
  width: 42px;
  height: 42px;
  margin: 0 .25rem;
  border-radius: 50%;
  background-color: var(--pp-brand);
  background-size: 20px 20px;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-color .15s ease;
}

.block-social ul li:hover { background-color: var(--pp-gold); }

.footer-container .block-social ul li { background-color: rgba(255, 255, 255, .12); }
.footer-container .block-social ul li:hover { background-color: var(--pp-gold); }

/* Titres de colonnes : tous identiques, y compris « Informations » */
.footer-container h3,
.footer-container .h3,
.footer-container .footer__title,
.footer-container p.h3 {
  font-family: var(--pp-font-body);
  color: rgba(255, 255, 255, .55);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .8rem;
}

/* Liens : zone de clic confortable */
.footer-container li { margin-bottom: 0; }
.footer-container li a { display: inline-block; padding: .24rem 0; }

/* Copyright lisible */
.pp-copyright,
.footer-container .row > .col-md-12 p.text-sm-center,
.footer-container .row > .col-md-12 p.text-sm-center a {
  color: rgba(255, 255, 255, .65) !important;
  font-size: .8rem;
}

/* Footer mobile : rangées nettes, tap targets généreux */
@media (max-width: 767px) {
  .footer-container { padding-top: 1.2rem; }

  /* Les .row imbriquées à marges négatives collaient les titres au bord écran */
  .footer-container .row { margin-left: 0; margin-right: 0; }

  .footer-container .links .title {
    padding: .9rem 15px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
  }

  .footer-container .links .title .h3,
  .footer-container .links .title span { color: rgba(255, 255, 255, .85); margin-bottom: 0; }

  .footer-container .links .navbar-toggler {
    color: var(--pp-gold-strong);
    padding: 0;
    width: auto;
    height: auto;
  }

  .footer-container .links ul {
    background: transparent;
    margin-bottom: 0;
  }

  /* Le padding passe du li au lien : toute la rangée devient tapable (~50px) */
  .footer-container .links ul > li {
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    font-weight: 400;
  }

  .footer-container .links ul > li a { display: block; padding: .8rem 1rem; }

  /* Même retrait que les autres accordéons (« Informations » partait du bord).
     !important : une règle du thème réimpose son padding sinon. */
  .footer-container .block-contact { padding: 1rem 15px 0 !important; }
  .footer-container .links .wrapper { padding-left: 0; padding-right: 0; }
}

/* ---- 16.9 Header : sélecteur de langue, compte, menu mobile ------------------ */
/* Burger : vraie cible tactile */
#menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  border-radius: 10px;
}

#menu-icon:hover { background: var(--pp-bg); }
#menu-icon .material-icons { color: var(--pp-ink); }

#header .header-nav .mobile { display: flex; align-items: center; padding: .3rem 0; }
#header .header-nav .mobile #menu-icon { order: 1; }
#header .header-nav .mobile .top-logo { order: 2; }
#header .header-nav .mobile #_mobile_user_info { order: 3; }
#header .header-nav .mobile #_mobile_cart { order: 4; }
#header .header-nav .mobile .clearfix { display: none; }
#header .header-nav .mobile .top-logo { flex: 1 1 auto; display: flex; justify-content: center; align-items: center; }
#header .header-nav .mobile .top-logo a { margin: 0 auto; }
#header .header-nav .mobile .top-logo img { max-height: 38px; width: auto; }
#header .header-nav #_mobile_cart,
#header .header-nav #_mobile_user_info { display: inline-flex; align-items: center; }

#header .header-nav .user-info a,
#header .header-nav .blockcart a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  color: var(--pp-ink);
}

#header .header-nav .blockcart { background: transparent; }
#header .header-nav .blockcart .cart-products-count { font-size: .8rem; font-weight: 700; color: var(--pp-brand); }

/* Panneau du menu mobile : propre, blanc, aéré */
#mobile_top_menu_wrapper {
  padding: .4rem 1rem 1.1rem;
  background: #fff;
  border-top: 1px solid var(--pp-line);
}

#mobile_top_menu_wrapper .top-menu { color: var(--pp-ink); }

#mobile_top_menu_wrapper .top-menu a[data-depth="0"] {
  display: block;
  padding: .9rem .1rem;
  border-bottom: 1px solid var(--pp-line);
  font-family: var(--pp-font-title);
  font-weight: 600;
  font-size: 1rem;
  color: var(--pp-ink);
  text-transform: none;
}

#mobile_top_menu_wrapper .top-menu .navbar-toggler { color: var(--pp-brand); }

#mobile_top_menu_wrapper .js-top-menu-bottom {
  padding-top: .8rem;
}

#mobile_top_menu_wrapper .js-top-menu-bottom .language-selector-wrapper {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .1rem;
  color: var(--pp-muted);
  font-size: .9rem;
}

#mobile_top_menu_wrapper .js-top-menu-bottom select.link {
  border: 1px solid var(--pp-line);
  border-radius: 8px;
  padding: .5rem 1.8rem .5rem .7rem;
  background: #fff;
  color: var(--pp-ink);
  min-width: 9.5rem; /* « Français » était tronqué en « Fran » */
  max-width: 60%;
}

#mobile_top_menu_wrapper #contact-link { padding: .5rem .1rem; }
#mobile_top_menu_wrapper #contact-link a { color: var(--pp-text); }

/* ---- 16.10 Espace client ------------------------------------------------------ */
/* Rangée de liens sous les pages compte : boutons discrets */
.page-footer .account-link,
#main .page-footer a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 1px solid var(--pp-line);
  border-radius: 999px;
  background: #fff;
  color: var(--pp-ink);
  font-family: var(--pp-font-title);
  font-weight: 500;
  font-size: .88rem;
  padding: .5rem 1.1rem;
  margin: 0 .5rem .5rem 0;
  transition: border-color .15s ease, color .15s ease;
}

.page-footer .account-link:hover,
#main .page-footer a:hover { border-color: var(--pp-brand); color: var(--pp-brand); }

/* Adresses enregistrées */
.address {
  background: #fff;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-shadow);
  font-size: .93rem;
}

.address .address-body { padding: 1.1rem 1.2rem; }
.address .address-body h4 { font-family: var(--pp-font-title); font-weight: 600; font-size: .98rem; }
.address .address-footer { border-top: 1px solid var(--pp-line); padding: .6rem 1.2rem; }

/* Historique / détail de commande */
#history .orders { margin: 0; }
.page-order-detail .box { background: #fff; border: 1px solid var(--pp-line); border-radius: var(--pp-radius); padding: 1.1rem 1.2rem; margin-bottom: 1rem; }
.page-order-detail h3 { font-size: 1.02rem; color: var(--pp-ink); }

/* ---- 16.11 Divers -------------------------------------------------------------- */
#notifications { margin-top: .6rem; }
#notifications .container { padding: 0 15px; }
#notifications ul { margin-bottom: 0; }

.modal-content { border: none; border-radius: var(--pp-radius-lg); box-shadow: var(--pp-shadow-hover); }
.modal-header { border-bottom: 1px solid var(--pp-line); }
.modal-footer { border-top: 1px solid var(--pp-line); }

/* Page 404 : illustration + actions */
.pp-404-actions {
  display: flex;
  gap: .8rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.3rem;
}

.page-not-found h4 {
  font-family: var(--pp-font-title);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--pp-ink);
}

.page-not-found p { color: var(--pp-muted); }
.page-not-found .search-widget { max-width: 420px; margin: 1rem auto 0; }

/* Contact : une seule carte, pas de double bordure */
#contact .contact-form,
.contact-form {
  border: 0;
  box-shadow: none;
  padding: 0;
}

.contact-form h3 { font-size: 1.35rem; margin-bottom: 1.2rem; text-align: left; }

#contact #content.page-content.card { padding: 1.7rem 1.8rem; }

@media (max-width: 767px) {
  .contact-form .form-footer .btn,
  #main form .form-footer .btn-primary { width: 100%; }
}

/* Plan du site */
.sitemap h2 { font-size: 1.05rem; border-bottom: 1px solid var(--pp-line); padding-bottom: .4rem; }
.sitemap ul.nested { margin-top: .4rem; }
.sitemap ul li { font-size: .92rem; padding: .15rem 0; }

/* ---- 16.12 Compacité générale des pages internes -------------------------------- */
body:not(#index) #wrapper { padding-top: 0; }

@media (min-width: 768px) {
  body:not(#index) #wrapper > .container { min-height: 34vh; }
}

#main .page-content h6.h6 { font-family: var(--pp-font-title); }

/* La bande de réassurance pré-footer reste discrète sur les pages internes */
.pp-trust { padding: 1.3rem 0; }

/* ==========================================================================
   17. v8 — ACCUEIL : header « pilule » flottant + hero épuré + logo remaster
   ========================================================================== */

/* ---- 17.1 Logo fidèle à l'original : pilote au damier + wordmark ------------ */
.pp-logo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none !important;
}

.pp-logo .pp-logo-pilote {
  display: block;
  height: 46px;
  width: auto;
}

.pp-logo-word {
  font-family: var(--pp-font-title);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}

.pp-logo-word span { color: var(--pp-brand); }
.pp-logo-word b { color: #2E6BE6; font-weight: 700; }

#_mobile_logo .pp-logo .pp-logo-pilote { height: 36px; }
#_mobile_logo .pp-logo-word { font-size: 1.12rem; }

body#checkout .pp-logo .pp-logo-pilote { height: 46px; }

#header #_desktop_logo h1 { margin: 0; line-height: 1; }

/* ---- 17.2 Header pilule flottant (ordinateur) ------------------------------ */
:root { --pp-header-offset: 90px; }

@media (min-width: 768px) {
  #header { background: transparent; border-bottom: 0; }

  #header .header-top {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    padding: .85rem 0 .35rem;
    pointer-events: none;
  }

  /* La pilule : verre dépoli, bords ronds, ombre douce.
     Sa largeur suit le contenu (jamais de bouton qui dépasse). */
  #header .header-top > .container {
    pointer-events: auto;
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    backdrop-filter: blur(16px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, .65);
    box-shadow: 0 10px 34px rgba(10, 24, 48, .14);
    border-radius: 999px;
    padding: .45rem .55rem .45rem 1.2rem;
    width: fit-content;
    max-width: calc(100% - 2rem);
    margin: 0 auto;
  }

  @supports not (backdrop-filter: blur(16px)) {
    #header .header-top > .container { background: rgba(255, 255, 255, .97); }
  }

  /* Une seule ligne, rien ne déborde jamais de la pilule */
  #header .header-top .container > .row {
    flex-wrap: nowrap;
    min-width: 0;
    margin: 0;
  }

  /* Le logo garde sa vraie largeur, le reste s'adapte */
  #header #_desktop_logo {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 0 1.3rem 0 0;
  }

  #header .header-top-right {
    flex: 0 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
  }

  /* Entrées du menu : bien séparées, survol en pastille */
  #header .header-top-right { gap: .5rem; }

  #header .top-menu { display: flex; gap: .15rem; margin-bottom: 0; }

  #header .top-menu a[data-depth="0"] {
    padding: .55rem .95rem;
    border-bottom: none;
    border-radius: 999px;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
  }

  #header .top-menu a[data-depth="0"]:hover {
    background: var(--pp-gold-soft);
    color: var(--pp-brand);
    border-bottom-color: transparent;
  }

  /* Le téléphone reste DANS la pilule, collé au bord arrondi */
  #header .pp-header-phone {
    margin-left: .35rem;
    flex: 0 0 auto;
    border-radius: 999px;
    padding: .5rem 1.05rem;
  }
}

/* Écrans moyens (992-1279 px) : on compacte pour que tout tienne dans la pilule */
@media (min-width: 992px) and (max-width: 1279px) {
  #header .pp-header-phone .pp-phone-num { display: none; }
  #header .pp-header-phone { padding: .5rem .7rem; }
  #header .pp-header-phone .pp-phone-ico { font-size: 1.05rem; }
  #header .top-menu a[data-depth="0"] { padding: .5rem .7rem; font-size: .9rem; }
  #header #_desktop_logo { padding-right: .9rem; }
  /* Connexion / Panier : icône seule, l'étiquette disparaît */
  .pp-nav-inline .user-info a > span.hidden-sm-down { display: none; }
  .pp-nav-inline .user-info a { gap: 0; }
  .pp-nav-inline .cart-preview .header > span.hidden-sm-down { display: none; }
  .pp-nav-inline .cart-preview { gap: .1rem; }
}

/* Tablette (768-991 px) : pilule à deux niveaux — logo + actions, menu dessous */
@media (min-width: 768px) and (max-width: 991px) {
  #header .header-top > .container { border-radius: 26px; }

  #header .header-top-right {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: .1rem;
  }

  /* Le menu passe sur sa propre ligne, centré sur toute la largeur de la pilule */
  #header .header-top-right .menu,
  #header .header-top-right #_desktop_top_menu {
    order: 9;
    flex: 0 0 calc(100% + 172px);
    max-width: none;
    margin: .1rem 0 0 -172px;
    display: flex;
    justify-content: center;
    border-top: 1px solid rgba(12, 34, 66, .07);
    padding-top: .2rem;
  }

  #header .top-menu { flex-wrap: wrap; justify-content: center; }
  #header .top-menu a[data-depth="0"] { padding: .4rem .8rem; font-size: .9rem; }

  #header #_desktop_logo { padding-right: .7rem; }
  .pp-logo .pp-logo-pilote { height: 36px; }
  .pp-logo-word { font-size: 1.08rem; }

  .pp-nav-inline { gap: .35rem; }
  .pp-nav-inline .user-info a > span.hidden-sm-down { display: none; }
  .pp-nav-inline .user-info a { gap: 0; }
  .pp-nav-inline .cart-preview .header > span.hidden-sm-down { display: none; }
  .pp-nav-inline .cart-preview { gap: .1rem; }
  .pp-nav-inline .language-selector-wrapper, .pp-nav-inline .language-selector-wrapper * { font-size: .8rem !important; }
}

@media (min-width: 768px) {

  /* Le bleu nuit du hero passe DERRIÈRE la pilule sur l'accueil */
  body#index #wrapper { margin-top: calc(var(--pp-header-offset) * -1); }
  body#index .pp-hero { padding-top: calc(clamp(2.6rem, 5.5vw, 4.6rem) + var(--pp-header-offset)); }
}

/* ---- 17.3 Widgets langue / connexion / panier ------------------------------- */
@media (min-width: 768px) {
  .pp-nav-inline { gap: .5rem; }

  .pp-nav-inline .language-selector-wrapper,
  .pp-nav-inline .user-info a,
  .pp-nav-inline .cart-preview {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: 1px solid var(--pp-line);
    border-radius: 999px;
    padding: .34rem .8rem;
    background: rgba(255, 255, 255, .6);
    transition: border-color .15s ease, background-color .15s ease;
  }

  .pp-nav-inline .language-selector-wrapper:hover,
  .pp-nav-inline .user-info a:hover,
  .pp-nav-inline .cart-preview:hover {
    border-color: var(--pp-brand);
    background: #fff;
  }

  .pp-nav-inline .language-selector-wrapper { padding-top: .22rem; padding-bottom: .22rem; }
  .pp-nav-inline .language-selector { margin-top: 0; }

  .pp-nav-inline .cart-preview .cart-products-count {
    color: var(--pp-brand);
    font-weight: 700;
  }

  /* Anti-décalage : quand le panier se remplit, PrestaShop enveloppe l'icône
     dans un <a>. On applique le MÊME flex+gap au conteneur .header ET au lien,
     et une largeur minimale : la tuile garde exactement la même taille, vide
     comme pleine → plus aucun décalage à l'ajout. */
  .pp-nav-inline .cart-preview .header,
  .pp-nav-inline .cart-preview .header > a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: inherit;
    text-decoration: none;
  }

  .pp-nav-inline .cart-preview { min-width: 7.6rem; justify-content: center; }

  .pp-nav-inline .cart-preview.active {
    background: var(--pp-brand);
    border-color: var(--pp-brand);
    border-radius: 999px;
  }

  .pp-nav-inline .cart-preview.active .cart-products-count { color: var(--pp-gold-strong) !important; }
}

/* ---- 17.4 Hero épuré : offres défilantes ------------------------------------ */
.pp-hero-rotator {
  position: relative;
  margin-top: 1.4rem;
  max-width: 470px;
  min-height: 88px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .17);
  overflow: hidden;
}

.pp-rot-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: .95rem;
  padding: .9rem 2.5rem .9rem 1.05rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
  text-decoration: none !important;
}

.pp-rot-slide.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.pp-rot-slide:hover { background: rgba(255, 255, 255, .05); }

.pp-rot-price {
  flex: 0 0 auto;
  background: var(--pp-gold);
  color: #0A1830;
  font-family: var(--pp-font-title);
  font-weight: 700;
  font-size: 1.02rem;
  padding: .5rem .7rem;
  border-radius: 10px;
  white-space: nowrap;
}

.pp-rot-price small { font-size: .75em; font-weight: 700; }

.pp-rot-label {
  display: flex;
  flex-direction: column;
  line-height: 1.32;
  min-width: 0;
}

.pp-rot-label strong {
  color: #fff;
  font-family: var(--pp-font-title);
  font-weight: 600;
  font-size: .97rem;
}

.pp-rot-label span {
  color: rgba(255, 255, 255, .72);
  font-size: .8rem;
}

.pp-rot-arrow {
  position: absolute;
  right: .95rem;
  top: 1rem;
  color: var(--pp-gold-strong);
  font-weight: 700;
  font-size: 1.1rem;
  transition: transform .15s ease;
}

.pp-rot-slide:hover .pp-rot-arrow { transform: translateX(3px); }

.pp-rot-dots {
  position: absolute;
  right: .95rem;
  bottom: .6rem;
  display: flex;
  gap: .35rem;
  z-index: 2;
}

.pp-rot-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, .35);
  cursor: pointer;
  transition: background-color .2s ease, width .2s ease;
}

.pp-rot-dots button.is-active {
  background: var(--pp-gold-strong);
  width: 18px;
}

/* ---- 17.5 Harmonisation bande réassurance + divers v8.2 --------------------- */
/* Cartes produit : la vignette occupe TOUTE la largeur de la carte, toujours */
.product-miniature .thumbnail-container,
.product-miniature .thumbnail-top,
.product-miniature a.product-thumbnail {
  display: block;
  width: 100%;
}

.product-miniature a.product-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
}

/* Pastilles de repérage sur les vignettes produit (heures / type / boîte) —
   en bas de la photo ; les drapeaux PrestaShop (Promo…) restent en haut à droite */
.pp-card-badges {
  position: absolute;
  bottom: .6rem;
  left: .6rem;
  right: .6rem;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  z-index: 2;
  pointer-events: none;
}

/* Drapeaux produit (Promo, Exclu web, Nouveau) : pastilles, plus de bannière saumon */
.product-flags {
  position: absolute;
  top: .6rem;
  right: .6rem;
  left: auto;
  width: auto;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .3rem;
  z-index: 2;
  pointer-events: none;
}

/* Sélecteurs doublés (.product-flags li…) : le thème est plus spécifique sinon */
li.product-flag,
.product-flags li.product-flag,
.product-miniature .product-flags li.product-flag {
  position: static;
  top: auto;
  right: auto;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: .3rem .65rem;
  border-radius: 999px;
  font-family: var(--pp-font-title);
  font-weight: 700;
  font-size: .76rem;
  line-height: 1;
  text-transform: none;
  box-shadow: 0 2px 10px rgba(4, 10, 24, .22);
  background: var(--pp-brand);
  color: #fff;
}

.product-flags li.product-flag.on-sale,
.product-miniature .product-flags li.product-flag.on-sale {
  background: #C6432D;
  color: #fff;
  width: auto;
  text-align: left;
  order: 0;
}

li.product-flag.online-only,
.product-flags li.product-flag.online-only,
.product-miniature .product-flags li.product-flag.online-only {
  position: static;
  top: auto;
  right: auto;
  background: var(--pp-brand);
  color: #fff;
  font-size: .72rem;
}

li.product-flag.online-only::before,
.product-flags li.product-flag.online-only::before { content: none; }

.pp-cb {
  font-family: var(--pp-font-title);
  font-weight: 700;
  font-size: .76rem;
  line-height: 1;
  padding: .3rem .65rem;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(4, 10, 24, .22);
  white-space: nowrap;
}

.pp-cb-gold { background: var(--pp-gold); color: #0A1830; }
.pp-cb-navy { background: rgba(12, 34, 66, .92); color: #fff; }

@media (max-width: 767px) {
  .pp-cb { font-size: .72rem; padding: .26rem .55rem; }
}

/* Tous les titres tiennent sur une ligne : icône centrée, textes alignés entre eux */
.pp-usp-item { align-items: center; }
.pp-usp-item strong { white-space: nowrap; }

/* Icône YouTube nette (le sprite du thème était illisible sur pastille) */
.block-social ul li.youtube {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='M21.6 7.2a2.8 2.8 0 0 0-2-2C17.9 4.8 12 4.8 12 4.8s-5.9 0-7.6.4a2.8 2.8 0 0 0-2 2A29 29 0 0 0 2 12c0 1.6.13 3.2.4 4.8a2.8 2.8 0 0 0 2 2c1.7.4 7.6.4 7.6.4s5.9 0 7.6-.4a2.8 2.8 0 0 0 2-2c.27-1.6.4-3.2.4-4.8s-.13-3.2-.4-4.8ZM9.8 15.3V8.7L16 12l-6.2 3.3Z'/%3E%3C/svg%3E") !important;
  background-size: 21px 21px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.block-social ul li.youtube a { opacity: 0; }

@media (max-width: 767px) {
  .pp-hero-rotator { max-width: none; margin-top: .3rem; min-height: 82px; }
  .pp-rot-slide { padding: .8rem 2.2rem .8rem .85rem; gap: .7rem; }
  .pp-rot-price { font-size: .95rem; padding: .45rem .6rem; }
  .pp-rot-label strong { font-size: .92rem; }
  .pp-rot-label span { font-size: .77rem; }

  /* Header mobile compact : tout tient dans 390 px sans déborder */
  #header .header-nav .mobile { padding-left: .55rem; padding-right: .55rem; }

  #_mobile_logo .pp-logo .pp-logo-pilote { height: 30px; }
  #_mobile_logo .pp-logo-word { font-size: 1.02rem; }
  #_mobile_logo .pp-logo { gap: .35rem; }

  #header .header-nav .mobile #menu-icon { flex: 0 0 44px; }

  #header .header-nav .user-info a,
  #header .header-nav .blockcart a { min-width: 36px; }

  #header .header-nav .cart-preview { padding: .2rem .25rem; }
  #header .header-nav .cart-preview .header { display: inline-flex; align-items: center; }
  #header .header-nav .user-info { margin: 0; }
  #header .header-nav .user-info .account { margin-left: 0; }
}

/* ==========================================================================
   18. v9 — PAGES CATÉGORIES / PRODUIT / PANIER : niveau pro
   ========================================================================== */

/* ---- 18.1 La barre « Il y a X produits / Trier par » disparaît partout ----- */
#js-product-list-top { display: none !important; }

/* ---- 18.2 Cartes produit : toutes à la même hauteur, CTA aligné en bas ----- */
#js-product-list .products,
.featured-products .products {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.js-product { display: flex; }

.js-product .product-miniature {
  display: flex;
  width: 100%;
}

.js-product .thumbnail-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.product-miniature .product-description {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.product-miniature .product-price-and-shipping {
  margin-top: auto;
  padding-top: .45rem;
}

/* ---- 18.3 En-tête de catégorie : bandeau bleu nuit aux couleurs de la marque - */
#js-product-list-header .block-category {
  position: relative;
  overflow: hidden;
  background: linear-gradient(118deg, #0A1830 0%, var(--pp-brand) 55%, var(--pp-brand-2) 100%);
  border: 0;
  color: #fff;
  padding: 1.7rem 1.9rem 1.5rem;
  margin-bottom: 1.2rem;
}

#js-product-list-header .block-category::after {
  content: '';
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 177, 47, .25), transparent 70%);
  pointer-events: none;
}

.block-category h1 {
  color: #fff;
  font-size: 1.55rem;
  margin-bottom: .3rem;
}

.block-category #category-description,
.block-category #category-description p,
.block-category #category-description span,
.block-category #category-description strong {
  color: rgba(255, 255, 255, .85) !important;
  background: transparent !important;
  font-size: .95rem;
}

.block-category #category-description a,
.block-category #category-description a span {
  color: var(--pp-gold-strong) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.block-category #category-description p:last-child { margin-bottom: 0; }

/* ---- 18.4 Fiche produit : photo contenue, pastilles, achat aligné ----------- */
/* La galerie de vignettes n'apporte rien (logos hérités, doublon de la photo) */
#product .images-container .thumbnails,
#product .scroll-box-arrows,
#product .images-container .product-images { display: none !important; }

#product .product-cover {
  margin-bottom: 0;
}

#product .product-cover img {
  width: 100%;
  height: auto;
  max-height: 440px;
  object-fit: cover;
}

/* Pastilles sous le titre (mêmes que sur les cartes, en statique) */
.pp-prod-badges .pp-card-badges {
  position: static;
  margin: .5rem 0 .9rem;
  padding: 0;
}

.pp-prod-badges .pp-cb { box-shadow: none; border: 1px solid transparent; }
.pp-prod-badges .pp-cb-navy { background: var(--pp-brand); }

/* Ligne d'achat : quantité et bouton à la même hauteur, alignés */
#product .product-quantity {
  display: flex;
  align-items: stretch;
  gap: .9rem;
  flex-wrap: wrap;
}

#product .product-quantity .qty { margin: 0; }

#product #quantity_wanted { height: 48px; }

#product .product-quantity .add { margin: 0; }

#product .product-add-to-cart .add-to-cart {
  height: 48px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0 1.8rem;
}

#product .product-add-to-cart { margin-top: .4rem; }

/* Réassurance sous le bouton d'achat */
.pp-prod-trust {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px dashed var(--pp-line);
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.pp-prod-trust li {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .9rem;
  color: var(--pp-text);
}

.pp-prod-trust svg { flex: 0 0 auto; }

/* PayPal : bien séparé du bouton principal */
#product .product-additional-info { margin-top: .9rem; }

/* Onglets Description : plus d'air */
#product .tabs { margin-top: 1.6rem; padding: 1.2rem 1.4rem; }
#product .tabs .nav-tabs { margin-bottom: .8rem; }
#product .tabs .tab-pane { padding-top: .4rem; }

/* La description courte respire */
#product .product-information > .product-description {
  color: var(--pp-text);
  font-size: .95rem;
  line-height: 1.65;
  margin-bottom: .9rem;
}

/* ---- 18.5 Panier : présentation soignée ------------------------------------- */
body#cart .cart-grid { margin-top: .3rem; }

/* Lignes produit : image arrondie, nom fort, prix net */
.cart-item .product-line-grid-left img,
.cart-item .media-middle img {
  border-radius: 10px;
  border: 1px solid var(--pp-line);
  width: 100%;
  height: auto;
}

.product-line-info .label,
.product-line-grid-body > .product-line-info > .label {
  font-size: 1.02rem;
  line-height: 1.35;
}

.product-line-info .current-price,
.cart-item .product-price {
  font-size: .95rem;
}

.cart-item .product-line-grid-right .price,
.cart-item .product-line-grid-right .product-price {
  font-family: var(--pp-font-title);
  font-weight: 700;
  color: var(--pp-brand);
  font-size: 1.08rem;
}

/* Récapitulatif : titre, hiérarchie, collant au défilement */
@media (min-width: 992px) {
  body#cart .cart-grid-right .cart-summary {
    position: sticky;
    top: 100px;
  }
}

.cart-summary::before {
  content: 'Récapitulatif';
  display: block;
  font-family: var(--pp-font-title);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--pp-ink);
  padding: 1.1rem 1.4rem .1rem;
}

html[lang="ru"] .cart-summary::before { content: 'Итого'; }

.cart-summary .card-block:first-of-type { padding-top: .6rem; }

/* ---- 18.6 Footer : YouTube intégré (rangée fine au-dessus du copyright) ------ */
.block-social {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  margin: .6rem 0 .9rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.pp-social-label {
  font-family: var(--pp-font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

.footer-container .block-social ul li {
  width: 36px;
  height: 36px;
  margin: 0 .15rem;
}

.pp-copyright .pp-credit {
  color: rgba(255, 255, 255, .8) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pp-copyright .pp-credit:hover { color: var(--pp-gold-strong) !important; }

.pp-credit-sep { margin: 0 .3rem; opacity: .6; }

/* ---- 18.7 Mobile --------------------------------------------------------------- */
@media (max-width: 767px) {
  #js-product-list-header .block-category { padding: 1.2rem 1.2rem 1.1rem; }
  .block-category h1 { font-size: 1.25rem; }
  #product .product-cover img { max-height: 320px; }
  #product .product-add-to-cart .add-to-cart { width: 100%; justify-content: center; }
  .cart-summary::before { padding: 1rem 1.2rem 0; }
}

/* Le carrousel mobile des services populaires reste un carrousel (défini avant 18.2) */
@media (max-width: 767px) {
  .featured-products .products { flex-wrap: nowrap; align-items: stretch; }
}

/* Compteur « Affichage 1-6 de 6 article(s) » : inutile avec si peu de produits.
   Selon les pages, la structure est .pagination > .row > div OU .pagination > div. */
.pagination > .row > div:first-child,
.pagination > div:first-child { display: none; }
.pagination .col-md-8,
.pagination .col-md-6 { width: 100%; float: none; margin: 0; }

/* Compteur de quantité du panier : input + flèches alignés proprement */
.cart-item .bootstrap-touchspin {
  display: inline-flex;
  align-items: stretch;
  float: none;
  width: auto;
}

.cart-item .bootstrap-touchspin input.js-cart-line-product-quantity {
  height: 44px;
  width: 48px;
  border: none;
}

.cart-item .input-group-btn-vertical {
  display: flex;
  flex-direction: column;
  width: auto;
  float: none;
}

.cart-item .input-group-btn-vertical .btn {
  flex: 1 1 50%;
  min-width: 30px;
  height: auto;
  padding: 0 .45rem;
  margin: 0;
  border-radius: 0;
  border-left: 1px solid var(--pp-line);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-item .input-group-btn-vertical .btn + .btn { border-top: 1px solid var(--pp-line); }

/* ==========================================================================
   19. v10 — retours du 16/07 : bleu derrière la pilule partout, YouTube au
   footer, panier clarifié, bouton d'achat aligné, finder « Que cherchez-vous ? »
   ========================================================================== */

/* ---- 19.1 Fini la barre blanche au-dessus du header -------------------------- */
/* Sur l'accueil, le bleu du hero passe déjà derrière la pilule. Sur toutes les
   autres pages, on peint le même bleu nuit derrière : le header est cohérent
   d'une page à l'autre et la bande blanche disparaît. */
@media (min-width: 768px) {
  body:not(#index) #header .header-top {
    background: linear-gradient(150deg, var(--pp-brand) 0%, var(--pp-brand-2) 100%);
  }
}

/* Accueil : la hauteur réelle du header varie (police, zoom, largeur d'écran)
   alors que le décalage est fixe → un liseré clair pouvait apparaître tout en
   haut. Remède : on remonte le hero LARGEMENT sous le header — l'excédent se
   cache derrière lui, et le contenu se recale tout seul (le padding du hero
   utilise la même variable, les deux s'annulent). */
@media (min-width: 992px) {
  :root { --pp-header-offset: 140px; }
}

/* Tablette : la pilule passe sur 2 niveaux, elle est plus haute */
@media (min-width: 768px) and (max-width: 991px) {
  :root { --pp-header-offset: 200px; }
}

/* ---- 19.2 Bouton « Ajouter au panier » : chariot aligné avec le texte -------- */
#product .product-add-to-cart .add-to-cart .material-icons {
  font-size: 1.25rem;
  line-height: 1;
  height: auto;
  width: auto;
  margin: 0;
  vertical-align: initial;
}

/* ---- 19.3 « Vous avez un code promo ? » : aligné avec le reste du récap ------ */
.cart-summary .block-promo,
.cart-detailed-totals .block-promo { padding: 0 1.4rem; }

.block-promo .promo-code-button {
  margin: .1rem 0 .9rem;
  font-size: .88rem;
}

.block-promo .promo-code-button .collapse-button {
  color: var(--pp-brand-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.block-promo .promo-code { padding: .6rem 0 .9rem; background: transparent; }
.block-promo .promo-code form { display: flex; gap: .5rem; }

.block-promo .promo-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  border: 1px solid var(--pp-line);
  border-radius: 8px;
  padding: 0 .8rem;
}

/* ---- 19.4 Paiement : « Commander » seul en vedette, PayPal en encart --------- */
.cart-detailed-actions .btn-primary {
  display: block;
  width: 100%;
  margin-bottom: 0;
}

.pp-express {
  margin-top: 1.1rem;
  padding: .85rem .9rem .6rem;
  border: 1px dashed var(--pp-line);
  border-radius: var(--pp-radius);
  background: #F7F9FC;
}

.pp-express-label {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--pp-muted);
  margin-bottom: .65rem;
  white-space: nowrap;
}

.pp-express-label::before,
.pp-express-label::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--pp-line);
}

/* Le bouton image PayPal du module : fini le float décalé */
.pp-express [data-container-express-checkout] {
  float: none !important;
  margin: 0 !important;
  display: flex;
  justify-content: center;
}

.pp-express #js-ps_checkout-express-button-container { margin: 0 auto; }

/* ---- 19.6 Fini la bande blanche entre le contenu et le footer ---------------- */
/* Trois coussins s'empilaient sous l'accueil : le padding du footer (40 px), le
   padding du container et la marge d'un <footer class="page-footer"> VIDE en fin
   de gabarit (32 px). La section bleue « Prêt à prendre la route ? » touche
   désormais directement le liseré or du footer. */
#footer { padding-top: 0; }
body#index #wrapper > .container { padding-bottom: 0; }
body#index .page-footer { display: none; margin: 0; }

/* ---- 19.5 Finder « Que recherchez-vous ? » ----------------------------------- */
/* Carte claire posée à cheval sur le bas du hero : le visiteur est guidé vers
   la bonne formation en 2 à 4 questions. */
.pp-finder { position: relative; z-index: 5; margin-top: -2.2rem; margin-bottom: 2.6rem; }

.pp-finder-card {
  max-width: 880px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--pp-line);
  border-radius: calc(var(--pp-radius) + 6px);
  box-shadow: 0 22px 54px rgba(10, 24, 48, .12);
  padding: 1.7rem 1.9rem 1.5rem;
}

.pp-finder-card .pp-f-head { text-align: center; margin-bottom: 1.1rem; }
.pp-finder-card .pp-f-head h2 { margin: .35rem 0 .3rem; font-size: 1.45rem; }
.pp-finder-card .pp-f-head p { margin: 0; color: var(--pp-muted); font-size: .95rem; }

.pp-f-q {
  margin: 0 0 .75rem;
  font-family: var(--pp-font-title);
  font-weight: 600;
  color: var(--pp-ink);
  text-align: center;
}

.pp-f-opts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: .6rem;
}

.pp-f-opt {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  text-align: left;
  background: #F7F9FC;
  border: 1.5px solid var(--pp-line);
  border-radius: 14px;
  padding: .8rem .95rem;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}

.pp-f-opt:hover,
.pp-f-opt:focus-visible {
  border-color: var(--pp-gold);
  background: var(--pp-gold-soft);
  transform: translateY(-1px);
}

.pp-f-ico { flex: 0 0 auto; width: 34px; height: 34px; color: var(--pp-brand-2); }
.pp-f-ico svg { width: 100%; height: 100%; }

.pp-f-opt-txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.pp-f-opt-txt strong { font-family: var(--pp-font-title); font-weight: 600; color: var(--pp-ink); line-height: 1.25; }
.pp-f-opt-txt > span { font-size: .82rem; color: var(--pp-muted); line-height: 1.3; }

.pp-f-opt-arrow { margin-left: auto; color: var(--pp-gold-strong); font-weight: 600; opacity: 0; transition: opacity .15s ease; }
.pp-f-opt:hover .pp-f-opt-arrow, .pp-f-opt:focus-visible .pp-f-opt-arrow { opacity: 1; }

.pp-f-back {
  display: inline-block;
  margin-top: .8rem;
  background: none;
  border: none;
  padding: .2rem 0;
  font-size: .88rem;
  color: var(--pp-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pp-f-back:hover { color: var(--pp-brand); }

/* Résultat */
.pp-f-result {
  border: 1.5px solid var(--pp-gold);
  background: linear-gradient(150deg, #FFFDF6 0%, #FFF7E4 100%);
  border-radius: 16px;
  padding: 1.1rem 1.3rem 1.2rem;
}

.pp-f-reco {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pp-gold-strong);
  margin-bottom: .45rem;
}

.pp-f-res-line { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.pp-f-res-name { font-family: var(--pp-font-title); font-size: 1.18rem; color: var(--pp-ink); }

.pp-f-price {
  font-family: var(--pp-font-title);
  font-weight: 700;
  font-size: 1.18rem;
  color: var(--pp-brand);
  white-space: nowrap;
}

.pp-f-res-sub { margin: .35rem 0 0; color: var(--pp-ink); font-size: .95rem; }

.pp-f-note {
  margin: .55rem 0 0;
  font-size: .85rem;
  color: var(--pp-muted);
  padding-left: 1rem;
  position: relative;
}

.pp-f-note::before { content: '💡'; position: absolute; left: 0; top: 0; font-size: .8rem; }

.pp-f-res-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .9rem; }

.pp-f-cta {
  display: inline-block;
  background: var(--pp-gold);
  color: #0A1830 !important;
  font-weight: 600;
  padding: .68rem 1.5rem;
  border-radius: 999px;
  text-decoration: none !important;
  transition: background-color .15s ease, transform .15s ease;
}

.pp-f-cta:hover { background: var(--pp-gold-strong); transform: translateY(-1px); }

.pp-f-alt { font-size: .9rem; color: var(--pp-brand-2); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 767px) {
  .pp-finder { margin-top: -1.2rem; }
  .pp-finder-card { margin: 0 .8rem; padding: 1.2rem 1rem 1.1rem; }
  .pp-finder-card .pp-f-head h2 { font-size: 1.22rem; }
  .pp-f-opts { grid-template-columns: 1fr; }
  .pp-f-res-line { flex-direction: column; gap: .15rem; }
}

/* ==========================================================================
   19.7 — PASSE MOBILE COMPLÈTE (audit 6 zones, 17/07/2026)
   Tout ce qui restait de PrestaShop brut ou d'impraticable au doigt.
   ========================================================================== */

/* ---- a) Accueil : réassurance, hero, rotator, finder ------------------------- */
@media (max-width: 767px) {
  /* La grille 2x2 débordait de l'écran (nowrap + pistes 1fr incompressibles) */
  .pp-usp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-usp-item { min-width: 0; }
  .pp-usp-item strong { white-space: normal; line-height: 1.25; }

  .pp-hero .pp-kicker { font-size: .78rem; }
}

/* Points du rotator : zone tactile 23px, rendu visuel inchangé (bordure
   transparente non peinte grâce à background-clip) */
.pp-rot-dots button {
  width: 23px;
  height: 23px;
  border: 8px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

.pp-rot-dots button.is-active { width: 34px; }

/* Sur écran tactile, la flèche des options du finder doit se voir sans survol */
@media (hover: none) {
  .pp-f-opt-arrow { opacity: .55; }
}

/* ---- b) Header mobile --------------------------------------------------------- */
@media (max-width: 767px) {
  /* La barre desktop vide laissait une bande morte de ~29px sous le header */
  #header .header-top { padding-top: 0; padding-bottom: 0; box-shadow: none; }
  body#index #wrapper { margin-top: 0; }

  /* Barre mobile : passage des floats du thème (qui ne s'alignaient pas
     verticalement) à une flexbox propre — burger · logo centré · compte · panier,
     tous parfaitement centrés sur une même ligne. */
  /* Burger à gauche, icônes à droite (space-between), logo posé au CENTRE ABSOLU :
     vrai centrage quelle que soit la largeur, burger et icônes collés aux bords. */
  #header .header-nav .mobile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .3rem .75rem;
  }

  /* margin:0 en !important : le thème colle un margin-left:16px sur #menu-icon */
  #header .header-nav .mobile > div { float: none !important; margin: 0 !important; }

  #header .header-nav .mobile #menu-icon {
    order: 1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }

  #header .header-nav .mobile #_mobile_logo {
    order: 2;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }

  /* order:3 explicite : d'anciennes règles (section 17) donnaient déjà un order
     au burger/logo ; sans lui, ce bloc d'icônes passait à gauche */
  #header .header-nav .mobile .pp-mobile-actions {
    order: 3;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
  }

  #header .header-nav .mobile .clearfix { display: none; }

  /* Très petits écrans (≤360px) : logo réduit + icônes resserrées pour que le
     logo centré ne touche jamais les icônes. */
  @media (max-width: 360px) {
    #header .header-nav .mobile { padding: .3rem .5rem; }
    #header .header-nav .mobile #_mobile_logo .pp-logo { gap: .3rem; }
    #header .header-nav .mobile #_mobile_logo .pp-logo-pilote { height: 24px; }
    #header .header-nav .mobile #_mobile_logo .pp-logo-word { font-size: .8rem; }
    #header .header-nav .mobile .pp-mobile-actions { gap: .1rem; }
    #header .header-nav .user-info a,
    #header .header-nav .blockcart a { min-width: 38px; }
  }

  /* Logo centré et à la bonne hauteur dans sa zone flexible */
  #header .header-nav .mobile #_mobile_logo .pp-logo {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
  }

  /* Compte et panier : mêmes dimensions, contenu centré, 44px tactiles */
  #header .header-nav .user-info a,
  #header .header-nav .blockcart a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    line-height: 1;
  }

  /* Burger SVG : display:block tue toute influence de ligne/baseline,
     le flex du conteneur le centre exactement comme les autres icônes */
  #header .header-nav .mobile #menu-icon .pp-burger {
    display: block;
    color: var(--pp-ink);
  }

  /* Compte + panier passés en SVG (comme le burger) : plus aucun décalage de
     police d'icônes selon l'appareil. display:block + couleur héritée.
     On cible .blockcart directement : panier vide = pas de <a>, il resterait gris. */
  #header .header-nav .user-info a,
  #header .header-nav .blockcart { color: var(--pp-ink); }
  /* couleur posée DIRECTEMENT sur le SVG : le thème grise un ancêtre proche
     du panier vide (#7a7a7a), plus spécifique que .blockcart */
  #header .header-nav .pp-ico { display: block; width: 24px; height: 24px; color: var(--pp-ink); }

  /* Le thème ajoutait padding-top + margin-top au bloc panier, et son wrapper
     (display:block) alignait l'icône en haut → elle tombait à côté des autres.
     On remet tout à plat + centrage flex pour un alignement parfait. */
  #header .header-nav .mobile #_mobile_cart .blockcart {
    display: flex;
    align-items: center;
    padding: 0;
  }
  #header .header-nav .mobile #_mobile_cart .blockcart .header { margin: 0; }

  /* Panier plein : le thème le peignait en cyan #24b9d7 — retour à la charte */
  #header .header-nav .cart-preview.active { background: transparent; }
  #header .header-nav .cart-preview.active a,
  #header .header-nav .cart-preview.active .pp-ico { color: var(--pp-ink); }
  #header .header-nav .cart-preview.active .cart-products-count { color: var(--pp-brand); font-weight: 700; }
}

/* Très petits écrans (iPhone SE, petits Android) */
@media (max-width: 360px) {
  #_mobile_logo .pp-logo-word { font-size: .95rem; }
  #header .header-nav .container { padding-left: 10px; padding-right: 10px; }
  body#checkout #header .blockcart { margin-left: .25rem; }
}

/* ---- c) Fiche produit mobile --------------------------------------------------- */
@media (max-width: 767px) {
  /* Le bouton « Ajouter au panier » occupait 227px sur 311 : vraie pleine largeur */
  #product .product-quantity .add { flex: 1 1 100%; min-width: 0; }
  #product .bootstrap-touchspin .btn { min-width: 46px; }

  /* La barre collante fait 70px : le bas de page ne doit plus être masqué */
  body#product { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
  .pp-sticky-atc { padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px)); }

  /* Barre Appeler/Réserver : à l'aise sur les téléphones à encoche */
  .pp-mobile-cta { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* Listes des descriptions structurées : vrai retrait suspendu (la puce ne
   cassait pas l'alignement des lignes suivantes) */
#product .tabs .tab-pane ul {
  list-style-position: outside;
  padding-left: 1.15rem;
  margin-left: .2rem;
}

/* L'onglet « Détails du service » ne contient qu'une référence interne et un
   faux logo de marque : sans intérêt client, on le retire */
#product .product-reference,
#product .product-manufacturer { display: none; }
#product .tabs .nav-tabs li:has(> a[href="#product-details"]) { display: none; }
#product .tabs #product-details { display: none; }

/* ---- d) Panier mobile ----------------------------------------------------------- */
/* L'image de ligne garde sa place avant chargement (fini l'image écrasée) */
.cart-item .product-line-grid-left img,
.cart-item .media-middle img { aspect-ratio: 1 / 1; object-fit: cover; }

@media (max-width: 767px) {
  .cart-item .bootstrap-touchspin input.js-cart-line-product-quantity { height: 48px; }
  .cart-item .input-group-btn-vertical .btn { min-width: 44px; padding: .45rem .6rem; }

  /* Corbeille : 24px visuels mais 44px de zone tapable */
  .cart-line-product-actions .remove-from-cart { display: inline-flex; padding: 10px; margin: -10px; }
  .cart-line-product-actions .remove-from-cart .material-icons { font-size: 22px; }

  /* Le CTA le plus important du site méritait mieux que 38px */
  .cart-detailed-actions .btn { padding: .85rem 1rem; font-size: 1.05rem; }

  /* Boutons PayPal de l'encart express : tous centrés à la même largeur */
  .pp-express > div { max-width: 220px; margin-left: auto; margin-right: auto; }
}

.block-promo .promo-code .btn { height: 42px; padding-top: .4rem; padding-bottom: .4rem; }

/* Ceinture de sécurité : les iframes PayPal ne doivent jamais élargir la page */
.pp-express iframe,
[data-pp-message],
[data-pp-message] iframe,
#js-checkout-summary iframe { max-width: 100% !important; }

/* ---- e) Tunnel de commande ------------------------------------------------------ */
/* Pastilles d'étapes : fini le disque vert Bootstrap */
#checkout .checkout-step .step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--pp-brand-2);
  color: #fff;
  font-size: .95rem;
}

#checkout .checkout-step.-current .step-number { background: var(--pp-gold); color: #0A1830; }
#checkout .step-title .done { color: var(--pp-gold-strong); }

/* Onglets « Commander en tant qu'invité / Connexion » : pastilles propres */
#checkout .checkout-step .nav-inline { display: flex; flex-wrap: wrap; gap: .5rem; margin: .3rem 0 1rem; }
#checkout .checkout-step .nav-separator { display: none; }

#checkout .checkout-step .nav-link {
  display: inline-block;
  padding: .5rem 1.05rem;
  border: 1.5px solid var(--pp-line);
  border-radius: 999px;
  color: var(--pp-muted);
  font-weight: 600;
}

#checkout .checkout-step .nav-link.active {
  border-color: var(--pp-brand);
  background: var(--pp-brand);
  color: #fff;
}

/* Option PayPal : le CSS du module poussait le libellé à droite */
#checkout .payment-options .payment-option label {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: .6rem;
  text-align: left !important;
}

/* Cases à cocher et radios : plus franches sous le doigt */
#checkout input[type="checkbox"],
#checkout .payment-options input[type="radio"] {
  width: 22px;
  height: 22px;
  accent-color: var(--pp-brand);
  flex-shrink: 0;
}

@media (max-width: 767px) {
  /* Boutons « Continuer » d'étape : pleine largeur comme le reste du tunnel */
  #checkout section.checkout-step button.continue { float: none; width: 100%; padding: .8rem 1rem; }

  /* Aides de champ alignées sur les champs */
  #checkout .form-control-comment {
    display: block;
    width: 100%;
    margin: .25rem 0 0;
    padding: 0 0 0 15px;
    text-align: left;
    font-size: .8rem;
  }

  /* À l'étape paiement, le récap complet est déjà affiché dans l'étape :
     le second bloc sous le bouton Commander fait doublon */
  body#checkout:has(#checkout-payment-step.-current) #js-checkout-summary { display: none; }
}

/* ---- f) Formulaires annexes ------------------------------------------------------ */
/* Boutons accolés aux champs (MONTRER, Choisir un fichier) : même hauteur que le champ */
.input-group .input-group-btn > .btn,
.group-span-filestyle label.btn,
.group-span-filestyle .btn-default {
  height: 40px;
  padding-top: 0;
  padding-bottom: 0;
  display: inline-flex;
  align-items: center;
}

/* Mot de passe oublié : seul formulaire encore en colonnes desktop */
@media (max-width: 767px) {
  .forgotten-password .form-control-label {
    float: none;
    width: 100%;
    max-width: 100%;
    text-align: left;
    padding: 0 0 .35rem;
    height: auto;
  }

  .forgotten-password .form-group .email,
  .forgotten-password .form-group .col-md-5 { float: none; width: 100%; max-width: 100%; }
}

#contact .form-control-comment { padding-left: 15px; }

#pagenotfound .btn.btn-secondary {
  padding: .7rem 1.4rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---- g) Listings + footer mobiles ------------------------------------------------ */
@media (max-width: 767px) {
  /* Cartes moins hautes : image 4:3 au lieu du carré → balayage plus rapide
     (sélecteur large : la structure de carte diffère entre catégorie et recherche) */
  #js-product-list .product-miniature .product-thumbnail img,
  #js-product-list .thumbnail-top img,
  #js-product-list article .thumbnail-container img { aspect-ratio: 4 / 3; object-fit: cover; }

  /* Pastille YouTube : cible tactile confortable */
  .footer-container .block-social ul li { width: 44px; height: 44px; }
}

/* Contenus CMS : les styles inline centrés hérités de l'ancien site cassent la
   lecture en colonne mobile */
#content.page-cms [style*="text-align: center"],
#content.page-cms [style*="text-align:center"] { text-align: left !important; }

/* Garde-fou anti-cache : PrestaShop charge AUSSI custom.css sans numéro de version
   (double <link>). Après un déploiement, un navigateur qui a gardé l'ANCIENNE copie
   en cache réappliquerait l'ancienne règle « .page-cms » (qui visait le <body> et
   compressait tout le site). On neutralise explicitement cet état sur le body :
   correct pour un visiteur neuf ET pour un visiteur au cache périmé. */
body.page-cms {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

/* ==========================================================================
   19.8 — POLISH VISUEL MOBILE (revue fine du 17/07 : 51 constats)
   Alignements, superpositions, débordements, rythme — rendu professionnel.
   ========================================================================== */

/* ---- a) Version russe : le cyrillique tombait en police système ------------- */
/* Poppins ne couvre pas le cyrillique → les titres russes mélangeaient 2 polices.
   Inter (déjà chargée) couvre le cyrillique proprement. */
body.lang-ru { --pp-font-title: 'Inter', 'Segoe UI', sans-serif; }

/* ---- b) Titres de cartes produit : lignes équilibrées ----------------------- */
/* Fini le dernier mot orphelin (« …conduite / Manuelle ») */
.product-miniature .product-title a { text-wrap: balance; }

/* ---- c) Fiche produit : rythme de la colonne d'achat ------------------------ */
/* Le titre collait la photo */
#product h1 { margin: .9rem 0 .2rem; }

/* « TTC » en ligne avec le prix (il flottait, accroché au mauvais bloc) */
#product .product-prices { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; }
#product .product-prices > div { margin-bottom: 0; }
#product .tax-shipping-delivery-label { margin: 0; }

/* Bouton bleu PayPal centré comme le reste de la colonne */
#product .paypal-buttons { display: block !important; margin: .3rem auto 0 !important; }

/* Deux h3 collés dans une description = garde-fou d'espacement */
.product-description h3 + h3 { margin-top: 1rem; }

/* Carte « Vous aimerez aussi » : image 4:3 comme toutes les cartes */
@media (max-width: 767px) {
  .product-accessories .product-miniature .thumbnail-top img,
  .product-accessories .product-miniature .product-thumbnail img { aspect-ratio: 4 / 3; object-fit: cover; }
}

/* ---- d) Panier : ligne produit sans dents de scie --------------------------- */
/* Le prix de ligne débordait de sa colonne de 30px jusque sous la corbeille,
   et la rangée quantité partait d'un x fantôme. Rangée en flex propre. */
@media (max-width: 767px) {
  #cart .product-line-grid-right > .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
  }

  #cart .product-line-grid-right .col-xs-4.hidden-md-up { display: none; }

  #cart .product-line-grid-right > .row > div {
    float: none;
    width: auto;
    max-width: none;
    flex: 0 0 auto;
    padding: 0;
  }

  #cart .product-line-grid-right .price { text-align: right; }
}

/* ---- e) Encart express : boutons PayPal réellement centrés ------------------ */
/* Le SDK pose des styles inline sur ses wrappers : on centre par les conteneurs */
.pp-express .paypal-buttons { display: block !important; margin: 0 auto !important; }
.pp-express [id^="zoid-paypal-buttons"] { display: flex !important; justify-content: center !important; }

/* ---- f) Récapitulatif : la mention fiscale colle au total ------------------- */
.cart-summary .cart-summary-line:not(.cart-total) { padding-top: 0; }
.cart-total { padding: .55rem 0 .15rem !important; }

/* ---- g) Tunnel : cohérence de palette et d'alignements ---------------------- */
/* Pastille de l'étape courante : l'or de la charte (le thème forçait un vert vif) */
body#checkout section.checkout-step.-reachable.-current .step-number {
  background-color: var(--pp-gold) !important;
  color: #0A1830 !important;
  border: none;
}

/* Liens du tunnel : bleu Bootstrap → navy charte */
body#checkout a.js-show-details,
body#checkout #js-checkout-summary a,
body#checkout #footer a,
body#checkout .step-edit { color: var(--pp-brand-2); }

/* Code promo du récap tunnel aligné sur les lignes du récap */
body#checkout #js-checkout-summary .block-promo { padding: 0 20px; }

/* Aides de formulaire : une seule logique d'alignement (au bord du champ) */
#checkout .form-control-comment,
#checkout .help-block { padding-left: 0; margin-left: 0; }

@media (max-width: 767px) {
  #checkout .form-control-comment { padding-left: 15px; }
  #checkout .help-block { padding-left: 15px; }
}

/* Bouton MONTRER : même hauteur et même bordure que le champ */
.input-group .input-group-btn > .btn[data-action="show-password"] {
  height: 40px;
  align-self: stretch;
  border-color: var(--pp-line);
  border-left: 0;
}

/* Cases à cocher : retrait suspendu (le texte gardait l'aplomb de la case) */
@media (max-width: 767px) {
  .custom-checkbox label { display: flex; align-items: flex-start; gap: .55rem; }
  .custom-checkbox label input, .custom-checkbox label span.custom-checkbox-span { flex: 0 0 auto; }
  .custom-checkbox input + span { margin-right: .55rem; flex: 0 0 auto; margin-top: 2px; }
}

/* ---- h) Recherche : même bandeau navy que les catégories -------------------- */
#search #js-product-list-header h1,
#search .page-header h1 { color: #fff; margin: 0; }

#search #js-product-list-header,
#search .page-header {
  background: linear-gradient(118deg, #0A1830 0%, var(--pp-brand) 55%, var(--pp-brand-2) 100%);
  color: #fff;
  padding: 1.2rem 1.2rem 1.1rem;
  border-radius: 14px;
  margin: .4rem 0 1.2rem;
  border-bottom: 0;
}

/* Recherche : ré-afficher le nombre de résultats (masqué partout ailleurs) */
#search #js-product-list-top {
  display: block !important;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 0 .9rem;
}

#search #js-product-list-top .products-sort-order { display: none; }
#search #js-product-list-top .total-products { padding: 0; color: var(--pp-muted); }
#search #js-product-list-top .total-products p { margin: 0; font-size: .92rem; }

/* Fiche produit : blocs additionnels vides = plus d'espace fantôme */
#product .js-product-additional-info:empty { display: none; margin: 0; }
#product [data-pp-message] { text-align: center; }

/* ---- i) 404 : au rythme des autres pages ------------------------------------ */
#pagenotfound .page-header { margin: .85rem 0 1rem; }
#pagenotfound .page-not-found { padding: 1.6rem; }
#pagenotfound .page-not-found img { aspect-ratio: 4 / 3; height: auto; }

@media (max-width: 767px) {
  #pagenotfound .page-not-found a.btn,
  #pagenotfound .page-not-found .btn-pp-gold {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin: 0 0 .7rem;
  }
}

/* ---- j) Pages CMS : neutraliser la typographie Word héritée ----------------- */
#content.page-cms [style] {
  font-family: inherit !important;
  font-size: inherit !important;
  letter-spacing: normal !important;
}

#content.page-cms ul { list-style-position: outside; padding-left: 1.15rem; }
#content.page-cms p b, #content.page-cms p strong { color: var(--pp-ink); }

/* ---- k) Footer mobile : derniers alignements -------------------------------- */
@media (max-width: 767px) {
  /* un seul filet entre « Informations » et la rangée YouTube */
  .footer-container .block-social { border-top: 0; padding-top: .4rem; }

  /* bas de footer centré comme la rangée YouTube */
  .footer-container .pp-copyright { text-align: center; }
}

/* ---- l) Hero : les points ne recouvrent plus le texte du slide --------------- */
@media (max-width: 543px) {
  .pp-rot-slide { padding-bottom: 2.6rem; }
  .pp-hero-rotator { min-height: 104px; }
  .pp-rot-dots { bottom: .4rem; }
}

/* ---- m) Finder : carte au même aplomb (30px) que le reste de la page --------- */
@media (max-width: 767px) {
  .pp-finder-card { margin: 0; }
}

/* ---- o) « Services populaires » : sur-titre or comme les autres sections ------ */
.pp-featured-head { text-align: center; margin-bottom: .3rem; }
.pp-featured-head .products-section-title { margin-top: .35rem; }

/* ---- p) Hero : le segment surligné or ne se coupe jamais en deux -------------- */
.pp-hero h2 em { white-space: nowrap; }

/* ---- n) Header mobile du tunnel : logo centré, hauteur garantie --------------- */
/* Le logo est en position absolue : sans contenu en flux, la barre s'écrasait */
@media (max-width: 767px) {
  body#checkout #header .header-nav .mobile { min-height: 58px; }
}

/* ==========================================================================
   20. Blog EOCHE : accord à la charte PermisPack (le module reste générique)
   ========================================================================== */
.eoche-blog-cta {
  --eoche-cta-bg: var(--pp-gold-soft);
  --eoche-cta-btn-bg: var(--pp-gold);
  --eoche-cta-btn-color: #0A1830;
  border-color: rgba(201, 151, 21, .35);
}
.eoche-blog-cta strong { color: var(--pp-ink); font-family: var(--pp-font-title); }
.eoche-blog-card-title, .eoche-blog-h1, .eoche-blog-content h2, .eoche-blog-content h3 { font-family: var(--pp-font-title); color: var(--pp-ink); }
.eoche-blog-content a, .eoche-blog-back, .eoche-blog-more, .eoche-blog-others a { color: var(--pp-brand-2); }
.eoche-blog-card { border-color: var(--pp-line); }

/* Lien blog dans le footer */
.pp-footer-blog { text-align: center; padding: .4rem 0 .2rem; }
.pp-footer-blog a {
  color: rgba(255, 255, 255, .82);
  font-family: var(--pp-font-title);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
}
.pp-footer-blog a:hover { color: var(--pp-gold-strong); }