/* ============================================================
   SSM — SolutionServiceMobile
   Palette : Orange #FF6B35 dominant + Bleu #0077F0 accent
   Typographie : Cinzel Decorative (logo) + Cormorant Garamond + Jost
   ============================================================ */

/* ---- VARIABLES ---- */
:root {
  



   --orange:        #FF6B35;
  --orange-2:      #F39C12;
  --orange-3:      #D35400;
  --orange-pale:   #FFF4EC;
  --orange-pale-2: #FFE0CC;
  --orange-pale-3: #FFD0A8;


  --bleu:          #6C5CE7;
  --bleu-2:        #8E44AD;
  --bleu-3:        #5A4BD1;
  --bleu-pale:     #F3F0FF;
  --bleu-pale-2:   #E5D9FF;
  --bleu-pale-3:   #D2C2FF; 

  --corail:        #FF6B35;
  --corail-pale:   #FFF2EC;

  --blanc:         #FFFFFF;
  --gris-clair:    #F8F8F8;
  --gris-leger:    #F2F2F2;
  --texte:         #1A1A2E;
  --texte-leger:   #5A6A80;
  --etoile:        #FF9500;

  --r-carte:       18px;
  --r-bouton:      60px;
  --ombre:         0 4px 24px rgba(255,107,53,0.07);
  --ombre-hover:   0 16px 48px rgba(255,107,53,0.16);
  --ombre-bouton:  0 6px 22px rgba(255,107,53,0.38);

  --ease-spring:   cubic-bezier(0.34, 1.12, 0.64, 1);
  --ease-out:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur:           0.38s;
  --dur-vite:      0.22s;

  --max-w:         1280px;
  --pad-section:   clamp(56px, 8vw, 110px);
  --gap:           clamp(16px, 2.2vw, 26px);
  --pad-h:         clamp(20px, 4.5vw, 56px);
}

/* ---- RESET ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; font-size: 17px; }
body  {
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;


  background: #fff;
  color: var(--texte);
  line-height: 1.7;
  overflow-x: hidden;
}
img   { display: block; max-width: 100%; }
a     { color: inherit; text-decoration: none; }
ul    { list-style: none; }
button { border: none; background: none; font-family: inherit; cursor: pointer; }
address { font-style: normal; }

/* ---- TYPO ---- */
h1, h2, h3, h4 { font-family: 'Cormorant Garamond', serif; line-height: 1.2; }

/* ============================================================
   EN-TÊTE
   ============================================================ */
.en-tete {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
 
  transition: box-shadow var(--dur-vite) var(--ease-out);
}
.en-tete--defilant { box-shadow: 0 2px 28px rgba(0,0,0,0.09); }

.en-tete__conteneur {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 var(--pad-h); height: 74px;
  display: flex; align-items: center; gap: 32px;
}

/* ---- LOGO ORANGE ---- */
.en-tete__logo { flex-shrink: 0; display: flex; align-items: center; }



/* Navigation */
.navigation { flex: 1; display: flex; justify-content: center; }
.navigation__liste { display: flex; gap: clamp(16px, 3vw, 38px); align-items: center; }
.navigation__lien {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.94rem;
  color: var(--texte); padding: 5px 2px; position: relative;
  transition: color var(--dur-vite) ease;
}
.navigation__lien::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 0; height: 2px; background: var(--orange); border-radius: 2px;
  transition: width 0.32s var(--ease-spring);
}
.navigation__lien:hover { color: var(--orange-2); }
.navigation__lien:hover::after { width: 100%; }

/* Actions */
.en-tete__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.bouton-icone {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--texte); transition: background var(--dur-vite), color var(--dur-vite);
}




@media (max-width: 768px){
  .bouton-icone{
    margin-left: 250px;
    margin-right: 230px;
  } 

}


@media (max-width: 740px){
  .bouton-icone{
    margin-left: 220px;
    margin-right: 230px;
  }
}



  @media (max-width: 706px){
  .bouton-icone{
    margin-left: 200px;
    margin-right: 230px;
  }

  }

@media (max-width: 690px){
  .bouton-icone{
    margin-left: 185px;
    margin-right: 210px;
  }
}

@media (max-width: 650px){
  .bouton-icone{
    margin-left: 155px;
    margin-right: 185px;
  }

}
  @media (max-width: 600px){
  .bouton-icone{
    margin-left: 130px;
    margin-right: 130px;
  }
  }

   @media (max-width: 510px){
  .bouton-icone{
    margin-left: 100px;
    margin-right: 100px;
  }
  }

    @media (max-width: 460px){
  .bouton-icone{
    margin-left: 70px;
    margin-right: 70px;
  }
  }

    @media (max-width: 390px){
  .bouton-icone{
    margin-left: 50px;
    margin-right: 50px;
  }
  }

    @media (max-width: 350px){
  .bouton-icone{
    margin-left: 40px;
    margin-right: 30px;
  }
  }

  @media (max-width: 315px){
  .bouton-icone{
    margin-left: 35px;
    margin-right: 20px;
  }
  }


@media (max-width: 302px){
  .bouton-icone{
    margin-left: 30px;
    margin-right: 15px;
  }
  }

  @media (max-width: 285px){
  .bouton-icone{
    margin-left: 20px;
    margin-right: 10px;
  }
  }


@media (max-width: 270px){
  .bouton-icone{
    margin-left: 10px;
    margin-right: 6px;
  }
  }


@media (max-width: 257px){
  .bouton-icone{
    margin-left: 5px;
    margin-right: 3px;
  }
  }

  @media (max-width: 250px){
  .bouton-icone{
    margin-left: 2px;
    margin-right: 1px;
  }
  }

  @media (max-width: 245px){
  .bouton-icone{
    margin-left: 0;
    margin-right: 0;
  }
  }

.bouton-icone svg { width: 35px; height: 35px; }
.bouton-icone:hover { background: var(--orange-pale); color: var(--orange-2); }

.bouton-panier-header { position: relative; }
.badge-panier {
  position: absolute; top: 2px; right: 2px;
  min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--orange); color: #fff;
  font-size: 11px; font-weight: 800; border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  transform: scale(0);
  transition: transform 0.35s var(--ease-spring);
  box-shadow: 0 2px 8px rgba(255,107,53,0.50);
}
.badge-panier.visible { transform: scale(1); }

/* Burger */
.bouton-menu-mobile {
  display: none; flex-direction: column; gap: 5px; padding: 8px; border-radius: 10px; 
}
.bouton-menu-mobile span {
  display: block; width: 22px; height: 2px;
  background: var(--orange); border-radius: 2px;
  transition: transform var(--dur) var(--ease-spring), opacity var(--dur-vite);
}
.bouton-menu-mobile:hover { background: var(--orange-pale); }
.bouton-menu-mobile.ouvert span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bouton-menu-mobile.ouvert span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.bouton-menu-mobile.ouvert span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HÉRO — fond blanc, titre MEGA dominant
   ============================================================ */


/* ================================================================
   TITRE HÉRO — "Ventes & Locations" MEGA DOMINANT
   ================================================================ */

/* ---- BOUTONS HÉRO — grands, ligne haute, bien lisibles ---- */ 
.hero__boutons {
  display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 46px;
  justify-content: center;
  animation: fadeUp 0.9s 0.2s var(--ease-spring) both;
}
.bouton-principal {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-2) 100%);
  color: #fff;
  font-family: 'Jost', sans-serif; font-weight: 800; font-size: 1rem;
  padding: 18px 40px; border-radius: var(--r-bouton);
  box-shadow: 0 6px 28px rgba(255,107,53,0.38);
  transition: all 0.3s var(--ease-spring);
  letter-spacing: 0.07em;
  line-height: 1.7;
  position: relative; overflow: hidden;
  text-transform: uppercase;
}
.bouton-principal::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #FF8050 0%, var(--orange) 100%);
  opacity: 0; transition: opacity 0.28s; border-radius: inherit;
}
.bouton-principal > * { position: relative; z-index: 1; }
.bouton-principal:hover::before { opacity: 1; }
.bouton-principal svg { width: 17px; height: 17px; transition: transform var(--dur) var(--ease-spring); }
.bouton-principal:hover { transform: translateY(-4px); box-shadow: 0 14px 38px rgba(255,107,53,0.52); }
.bouton-principal:hover svg { transform: translateX(5px); }
.bouton-principal:active { transform: scale(0.97); }

.bouton-secondaire {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: var(--orange-2);
  font-family: 'Jost', sans-serif; font-weight: 800; font-size: 1rem;
  padding: 16px 38px; border-radius: var(--r-bouton);
  border: 2.5px solid var(--orange-pale-2);
  line-height: 1.7; letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: all var(--dur) var(--ease-spring);
}
.bouton-secondaire:hover {
  border-color: var(--orange); background: var(--orange-pale);
  color: var(--orange-3); transform: translateY(-4px);
  box-shadow: 0 8px 26px rgba(255,107,53,0.14);
}

/* Stats */
.hero__stats {
  display: flex; align-items: center; flex-wrap: wrap; gap: 22px;
  animation: fadeUp 0.9s 0.3s var(--ease-spring) both;
}
.stat { display: flex; flex-direction: column; }
.stat strong {
  font-family: 'Cormorant Garamond', serif; font-size: 2.1rem; font-weight: 700;
  color: var(--orange); line-height: 1;
}
.stat span { font-size: 0.84rem; color: var(--texte-leger); font-weight: 500; margin-top: 2px; }
.stat__sep { width: 1px; height: 38px; background: var(--orange-pale-2); }

/* Visuel héro */
.hero__visuel {
  display: flex; justify-content: center; width: 100%;
}
.hero__boutons-bloc {
  display: flex; justify-content: center; width: 100%;
}

/* ============================================================
   SECTIONS — COMMUNES
   Fond blanc / whitesmoke avec ombres séparatrices
   ============================================================ */
.section__conteneur { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-h); }
.section__entete { text-align: center; margin-bottom: 50px; }
.section__etiquette {
  display: inline-block; font-size: 0.78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.24em;
  color: var(--orange); margin-bottom: 12px;
}
.section__titre {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 800;
  color: var(--bleu-3); letter-spacing: -0.01em;
}

/* ============================================================
   SECTION OFFRES — whitesmoke avec ombre intérieure
   ============================================================ */
.section-offres {
  padding: var(--pad-section) 0;
  background: whitesmoke;
}

/* Filtres */



/* ============================================================
   GRILLE PRODUITS
   ============================================================ */
.grille-offres {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--gap);
}

/* ============================================================
   CARTE PRODUIT
   ============================================================ */
.carte-produit {
  background: #fff;
  border-radius: var(--r-carte);
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
  border: 1.5px solid rgba(255,107,53,0.07);
  display: flex; flex-direction: column;
  transition: box-shadow var(--dur) var(--ease-out),
              border-color var(--dur),
              transform var(--dur) var(--ease-spring);
  position: relative;
}
.carte-produit.masquee { display: none !important; }
.carte-produit:hover {
  box-shadow: 0 22px 58px rgba(255,107,53,0.14), 0 4px 20px rgba(0,0,0,0.07);
  transform: translateY(-7px);
  border-color: rgba(255,107,53,0.20);
}

/* ---- IMAGE AVEC DÉGRADÉS ---- */
.carte-produit__image-wrapper {
  position: relative; overflow: hidden; aspect-ratio: 15/12;
}
.carte-produit__image {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}
.carte-produit:hover .carte-produit__image { transform: scale(1.08); }

/* Dégradé permanent du bas vers l'haut — profondeur et mise en avant */
.carte-produit__image-wrapper::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    180deg,
    transparent 25%,
    rgba(200, 64, 16, 0.08) 55%,
    rgba(180, 50, 0, 0.32) 100%
  );
  pointer-events: none;
}

/* Overlay dynamique au hover */
.carte-produit__image-wrapper::after {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, transparent 40%, rgba(0,20,60,0.20) 100%);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
  pointer-events: none;
}
.carte-produit:hover .carte-produit__image-wrapper::after { opacity: 1; }

/* Badge type */
.badge-type {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  background: linear-gradient(135deg, #FF6B35, #e8521a);
  color: #fff;
  font-size: 0.75rem; font-weight: 800; padding: 6px 14px;
  border-radius: 50px;
  text-transform: uppercase; letter-spacing: 0.09em;
  box-shadow: 0 3px 12px rgba(255,107,53,0.45);
  display: flex; align-items: center; gap: 5px;
}
.badge-type--location {
  background: linear-gradient(135deg, #FF6B35 0%, #e8521a 100%);
  box-shadow: 0 3px 12px rgba(255,107,53,0.45);
}
.badge-type--vente {
  background: linear-gradient(135deg, #0077F0, #005DC4);
  box-shadow: 0 3px 12px rgba(0,119,240,0.45);
}

/* Bouton favori */
.bouton-favori {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.96); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.14);
  transition: transform var(--dur) var(--ease-spring), background var(--dur-vite), box-shadow var(--dur);
  border: 2px solid rgba(255,255,255,0.9);
}
.bouton-favori svg { width: 20px; height: 20px; color: #ccc; stroke-width: 1.8; transition: color var(--dur-vite), fill var(--dur-vite), transform var(--dur) var(--ease-spring); }
.bouton-favori:hover { transform: scale(1.20); background: #fff; box-shadow: 0 6px 20px rgba(240,92,92,0.28); }
.bouton-favori:hover svg { color: #F05C5C; transform: scale(1.1); }
.bouton-favori.actif svg { fill: #F05C5C; stroke: #F05C5C; color: #F05C5C; }
.bouton-favori.actif { box-shadow: 0 4px 16px rgba(240,92,92,0.38); }

/* Corps carte */
.carte-produit__corps {
  padding: 16px 18px 20px;
  display: flex; flex-direction: column; flex: 1; gap: 9px;
  background: #fff;
}

/* Étoiles */
.carte-produit__note { display: flex; align-items: center; gap: 7px; }
.etoiles {
  color: var(--etoile);
  font-size: 1.15rem; letter-spacing: 2px;
  filter: drop-shadow(0 1px 4px rgba(255,149,0,0.40)); line-height: 1;
}
.note-texte { font-size: 0.86rem; font-weight: 700; color: var(--texte); }
.avis-count { font-weight: 400; color: var(--texte-leger); }

.carte-produit__titre {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.28rem; font-weight: 700; color: var(--bleu-3); line-height: 1.3;
}

.carte-produit__description {
  font-size: 0.90rem; font-weight: 500; color: var(--texte-leger); line-height: 1.7; flex: 1;
}

.carte-produit__details { display: flex; flex-wrap: wrap; gap: 6px; }
.detail-item {
  font-size: 0.76rem;
  background: var(--orange-pale); color: var(--orange);
  padding: 4px 11px; border-radius: 50px; font-weight: 700;
  border: 1px solid var(--orange-pale-2);
}

.carte-produit__pied {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-top: 4px; padding-top: 13px;
  border-top: 1px solid rgba(255,107,53,0.08);
}
.carte-produit__prix { display: flex; align-items: baseline; gap: 3px; }
.prix-montant {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem; font-weight: 800; color: var(--orange-2);
}
.prix-periode { font-size: 0.78rem; font-weight: 600; color: var(--texte-leger); }

/* ---- BOUTON PANIER AUGMENTÉ ---- */
.bouton-panier {
  font-family: 'Jost', sans-serif; font-size: 0.87rem; font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-2) 100%);
  padding: 12px 20px; border-radius: var(--r-bouton); white-space: nowrap;
  box-shadow: 0 4px 16px rgba(255,107,53,0.36);
  transition: all 0.3s var(--ease-spring);
  flex-shrink: 0; letter-spacing: 0.03em;
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 8px;



  clip-path:polygon(9% 0%, 95% 4%, 100% 34%, 94% 100%, 8% 96%, 0% 70%, 3% 16%);
      z-index:3;
      white-space:nowrap;
}
.bouton-panier::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #FF8050 0%, var(--orange) 100%);
  opacity: 0; transition: opacity 0.3s ease; border-radius: inherit;
}
.bouton-panier::after {
  content: '';
  display: inline-block; width: 20px; height: 20px;
  flex-shrink: 0; position: relative; z-index: 1;
  background-color: rgba(255,255,255,0.94);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 3h1.5l1.8 9.4A2 2 0 007.26 14h9.5a2 2 0 001.95-1.57L20 6H6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='9' cy='20' r='1.5' fill='%23000'/%3E%3Ccircle cx='17' cy='20' r='1.5' fill='%23000'/%3E%3Cpath d='M6 6H3M9 10h6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 3h1.5l1.8 9.4A2 2 0 007.26 14h9.5a2 2 0 001.95-1.57L20 6H6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='9' cy='20' r='1.5' fill='%23000'/%3E%3Ccircle cx='17' cy='20' r='1.5' fill='%23000'/%3E%3Cpath d='M6 6H3M9 10h6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.bouton-panier:hover::before { opacity: 1; }
.bouton-panier:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 28px rgba(255,107,53,0.50); }
.bouton-panier:active { transform: scale(0.97); }
.bouton-panier span, .bouton-panier svg { position: relative; z-index: 1; }

/* Stagger produits */
.carte-produit:nth-child(1) { transition-delay: 0.04s; }
.carte-produit:nth-child(2) { transition-delay: 0.09s; }
.carte-produit:nth-child(3) { transition-delay: 0.14s; }
.carte-produit:nth-child(4) { transition-delay: 0.06s; }
.carte-produit:nth-child(5) { transition-delay: 0.11s; }
.carte-produit:nth-child(6) { transition-delay: 0.16s; }
.carte-produit:nth-child(7) { transition-delay: 0.04s; }
.carte-produit:nth-child(8) { transition-delay: 0.09s; }
.carte-produit:nth-child(9) { transition-delay: 0.14s; }

/* ============================================================
   SECTION ÉTAPES — fond blanc, ombre séparatrice
   ============================================================ */
.section-etapes {
  padding: var(--pad-section) 0;
  background: #fff;
  box-shadow: 0 4px 36px rgba(0,0,0,0.06);
  position: relative;
}
.section-etapes::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 80px; height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--orange-2));
  border-radius: 0 0 3px 3px;
}

.grille-etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 24px; }
.etape {
  background: #fff; border-radius: 20px; padding: 32px 24px;
  border: 1.5px solid rgba(255,107,53,0.10); box-shadow: 0 3px 18px rgba(0,0,0,0.05);
  text-align: center;
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-spring), box-shadow var(--dur), border-color var(--dur);
}
.etape.visible { opacity: 1; transform: translateY(0); }
.etape:hover { box-shadow: var(--ombre-hover); transform: translateY(-5px); border-color: rgba(255,107,53,0.22); }
.etape__icone { width: 54px; height: 54px; margin: 0 auto 14px; }
.etape__icone svg { width: 100%; height: 100%; }

.etape__titre { font-family: 'Cormorant Garamond', serif; font-size: 1.7rem; font-weight: bold; color: var(--bleu-3); margin-bottom: 25px; }
.etape__texte { font-size: 1rem; color: var(--texte-leger); line-height: 2; }
.etape:nth-child(1) { transition-delay: 0.05s; }
.etape:nth-child(2) { transition-delay: 0.15s; }
.etape:nth-child(3) { transition-delay: 0.25s; }

/* ============================================================
   BANDEAU CONFIANCE — whitesmoke
   ============================================================ */
.bandeau-confiance {
  padding: 40px 0;
  background: var(--gris-leger);
  border-top: 1px solid rgba(255,107,53,0.08);
  border-bottom: 1px solid rgba(255,107,53,0.08);
}
.grille-confiance { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.confiance-item {
  display: flex; align-items: center; gap: 14px;
  font-weight: 700; color: var(--texte); font-size: 0.90rem;
}
.confiance-item svg { width: 36px; height: 36px; flex-shrink: 0; color: var(--orange); }

/* ============================================================
   SECTION AVIS — fond blanc, FORTE OMBRE BASSE qui sépare du footer
   ============================================================ */
.section-avis {
  padding: var(--pad-section) 0;
  background: #fff;
  position: relative;
}
/* Ombre portée forte pour bien séparer la section avis du footer */
.section-avis::after {
  content: '';
  position: absolute; bottom: -1px; left: 0; right: 0; height: 60px;
  
  pointer-events: none;
}

.avis-carousel-wrapper { position: relative; overflow: hidden; }
.avis-piste {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  transition: opacity 0.25s ease, transform 0.25s ease;
  min-height: 150px;
}
@media (min-width: 640px) { .avis-piste { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .avis-piste { grid-template-columns: repeat(3, 1fr); } }

.avis-carte {
  background: var(--gris-clair); border-radius: 18px; padding: 26px 22px;
  border: 1.5px solid rgba(255,107,53,0.07); box-shadow: 0 2px 14px rgba(0,0,0,0.05);
  display: flex; flex-direction: column; gap: 14px;
  transition: box-shadow var(--dur), transform var(--dur);
}
.avis-carte:hover { box-shadow: 0 12px 36px rgba(255,107,53,0.12); transform: translateY(-4px); }
.avis-carte__etoiles { color: var(--etoile); font-size: 1.25rem; letter-spacing: 2px; filter: drop-shadow(0 1px 4px rgba(255,149,0,0.38)); line-height: 1; }
.avis-carte__texte {
  font-family: 'Cormorant Garamond', serif; font-size: 1.14rem;
  font-style: italic; font-weight: 600; color: var(--texte); line-height: 1.75; flex: 1;
}
.avis-carte__auteur { display: flex; align-items: center; gap: 12px; }
.avis-carte__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--orange-2)); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-weight: 700; flex-shrink: 0;
}
.avis-carte__nom { font-family: 'Jost', sans-serif; font-size: 0.90rem; font-weight: 800; color: var(--orange-3); }
.avis-carte__info { font-size: 0.82rem; font-weight: 500; color: var(--texte-leger); }
.avis-nav {
  display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 32px;
}
.avis-nav__btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 2px solid var(--orange-pale-2);
  color: var(--orange-2); font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.07);
  transition: all var(--dur) var(--ease-spring);
}
.avis-nav__btn:hover { background: var(--orange); color: #fff; border-color: var(--orange); transform: scale(1.1); box-shadow: 0 4px 18px rgba(255,107,53,0.35); }
.avis-dots { display: flex; gap: 6px; align-items: center; }
.avis-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--orange-pale-2); border: none; cursor: pointer; transition: all var(--dur-vite);
}
.avis-dot.active { background: var(--orange); width: 20px; border-radius: 4px; }

/* ============================================================
   PIED DE PAGE — whitesmoke, OMBRE EN HAUT qui le sépare des avis
   ============================================================ */
.pied-de-page {
  
  background: white;
  padding: 58px 0 0;
  position: relative;
  /* Ombre portée intérieure en haut = séparateur visuel des avis */
}
.pied-de-page__conteneur { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-h); }

.pied-de-page__grille {
  display: grid; grid-template-columns: 1fr; gap: 40px 32px;
}

.pied-de-page__bloc--principal { display: flex; flex-direction: column; gap: 14px; }

/* Logo footer orange */
.pied-logo {
  font-family: 'Cinzel Decorative', 'Cormorant Garamond', serif;
  font-size: 1.5rem; font-weight: 900;
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2; letter-spacing: 0.05em;
}
.pied-de-page__bloc--principal p {
  font-size: 0.9rem; font-weight: 500;  line-height: 2; font-style: italic; text-align: justify; 
}
.pied-de-page__bloc--principal .pied-social {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px;
}

.pied-de-page__bloc h4 {
  font-family: 'Jost', sans-serif; font-size: 0.84rem; font-weight: 800;
 color: var(--orange); margin-bottom: 18px;
  text-transform: uppercase; letter-spacing: 0.14em;
  position: relative; padding-bottom: 9px;
}
.pied-de-page__bloc h4::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 26px; height: 2px; background: var(--orange); border-radius: 2px;
}
.pied-de-page__bloc ul { display: flex; flex-direction: column; gap: 10px; }
.pied-de-page__bloc ul a {
  font-size: 0.90rem; font-weight: 500; color: var(--texte-leger);
  transition: color 0.2s;
  display: flex; align-items: center; gap: 6px;
}
.pied-de-page__bloc ul a::before {
   color: var(--orange-pale-3); font-size: 1rem;
  transition: color 0.2s, transform 0.2s; transform: translateX(0);
}
.pied-de-page__bloc ul a:hover { color: var(--orange); }
.pied-de-page__bloc ul a:hover::before { color: var(--orange); transform: translateX(3px); }
.pied-de-page__bloc address { font-style: normal; }
.pied-de-page__bloc address p {
  font-size: 0.90rem; font-weight: 500; color: var(--texte-leger); margin-bottom: 10px;
  display: flex; align-items: flex-start; gap: 7px; line-height: 1.55;
}
.pied-de-page__bloc address p span.ic { font-size: 0.9rem; flex-shrink: 0; margin-top: 1px; }
.pied-de-page__bloc address a {color: var(--bleu-3); transition: color 0.2s; }
.pied-de-page__bloc address a:hover { color: var(--orange); }

.pied-de-page__bas {
  margin-top: 44px; padding: 18px 0;
  border-top: 1px solid rgba(255,107,53,0.10);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
}
.pied-de-page__bas p { font-size: 0.84rem; font-weight: 500; color: var(--texte-leger); }
.pied-de-page__bas-liens { display: flex; gap: 16px; flex-wrap: wrap; }
.pied-de-page__bas-liens a { font-size: 0.84rem; font-weight: 500; color: var(--texte-leger); transition: color 0.2s; }
.pied-de-page__bas-liens a:hover { color: var(--orange); }

/* ============================================================
   FORMULAIRE CONTACT
   ============================================================ */
.formulaire-contact-wrapper {
  background: #fff;
  border-radius: 20px; padding: 30px 26px;
  border: 1.5px solid var(--orange-pale-2);
  box-shadow: 0 4px 24px rgba(255,107,53,0.08);
  margin-bottom: 44px;
}
.formulaire-contact-wrapper h3 {
  font-family: 'Cormorant Garamond', serif; font-size: 1.45rem;
  font-weight: 700; color: var(--orange-3); margin-bottom: 6px;
}
.formulaire-contact-wrapper p.form-sous-titre {
  font-size: 0.88rem; color: var(--texte-leger); margin-bottom: 20px; line-height: 1.65;
}
.form-groupe { display: flex; flex-direction: column; gap: 5px; margin-bottom: 15px; }
.form-groupe label {
  font-size: 0.75rem; font-weight: 700; color: var(--orange-3);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.form-groupe input {
  font-family: 'Jost', sans-serif; font-size: 0.90rem;
  color: var(--texte); background: var(--gris-clair);
  border: 1.5px solid var(--orange-pale-2); border-radius: 10px;
  padding: 11px 15px; width: 100%;
  transition: border-color var(--dur-vite), box-shadow var(--dur-vite), background var(--dur-vite);
}
.form-groupe input:focus {
  outline: none; border-color: var(--orange); background: #fff;
  box-shadow: 0 0 0 3px rgba(255,107,53,0.09);
}
.form-groupe input::placeholder { color: var(--texte-leger); font-size: 0.86rem; }
.form-grille { display: grid; grid-template-columns: 1fr; gap: 0; }
.bouton-form-contact {
  width: 100%; padding: 14px 28px;
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-2) 100%); color: #fff;
  font-family: 'Jost', sans-serif; font-size: 0.94rem; font-weight: 800;
  border-radius: var(--r-bouton); border: none; cursor: pointer;
  box-shadow: 0 5px 20px rgba(255,107,53,0.35); margin-top: 6px;
  transition: all var(--dur) var(--ease-spring);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.bouton-form-contact:hover { background: linear-gradient(135deg, #FF8050 0%, var(--orange) 100%); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(255,107,53,0.45); }
.bouton-form-contact:active { transform: scale(0.98); }
.form-success {
  display: none; background: #e6f9ef; border: 1px solid #a8e6be; border-radius: 10px;
  padding: 13px 17px; color: #1e7a42; font-size: 0.88rem; font-weight: 500;
  margin-top: 14px; align-items: center; gap: 10px;
}
.form-success.visible { display: flex; }
.form-success svg { width: 17px; height: 17px; flex-shrink: 0; }

/* ============================================================
   PANNEAU PANIER (SLIDE-IN)
   ============================================================ */
.overlay-panier {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0, 20, 60, 0.20);
  backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
}
.overlay-panier.visible { opacity: 1; pointer-events: all; }

.panneau-panier {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 301;
  width: min(440px, 100vw);
  background: #fff;
  box-shadow: -8px 0 56px rgba(0,0,0,0.12);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.45s var(--ease-spring);
}
.panneau-panier.ouvert { transform: translateX(0); }

.panneau-panier__entete {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 26px; border-bottom: 1px solid var(--orange-pale-2);
  background: var(--gris-clair);
}
.panneau-panier__titre {
  font-family: 'Great Vibes', cursive; font-size: 2rem; color: var(--orange);
}
.bouton-fermer-panier {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--texte-leger);
  transition: background var(--dur-vite), color var(--dur-vite), transform var(--dur) var(--ease-spring);
}
.bouton-fermer-panier svg { width: 18px; height: 18px; }
.bouton-fermer-panier:hover { background: var(--orange-pale); color: var(--orange-2); transform: rotate(90deg); }

.panneau-panier__contenu {
  flex: 1; overflow-y: auto; padding: 20px 26px;
  display: flex; flex-direction: column; gap: 16px;
}
.panneau-panier__contenu::-webkit-scrollbar { width: 4px; }
.panneau-panier__contenu::-webkit-scrollbar-track { background: var(--gris-leger); }
.panneau-panier__contenu::-webkit-scrollbar-thumb { background: var(--orange-pale-2); border-radius: 2px; }

/* Articles panier */
.article-panier {
  border-radius: 16px; background: #fff;
  border: 1.5px solid rgba(255,107,53,0.10);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  animation: glisseDroite 0.4s var(--ease-spring) both;
  overflow: visible;
}
@keyframes glisseDroite {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.article-panier__visuel {
  position: relative; border-radius: 14px 14px 0 0; overflow: hidden;
}
.article-panier__img { width: 100%; height: 160px; object-fit: cover; display: block; }
/* Dégradé image panier */
.article-panier__visuel::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(200,64,16,0.28) 100%);
  pointer-events: none;
}
.article-panier__img-vide {
  width: 100%; height: 160px; background: var(--gris-clair);
  display: flex; align-items: center; justify-content: center; font-size: 2.4rem;
}
.article-panier__supprimer {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.90); backdrop-filter: blur(6px);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--texte-leger); box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: background var(--dur-vite), color var(--dur-vite);
}
.article-panier__supprimer:hover { background: #fde8e8; color: #e05555; }
.article-panier__infos { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.article-panier__nom {
  font-family: 'Cormorant Garamond', serif; font-weight: 700;
  font-size: 1.04rem; color: var(--bleu-3); line-height: 1.3;
}
.article-panier__prix {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem; font-weight: 700; color: var(--orange-2); margin-left: auto;
}
.article-panier__desc-mini { font-size: 0.80rem; color: var(--texte-leger); line-height: 1.55; }
.article-panier__desc-longue {
  font-size: 0.80rem; color: var(--texte); line-height: 1.65;
  padding: 9px 11px; margin-top: 2px;
  background: var(--orange-pale); border-radius: 10px;
  border-left: 3px solid var(--orange-pale-3);
}
.article-panier__voir-plus {
  align-self: flex-start;
  font-size: 0.75rem; font-weight: 600; color: var(--orange-2);
  background: var(--orange-pale); border: none;
  padding: 3px 11px; border-radius: 50px; cursor: pointer;
  transition: background var(--dur-vite);
}
.article-panier__voir-plus:hover { background: var(--orange-pale-2); }
.article-panier__dispo { font-size: 0.80rem; color: #2ca85e; font-weight: 500; }
.article-panier__ville { font-size: 0.80rem; color: var(--bleu-2); font-weight: 500; }
.article-panier__livraison { color: #2ca85e; }
.article-panier__qte-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.qte-panier-btn {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--orange-pale-2); background: #fff;
  color: var(--orange-2); font-size: 1rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; transition: all var(--dur-vite);
}
.qte-panier-btn:hover { background: var(--orange); color: #fff; border-color: var(--orange); }
.qte-panier-val {
  font-family: 'Cormorant Garamond', serif; font-size: 1.1rem;
  font-weight: 700; color: var(--orange-3); min-width: 20px; text-align: center;
}
.article-panier__periode {
  font-size: 0.75rem; font-weight: 700; color: var(--orange-2);
  background: var(--orange-pale); border: 1px solid var(--orange-pale-2);
  border-radius: 20px; padding: 2px 9px; letter-spacing: 0.04em;
  text-transform: lowercase; white-space: nowrap;
}
.panier-livraison-info { font-size: 0.82rem; color: #2ca85e; font-weight: 500; margin-bottom: 12px; text-align: center; }

/* Panier vide */
.panier-vide {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  color: var(--texte-leger); text-align: center; padding: 40px 20px;
}
.panier-vide svg { width: 60px; height: 60px; opacity: 0.25; color: var(--orange); }
.panier-vide p { font-size: 0.96rem; }
.panier-vide em { font-family: 'Great Vibes', cursive; font-size: 1.8rem; color: var(--orange-pale-3); font-style: normal; }

/* Pied panier */
.panneau-panier__pied {
  padding: 22px 26px; border-top: 1px solid var(--orange-pale-2);
  background: var(--gris-clair);
}
.panier-total {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 15px;
}
.panier-total__label { font-size: 0.86rem; color: var(--texte-leger); font-weight: 600; }
.panier-total__montant {
  font-family: 'Cormorant Garamond', serif; font-size: 1.55rem; font-weight: 800; color: var(--orange-2);
}
.bouton-commander {
  width: 100%; padding: 14px; border-radius: var(--r-bouton);
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-2) 100%); color: #fff;
  font-family: 'Jost', sans-serif; font-size: 0.94rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: 0 5px 20px rgba(255,107,53,0.38);
  transition: all var(--dur) var(--ease-spring);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.bouton-commander:hover { background: linear-gradient(135deg, #FF8050 0%, var(--orange) 100%); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(255,107,53,0.48); }

/* ============================================================
   BOUTON RETOUR EN HAUT
   ============================================================ */
.bouton-haut {
  position: fixed; bottom: 26px; right: 20px; z-index: 150;
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--orange); color: #fff;
  box-shadow: 0 4px 18px rgba(255,107,53,0.38);
  border: none;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transform: translateY(12px) scale(0.9);
  transition: opacity 0.35s var(--ease-spring), transform 0.35s var(--ease-spring);
}
.bouton-haut svg { width: 20px; height: 20px; }
.bouton-haut.visible { opacity: 1; pointer-events: all; transform: translateY(0) scale(1); }
.bouton-haut:hover { background: var(--orange-2); transform: translateY(-4px) scale(1.06); box-shadow: 0 8px 24px rgba(255,107,53,0.50); }
.bouton-haut:active { transform: scale(0.96); }

/* ============================================================
   NOTIFICATION TOAST
   ============================================================ */
.notification-toast {
  position: fixed; bottom: 26px; right: 26px; z-index: 400;
  background: #fff; color: var(--orange-2);
  padding: 14px 22px; border-radius: 14px; font-size: 0.88rem; font-weight: 600;
  border: 1.5px solid var(--orange-pale-2);
  box-shadow: 0 6px 32px rgba(255,107,53,0.14), 0 2px 8px rgba(0,0,0,0.08);
  opacity: 0; pointer-events: none;
  transform: translateY(16px) scale(0.95);
  transition: all 0.38s var(--ease-spring);
  max-width: 300px;
}
.notification-toast.affichee { opacity: 1; transform: translateY(0) scale(1); }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   RESPONSIVE TABLETTE (640px+)
   ============================================================ */
@media (min-width: 640px) {
  .grille-confiance { grid-template-columns: repeat(4, 1fr); }
  .pied-de-page__grille { grid-template-columns: repeat(2, 1fr); }
  .form-grille { grid-template-columns: 1fr 1fr; gap: 0 16px; }
}

/* ============================================================
   RESPONSIVE DESKTOP (900px+)
   ============================================================ */
@media (min-width: 900px) {
  .pied-de-page__grille { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .bouton-menu-mobile { display: none !important; }
}

/* ============================================================
   RESPONSIVE MOBILE (<768px)
   ============================================================ */
@media (max-width: 768px) {
  .bouton-menu-mobile { display: flex; }
  .navigation {
    position: fixed; top: 74px; left: 0; right: 0;
    background: rgba(255,255,255,0.99); backdrop-filter: blur(16px);
    padding: 22px var(--pad-h); border-bottom: 1px solid var(--orange-pale-2);
    transform: translateY(-100%); opacity: 0; pointer-events: none;
    transition: all 0.38s var(--ease-spring); z-index: 199;
  }
  .navigation.ouverte { transform: translateY(0); opacity: 1; pointer-events: all; }
  .navigation__liste { flex-direction: column; gap: 2px; }
  .navigation__lien { display: block; padding: 12px 6px; font-size: 1.05rem; border-bottom: 1px solid rgba(255,107,53,0.06); }

  .carte-produit__pied { flex-direction: column; align-items: stretch; gap: 10px; }
  .bouton-panier { width: 100%; text-align: center; justify-content: center; }
  .stat__sep { display: none; }
  .grille-offres { grid-template-columns: 1fr; }

  .pied-de-page__grille { grid-template-columns: 1fr !important; gap: 32px; }
  .pied-de-page__bloc--principal p { max-width: 100%; }
  .pied-de-page__bas { flex-direction: column; text-align: center; align-items: center; gap: 12px; }
  .pied-de-page__bas-liens { justify-content: center; }
  .formulaire-contact-wrapper { padding: 24px 18px; }
  .bouton-haut { bottom: 20px; right: 14px; }
  .notification-toast { bottom: 20px; right: 16px; left: 16px; max-width: none; }
}

/* Focus visible */
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

/* ============================================================
   CAROUSEL DANS CARTES PRODUIT
   ============================================================ */
.carousel { position: relative; width: 100%; height: 100%; overflow: hidden; }
.carousel__piste { width: 100%; height: 100%; position: relative; }
.carousel__slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.6s ease;
  display: flex; align-items: center; justify-content: center;
}
.carousel__slide.active { opacity: 1; position: relative; }
.carousel__slide--vide {
  background: var(--gris-clair); color: var(--texte-leger);
  font-size: 0.84rem; text-align: center; padding: 16px;
  flex-direction: column; gap: 8px; font-family: 'Jost', sans-serif;
}
.carousel__prev, .carousel__next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(6px);
  border: none; cursor: pointer; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: var(--orange-2);
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  transition: background var(--dur-vite), transform var(--dur-vite);
  opacity: 0; pointer-events: none;
}
.carte-produit:hover .carousel__prev,
.carte-produit:hover .carousel__next { opacity: 1; pointer-events: all; }
.carousel__prev { left: 8px; }
.carousel__next { right: 8px; }
.carousel__prev:hover, .carousel__next:hover { background: #fff; transform: translateY(-50%) scale(1.1); }
.carousel__dots {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 5px; z-index: 10;
}
.carousel__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.55); border: none; cursor: pointer;
  transition: all var(--dur-vite); padding: 0;
}
.carousel__dot.active { background: #fff; width: 16px; border-radius: 3px; }

/* ============================================================
   VOIR PLUS
   ============================================================ */
.bouton-voir-plus {
  display: inline-block; font-size: 0.82rem; font-weight: 600;
  color: var(--orange); background: var(--orange-pale); border: none;
  padding: 4px 13px; border-radius: 50px; cursor: pointer;
  transition: background var(--dur-vite); margin-top: 2px; align-self: flex-start;
}
.bouton-voir-plus:hover { background: var(--orange-pale-2); }

/* ============================================================
   SELECT VILLE
   ============================================================ */
.carte-produit__ville { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.carte-produit__ville label { font-size: 0.80rem; font-weight: 600; color: var(--texte-leger); }
.select-ville {
  font-family: 'Jost', sans-serif; font-size: 0.86rem;
  color: var(--texte); background: var(--gris-clair);
  border: 1.5px solid var(--orange-pale-2); border-radius: 10px;
  padding: 7px 10px; cursor: pointer; width: 100%;
  transition: border-color var(--dur-vite);
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23FF6B35' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px;
}
.select-ville:focus { outline: none; border-color: var(--orange); }

/* ============================================================
   BADGES DIVERS
   ============================================================ */
.garantie-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
  color: #2e7d32; border: 1.5px solid #a5d6a7;
  border-radius: 50px; padding: 4px 12px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em;
  white-space: nowrap; flex-shrink: 0;
}

.ssm-acompte-badge {
  display: flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, #fff8e1, #fff3cd);
  color: #8a6300; border: 1.5px solid #ffd54f;
  border-radius: 8px; padding: 7px 12px;
  font-size: 0.80rem; font-weight: 500; margin-bottom: 10px; line-height: 1.4;
}
.ssm-acompte-badge svg { flex-shrink: 0; opacity: 0.85; }
.ssm-acompte-badge strong { color: #6a4700; font-weight: 700; }

.ssm-caution-badge {
  display: flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, #e8f4fd, #d6eaf8);
  color: #1a5276; border: 1.5px solid #85c1e9;
  border-radius: 8px; padding: 7px 12px;
  font-size: 0.80rem; font-weight: 500; margin-bottom: 10px; line-height: 1.4;
}
.ssm-caution-badge svg { flex-shrink: 0; opacity: 0.85; }
.ssm-caution-badge strong { color: #154360; font-weight: 700; }

.article-panier__conditions {
  margin-top: 6px; border-radius: 7px; padding: 7px 10px; font-size: 0.78rem; line-height: 1.5;
}
.article-panier__conditions--acompte { background: #fff8e1; border: 1px solid #ffd54f; color: #7a5500; }
.article-panier__conditions--caution { background: #e8f4fd; border: 1px solid #85c1e9; color: #154360; }
.article-panier__conditions .cond-label { font-weight: 600; margin-right: 3px; }
.article-panier__conditions .cond-row { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }

.ssm-conditions-recap {
  border-radius: 10px; padding: 14px 16px; margin-top: 14px; font-size: 0.86rem; line-height: 1.6;
}
.ssm-conditions-recap--acompte {
  background: linear-gradient(135deg, #fffde7, #fff8e1); border: 1.5px solid #ffd54f; color: #7a5500;
}
.ssm-conditions-recap--caution {
  background: linear-gradient(135deg, #e8f4fd, #d6eaf8); border: 1.5px solid #85c1e9; color: #1a5276;
}
.ssm-conditions-recap .cond-titre {
  font-weight: 700; font-size: 0.88rem; margin-bottom: 5px; display: flex; align-items: center; gap: 6px;
}
.ssm-conditions-recap .cond-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 2px 0; border-bottom: 1px solid rgba(0,0,0,0.06);
}
.ssm-conditions-recap .cond-row:last-child { border-bottom: none; }
.ssm-conditions-recap .cond-val { font-weight: 700; }
.ssm-conditions-total {
  margin-top: 8px; padding-top: 8px; border-top: 2px solid rgba(0,0,0,0.1);
  display: flex; justify-content: space-between; font-weight: 700; font-size: 0.94rem;
}

/* ============================================================
   RESPONSIVE SUPPLÉMENTAIRE
   ============================================================ */
@media (max-width: 600px) {
  .ssm-acompte-badge, .ssm-caution-badge { font-size: 0.75rem; padding: 6px 10px; }
  .ssm-conditions-recap { font-size: 0.82rem; }
}
@media (min-width: 480px) and (max-width: 639px) {
  .pied-de-page__grille { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 640px) {
  .grille-confiance { grid-template-columns: repeat(4, 1fr); }
  .pied-de-page__grille { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .pied-de-page__grille { grid-template-columns: 2fr 1fr 1fr 1fr !important; }
}

/* ============================================================
   MOBILE FONT ADAPT
   ============================================================ */
@media (max-width: 480px) {
  html { font-size: 15.5px; }
  .hero__titre-cursive { font-size: clamp(2.4rem, 9vw, 3.6rem) !important; }
  .hero__titre-normal { font-size: clamp(1.1rem, 4vw, 1.45rem) !important; }
  .carte-produit__titre { font-size: 1.15rem; }
  .bouton-principal, .bouton-secondaire { font-size: 0.88rem; padding: 14px 26px; }
  .section__titre { font-size: 1.75rem; }
  .carousel__prev, .carousel__next { opacity: 1; pointer-events: all; }
}

/* ============================================================
   HERO CAROUSEL — IMAGES BIEN MISES EN AVANT
   ============================================================ */
.hero__carousel-produits {
  width: min(920px, 100%);
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  /* Ombre forte et signature orange pour sortir les images */
  box-shadow:
    0 24px 72px rgba(255,107,53,0.18),
    0 8px 32px rgba(0,0,0,0.12),
    0 0 0 1px rgba(255,107,53,0.12);
  background: #1a1a2e;
  aspect-ratio: 9/16;
  max-height: 520px;
}

/* Dégradé bas du carousel qui met en avant les images */
.hero__carousel-produits::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(
    0deg,
    rgba(180, 50, 0, 0.26) 0%,
    rgba(255,107,53,0.08) 55%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 5;
  border-radius: 0 0 20px 20px;
}

.hero__carousel-slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.hero__carousel-slide.active {
  opacity: 1;
  position: relative;
}
.hero__carousel-slide img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 8s linear;
}
.hero__carousel-slide.active img {
  transform: scale(1.04);
}

/* Indicateurs dots */
.hero__carousel-indicateurs {
  position: absolute; bottom: 16px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 7px; z-index: 10;
}
.hero__carousel-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.50);
  border: none; cursor: pointer; padding: 0;
  transition: all 0.3s ease;
}
.hero__carousel-dot.active {
  background: #fff;
  width: 24px; border-radius: 4px;
  box-shadow: 0 1px 6px rgba(255,107,53,0.50);
}

@media (max-width: 768px) {
  .hero__carousel-produits {
    width: 100%; aspect-ratio: 9/16; max-height: 360px; border-radius: 16px;
  }
  .hero__carousel-produits::after { border-radius: 0 0 16px 16px; }
}
@media (max-width: 480px) {
  .hero__carousel-produits {
    aspect-ratio: 9/16; max-height: 360px; border-radius: 14px;
  }
  .hero__carousel-produits::after { border-radius: 0 0 14px 14px; }
}

/* ============================================================
   SSM — REFONTE VISUELLE v2
   Nouvelles sections : Hero trottinettes, Vidéos, Accessoires,
   Recherche header, Séparateur "Autres produits"
   ============================================================ */

/* ---- TYPOGRAPHIE GLOBALE AJUSTÉE ---- */
html { font-size: 15.5px; }
@media (min-width: 900px) { html { font-size: 16px; } }


/* ============================================================
   HERO TROTTINETTES — split 2 colonnes
   ============================================================ */
.hero--trottinettes {
  background:
    radial-gradient(ellipse 70% 60% at 100% 0%, rgba(255,107,53,0.07) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(0,119,240,0.04) 0%, transparent 65%),
    #fff;
}
 
.hero__conteneur--split {
  display: grid; 
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding-top: clamp(80px, 10vw, 110px) !important;
  padding-bottom: clamp(40px, 6vw, 80px) !important;
}

.hero__texte--left {
  display: flex; flex-direction: column; gap: 18px;
  text-align: left;
}

/* Tag "Trottinettes" au-dessus du titre */
.hero__titre-tag {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: #fff;
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-2) 100%);
  padding: 5px 16px; border-radius: 50px;
  box-shadow: 0 4px 14px rgba(255,107,53,0.32);
  width: fit-content;
}

.hero__titre { text-align: left; }

.hero__accroche {
  font-family: 'Jost', sans-serif;
  font-size: 0.90rem; font-weight: 500;
  color: var(--texte-leger); line-height: 1.7;
}

/* Override hero boutons pour align left */
.hero__texte--left .hero__boutons {
  justify-content: flex-start;
  margin-bottom: 0;
  animation: none;
}

/* Badges confiance sous les boutons */
.hero__badges-confiance {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 4px;
}
.hero__badge-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem; font-weight: 700;
  color: var(--texte-leger);
  background: var(--gris-clair);
  border: 1.5px solid var(--orange-pale-2);
  padding: 5px 12px; border-radius: 50px;
}
.hero__badge-item svg { width: 14px; height: 14px; color: var(--orange); flex-shrink: 0; }

/* Prix vedette flottant */
.hero__prix-vedette {
  position: absolute;
  bottom: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-2) 100%);
  color: #fff; border-radius: 50px;
  padding: 10px 24px;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 8px 26px rgba(255,107,53,0.42);
  white-space: nowrap;
  z-index: 20;
}
.hero__prix-vedette-label {
  font-family: 'Jost', sans-serif;
  font-size: 0.74rem; font-weight: 600; opacity: 0.85;
}
.hero__prix-vedette-montant {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem; font-weight: 800;
}
.hero__visuel { position: relative; }

/* ---- RESPONSIVE HERO SPLIT ---- */
@media (max-width: 820px) {
  .hero__conteneur--split {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: clamp(90px, 12vw, 110px) !important;
  }
  .hero__texte--left { text-align: center; align-items: center; }
  .hero__titre { text-align: center; }
  .hero__texte--left .hero__boutons { justify-content: center; }
  .hero__badges-confiance { justify-content: center; }
  .hero__prix-vedette { bottom: -10px; }
}
@media (max-width: 480px) {
  .hero__badge-item { font-size: 0.72rem; padding: 4px 10px; }
  .hero__accroche { font-size: 0.84rem; }
}

/* ============================================================
   SECTION VIDÉOS
   ============================================================ */
.section-videos {
  padding: var(--pad-section) 0;
  background: white;
  border-top: 1px solid rgba(255,107,53,0.08);
  border-bottom: 1px solid rgba(255,107,53,0.08);
}

.section__sous-titre {
  font-family: 'Jost', sans-serif;
  font-size: 0.96rem; font-weight: 500;
  color: var(--texte-leger);
  margin-top: 10px; line-height: 1.7;
}

.grille-videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--gap);
}

.video-card {
  background: #fff;
  border-radius: var(--r-carte);
  overflow: hidden;
  box-shadow: 0 3px 18px rgba(0,0,0,0.07);
  border: 1.5px solid rgba(255,107,53,0.07);
  display: flex; flex-direction: column;
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur);
}
.video-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 50px rgba(255,107,53,0.14), 0 4px 18px rgba(0,0,0,0.07);
}

.video-card__media {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #0a0a1e;
}

.video-card__placeholder {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}

.video-card__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.72;
  transition: opacity 0.4s ease, transform 0.6s var(--ease-out);
}
.video-card:hover .video-card__poster {
  opacity: 0.55; transform: scale(1.05);
}

.video-card__play-btn {
  position: relative; z-index: 2;
  width: 58px; height: 58px; border-radius: 50%;
  background: rgba(255,255,255,0.96);
  color: var(--orange-2);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 28px rgba(0,0,0,0.28);
  transition: transform var(--dur) var(--ease-spring), background var(--dur-vite);
  cursor: pointer;
}
.video-card__play-btn svg { width: 24px; height: 24px; margin-left: 3px; }
.video-card:hover .video-card__play-btn {
  transform: scale(1.15);
  background: var(--orange); color: #fff;
}

.video-card__info {
  padding: 18px 20px 22px;
  display: flex; flex-direction: column; gap: 6px;
}

.video-card__tag {
  display: inline-block;
  font-size: 0.72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--orange); background: var(--orange-pale);
  border: 1px solid var(--orange-pale-2);
  padding: 3px 11px; border-radius: 50px; width: fit-content;
}

.video-card__titre {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.20rem; font-weight: 700; color: var(--bleu-3); line-height: 1.3;
}

.video-card__desc {
  font-size: 0.84rem; color: var(--texte-leger); font-weight: 500; line-height: 1.6;
}

.bouton-video-cta {
  display: inline-flex; align-items: center;
  font-family: 'Jost', sans-serif;
  font-size: 0.84rem; font-weight: 800;
  color: var(--orange-2); margin-top: 6px;
  letter-spacing: 0.04em;
  transition: color var(--dur-vite), letter-spacing var(--dur-vite);
}
.bouton-video-cta:hover { color: var(--orange-3); letter-spacing: 0.08em; }

/* ============================================================
   SECTION ACCESSOIRES
   ============================================================ */
.section-accessoires {
  padding: var(--pad-section) 0;
  background: #fff;
  position: relative;
}
.section-accessoires::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 80px; height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--orange-2));
  border-radius: 0 0 3px 3px;
}

.grille-accessoires {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--gap);
}

.carte-accessoire {
  background: #fff;
  border-radius: var(--r-carte);
  border: 1.5px solid rgba(255,107,53,0.08);
  box-shadow: 0 2px 14px rgba(0,0,0,0.05);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur), border-color var(--dur);
}
.carte-accessoire:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 48px rgba(255,107,53,0.12), 0 4px 16px rgba(0,0,0,0.06);
  border-color: rgba(255,107,53,0.18);
}

.carte-accessoire__image {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 270px;

  overflow: hidden;
}
.carte-accessoire__image::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(255,107,53,0.04) 100%);
  pointer-events: none;
}
.carte-accessoire__image .badge-type {
  position: absolute; top: 10px; left: 10px; z-index: 3;

}

.carte-accessoire__emoji {
  font-size: 3.4rem;
  line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(255,107,53,0.18));
  position: relative; z-index: 1;
}

.carte-accessoire__corps {
  padding: 15px 17px 18px;
  display: flex; flex-direction: column; gap: 7px; flex: 1;
}

.carte-accessoire__titre {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.14rem; font-weight: 700; color: var(--bleu-3); line-height: 1.3;
}

.carte-accessoire__desc {
  font-size: 0.85rem; font-weight: 500;
  color: var(--texte-leger); line-height: 1.65; flex: 1;
}

.carte-accessoire__details {
  display: flex; flex-wrap: wrap; gap: 5px;
}

.carte-accessoire__pied {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; margin-top: 6px; padding-top: 11px;

}

@media (max-width: 768px) {
  .carte-accessoire__pied { flex-direction: column; align-items: stretch; }
  .carte-accessoire__pied .bouton-panier { width: 100%; justify-content: center; }
}

/* ============================================================
   SECTION CATALOGUE — Trottinettes vedettes
   ============================================================ */
.section-trottinettes-vedettes {
  background: linear-gradient(180deg, var(--gris-clair) 0%, #fff 100%);
  position: relative;
}


.section__entete--trottinettes {
  position: relative;
  background: linear-gradient(135deg, rgba(255,107,53,0.04) 0%, transparent 60%);
  border-radius: 20px;
  padding: 28px 32px;
  border: 1.5px solid rgba(255,107,53,0.09);
  margin-bottom: 38px !important;
}
@media (max-width: 600px) {
  .section__entete--trottinettes { padding: 18px 16px; }
}

/* Filtre trottinettes highlighted */
.filtre[data-filtre="trottinettes"].filtre--actif {
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-2) 100%);
  border-color: var(--orange);
  color: #fff;
  box-shadow: 0 4px 18px rgba(255,107,53,0.36);
}

/* ============================================================
   SÉPARATEUR "AUTRES PRODUITS QUE SSM PROPOSE"
   ============================================================ */
.separateur-autres-produits {
  grid-column: 1 / -1;
  padding: clamp(28px, 5vw, 48px) 0 clamp(16px, 3vw, 28px);
  text-align: center;
}
.separateur-autres-produits__inner {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 10px;
}
.separateur-autres-produits__ligne {
  flex: 1; height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(255,107,53,0.20), transparent);
}
.separateur-autres-produits__titre {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 700; color: var(--bleu-3);
  white-space: nowrap; flex-shrink: 0;
  padding: 8px 20px;
  background: #fff;
  border: 1.5px solid rgba(255,107,53,0.12);
  border-radius: 50px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.separateur-autres-produits__titre svg { color: var(--orange); flex-shrink: 0; }
.separateur-autres-produits__sous {
  font-family: 'Jost', sans-serif;
  font-size: 0.82rem; font-weight: 500;
  color: var(--texte-leger); letter-spacing: 0.08em;
}
@media (max-width: 600px) {
  .separateur-autres-produits__titre {
    font-size: 0.9rem; padding: 7px 14px; gap: 6px; white-space: normal; text-align: center;
  }
  .separateur-autres-produits__inner { gap: 10px; }
}

/* ============================================================
   BOUTONS AMÉLIORÉS — plus premium, moins exagérés
   ============================================================ */
.bouton-principal {
  font-size: 0.92rem !important;
  padding: 14px 32px !important;
  letter-spacing: 0.06em !important;
}
.bouton-secondaire {
  font-size: 0.92rem !important;
  padding: 12px 28px !important;
}
.bouton-panier {
  font-size: 0.82rem !important;
  padding: 10px 16px !important;
}

/* ============================================================
   SECTION TITRES — tailles réduites et hiérarchie claire
   ============================================================ */
.section__titre {
  font-size: clamp(1.65rem, 3.6vw, 2.8rem) !important;
}
.carte-produit__titre { font-size: 1.18rem !important; }
.carte-produit__description { font-size: 0.85rem !important; }
.prix-montant { font-size: 1.38rem !important; }

/* ============================================================
   NAVIGATION — ajout trottinettes link
   ============================================================ */
.en-tete__conteneur {
  gap: 16px !important;
}
@media (max-width: 900px) {
  .barre-recherche-header { order: 3; }
}

/* ============================================================
   FILTRES — style premium
   ============================================================ */


/* ============================================================
   CARTES PRODUIT — améliorations
   ============================================================ */
.carte-produit__corps {
  padding: 14px 16px 18px !important;
  gap: 7px !important;
}
.carte-produit:hover {
  transform: translateY(-5px) !important;
}

/* ============================================================
   HERO - override sur-titre alignement gauche
   ============================================================ */
.hero--trottinettes .hero__sur-titre {
  justify-content: flex-start;
}
@media (max-width: 820px) {
  .hero--trottinettes .hero__sur-titre { justify-content: center; }
}





























/* ================================================================
       SÉLECTEURS PAYS → VILLE + USER-SELECT PROTECTION + DYNAMISME
    ================================================================ */
    * { user-select: none; -webkit-user-select: none; -moz-user-select: none; }
    input, textarea, select { user-select: auto; -webkit-user-select: auto; }

    .carte-produit__localisation {
      display: flex; flex-direction: column; gap: 10px;
      margin-bottom: 4px;
    }
    .form-loc-groupe { display: flex; flex-direction: column; gap: 5px; }
    .form-loc-groupe label {
      font-size: 0.73rem; font-weight: 600; color: var(--bleu-3);
      text-transform: uppercase; letter-spacing: 0.07em;
    }
    .select-loc {
      font-family: 'Jost', sans-serif;
      font-size: 0.85rem; color: var(--texte);
      background: var(--bleu-pale);
      border: 1.5px solid var(--bleu-pale-2);
      border-radius: 10px; padding: 9px 12px;
      width: 100%; cursor: pointer;
      transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%235BB8D4' d='M5 8l5 5 5-5z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      background-size: 16px;
      padding-right: 30px; 
    }
    .select-loc:focus {
      outline: none; border-color: var(--bleu);
      background-color: #fff;
      box-shadow: 0 0 0 3px rgba(0,119,240,0.12);
    }

    /* Wrapper ville caché jusqu'à choix du pays */
    .select-ville-wrapper {
      max-height: 0; overflow: hidden; opacity: 0;
      transition: max-height 0.35s ease, opacity 0.35s ease;
      pointer-events: none;
    }
    .select-ville-wrapper.visible {
      max-height: 100px; opacity: 1; pointer-events: auto;
    }

    /* ================================================================
       HERO CAROUSEL — BOUTONS NAV GAUCHE / DROITE
    ================================================================ */
    .hero__carousel-wrapper {
      display: flex;
      align-items: center;
      gap: 0;
      width: 100%;
      justify-content: center;
    }

    /* Boutons flèches — fond blanc, grands, de chaque côté */
    .hero__carousel-btn {
      flex-shrink: 0;
      width: clamp(48px, 5.5vw, 66px);
      height: clamp(48px, 5.5vw, 66px);
      border-radius: 50%;
      background: #ffffff;
      border: 2px solid rgba(255,107,53,0.18);
      color: var(--orange-2);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      box-shadow:
        0 4px 20px rgba(255,107,53,0.16),
        0 2px 8px rgba(0,0,0,0.08);
      transition: all 0.28s var(--ease-spring);
      z-index: 10;
      position: relative;
    }
    .hero__carousel-btn svg {
      width: clamp(20px, 2.5vw, 26px);
      height: clamp(20px, 2.5vw, 26px);
      transition: transform 0.22s var(--ease-spring);
    }
    .hero__carousel-btn:hover {
      background: var(--orange);
      border-color: var(--orange);
      color: #fff;
      transform: scale(1.10);
      box-shadow: 0 8px 28px rgba(255,107,53,0.42);
    }
    .hero__carousel-btn:hover svg { transform: scale(1.1); }
    .hero__carousel-btn:active { transform: scale(0.95); }
    .hero__carousel-btn--prev { margin-right: clamp(12px, 2vw, 24px); }
    .hero__carousel-btn--next { margin-left:  clamp(12px, 2vw, 24px); }

    /* Le carousel prend tout l'espace restant */
    .hero__carousel-wrapper .hero__carousel-produits {
      flex: 1;
      min-width: 0;
    }

    @media (max-width: 480px) {
      .hero__carousel-btn {
        width: 40px; height: 40px;
      }
      .hero__carousel-btn svg { width: 18px; height: 18px; }
      .hero__carousel-btn--prev { margin-right: 8px; }
      .hero__carousel-btn--next { margin-left:  8px; }
    }

    /* ================================================================
       LOGO PRO — HEADER & FOOTER
    ================================================================ */
    .logo-texte--pro {
      display: flex; flex-direction: column; gap: 0;
    }
    .logo-ssm-wrap {
      display: flex; align-items: center; gap: 8px;
    }
    .logo-ssm-icon {
      width: 34px; height: 34px; flex-shrink: 0;
      filter: drop-shadow(0 2px 6px rgba(255,107,53,0.28));
    }
    .pied-logo { display: flex; flex-direction: column; gap: 0; }
    .pied-logo-wrap { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
    .pied-logo-icon {
      width: 30px; height: 30px; flex-shrink: 0;
      filter: drop-shadow(0 1px 4px rgba(255,107,53,0.20));
    }
    .pied-logo-ssm {
      font-family: 'Cinzel Decorative', serif;
      font-size: 1.45rem; font-weight: 900;
      background: linear-gradient(135deg, #FF6B35 0%, #C44010 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      letter-spacing: 0.10em;
    }
    .pied-logo-full {
      display: block; font-family: 'Jost', sans-serif;
      font-size: 0.60rem; font-weight: 700; color: var(--texte-leger);
      letter-spacing: 0.22em; text-transform: uppercase;
      margin-top: 2px; padding-left: 2px;
    }

    /* ================================================================
       RÉSEAUX SOCIAUX — FOOTER
    ================================================================ */
    

    /* Dynamisme carte produit */
    .carte-produit__image-wrapper {
      position: relative; overflow: hidden;
      border-radius: 12px 12px 0 0;
      min-height: 180px;
    }
    .carte-produit__visuel-dynamique {
      position: relative;
      width: 100%; min-height: 180px;
      border-radius: 12px 12px 0 0;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
      cursor: default;
    }

    /* Avis: header avec drapeau */
    .avis-carte__header {
      display: flex; align-items: center;
      justify-content: space-between; margin-bottom: 8px;
    }
    .avis-carte__pays { font-size: 1.4rem; line-height: 1; }

    /* Bandeau "Service européen" */
    .confiance-item svg text[x="12"] { display: none; }


     .slider-wrapper{
      width:100%;
      overflow:hidden;
      position:relative;
      padding:40px 0 95px;

    }

    .slider-track{
      display:flex;
      align-items:flex-end;
      gap:28px;
      width:max-content;
      animation:defilement 18s linear infinite;
      will-change:transform;

    }

    /* Pause au survol */
    .slider-wrapper:hover .slider-track{
      animation-play-state:paused;
    }

    /* Pause via bouton */
    .slider-track.stopped{
      animation-play-state:paused;
    }

    .product-card{
      flex:0 0 auto;
      width:280px;
      display:flex;
      flex-direction:column;
      align-items:center;
    }

    .image-wrapper{
      position:relative;
      width:100%;
      display:flex;
      justify-content:center;
      align-items:flex-start;
    }

    .product-image{
      height:460px;
      width:auto;
      max-width:100%;
      object-fit:contain;
      display:block;
    }

    .price-tag{
      position:absolute;
      top:12px;
      left:50%;
      transform:translateX(-50%) rotate(-4deg);
      color:#fff;
      font-size:13px;
      font-weight:700;
      padding:8px 14px;
      background:linear-gradient(135deg,#ff5f6d,#ff9966);
      box-shadow:0 8px 18px rgba(0,0,0,0.14);
      clip-path:polygon(9% 0%, 95% 4%, 100% 34%, 94% 100%, 8% 96%, 0% 70%, 3% 16%);
      z-index:3;
      white-space:nowrap;
    }

    .tag-2{
      background:linear-gradient(135deg,#00b894,#00cec9);
    }

    .tag-3{
      background:linear-gradient(135deg,#6c5ce7,#8e44ad);
    }

    .tag-4{
      background:linear-gradient(135deg,#f39c12,#ff6b35);
    }

    @keyframes defilement{
      from{
        transform:translateX(0);
      }
      to{
        transform:translateX(-50%);
      }
    }

    .fixed-btn{
      position:absolute;
      bottom:12px;
      left:50%;
      transform:translateX(-50%);
      border:none;
      cursor:pointer;
      color:#fff;
      font-size:14px;
      font-weight:700;
      padding:14px 28px;
      background:linear-gradient(135deg,#f39c12,#ff6b35);
      box-shadow:0 10px 22px rgba(0,0,0,0.14);
      clip-path:polygon(8% 0%, 94% 0%, 100% 30%, 96% 100%, 6% 100%, 0% 70%, 3% 20%);
      z-index:10;
    }




    .fixe-btn{
      position:absolute;
      left:50%;
      transform:translateX(-50%);
      border:none;
      cursor:pointer;
      color:#fff;
      font-size:14px;
      font-weight:700;
      padding:14px 28px;
      background:linear-gradient(135deg,#ff5f6d,#ff9966);
      box-shadow:0 10px 22px rgba(0,0,0,0.14);
      clip-path:polygon(8% 0%, 94% 0%, 100% 30%, 96% 100%, 6% 100%, 0% 70%, 3% 20%);
      z-index:10;
    } 

    .fix-btn{
      position:relative;
      left: 7%;
      transform:translateX(-50%);
      border:none;
      cursor:pointer;
      color:#fff;
      font-size:14px;
      font-weight:700;
      padding:10px 15px;
      margin-bottom: 15px;
      background:linear-gradient(135deg,#00b894,#00cec9);
      box-shadow:0 10px 22px rgba(0,0,0,0.14);
      clip-path:polygon(8% 0%, 94% 0%, 100% 30%, 96% 100%, 6% 100%, 0% 70%, 3% 20%);
      z-index:10;
     }

    @media (max-width:1024px){
      .product-card{
        width:240px;
      }

      .product-image{
        height:400px;
      }
    } 

    @media (max-width:768px){
      .slider-wrapper{
        padding:30px 0 90px;
      }

      .slider-track{
        gap:18px;
      }

      .product-card{
        width:72vw;
        max-width:300px;
      }

      .product-image{
        height:340px;
      }

      .price-tag{
        font-size:12px;
        padding:7px 12px;
      }
    }

    @media (max-width:480px){
      .product-card{
        width:78vw;
      }

      .product-image{
        height:300px;
      }

      .fixed-btn{
        font-size:13px;
        padding:12px 22px;
      }
    }




    .ssm-logo{
  display:flex;
  align-items:flex-end;
  gap:6px;
}


/* taille réduite pour header */
.cube{
  --size: 30px;
  --depth: 8px;

  position:relative;
  width:var(--size);
  height:var(--size);
}

/* face avant */
.cube-front{
  position:absolute;
  inset:0;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.08),
    0 6px 10px rgba(0,0,0,0.14);
  z-index:3;
}

/* reflet */
.cube-front::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.28), rgba(255,255,255,0.05) 40%, transparent 50%),
    linear-gradient(-45deg, rgba(0,0,0,0.12), transparent 50%);
}

/* dessus */
.cube-top{
  position:absolute;
  top:calc(var(--depth) * -0.5);
  left:calc(var(--depth) * 0.3);
  width:90%;
  height:var(--depth);
  border-radius:4px 4px 2px 2px;
  transform:skewX(-38deg);
}

/* côté */
.cube-side{
  position:absolute;
  top:calc(var(--depth) * 0.2);
  right:calc(var(--depth) * -0.6);
  width:var(--depth);
  height:90%;
  border-radius:0 4px 4px 0;
  transform:skewY(-38deg);
}

/* arêtes */
.cube-edge-top{
  position:absolute;
  top:calc(var(--depth) * -0.5);
  left:calc(var(--depth) * 0.3);
  width:90%;
  height:var(--depth);
  transform:skewX(-38deg);
  border-top:1px solid rgba(255,255,255,0.5);
  border-bottom:1px solid rgba(0,0,0,0.15);
}

.cube-edge-side{
  position:absolute;
  top:calc(var(--depth) * 0.2);
  right:calc(var(--depth) * -0.6);
  width:var(--depth);
  height:90%;
  transform:skewY(-38deg);
  border-left:1px solid rgba(255,255,255,0.3);
  border-right:1px solid rgba(0,0,0,0.15);
}

/* texte fin */
.cube span{
  color:#fff;
  font-family:"Segoe UI", Arial, sans-serif;
  font-weight:600;
  font-size: 1.4rem;
  letter-spacing:-0.08em;
  z-index:5;
  transform:translateY(-1px);
}

/* === COULEURS === */

/* S */
.c1 .cube-front{
  background:linear-gradient(135deg,#f39c12,#ff6b35);
}
.c1 .cube-top{ background:#ffc06a; }
.c1 .cube-side{ background:#c75b1a; }

/* S */
.c2 .cube-front{
  background:linear-gradient(135deg,#6c5ce7,#8e44ad);
}
.c2 .cube-top{ background:#a89bff; }
.c2 .cube-side{ background:#5b2c83; }

/* M */
.c3 .cube-front{
  background:linear-gradient(135deg,#ff5f6d,#ff9966);
}
.c3 .cube-top{ background:#ffb3a3; }
.c3 .cube-side{ background:#cc4b4b; }

/* inclinaison */
.c1{ transform:rotate(-8deg); }
.c2{ transform:rotate(7deg) translateY(4px); }
.c3{ transform:rotate(-6deg); }







:root{
      --header-height: 78px; /* ajuste selon la hauteur réelle de ton header fixe */
      --bg: #f3f3f3;
      --text: #222;
      --muted: #666;
      --shadow: 0 8px 24px rgba(0,0,0,0.10);
      --btn-shadow: 0 6px 16px rgba(0,0,0,0.12);
      --orange-grad: linear-gradient(135deg,#f39c12,#ff6b35);
      --violet-grad: linear-gradient(135deg,#6c5ce7,#8e44ad);
      --coral-grad: linear-gradient(135deg,#ff5f6d,#ff9966);
    }


    .sticky-zone{
      position: sticky;
      top: var(--header-height);
      z-index: 20;
      background: rgba(243,243,243,0.94);
      backdrop-filter: blur(10px);
      padding: 12px 0 14px;
      box-shadow: 0 1px 0 rgba(0,0,0,0.05);
    }

    .filtres-shell{
      position: relative;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 54px;
    }

    .filtres{
      display:flex;
      align-items:center;
      gap:14px;
      overflow-x:auto;
      overflow-y:hidden;
      scroll-behavior:smooth;
      white-space:nowrap;
      scrollbar-width:none;
      -ms-overflow-style:none;
      padding: 4px 2px 8px;
    }

    .filtres::-webkit-scrollbar{
      display:none;
    }


     .filtre{
      flex: 0 0 auto;
      border: none;
      cursor: pointer;
      padding: 13px 18px;
      border-radius: 16px;
      white-space: nowrap;
      font-size: 14px;
      font-weight: 600;
      color: #262b35;
      background: #fff;
      box-shadow: 0 3px 10px rgba(0,0,0,0.06);
      transition: transform 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
    }

    .filtre:hover{
      transform: translateY(-2px);
      box-shadow: 0 8px 16px rgba(0,0,0,0.10);
    }

    .filtre--actif{
      color: #fff;
      background: var(--orange-grad);
      box-shadow: 0 10px 22px rgba(255,107,53,0.28);
    }

    .scroll-btn{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 40px;
      height: 40px;
      border: none;
      cursor: pointer;
      z-index: 3;
      display:flex;
      align-items:center;
      justify-content:center;
      color: #fff;
      box-shadow: var(--btn-shadow);
      transition: transform 0.22s ease, opacity 0.22s ease;
      clip-path: polygon(12% 0%, 88% 0%, 100% 22%, 100% 78%, 88% 100%, 12% 100%, 0% 78%, 0% 22%);
    }

    .scroll-btn:hover{
      transform: translateY(-50%) scale(1.06);
    }

    .scroll-btn:disabled{
      opacity: 0.35;
      cursor: default;
      transform: translateY(-50%);
    }

    .scroll-btn.left{
      left: 6px;
      background: var(--violet-grad);
    }

    .scroll-btn.right{
      right: 6px;
      background: var(--coral-grad);
    }

    .scroll-btn svg{
      width: 18px;
      height: 18px;
      stroke: currentColor;
      stroke-width: 2.4;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .edge-fade{
      position:absolute;
      top:0;
      bottom:0;
      width:36px;
      pointer-events:none;
      z-index:2;
    }

    .edge-fade.left{
      left:54px;
      background: linear-gradient(to right, rgba(243,243,243,1), rgba(243,243,243,0));
    }

    .edge-fade.right{
      right:54px;
      background: linear-gradient(to left, rgba(243,243,243,1), rgba(243,243,243,0));
    }

    .content{
      max-width: 1200px;
      margin: 0 auto;
      padding: 30px 20px 100px;
      color:#444;
      line-height:1.6;
    }

    .block{
      background:#fff;
      border-radius:18px;
      padding:24px;
      box-shadow: 0 6px 20px rgba(0,0,0,0.05);
      margin-bottom:20px;
    }

    @media (max-width: 768px){
      :root{
        --header-height: 72px;
      }

      .filtres-shell{
        padding: 0 46px;
      }

      .edge-fade.left{
        left:46px;
      }

      .edge-fade.right{
        right:46px;
      }

      .filtre{
        padding: 12px 16px;
        font-size: 13px;
        border-radius: 14px;
      }

      .scroll-btn{
        width: 34px;
        height: 34px;
      }

      .scroll-btn svg{
        width: 16px;
        height: 16px;
      }
    }