/* ================================================================
   css/hero.css — Maison Lamarque
   ── Section héro pleine hauteur avec slideshow ─────────────────
   
   ================================================================ */
   .hero { display:grid; grid-template-columns:1fr 1fr; min-height:calc(100vh - 120px); }

   /* Côté gauche : texte */
   .hero-left {
     background:var(--off-white); display:flex; flex-direction:column;
     justify-content:flex-end; padding:80px 60px;
     position:relative; overflow:hidden;
   }
   .hero-ghost {
     position:absolute; top:10px; left:-8px;
     font-family:var(--font-display); font-size:clamp(80px,14vw,190px);
     font-weight:300; color: rgb(217, 217, 217); pointer-events:none; white-space:nowrap; line-height:1;
   }
   .hero-tag { font-size:10px; letter-spacing:4px; text-transform:uppercase; color:var(--gold); margin-bottom:18px; font-weight:400; animation:up .8s .2s both; }
   .hero-h1  { font-family:var(--font-display); font-size:clamp(44px,6vw,84px); font-weight:300; line-height:1.02; color:var(--black); animation:up .8s .4s both; }
   .hero-h1 em { font-style:italic; color:var(--gold); }
   .cat-hero-title em { 
    font-style: italic !important; 
    color: var(--gold) !important; 
}
   .hero-sub {
     margin-top:22px; font-size:13px; line-height:1.9; color:var(--grey);
     max-width:380px; font-weight:300; animation:up .8s .6s both;
   }
   .hero-btns { display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; animation:up .8s .8s both; }
   
   /* Côté droit : slideshow */
   .hero-right {
     background:var(--black); display:flex; align-items:center;
     justify-content:center; position:relative; overflow:hidden; min-height:400px;
   }
   .hero-right::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 40% 60%,rgba(200,160,80,.08),transparent 60%); pointer-events:none; }
 /* Assure que le conteneur est bien dimensionné */
.hero-img-slot {
    position: absolute;
    inset: 0;
    display: flex; /* Le flex ici est ok pour centrer l'image */
    align-items: center;
    justify-content: center;
}

/* Force l'image à prendre toute la place disponible sans sortir du slot */
.hero-img-slot img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
   .hero-year { position:absolute; bottom:24px; right:24px; font-size:11px; letter-spacing:4px; color:rgba(255,255,255,.2); z-index:2; font-family:var(--font-accent); }
   .hero-dots { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:2; }
   .hero-dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.2); border:none; cursor:pointer; transition:all .3s; padding:0; }
   .hero-dot.active { background:var(--gold); width:18px; border-radius:3px; }
   
   
   /* ================================================================
      css/products.css — Maison Lamarque
      ── Grille, filtres, cartes, galerie multi-images, recherche ───
      ================================================================ */
.prods { padding:var(--pad-section); background:var(--off-white); overflow:visible !important; }   
   /* En-tête section */
.s-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:50px; position:sticky; top:70px; background:var(--white); z-index:100; padding:20px 0; }   .s-top .s-label { margin-bottom:8px; color:var(--gold); }
   .s-title { font-family:var(--font-display); font-size:clamp(36px,5vw,58px); font-weight:300; color:var(--black); }
   .see-all { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--grey); border-bottom:1px solid rgba(0,0,0,.15); padding-bottom:2px; transition:color .2s; white-space:nowrap; margin-bottom:4px; cursor:pointer; }
   .see-all:hover { color:var(--black); border-color:var(--black); }
   
   /* Filtres + tri */
   .filter-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:32px; gap:12px; flex-wrap:wrap; }
   .filter-btns { display:flex; gap:6px; flex-wrap:wrap; }
   .f-btn { padding:7px 20px; font-size:10px; letter-spacing:2px; text-transform:uppercase; border:1px solid rgba(0,0,0,.12); background:transparent; cursor:pointer; color:var(--grey); transition:all .2s; }
   .f-btn:hover  { border-color:var(--black); color:var(--black); }
   .f-btn.active { background:var(--black); color:var(--white); border-color:var(--black); font-weight:500; }
   .sort-select  { background:var(--white); border:1px solid rgba(0,0,0,.12); color:var(--black); padding:7px 14px; font-size:11px; cursor:pointer; }
   .sort-select:focus { border-color:var(--black); }
   
   /* Grille produits */
   .prod-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
   /* Style pour le bouton quand c'est une taille unique */
.size-btn[data-size="Taille Unique"] {
  white-space: nowrap;
    width: auto !important; /* Annule le carré */
    min-width: 120px;       /* Donne une assise au bouton */
    padding: 0 20px;        /* Espace autour du texte */
    letter-spacing: 1px;    /* Un peu plus élégant */
}

/* Optionnel : Une petite animation quand il est actif par défaut */
.size-btn.active {
    background: var(--black);
    color: var(--white);
    border-color: var(--black);
}
   
   /* Carte produit */
   
   .p-card { cursor:pointer; background:var(--white); position:relative; overflow:hidden; transition:box-shadow .3s, transform .3s; }
   .p-card:hover { box-shadow:var(--shadow); transform:translateY(-3px); }
   
   /* Zone image — ratio 3:4 */
   .p-img-wrap { aspect-ratio:1; overflow:hidden; position:relative; background:var(--off-white); }
   
   /* Image principale */
   .p-img-main { width:100%; height:100%; object-fit:contain; padding:18px; transition:opacity .4s, transform .5s;padding: 5px; }
   .p-card:hover .p-img-main { transform:scale(1.04); }
   
   /* Image secondaire (hover) — images[1] */
   .p-img-hover { position:absolute; inset:0; opacity:0; object-fit:contain; padding:18px; transition:opacity .4s; width:100%; height:100%; }
   .p-card:hover .p-img-hover { opacity:1; }
   .p-card:hover .p-img-main  { opacity:0; }
   
   /* Miniatures images (galerie rapide) */
   .p-thumbs { display:flex; gap:4px; padding:6px 8px 0; position:absolute; bottom:48px; left:0; right:0; justify-content:center; opacity:0; transition:opacity .3s; }
   .p-card:hover .p-thumbs { opacity:1; }
   .p-thumb { width:28px; height:28px; object-fit:contain; background:rgba(0,0,0,.04); padding:2px; cursor:pointer; border:1px solid transparent; transition:border-color .2s; }
   .p-thumb.active,.p-thumb:hover { border-color:var(--black); }
   
   /* Badges */
   .p-tag { position:absolute; top:12px; left:12px; font-size:9px; letter-spacing:2px; padding:4px 10px; text-transform:uppercase; font-weight:600; z-index:2; }
   .t-new  { background:var(--black); color:var(--white); }
   .t-sale { background:var(--red); color:white; }
   .p-type-badge { position:absolute; top:12px; right:12px; font-size:8px; letter-spacing:2px; padding:3px 8px; text-transform:uppercase; font-weight:500; border:1px solid rgba(0,0,0,.1); color:var(--grey); background:rgba(250,248,244,.9); z-index:2; }
   
   /* Actions au hover */
   .p-hover { position:absolute; bottom:0; left:0; right:0; display:flex; transform:translateY(100%); transition:transform .28s; z-index:3; }
   .p-card:hover .p-hover { transform:translateY(0); }
   .btn-add { flex:1; background:var(--black); color:var(--white); border:none; cursor:pointer; padding:13px; font-size:9px; letter-spacing:2px; text-transform:uppercase; font-weight:500; transition:background .2s; }
   .btn-add:hover { background:var(--gold); color:var(--black); }
   .btn-fav { background:var(--white); border:none; cursor:pointer; padding:12px 14px; transition:background .2s; }
   .btn-fav svg { width:15px; height:15px; stroke:var(--black); fill:none; stroke-width:1.5; display:block; }
   .btn-fav.liked svg { fill:var(--gold); stroke:var(--gold); }
   .btn-fav:hover { background:var(--off-white); }
   
   /* Infos produit */
   .p-info { padding:16px 16px 20px; border-top:1px solid var(--border-light); }
   .p-name { font-family:var(--font-display); font-size:14px; font-weight:300; color:var(--black); margin-bottom:4px; letter-spacing:.3px; }
   .p-desc { font-size:11px; color:var(--grey); margin-bottom:8px; line-height:1.6; font-style:italic; }
   .p-meta { display:flex; justify-content:space-between; align-items:center; }
   .p-color { font-size:10px; color:var(--grey); letter-spacing:.5px; }
   .p-price s { color:var(--red); font-size:26px; margin-right:4px; }
   .p-price .disc { color:var(--red); }
   .no-prods { grid-column:1/-1; text-align:center; padding:80px; color:var(--grey); font-family:var(--font-display); font-size:28px; font-weight:300; letter-spacing:2px; }
   
   /* Modal détail produit (galerie multi-images) */
   .pm-bg { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:var(--z-modal); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity var(--t); }
   .pm-bg.on { opacity:1; pointer-events:all; }
   .pm-box { background:var(--white); width:min(900px,96vw); max-height:90dvh; overflow-y:auto; display:grid; grid-template-columns:1fr 1fr; transform:scale(.97); transition:transform var(--t); }
   .pm-bg.on .pm-box { transform:scale(1); }
   .pm-gallery { position:relative; background:var(--off-white); }
   .pm-main-img { width:100%; aspect-ratio:1; object-fit:contain; padding:36px; }
   .pm-thumbs { display:flex; gap:6px; padding:12px; border-top:1px solid var(--border-light); overflow-x:auto; }
   .pm-thumb { width:64px; height:64px; object-fit:contain; background:var(--off-white); padding:4px; cursor:pointer; border:2px solid transparent; flex-shrink:0; transition:border-color .2s; }
   .pm-thumb.active,.pm-thumb:hover { border-color:var(--black); }
   .pm-info { padding:36px; display:flex; flex-direction:column; gap:18px; }
  .pm-close { 
    position: absolute; 
    top: 12px; 
    right: 12px; 
    background: none; 
    border: none; 
    cursor: pointer; 
    
    /* Style de base identique à .op-close */
    font-size: 22px; 
    color: var(--black); /* Noir pur au repos */
    display: flex; 
    align-items: center; 
    justify-content: center;
    
    z-index: 5; 
    width: 32px; 
    height: 32px; 
    /* On ajoute 'color' dans la transition pour que le passage au gris soit fluide */
    transition: transform .3s, opacity .2s, color .2s; 
}

.pm-close:hover { 
    background: none; 
    opacity: 0.7;             /* Légère transparence */
    color: #888888 !important;           /* Force le gris (ajuste selon ton goût) */
    transform: rotate(90deg); /* L'effet de rotation élégant */
}
   .pm-tag  { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); }
   .pm-name { font-family:var(--font-display); font-size:28px; font-weight:300; color:var(--black); letter-spacing:.5px; }
   .pm-desc { font-size:13px; line-height:1.8; color:var(--grey);  }
   .pm-price { font-family:var(--font-display); font-size:30px; font-weight:300; color:var(--gold); }
   .pm-price s { font-size:18px; color:var(--grey); margin-right:8px; }
   /* Sélecteur taille */
   .pm-sizes { display:flex; gap:8px; flex-wrap:wrap; }
   .size-btn { width:46px; height:46px; border:1px solid rgba(0,0,0,.12); background:transparent; color:var(--grey); font-size:11px; cursor:pointer; transition:all .2s; }
   .size-btn:hover,.size-btn.active { border-color:var(--black); color:var(--black); background:rgba(0,0,0,.04); }
   .size-btn.oos { opacity:.3; cursor:not-allowed; text-decoration:line-through; }
   
.pm-close {
  transition: background .2s, transform .2s, rotate .3s;
}

.pm-close:hover {
  color: var(--white);
  transform: rotate(90deg);
}
   
   

   /* ================================================================
      css/cart.css — Maison Lamarque
      ── Panier latéral (slide depuis la droite) ────────────────────
      ================================================================ */
   .cart-side {
  /* POSITIONNEMENT : Sous l'icône et non plus sur le côté */
  position: absolute;
  top: calc(100% + 14px); /* S'aligne parfaitement sous ton menu */
  right: 0;

  /* TAILLE : On garde tes dimensions exactes */
  width: min(480px, 100vw); 
  height: 600px; /* Une hauteur fixe généreuse pour le style Dropdown long */
  
  /* COULEURS : Blanc avec écritures noires */
  background: #ffffff;
  color: #000000;
  
  /* DESIGN & SURÉLÉVATION */
  z-index: 10000;
  border: 1px solid #eeeeee;
  box-shadow: 0 15px 40px rgba(0,0,0,0.15); /* Ombre portée vers le bas */

  /* AFFICHAGE */
  display: none;
  flex-direction: column;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* ÉTAT ACTIF */
.cart-side.on {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

/* SÉCURITÉ TEXTE : Force tout le contenu interne en noir */
#cartSide, #cartSide h3, #cartSide div, #cartSide span {
  color: #000000 !important;
}

/* LE BOUTON : Reste noir pour le contraste */
.cs-checkout {
  background: #000000 !important;
  color: #ffffff !important;
}
/* Dans ton style.css */
#payment-element {
    transition: all 0.5s ease;
    min-height: 300px; /* Évite que la page ne saute pendant le chargement */
}

.hidden {
    display: none;
}
   .cs-head { display:flex; justify-content:space-between; align-items:center; padding:26px 28px; border-bottom:1px solid var(--border-light); flex-shrink:0; background-color: #f7f4ef; }
   .cs-head h3 { font-family:var(--font-display); font-size:22px; font-weight:300; color:var(--black); letter-spacing:.5px; }
   #csCount { font-size:13px; color:var(--grey); font-family:var(--font-body); }
   .cs-close { background:none; border:none; cursor:pointer; font-size:20px; color:var(--grey); transition:color .2s; }
   .cs-close:hover { color:var(--black); }
   .cs-body { flex:1; overflow-y:auto; padding:20px 28px; background:#fff; }
   .cs-empty { text-align:center; padding:60px 20px; color:var(--grey); }
   .cs-empty .big { font-size:40px; display:block; margin-bottom:12px; }
   .cs-empty p { font-family:var(--font-display); font-size:22px; font-weight:300; }
   /* Bouton de quantité bloqué */
.q-btn:disabled {
    opacity: 0.2;
    cursor: not-allowed;
    filter: grayscale(1);
}
.qty-error-msg, 
.qty-error-msg * {
    color: red !important;
}
.qty-wrapper {
    min-width: 80px;
  
}

/* Force la couleur sur tout ce qui est dans le message d'erreur */
/* On ajoute #cartSide pour contrer la règle prioritaire */
#cartSide .qty-error-msg, 
#cartSide .qty-error-msg * {
    color: #df1b41 !important;
    border: 1px solid #df1b41 !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    margin-top: 5px !important;
    text-align: center !important;
    width: 100% !important;
    display: block !important;
}

@keyframes fadeInError {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
}

.q-btn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
/* Article épuisé dans le panier */
.ci.is-out {
    opacity: 0.5;
    filter: grayscale(0.5);
    pointer-events: none; /* Empêche toute modif sauf suppression */
}
.toast.error {
    border-left-color: var(--red);
    background: #FFF5F5;
    color: var(--black);
}
.ci.is-out .ci-rm {
    pointer-events: auto; /* Permet quand même de supprimer l'article */
    opacity: 1;
}

/* Texte rouge discret pour l'erreur */
.text-red {
    color: var(--red);
    font-weight: bold;
}

   /* Article */

   .ci { display:flex; gap:14px; margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--border-light); }
   .ci-thumb { width:78px; height:98px; flex-shrink:0; background:var(--off-white); overflow:hidden; }
   .ci-thumb img { width:100%; height:100%; object-fit:contain; padding:6px; }
   .ci-info { flex:1; }
   .ci-n { font-family:var(--font-display); font-size:16px; font-weight:300; color:var(--black); margin-bottom:2px; }
   .ci-detail { font-size:11px; color:var(--grey); margin-bottom:6px; }
   .size-select { background:var(--white); border:1px solid rgba(0,0,0,.1); color:var(--black); padding:5px 10px; font-size:11px; cursor:pointer; margin-bottom:8px; }
   .ci-bot { display:flex; justify-content:space-between; align-items:center; color: red; }
   .qty { display:flex; align-items:center; gap:10px; color: black; }
   .q-btn { background:none; border:1px solid rgba(0,0,0,.12); cursor:pointer; width:26px; height:26px; font-size:14px; color:var(--black); display:flex; align-items:center; justify-content:center; transition:all .2s; }
   .q-btn:hover { background:var(--black); color:var(--white); border-color:var(--black); }
   .ci-rm { background:none; border:none; cursor:pointer; font-size:16px; color:rgba(0,0,0,.2); transition:color .2s; margin-left:4px; }
   .ci-rm:hover { color:var(--red); }
   .ci-sub { font-size:14px; font-weight:400; color:var(--black); }

   /* Pied */
   .cs-foot { padding:20px 28px; border-top:1px solid var(--border-light); flex-shrink:0; background:var(--white); }
   .cs-lines { margin-bottom:10px; }
   .cs-line { display:flex; justify-content:space-between; font-size:12px; color:var(--grey); margin-bottom:5px; }
   .cs-line.shipping  { color:var(--gold); }
   .cs-line.free-ship { color:var(--green); }
   .cs-line.total { color:var(--black); font-weight:500; font-size:14px; padding-top:10px; border-top:1px solid var(--border-light); margin-top:8px; }
   .cs-line.total span:last-child { font-family:var(--font-display); font-size:22px; font-weight:300; }
   .tax-note { font-size:10px; color:var(--grey); margin-bottom:14px; letter-spacing:.3px; }
   .cs-checkout { width:100%; padding:15px; background:var(--black); color:var(--white); border:none; cursor:pointer; font-size:10px; letter-spacing:3px; text-transform:uppercase; font-weight:400; transition:background .2s; }
   .cs-checkout:hover { background:var(--gold); color:var(--black); }
   
   
    body { background: #f7f4ef; }
    .ck-wrap { max-width: 1100px; margin: 0 auto; padding: 40px 60px; }
    /* Indicateur d'étapes */
    .ck-steps { display:flex; align-items:center; justify-content:center; max-width:460px; margin:0 auto 2.5rem; }
    .ck-step  { display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; position:relative; }
    .ck-step-circle {
      width:34px; height:34px; border-radius:50%; border:1.5px solid rgba(0,0,0,.12);
      display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:500;
      color:var(--grey); background:var(--white); transition:all .3s; z-index:1; position:relative;
    }
    .ck-step.active .ck-step-circle { border-color:var(--black); color:var(--black); }
    .ck-step.done   .ck-step-circle { border-color:var(--green); background:var(--green); color:white; }
    .ck-step-label  { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--grey); }
    .ck-step.active .ck-step-label { color:var(--black); }
    .ck-step.done   .ck-step-label { color:var(--green); }
    .ck-step::before { content:''; position:absolute; top:16px; right:calc(-50% + 17px); width:calc(100% - 34px); height:1px; background:rgba(0,0,0,.08); z-index:0; }
    .ck-step:first-child::before { display:none; }
    .ck-step.done::before { background:var(--green); }
    /* Layout */
    .ck-grid { display:grid; grid-template-columns:1fr 380px; gap:32px; }
    .ck-form { background:var(--white); padding:32px; border:0.5px solid var(--border-light); }
    .ck-form h3 { font-family:var(--font-display); font-size:22px; font-weight:300; margin-bottom:22px; color:var(--black); }
    .ck-form .fg { margin-bottom:14px; }
    .ck-form label { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--grey); display:block; margin-bottom:6px; }
    .ck-form input, .ck-form select {
      width:100%; padding:11px 14px; border:1px solid rgba(0,0,0,.1);
      font-size:13px; background:var(--off-white); color:var(--black); transition:border-color .2s;
    }
    .ck-form input:focus, .ck-form select:focus { border-color:var(--black); outline:none; }
    .ck-addr-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    .ck-addr-grid .full { grid-column:1/-1; }
    /* Livraison */
    .ship-options { display:flex; flex-direction:column; gap:10px; margin:16px 0; }
    .ship-option  {
      display:flex; justify-content:space-between; align-items:center;
      padding:14px 18px; border:1px solid rgba(0,0,0,.1); cursor:pointer; transition:all .2s;
    }
    .ship-option.selected { border-color:var(--black); background:rgba(0,0,0,.02); }
    .ship-option input { width:auto; padding:0; margin-right:12px; accent-color:var(--black); background:transparent; }
    .ship-name  { font-size:13px; font-weight:500; color:var(--black); }
    .ship-delay { font-size:11px; color:var(--grey); margin-top:2px; }
    .ship-price { font-size:14px; font-weight:400; color:var(--black); }
    /* Paiement */
    .pay-method { border:1px solid rgba(0,0,0,.1); padding:14px 18px; margin-bottom:10px; cursor:pointer; transition:all .2s; }
    .pay-method:hover, .pay-method.selected { border-color:var(--black); background:rgba(0,0,0,.02); }
    .pay-method-header { display:flex; align-items:center; gap:12px; }
    .pay-method-label  { flex:1; font-size:13px; font-weight:400; color:var(--black); }
    .pay-method input  { width:auto; padding:0; accent-color:var(--black); background:transparent; }
    .pay-logos { display:flex; gap:6px; }
    .pay-logo  { font-size:9px; font-weight:700; padding:2px 7px; border:1px solid rgba(0,0,0,.12); color:var(--grey); }
    .pay-fields { margin-top:14px; padding-top:14px; border-top:1px solid var(--border-light); display:block; }
    /* Résumé */
    .ck-summary { background:var(--white); border:0.5px solid var(--border-light); padding:28px; position:sticky; top:calc(var(--nav-h) + 20px); align-self:start; }
    .ck-summary h3 { font-family:var(--font-display); font-size:20px; font-weight:300; margin-bottom:18px; color:var(--black); }
    .summary-line { display:flex; justify-content:space-between; font-size:12px; color:var(--grey); margin-bottom:6px; }
    .summary-line.promo { color:var(--green); }
    .summary-line.total { color:var(--black); font-weight:500; font-size:14px; padding-top:12px; border-top:1px solid var(--border-light); margin-top:10px; }
    .summary-line.total span:last-child { font-family:var(--font-display); font-size:22px; font-weight:300; }
    .promo-row { display:flex; gap:0; margin:14px 0; }
    .promo-input { flex:1; padding:10px 12px; border:1px solid rgba(0,0,0,.1); border-right:none; font-size:11px; background:var(--off-white); color:var(--black); }
    .promo-btn   { background:var(--black); color:var(--white); border:none; padding:10px 16px; font-size:10px; letter-spacing:2px; text-transform:uppercase; cursor:pointer; }
    /* Bouton de nav */
    .ck-nav-btn { width:100%; padding:14px; background:var(--black); color:var(--white); border:none; cursor:pointer; font-size:10px; letter-spacing:3px; text-transform:uppercase; font-weight:400; transition:background .2s; margin-bottom:8px; }
    .ck-nav-btn:hover { background:var(--gold); color:var(--black); }
    .ck-back-btn { width:100%; padding:12px; background:none; border:0.5px solid rgba(0,0,0,.1); cursor:pointer; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--grey); }
    /* Confirmation */
    .ck-confirm { text-align:center; padding:48px 32px; background:var(--white); border:0.5px solid var(--border-light); }
    .ck-confirm .icon { font-size:52px; margin-bottom:20px; }
    .ck-confirm h2 { font-family:var(--font-display); font-size:28px; font-weight:300; margin-bottom:10px; }
    .ck-confirm .order-ref { font-family:var(--font-display); font-size:20px; color:var(--gold); margin-bottom:12px; letter-spacing:2px; }
    .ck-confirm .order-total { font-family:var(--font-display); font-size:28px; font-weight:300; margin-bottom:16px; }
    .ck-confirm p { font-size:12px; color:var(--grey); line-height:1.7; margin-bottom:5px; }
    @media(max-width:1024px) { .ck-grid { grid-template-columns:1fr; } .ck-summary { position:static; } .ck-wrap { padding:28px; } }
    @media(max-width:600px)  { .ck-wrap { padding:18px; } .ck-addr-grid { grid-template-columns:1fr; } }
 

   /* ================================================================
   css/auth.css — Maison Lamarque
   ── Modals authentification + OTP ─────────────────────────────
   ================================================================ */
   .otp-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 20px 0;
  }
  
  .otp-input {
    width: 45px;
    height: 55px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    border: 1px solid #ddd;
    background: #f9f9f9;
  }
  
  .otp-input:focus {
    border-color: var(--gold);
    background: #fff;
    outline: none;
  }
  .modal-bg {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    display: flex; /* Toujours en flex pour centrer */
    align-items: center;
    justify-content: center;
    
    /* C'est ici que ça se joue : */
    opacity: 0;
    pointer-events: none; 
    transition: opacity 0.4s ease;
    backdrop-filter: blur(5px);
  }
.modal-x {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #888;
}

/* Quand on ajoute la classe .on en JS */
.modal-bg.on {
  opacity: 1;
  pointer-events: all;
}

.modal {
  background: white;
  padding: 40px;
  width: min(500px, 95vw);
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  transform: translateY(20px);
  transition: transform 0.4s ease;
}

.modal-bg.on .modal {
  transform: translateY(0);
}
/* --- Éléments de texte --- */
.modal h2 { 
  font-family: var(--font-display); 
  font-size: 26px; 
  font-weight: 300; 
  letter-spacing: 2px; 
  margin-bottom: 8px; 
  color: var(--black); 
  text-transform: uppercase;
}

.modal-subtitle { 
  font-size: 11px; 
  color: var(--grey); 
  margin-bottom: 24px; 
  letter-spacing: 0.5px;
}
.modal-err {
  color: #ff4d4d;
  font-size: 11px;
  text-align: center;
  margin-top: 12px; /* Donne de l'espace sous le bouton */
  min-height: 16px;
  font-weight: 500;
  display: block; /* S'assure qu'il prend toute la largeur */
}
/* Container de rupture */
.oos-container {
    width: 100%;
}

.pm-actions-row {
    display: flex;
    gap: 10px;
    align-items: center;
}button.btn-notify-luxe {
    appearance: none;
    -webkit-appearance: none;
    flex: 1;
    width: 100%;
    height: 54px;
    background: transparent !important;
    background-color: transparent !important;
    font-family: 'Jost', sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: color 0.25s ease, border-color 0.25s ease;
}

/* Le fond animé qui glisse en douceur au survol */
button.btn-notify-luxe::before {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

/* Le texte reste bien au-dessus du fond animé */
button.btn-notify-luxe .btn-text {
    position: relative;
    z-index: 2;
}

/* Au survol : le fond remonte, la bordure s'ajuste et le texte change de couleur */
button.btn-notify-luxe:hover {
    border-color: #c9a96e !important;
    color: #080808 !important;
}

button.btn-notify-luxe:hover::before {
    transform: translateY(0);
}

/* Confort tactile sur mobile */
@media (max-width: 768px) {
    button.btn-notify-luxe {
        height: 50px;
        font-size: 9px;
        letter-spacing: 0.18em;
    }
}

/* Message de stock discret */
.stock-status-msg {
    color: #b22222;
    font-size: 10px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

/* Animation d'entrée */
.luxe-fade-in {
    animation: slideUp 0.4s ease-out forwards;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* --- Champs de saisie (Form Groups) --- */
.fg { margin-bottom: 18px; position: relative; }
.fg label { 
  display: block; 
  font-size: 10px; 
  text-transform: uppercase; 
  letter-spacing: 1px; 
  margin-bottom: 6px; 
  color: var(--black);
}
.fg input { 
  width: 100%; 
  padding: 12px; 
  border: 1px solid rgba(0,0,0,0.1); 
  font-family: inherit; 
  font-size: 13px;
  transition: border-color 0.2s;
}
.fg input:focus { border-color: var(--gold); outline: none; }

/* --- GESTION DES ERREURS SOUS LES CHAMPS --- */
/* C'est ici que ton JS "setError" va écrire */
.modal-err-sub {
  color: #d93025; /* Rouge élégant */
  font-size: 9px;
  margin-top: 4px;
  min-height: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

/* --- Bouton principal & Spinner --- */
.modal-sub { 
  width:100%; padding:16px; background:var(--black); 
  color:var(--white); border:none; cursor:pointer; 
  font-size:10px; letter-spacing:3px; text-transform:uppercase; 
  transition: all 0.3s; margin-top:12px;
  display: flex; align-items: center; justify-content: center;
}

.modal-sub:hover { background:var(--gold); color:var(--black); }
.modal-sub:disabled { opacity:.6; cursor:not-allowed; }

.spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* --- Barre de force du mot de passe --- */
.pwd-strength { display: flex; gap: 4px; margin-top: 6px; }
.pwd-bar { height: 2px; flex: 1; background: #eee; transition: 0.3s; }
.pwd-bar.weak   { background: #ff4d4d; }
.pwd-bar.medium { background: #ffcc00; }
.pwd-bar.strong { background: #00cc66; }
.pwd-label { font-size: 9px; text-align: right; margin-top: 4px; text-transform: uppercase; color: var(--grey); }

/* --- Liens et switch --- */
.modal-sw { margin-top: 24px; text-align: center; font-size: 11px; color: var(--grey); border-top: 1px solid #f5f5f5; padding-top: 20px; }
.modal-sw a { color: var(--black); font-weight: 600; cursor: pointer; text-decoration: none; margin-left: 5px; }
.modal-sw a:hover { color: var(--gold);  text-decoration: underline; }
    input.invalid {
      border-bottom: 1px solid #ff4d4d !important;
    }
 .forgot-link {    text-align: right;      margin-top: 10px;margin-bottom: 20px; }
  
  .forgot-link a {   color: #1a1a1a; /* Noir pur pour l'écriture */
  font-size: 13px;      text-decoration: none;cursor: pointer;transition: opacity 0.2s;  font-weight: 500; }
  
  .forgot-link a:hover {
    color: var(--gold);
      text-decoration: underline;
      opacity: 0.7;
  }
   /* ================================================================
      css/profile.css — Maison Lamarque
      ── Page profil utilisateur ────────────────────────────────────
      ================================================================ */
   .profile-page { min-height:100vh; background:var(--off-white); }
   .profile-layout { display:grid; grid-template-columns:260px 1fr; min-height:calc(100vh - 72px); }
   /* Sidebar */
   .profile-sidebar { background:var(--white); border-right:1px solid var(--border-light); padding:32px 0; }
   .profile-avatar { text-align:center; padding:0 24px 24px; border-bottom:1px solid var(--border-light); }
   .avatar-circle { width:64px; height:64px; border-radius:50%; background:var(--black); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:22px; font-weight:300; color:var(--white); margin:0 auto 10px; }
   .avatar-name  { font-family:var(--font-display); font-size:18px; font-weight:300; color:var(--black); }
   .avatar-email { font-size:11px; color:var(--grey); margin-top:2px; }
   .avatar-badge { display:inline-block; font-size:9px; letter-spacing:2px; text-transform:uppercase; padding:3px 10px; margin-top:6px; border:1px solid rgba(0,0,0,.12); color:var(--grey); }
   .profile-nav  { margin-top:12px; }
   .pnav-item { display:flex; align-items:center; gap:12px; padding:12px 24px; font-size:12px; color:var(--grey); cursor:pointer; transition:all .2s; border:none; background:none; width:100%; text-align:left; letter-spacing:.5px; }
   .pnav-item:hover { background:var(--off-white); color:var(--black); }
   .pnav-item.active { color:var(--black); background:var(--off-white); border-left:2px solid var(--black); }
   .pnav-item svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.5; flex-shrink:0; }
   .pnav-sep { height:1px; background:var(--border-light); margin:8px 0; }
   /* Contenu principal */
   .profile-content { padding:40px 48px; }
   .profile-section { display:none; }
   .profile-section.active { display:block; }
   .profile-section-title { font-family:var(--font-display); font-size:28px; font-weight:300; margin-bottom:28px; color:var(--black); letter-spacing:.5px; }
   .fields-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
   .fields-grid .full { grid-column:1/-1; }
   /* Danger zone */
   .danger-zone { background:rgba(176,80,64,.04); border:1px solid rgba(176,80,64,.2); padding:24px; }
   .danger-zone h4 { color:var(--red); font-size:14px; margin-bottom:10px; }
   .danger-zone p  { font-size:12px; color:var(--grey); margin-bottom:16px; line-height:1.6; }
   /* L'overlay doit couvrir tout l'écran */
.profile-overlay-sub {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: none; /* Caché par défaut */
  align-items: center;
  justify-content: center;
  z-index: 9999; /* Au-dessus de tout */
  backdrop-filter: blur(5px);
}

/* Quand on ajoute la classe .on, on l'affiche */
.profile-overlay-sub.on {
  display: flex !important;
}

.modal-content-danger {
  background: white;
  padding: 30px;
  width: 90%;
  max-width: 400px;
  text-align: center;
  border-radius: 4px;
}
  
  .modal-content h3 { font-family: 'Playfair Display', serif; font-size: 24px; margin-bottom: 15px; color: #000; }
  .modal-content p { font-size: 14px; color: #666; line-height: 1.6; margin-bottom: 25px; }
  
  .modal-btns { display: flex; gap: 10px; }
  .modal-btns button { flex: 1; padding: 12px; cursor: pointer; border: none; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
  
  .btn-danger { background: red; color: #fff; transition: background .3s; }
  .btn-danger:hover { background: #cc0000; } /* Devient rouge au survol pour l'alerte */
   /* Toggle switch */
   .toggle { position:relative; width:44px; height:24px; }
   .toggle input { opacity:0; width:0; height:0; }
   .toggle-slider { position:absolute; inset:0; background:#ccc; border-radius:24px; cursor:pointer; transition:background .3s; }
   .toggle-slider::before { content:''; position:absolute; width:18px; height:18px; left:3px; top:3px; background:white; border-radius:50%; transition:transform .3s; }
   .toggle input:checked + .toggle-slider { background:var(--black); }
   .toggle input:checked + .toggle-slider::before { transform:translateX(20px); }
   .pref-row { display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid var(--border-light); }
   .pref-label { font-size:13px; color:var(--black); }
   .pref-hint  { font-size:11px; color:var(--grey); margin-top:3px; }
   /* Cartes de crédit */
   .cc-card { background:var(--off-white); border:1px solid var(--border-light); padding:16px 20px; display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
   .cc-brand { font-size:10px; letter-spacing:2px; color:var(--gold); text-transform:uppercase; }
   .cc-number { font-family:var(--font-display); font-size:18px; font-weight:300; color:var(--black); margin-top:4px; }
   .cc-exp { font-size:11px; color:var(--grey); }
   .cc-default-badge { font-size:9px; letter-spacing:2px; color:var(--green); padding:2px 8px; border:1px solid var(--green); text-transform:uppercase; }
   
   /* Panneau mes commandes */
  /* ── PANNEAU COMMANDES CONDENSÉ ── */
.orders-panel { position:fixed; top:0; left:-100%; width:min(480px,100vw); height:100dvh; background:var(--white); border-right:1px solid var(--border-light); z-index:3500; transition:left .5s cubic-bezier(0.19,1,0.22,1); display:flex; flex-direction:column; box-shadow:30px 0 60px rgba(0,0,0,0.05); }
.orders-panel.on { left:0; }
.op-head { display:flex; justify-content:space-between; align-items:center !important; padding:25px 30px; border-bottom:1px solid #f2f2f2; background-color: #f7f4ef; }
.op-head h3 {  font-size:18px; font-weight:600; color:var(--black); letter-spacing:3px; text-transform:uppercase; margin:0; }
.op-close { background:none; border:none; cursor:pointer; font-size:22px; color:var(--black); transition:transform .3s, opacity .2s; display:flex; align-items:center; }
.op-close:hover { opacity:0.5; transform:rotate(90deg); }
.op-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 30px;
    background: #fdfdfd;
    scrollbar-width: thin; /* Pour Firefox */
    scroll-behavior: smooth;
}

.order-card {
    
    margin: 20px 0 !important;
    background: white !important;
}

.order-card-header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f5f5f5;
  padding-bottom: 8px;
  margin-bottom: 10px;
}

.order-card-num {
  font-weight: 600;
  font-size: 13px;
  color: #000;
}

.order-card-date {
  font-size: 11px;
  color: #999;
}

.order-card-details {
  font-size: 12px;
  line-height: 1.5;
  color: #444;
}

.order-card-total {
  margin-top: 10px;
  text-align: right;
  font-weight: 600;
  color: #CEB05F; /* Ton doré Maison Lamarque */
}

/* ── CARTES & ÉLÉMENTS ── */
.order-card { background:var(--white); padding:22px; margin-bottom:18px; border:1px solid #eee; transition:all .3s ease; animation:opSlide .5s ease both; }
.order-card:hover { border-color:var(--black); transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,0.02); }
.order-card-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; }
.order-id { font-family:var(--font-display); font-size:14px; font-weight:600; color:var(--black); letter-spacing:1.5px; display:block; margin-bottom:3px; text-transform:uppercase; }
.order-date { font-size:10px; color:var(--grey); text-transform:uppercase; letter-spacing:1px; }
.order-status { font-size:9px; letter-spacing:2px; padding:4px 10px; text-transform:uppercase; font-weight:600; border:1px solid transparent; }
.s-confirmed { background:#f4f9f6; color:#27ae60; border-color:rgba(39,174,96,0.1); }
.order-items { font-size:12px; color:var(--grey); line-height:1.7; padding:12px 0; border-top:1px solid #f9f9f9; border-bottom:1px solid #f9f9f9; margin:12px 0; }
.order-items b { color:var(--black); font-weight:500; }
.order-total-line { display:flex; justify-content:space-between; align-items:baseline; margin-top:12px; }
.order-total-line .label { font-size:10px; letter-spacing:1.5px; color:var(--grey); text-transform:uppercase; }
.order-total-line .price { font-family:var(--font-display); font-size:18px; font-weight:400; color:var(--black); }
.no-orders { text-align:center; padding:60px 20px; color:var(--grey); text-transform:uppercase; letter-spacing:2px; font-size:13px; opacity:0.6; }

@keyframes opSlide { from { opacity:0; transform:translateX(-15px); } to { opacity:1; transform:translateX(0); } }
   
   /* ================================================================
      css/sections.css — Maison Lamarque
      ── Universe, Banner, Features, Instagram, Newsletter, Footer ──
      ================================================================ */
   
   /* Section Univers */
   .universe { padding:var(--pad-section); background:var(--off-white); position:relative; overflow:hidden; }
   .universe::before { content:''; position:absolute; top:0;left:0;right:0; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
   .univ-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
   .univ-h { font-family:var(--font-display); font-size:clamp(40px,5vw,68px); font-weight:300; line-height:.95; margin-bottom:24px; color:var(--black); }
   .univ-h em { font-style:italic; color:var(--gold); }
   .univ-p  { font-size:14px; line-height:2; color:var(--grey); font-weight:300; font-style:italic; margin-bottom:20px; }
   .univ-p2 { font-size:12px; line-height:1.9; color:var(--grey); font-weight:300; letter-spacing:.5px; }
   .univ-stats { display:flex; gap:40px; margin-top:36px; padding-top:36px; border-top:1px solid var(--border-light); flex-wrap:wrap; }
   .ustat-n { font-family:var(--font-display); font-size:36px; font-weight:300; color:var(--black); }
   .ustat-l { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--grey); margin-top:3px; }
   .univ-visual { position:relative; }
   .univ-quote { font-family:var(--font-display); font-size:clamp(36px,5vw,72px); font-style:italic; font-weight:300; color:rgba(0,0,0,.06); line-height:1.1; text-align:right; }
   .univ-badge { position:absolute; bottom:-50px; right:0; background:var(--black); color:var(--white); padding:16px 24px; font-size:11px; letter-spacing:3px; text-transform:uppercase; }
   
   /* Banner ADN */
   .banner { display:grid; grid-template-columns:1fr 1fr; min-height:500px; border-top:1px solid var(--border-light); border-bottom:1px solid var(--border-light); }
   .ban-left { padding:80px 60px; display:flex; flex-direction:column; justify-content:center; background:var(--black); }
   .ban-tag { font-size:10px; letter-spacing:5px; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
   .ban-h { font-family:var(--font-display); font-size:clamp(40px,5vw,72px); font-weight:300; color:var(--white); line-height:.93; margin-bottom:22px; }
   .ban-h em { font-style:italic; color:var(--gold); }
   .ban-p { font-size:13px; line-height:1.9; color:rgba(255,255,255,.45); font-weight:300; max-width:380px; margin-bottom:36px; font-style:italic; }
   .ban-stats { display:flex; gap:40px; flex-wrap:wrap; }
   .stat-n { font-family:var(--font-display); font-size:40px; font-weight:300; color:var(--white); }
   .stat-n em { font-style:italic; color:var(--gold); }
   .stat-l { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.35); margin-top:2px; }
   .ban-right { background:var(--off-white); display:flex; align-items:center; justify-content:center; overflow:hidden; }
   .ban-right img { width:100%; height:100%; object-fit:contain; padding:40px; }
   
   /* Features */
   .feats { display:grid; grid-template-columns:repeat(4,1fr); background:var(--white); border-top:1px solid var(--border-light); border-bottom:1px solid var(--border-light); }
   .feat { padding:44px 28px; text-align:center; border-right:1px solid var(--border-light); position:relative; overflow:hidden; transition:background .3s; }
   .feat:hover { background:var(--off-white); }
   .feat:last-child { border-right:none; }
   .feat-icon { font-size:26px; margin-bottom:14px; }
   .feat-name { font-family:var(--font-display); font-size:18px; font-weight:300; margin-bottom:8px; color:var(--black); }
   .feat-text { font-size:12px; color:var(--grey); line-height:1.7; font-weight:300; }
   
   /* Instagram */
   .insta-section { padding:80px 60px; background:var(--black); text-align:center; }
   .insta-h { font-family:var(--font-display); font-size:clamp(32px,4vw,52px); font-weight:300;  margin-bottom:20px; color:var(--white); }
   .insta-link { display:inline-flex; align-items:center; gap:10px; border:1px solid var(--border); padding:14px 28px; color:var(--gold); font-size:11px; letter-spacing:3px; text-transform:uppercase; font-weight:400; transition:all .3s; }
   .insta-link:hover { background:var(--gold); color:var(--black); border-color:var(--gold); }
   .insta-link svg { width:18px; height:18px; fill:currentColor; }
   
   /* Newsletter */
   .nl { padding:var(--pad-section); background:var(--off-white); display:flex; flex-direction:column; align-items:center; text-align:center; border-top:1px solid var(--border-light); }
   .nl-h { font-family:var(--font-display); font-size:clamp(36px,5vw,64px); font-weight:300; color:var(--black); margin-bottom:10px; }
   .nl-h em { font-style:italic; color:var(--gold); }
   .nl-p { font-size:13px; color:var(--grey); margin-bottom:34px; font-weight:300; font-style:italic; }
   .nl-row { display:flex; max-width:480px; width:100%; }
   .nl-in { flex:1; padding:14px 18px; border:1px solid rgba(0,0,0,.12); border-right:none; font-size:12px; background:var(--white); color:var(--black); transition:border-color .2s; }
   .nl-in:focus { border-color:var(--black); }
   .nl-in::placeholder { color:var(--grey); }
   .nl-sub { background:var(--black); color:var(--white); border:none; padding:14px 24px; font-size:9px; letter-spacing:2.5px; text-transform:uppercase; cursor:pointer; transition:background .2s; white-space:nowrap; font-weight:400; }
   .nl-sub:hover { background:var(--gold); color:var(--black); }
   .nl-msg { margin-top:12px; font-size:12px; min-height:18px; }
   
   /* Footer */
   footer { background:var(--black); padding:76px 60px 34px; color:rgba(255,255,255,.35); }
.ft-top {
    display: grid;
    grid-template-columns: 0.5fr 0.3fr 0.3fr 0.3fr 0.3fr;
    gap: 18px; /* Espace horizontal entre colonnes */
    row-gap: 30px; /* Espace vertical si vous passez sur mobile */
    margin-bottom: 52px;
}   .ft-logo { font-family:var(--font-display); font-size:20px; font-weight:300; letter-spacing:5px; text-transform:uppercase; color:var(--white); }
   .ft-brand p { margin-top:14px; font-size:12px; line-height:1.8; font-weight:300; max-width:240px; font-style:italic; color:rgba(255,255,255,.4); }
   .ft-ttl { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:18px; font-weight:400; }
.ft-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ft-col li {
    margin-bottom: 4px; /* Très réduit pour compacter la liste */
}
   .ft-col a { color:rgba(255,255,255,.28); font-size:12px; font-weight:300; transition:color .2s; }
   .ft-col a:hover { color:var(--gold); }
   .ft-bot { border-top:1px solid var(--border-dim); padding-top:20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:4px; }
   .ft-bot p { font-size:11px; }
   .ft-social { display:flex; gap:16px; align-items:center; }
   .ft-social a { color:rgba(255,255,255,.25); font-size:11px; letter-spacing:1px; transition:color .2s; display:flex; align-items:center; gap:6px; }
   .ft-social a:hover { color:var(--gold); }
   .ft-social svg { fill:currentColor; }
   
   
   /* ================================================================
      css/responsive.css — Maison Lamarque
      ── Media queries tablette (≤1024px) + mobile (≤600px) ─────────
      ================================================================ */
   @media(max-width:1024px){
     .lang-bar,nav,.breadcrumb{padding-left:28px;padding-right:28px}
.nav-links {
    flex: 1;
    display: flex;
    gap: 15px;
    min-width: 0; /* Important pour permettre aux liens de rester alignés */
}     
     .hero{grid-template-columns:1fr;min-height:auto} .hero-left{padding:52px 28px 48px} .hero-right{height:380px}
     .universe,.prods,.nl,.insta-section{padding-left:28px;padding-right:28px}
     .universe{padding-top:60px;padding-bottom:60px}
     footer{padding:60px 28px 28px}
     .prod-grid{grid-template-columns:repeat(3,1fr);gap:18px}
     .banner{grid-template-columns:1fr} .ban-right{height:300px}
     .univ-grid{grid-template-columns:1fr;gap:40px}
     .feats{grid-template-columns:1fr 1fr}
     .feat:nth-child(2){border-right:none}
     .feat:nth-child(3){border-right:1px solid var(--border-light)}
     .feat:nth-child(3),.feat:nth-child(4){border-top:1px solid var(--border-light)}
     .ft-top{grid-template-columns:1fr 1fr 1fr 1fr 1fr}
     .profile-layout{grid-template-columns:1fr} .profile-sidebar{display:none}
     .checkout-grid{grid-template-columns:1fr} .order-summary{position:static}
     .checkout-page{padding:28px}
     .pm-box{grid-template-columns:1fr}
     .search-bar,.search-result-item,.search-empty{padding-left:28px;padding-right:28px}
   }
   @media(max-width:600px){
     .lang-bar{padding:7px 16px} .ann{font-size:9px;letter-spacing:1px;padding:8px}
     nav{padding:0 16px;height:62px} .logo{font-size:16px;letter-spacing:3px}
     .hero-left{padding:36px 18px 40px} .hero-right{height:280px} .hero-btns{gap:10px}
     .prods{padding:52px 18px}
     .s-head{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:28px}
     .prod-grid{grid-template-columns:1fr 1fr;gap:12px}
     .filter-row{flex-direction:column;align-items:flex-start}
     .filter-btns{gap:4px} .f-btn{padding:6px 10px;font-size:9px}
     .banner{padding:52px 18px;min-height:auto} .ban-left{padding:52px 18px}
     .universe{padding:52px 18px}
     .feats{grid-template-columns:1fr}
     .feat{border-right:none!important;border-top:1px solid var(--border-light)} .feat:first-child{border-top:none}
     .nl{padding:52px 18px} .nl-row{flex-direction:column}
     .nl-in{border-right:1px solid rgba(0,0,0,.12);border-bottom:none} .nl-sub{padding:13px;text-align:center}
     .ft-top{grid-template-columns:1fr 1fr;gap:28px} footer{padding:44px 18px 22px}
     .ft-bot{flex-direction:column;text-align:center}
     .insta-section{padding:50px 2px}
     .user-dropdown{right:auto;left:-40px}
     .profile-content{padding:24px 18px}
     .fields-grid,.address-grid{grid-template-columns:1fr}
     .breadcrumb{padding:10px 18px}
     .checkout-page{padding:20px 18px}
   }
   
   
   /* ================================================================
      AJOUTS v2 — Quantité panier, Profil overlay, Checkout, Dropdown
      ================================================================ */
   
   /* ── Badge quantité sur miniature du panier ─────────────────── */
   .ci-thumb { position: relative; }
   .ci-qty-badge {
     position: absolute; top: -6px; right: -6px;
     background: var(--black); color: var(--white);
     border-radius: 50%; width: 18px; height: 18px;
     font-size: 10px; font-weight: 600;
     display: flex; align-items: center; justify-content: center;
     border: 1.5px solid var(--white);
   }
   /* Quantité bien visible entre les boutons +/- */
   .qty-num {
     font-size: 14px; font-weight: 500;
     min-width: 24px; text-align: center;
     color: var(--black);
   }
   
   /* ── Dropdown profil — clic uniquement (plus de hover) ──────── */
   /* On supprime tout comportement hover, seul .open affiche */
   .user-dropdown {
     transition: opacity .15s, transform .15s;
   }
   /* Masqué par défaut même si display:block est mis par le JS */
   .user-dropdown:not(.open) {
     opacity: 0 !important;
     pointer-events: none !important;
     transform: translateY(-8px) !important;
   }
   .user-dropdown.open {
     opacity: 1 !important;
     pointer-events: all !important;
     transform: translateY(0) !important;
   }
   
   /* ── Profil overlay (plein écran réactif) ───────────────────── */
   .profile-overlay {
     position: fixed; inset: 0;
     background: rgba(0,0,0,.5);
     display: flex; align-items: flex-start; justify-content: flex-end;
     opacity: 0; pointer-events: none;
     transition: opacity var(--t);
   }
   .profile-overlay.on { opacity: 1; pointer-events: all; }
   
   .profile-panel {
     background: var(--white);
     width: min(560px, 100vw);
     height: 100dvh;
     display: flex; flex-direction: column;
     transform: translateX(100%);
     transition: transform .38s var(--ease);
     overflow: hidden;
   }
   .profile-overlay.on .profile-panel { transform: translateX(0); }
   
   /* Header du profil */
   .pp-head {
     display: flex; justify-content: space-between; align-items: center;
     padding: 22px 28px; border-bottom: 1px solid var(--border-light);
     flex-shrink: 0; background: var(--white);
   }
   .pp-title    { font-family: var(--font-display); font-size: 22px; font-weight: 300; letter-spacing: 1px; color: var(--black); }
   .pp-subtitle { font-size: 11px; color: var(--grey); margin-top: 3px; }
   .pp-close    { background: none; border: none; cursor: pointer; font-size: 22px; color: var(--grey); transition: color .2s; }
   .pp-close:hover { color: var(--black); }
   
   /* Tabs horizontaux (responsive) */
   .pp-tabs {
     display: flex; overflow-x: auto; flex-shrink: 0;
     border-bottom: 1px solid var(--border-light);
     background: var(--off-white);
     scrollbar-width: none;
   }
   .pp-tabs::-webkit-scrollbar { display: none; }
   .pp-tab {
     display: flex; flex-direction: column; align-items: center; gap: 4px;
     padding: 12px 18px; min-width: 72px;
     font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
     color: var(--grey); background: none; border: none; cursor: pointer;
     border-bottom: 2px solid transparent; transition: all .2s; white-space: nowrap;
   }
   .pp-tab svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; }
   .pp-tab:hover { color: var(--black); }
   .pp-tab.active { color: var(--black); border-bottom-color: var(--black); background: var(--white); }
   .pp-tab-danger:hover { color: var(--red); }
   .pp-tab-danger.active { color: var(--red); border-bottom-color: var(--red); }
   
   /* Contenu scrollable */
   .pp-content { flex: 1; overflow-y: auto; padding: 24px 28px; background: var(--off-white); }
   
   /* Titres de section */
   .pp-section-title {
     font-family: var(--font-display); font-size: 20px; font-weight: 300;
     color: var(--black); margin-bottom: 20px; letter-spacing: .5px;
   }
   
   /* Formulaire profil */
   .pp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
   .pp-field { display: flex; flex-direction: column; gap: 6px; }
   .pp-field label { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--grey); }
   .pp-field input, .pp-field select {
     padding: 10px 12px; border: 1px solid rgba(0,0,0,.1);
     font-size: 13px; background: var(--white); color: var(--black);
     transition: border-color .2s;
   }
   .pp-field input:focus { border-color: var(--black); outline: none; }
   .pp-field-full { grid-column: 1 / -1; }
   .pp-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
   
   /* État vide */
   .pp-empty {
     text-align: center; padding: 60px 20px; color: var(--grey);
   }
   .pp-empty span { font-size: 40px; display: block; margin-bottom: 12px; }
   .pp-empty p { font-family: var(--font-display); font-size: 20px; font-weight: 300; }
   
   /* Loading */
   .pp-loading { text-align: center; padding: 40px; color: var(--grey); font-size: 13px; font-style: italic; }
   
   /* Onglets commandes par catégorie */
   .pp-order-tabs {
     display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap;
   }
   .pp-order-tab {
     padding: 6px 16px; font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
     border: 1px solid rgba(0,0,0,.1); background: transparent;
     cursor: pointer; color: var(--grey); transition: all .2s; border-radius: 2px;
   }
   .pp-order-tab:hover  { border-color: var(--black); color: var(--black); }
   .pp-order-tab.active { background: var(--black); color: var(--white); border-color: var(--black); }
   
   /* Cartes commandes dans le profil */
   .pp-order-card {
     background: #f7f4ef; padding: 16px; margin-bottom: 10px;
     border: 1px solid var(--border-light); border-radius: var(--border-radius-md);
   }
   .pp-order-head  { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-wrap: wrap; gap: 6px; }
   .pp-order-id    { font-family: var(--font-display); font-size: 15px; font-weight: 300; color: var(--black); }
   .pp-order-date  { font-size: 11px; color: var(--grey); }
   .pp-order-status{ font-size: 9px; letter-spacing: 2px; padding: 3px 8px; text-transform: uppercase; background: rgba(39,174,96,.1); color: var(--green); }
   .pp-order-items { font-size: 12px; color: var(--grey); line-height: 1.7; }
   .pp-order-total { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-light); font-size: 13px; }
   
   /* Favoris dans le profil */
   .pp-wish-grid { display: flex; flex-direction: column; gap: 0; }
   .pp-wish-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border-light); }
   .pp-wish-item img { width: 68px; height: 84px; object-fit: contain; background: var(--off-white); padding: 4px; flex-shrink: 0; }
   .pp-wish-info { flex: 1; }
   .pp-wish-name  { font-family: var(--font-display); font-size: 16px; font-weight: 300; color: var(--black); }
   .pp-wish-color { font-size: 11px; color: var(--grey); margin-top: 2px; }
   .pp-wish-price { font-size: 14px; color: var(--black); margin-top: 6px; }
   .pp-wish-btns  { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
   
   /* Préférences */
   .pp-pref-list { display: flex; flex-direction: column; }
   .pp-pref-row  { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border-light); }
   .pp-pref-label{ font-size: 13px; color: var(--black); font-weight: 400; }
   .pp-pref-hint { font-size: 11px; color: var(--grey); margin-top: 3px; }
   
   /* Sécurité */
   .pp-security-card { background: var(--white); border: 1px solid var(--border-light); margin-bottom: 20px; }
   .pp-security-item { display: flex; align-items: center; gap: 14px; padding: 16px; border-bottom: 1px solid var(--border-light); }
   .pp-security-item:last-child { border-bottom: none; }
   .pp-security-item svg { stroke: var(--grey); fill: none; stroke-width: 1.5; flex-shrink: 0; }
   .pp-security-item > div { flex: 1; }
   .pp-danger-zone { background: rgba(176,80,64,.04); border: 1px solid rgba(176,80,64,.2); padding: 20px; }
   .pp-danger-title { color: var(--red); font-size: 14px; font-weight: 500; margin-bottom: 8px; }
   .pp-danger-zone p { font-size: 12px; color: var(--grey); margin-bottom: 14px; line-height: 1.6; }
   .pp-danger-btns { display: flex; gap: 10px; flex-wrap: wrap; }
   
   /* ── Page Checkout — méthodes de paiement ───────────────────── */
   .pay-method {
     border: 1px solid rgba(0,0,0,.1); padding: 14px 18px;
     margin-bottom: 10px; cursor: pointer; transition: all .2s;
     border-radius: var(--border-radius-md);
   }
   .pay-method:hover, .pay-method.selected { border-color: var(--black); background: rgba(0,0,0,.02); }
   .pay-method-header { display: flex; align-items: center; gap: 12px; }
   .pay-method-label  { flex: 1; font-size: 13px; font-weight: 400; color: var(--black); }
   .pay-method-logos  { display: flex; gap: 6px; }
   .pay-logo {
     font-size: 9px; font-weight: 700; padding: 2px 7px;
     border: 1px solid rgba(0,0,0,.12); color: var(--grey); border-radius: 3px;
   }
   .pay-fields { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-light); }
   
   /* ── Responsive overlay profil ──────────────────────────────── */
   @media (max-width: 600px) {
     .profile-panel { width: 100vw; }
     .pp-content    { padding: 18px; }
     .pp-head       { padding: 18px; }
     .pp-form-grid  { grid-template-columns: 1fr; }
     .pp-tab        { padding: 10px 14px; font-size: 9px; min-width: 60px; }
     .pp-tab svg    { width: 14px; height: 14px; }
   }
   .nl-p { font-size:13px; color:var(--grey); margin-bottom:34px; font-weight:300; max-width:450px; line-height:1.8; }
   .nl-form { width:min(500px, 90vw); display:flex; gap:0; position:relative; }
   .nl-input { flex:1; padding:16px 24px; border:1px solid rgba(0,0,0,.1); border-right:none; font-size:13px; background:var(--white); outline:none; transition:border-color .3s; }
   .nl-input:focus { border-color:var(--black); }
   .nl-btn { background:var(--black); color:var(--white); border:none; padding:0 30px; font-size:10px; letter-spacing:3px; text-transform:uppercase; cursor:pointer; transition:all .3s; }
   .nl-btn:hover { background:var(--gold); color:var(--black); }
   .nl-status { margin-top:14px; font-size:11px; min-height:16px; transition:opacity .3s; }
   .nl-status.ok { color:var(--green); }
   .nl-status.err { color:var(--red); }

   /* ================================================================
      FOOTER — Maison Lamarque
      ================================================================ */
   .footer { background:var(--white); border-top:1px solid var(--border-light); padding:80px 60px 40px; }
   .f-grid { display:grid; grid-template-columns:1.5fr repeat(3, 1fr); gap:60px; margin-bottom:80px; }
   
   /* Colonne Marque */
   .f-brand .f-logo { font-family:var(--font-display); font-size:28px; letter-spacing:4px; text-transform:uppercase; color:var(--black); margin-bottom:20px; display:block; }
   .f-brand p { font-size:12px; line-height:2; color:var(--grey); max-width:260px; font-style:italic; }
   
   /* Colonne Titres & Liens */
   .f-col h4 { font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--black); margin-bottom:24px; font-weight:600; }
   .f-links { display:flex; flex-direction:column; gap:12px; }
   .f-link { font-size:12px; color:var(--grey); text-decoration:none; transition:all .2s; width:fit-content; }
   .f-link:hover { color:var(--gold); transform:translateX(5px); }
   
   /* Bas du footer */
   .f-bot { padding-top:40px; border-top:1px solid var(--border-light); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; }
   .f-copy { font-size:11px; color:var(--grey); letter-spacing:1px; }
   .f-legal { display:flex; gap:24px; }
   .f-legal a { font-size:10px; color:var(--grey); text-transform:uppercase; letter-spacing:1px; text-decoration:none; }
   .f-legal a:hover { color:var(--black); }

   .f-payments { display:flex; gap:12px; align-items:center; opacity:.6; filter:grayscale(1); transition:opacity .3s; }
   .f-payments:hover { opacity:1; filter:grayscale(0); }
   .f-payments svg { height:18px; width:auto; }

   /* Responsive Tablettes & Mobiles */
   @media (max-width: 1024px) {
     .f-grid { grid-template-columns:1fr 1fr; gap:40px; }
     .nl-h { font-size:42px; }
   }

   @media (max-width: 768px) {
     .footer { padding:60px 30px 30px; }
     .f-grid { grid-template-columns:1fr; gap:40px; text-align:center; }
     .f-brand p { margin:0 auto; }
     .f-links { align-items:center; }
     .f-link:hover { transform:none; }
     .f-bot { flex-direction:column; text-align:center; }
     .f-legal { justify-content:center; }
   }
   /* suite de .nl-p */
   .nl-p { font-size:13px; color:var(--grey); margin-bottom:32px; max-width:500px; font-weight:300; line-height:1.8; }
   .nl-form { display:flex; width:100%; max-width:480px; position:relative; }
   .nl-input { flex:1; padding:18px 24px; border:1px solid rgba(0,0,0,.1); background:var(--white); font-size:12px; color:var(--black); outline:none; transition:border-color .3s; }
   .nl-input:focus { border-color:var(--black); }
   .nl-btn { background:var(--black); color:var(--white); border:none; padding:0 30px; font-size:10px; letter-spacing:3px; text-transform:uppercase; cursor:pointer; transition:all .3s; }
   .nl-btn:hover { background:var(--gold); color:var(--black); }
   .nl-msg { margin-top:16px; font-size:11px; min-height:16px; transition:opacity .3s; }

   /* ================================================================
      FOOTER — Maison Lamarque
      ================================================================ */
   .footer { background:var(--white); border-top:1px solid var(--border-light); padding:80px 60px 40px; }
   .f-grid { display:grid; grid-template-columns:1.5fr repeat(3, 1fr); gap:60px; margin-bottom:80px; }
   
   .f-logo { font-family:var(--font-display); font-size:26px; font-weight:300; letter-spacing:4px; color:var(--black); margin-bottom:20px; }
   .f-about { font-size:12px; line-height:2; color:var(--grey); max-width:280px; font-style:italic; }
   
   .f-col h4 { font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--black); margin-bottom:24px; font-weight:500; }
   .f-links { display:flex; flex-direction:column; gap:12px; }
   .f-link { font-size:12px; color:var(--grey); text-decoration:none; transition:color .2s, transform .2s; display:inline-block; width:fit-content; }
   .f-link:hover { color:var(--gold); transform:translateX(5px); }
   
   .f-bottom { border-top:1px solid var(--border-light); padding-top:40px; display:flex; justify-content:space-between; align-items:center; }
   .f-copy { font-size:10px; letter-spacing:1px; color:rgba(0,0,0,.3); text-transform:uppercase; }
   .f-socials { display:flex; gap:20px; }
   .f-social { color:var(--black); transition:color .2s; }
   .f-social:hover { color:var(--gold); }
   .f-social svg { width:18px; height:18px; fill:currentColor; }

   /* ================================================================
      RESPONSIVE — Media Queries
      ================================================================ */
   
   /* Tablettes (992px) */
   @media (max-width: 992px) {
     .hero { grid-template-columns: 1fr; }
     .hero-right { min-height: 500px; }
     .prod-grid { grid-template-columns: repeat(3, 1fr); }
     .univ-grid, .banner { grid-template-columns: 1fr; }
     .feats { grid-template-columns: repeat(2, 1fr); }
     .f-grid { grid-template-columns: 1fr 1fr; }
     .pm-box { grid-template-columns: 1fr; }
     .profile-layout { grid-template-columns: 1fr; }
   }

   /* Mobiles (768px) */
   @media (max-width: 768px) {
     .hero-left { padding: 60px 30px; }
     .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
     .s-head { flex-direction: column; align-items: flex-start; gap: 15px; }
     .checkout-grid { grid-template-columns: 1fr; }
     .f-grid { grid-template-columns: 1fr; gap: 40px; }
     .f-bottom { flex-direction: column; gap: 20px; text-align: center; }
     .feats { grid-template-columns: 1fr; }
     .feat { border-right: none; border-bottom: 1px solid var(--border-light); }
   }

   /* Très petits mobiles (480px) */
   @media (max-width: 480px) {
     .hero-h1 { font-size: 40px; }
     .prod-grid { grid-template-columns: 1fr; }
     .pnav-item span { display: none; } /* On ne garde que les icônes dans le profil mobile */
   }
/* =========================
   PRODUITS — DESKTOP (inchangé)
========================= */

.prod-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr); /* ou ton ancien nombre */
  gap:20px;
}

/* =========================
   MOBILE / TABLETTE : 2 COLONNES
========================= */

@media (max-width: 768px){
  .prod-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:15px;
  }

  .prod-grid > *{
    min-width:0;
  }
}

/* très petits mobiles optionnel */
@media (max-width: 480px){
  .prod-grid{
    grid-template-columns:repeat(2, 1fr); /* ou 1 si tu veux */
  }
}

.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 999;
}
/* --- CONTENEUR PRINCIPAL --- */
.header-container {
    position: relative; /* Nécessaire pour le positionnement des enfants */
    width: 100%;
    min-height: 300px; /* Ajuste la hauteur selon tes besoins */
    display: flex;
    align-items: center; /* Centre le contenu verticalement */
    justify-content: center; /* Centre le contenu horizontalement */
    overflow: hidden; /* Empêche le flou de dépasser */
    border-radius: 8px; /* Optionnel : arrondit les coins du bloc complet */
}

/* --- LE CONTENEUR PRINCIPAL --- */
/* --- LE CONTENEUR (SUCCESS BOX) --- */
.success-box {
    position: relative; /* INDISPENSABLE pour que le logo reste dans la boîte */
    max-width: 550px;
    margin: 80px auto;
    padding: 80px 40px;
    background: #fff;
    border: 1px solid #eee;
    text-align: center;
    overflow: hidden; /* Pour que le logo ne dépasse pas des bords */
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
}

/* --- L'IMAGE EN FILIGRANE (BACKGROUND) --- */
.success-box img {
    /* 1. Positionnement "derrière" */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centre parfaitement */
    z-index: 0; /* Place l'image au niveau le plus bas */
    
    /* 2. Formatage comme l'impression */
    width: 70%;       /* Prend 70% de la largeur de la boîte */
    height: auto;
    opacity: 0.06;    /* Très léger (6%) pour ne pas gêner la lecture */
    pointer-events: none; /* Pour que le logo ne bloque pas les clics sur le bouton */
    
    /* 3. Effet visuel */
    filter: grayscale(100%); /* Optionnel : pour un look noir et blanc classe */
}

/* --- LE TEXTE (DOIT PASSER DEVANT) --- */
/* On s'assure que tout le contenu textuel a un z-index plus haut que l'image */
.checkmark, h1, p, #order-ref, .btn {
    position: relative;
    z-index: 1; /* Passe devant le logo (z-index: 0) */
}

/* --- AJUSTEMENTS DE TEXTE --- */
.checkmark { font-size: 55px; color: #d4af37; margin-bottom: 20px; }
h1 { font-size: 22px; text-transform: uppercase; letter-spacing: 4px; margin-bottom: 30px; }
p { font-size: 15px; color: #444; margin-bottom: 40px; font-weight: 500; }

#order-ref {
    display: inline-block;
    padding: 15px 25px;
    background: rgba(255, 255, 255, 0.7); /* Fond blanc semi-transparent pour lire la ref sans souci */
    border: 1px dashed #ccc;
    font-weight: bold;
    margin-bottom: 40px;
}

/*
-------------
messsage d'annonce 
--------------------*/
.announcement-bar {
    background-color: #f8f8f8; /* Un gris très clair pour changer du noir habituel */
    color: #000000;
    text-align: center;
    padding: 8px 10px; /* Plus d'espace sur les côtés pour le bouton X */
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
    width: 100%;
    z-index: 110;
}

.announcement-bar p {
    margin: 0;
    line-height: 1.4;
}

.promo-close {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
    color: #888;
    transition: color 0.3s;
}

.promo-close:hover {
    color: #000;
}

/* Sur mobile, on s'assure que le texte ne se chevauche pas */
@media (max-width: 600px) {
    .announcement-bar {
        font-size: 9px;
        padding: 10px 30px;
    }
}



/* Style minimaliste pour le sélecteur */
.currency-nav {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-right: 20px;
  font-family: 'Montserrat', sans-serif; /* Ou votre police */
  font-size: 11px;
  letter-spacing: 1px;
}



.sep {
  color: #eee;
  font-weight: 100;
}
.btn-remove-fav {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--grey);
    font-size: 16px;
    width: 32px;  /* On fixe une largeur/hauteur égale pour un cercle parfait */
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
}

.btn-remove-fav:hover {
    color: #b22222; /* Rouge Maison Lamarque */
    transform: rotate(90deg); /* Rotation circulaire */
    background-color: rgba(0, 0, 0, 0.05); /* Fond circulaire léger */
}
.notify-form-luxe {
    flex: 1;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #111;
    margin-right: 10px;
}

.luxe-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 0;
    font-size: 12px;
    outline: none;
    font-family: inherit;
}

.btn-notify-send {
    border: none;
    cursor: pointer;
    padding: 5px;
    transition: transform 0.3s;
}

.btn-notify-send:hover {
    transform: translateX(3px);
}
.eye-toggle:hover {
    color: #c5a059 !important; /* Ton doré */
    transition: color 0.2s ease;
}
/* Correctifs intl-tel-input dans la modal */
.iti {
  width: 100%;
  display: block;
}
.iti__flag-container {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  padding: 4px;
  color: black
}
.iti__selected-flag {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  height: 100%;
  cursor: pointer;
  border-right: 1px solid rgba(0,0,0,.1);
}
#rPhone {
  width: 100%;
  padding-left: 90px; /* laisse la place au sélecteur de pays */
}


.announcement-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px; /* Ajuste selon la hauteur réelle de ta barre */
  z-index: 1100; /* Plus haut que le nav (qui est à 1000) */
  background: #000; /* Assure-toi qu'elle a un fond opaque */
  display: flex;
  align-items: center;
}

.ann-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

.ann-content-wrapper {
  display: flex;
  justify-content: center; /* Tout au centre */
  align-items: center;
  gap: 30px; /* Espace entre le message et la devise */
}

.ann-message {
  display: flex;
  align-items: center;
  color: rgba(255,255,255,0.7); /* Texte secondaire légèrement grisé */
}

.ann-message strong {
  color: #fff;
  font-weight: 600;
  margin-right: 4px;
}

/* Séparateur élégant (petit point vertical) */
.ann-sep {
  display: inline-block;
  width: 1px;
  height: 10px;
  background: #333;
  margin: 0 15px;
}

.ann-currency {
  display: flex;
  align-items: center;
  gap: 5px;
  border-left: 1px solid #333; /* Sépare physiquement la devise du texte */
  padding-left: 30px;
}

.btn-curr {
  background: none !important;
  border: none !important;
  border-bottom: 1px solid transparent !important; /* Réserve l'espace pour éviter les sauts */
  color: #888 !important;
  cursor: pointer;
  font-size: 10px !important;
  font-family: inherit !important;
  text-transform: uppercase;
  padding: 2px 5px !important;
  display: inline-block !important;
  transition: all 0.3s ease;
}

.btn-curr:hover {
  color: #ffffff !important;
}

/* Style forcé pour la devise active (Doré + Soulignement) */
.btn-curr.active {
  color: #C8A050 !important;
  font-weight: 700 !important;
  border-bottom: 1px solid #C8A050 !important;
}

.sep { color: #222; }

/* Mobile : on empile proprement */
@media (max-width: 950px) {
  .ann-content-wrapper {
    flex-direction: column;
    gap: 10px;
  }
  .ann-sep { display: none; } /* On cache les barres verticales sur mobile */
  .ann-message {
    flex-direction: column;
    gap: 5px;
  }
  .ann-currency {
    border-left: none;
    padding-left: 0;
  }
}
/* ── FIX PROFIL OVERLAY ── */
.profile-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.55) !important;
  z-index: 99999 !important;
  display: flex !important;
  justify-content: flex-end !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .3s ease !important;
}

.profile-overlay.on {
  opacity: 1 !important;
  pointer-events: all !important;
}

.profile-panel {
  width: min(460px, 100vw) !important;
  height: 100dvh !important;
  background: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  transform: translateX(100%) !important;
  transition: transform .38s cubic-bezier(.22,1,.36,1) !important;
  z-index: 1 !important;
  position: relative !important;
}

.profile-overlay.on .profile-panel {
  transform: translateX(0) !important;
}

/* La barre de chargement en haut de l'écran */
#page-loader-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%; /* Commence à 0 */
    height: 3px;
    background: var(--gold); /* Ta variable dorée */
    z-index: 9999;
    transition: width 0.4s ease;
    box-shadow: 0 0 10px var(--gold);
}
#nprogress .bar {
    background: var(--gold) !important;
    height: 3px !important;
}
#nprogress .peg {
    box-shadow: 0 0 10px var(--gold), 0 0 5px var(--gold) !important;
}
/* Make clicks pass-through */
#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: #29d;

  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;
}

/* Fancy blur effect */
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  opacity: 1.0;

  -webkit-transform: rotate(3deg) translate(0px, -4px);
      -ms-transform: rotate(3deg) translate(0px, -4px);
          transform: rotate(3deg) translate(0px, -4px);
}

/* Remove these to get rid of the spinner */
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}

#nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;

  border: solid 2px transparent;
  border-top-color: #29d;
  border-left-color: #29d;
  border-radius: 50%;

  -webkit-animation: nprogress-spinner 400ms linear infinite;
          animation: nprogress-spinner 400ms linear infinite;
}

.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute;
}

@-webkit-keyframes nprogress-spinner {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.pm-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
    padding: 15px 0;
    border-top: 1px solid var(--bord);
    border-bottom: 1px solid var(--bord);
}
.detail-label {
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    color: var(--gris);
    letter-spacing: 0.15em;
    margin-bottom: 4px;
}
.detail-val {
    font-size: 13px;
    font-weight: 300;
}
.btn-size-guide {
    background: none;
    border: none;
    text-decoration: underline;
    font-size: 11px;
    color: var(--gris);
    cursor: pointer;
    font-family: 'Jost', sans-serif;
}
/* Container de la boîte du guide */
.sg-box {
    background: #fff;
    width: 90%;
    max-width: 500px;
    margin: auto;
    padding: 40px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

.sg-title {
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 18px;
    margin-bottom: 5px;
    text-align: center;
    color: #000;
}

.sg-subtitle {
    font-size: 10px;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 0.1em;
    text-align: center;
    margin-bottom: 30px;
}

/* Style de la table */
.sg-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.sg-table th {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #888;
    padding: 12px 5px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

.sg-table td {
    padding: 12px 5px;
    font-size: 13px;
    color: #000;
    border-bottom: 1px solid #f9f9f9;
}

.sg-table tr:last-child td {
    border-bottom: none;
}

.sg-footer {
    font-size: 10px;
    font-style: italic;
    color: #bbb;
    margin-top: 25px;
    text-align: center;
}

/* Animation d'entrée */
.luxe-fade-in {
    animation: sgSlideUp 0.4s ease-out;
}

@keyframes sgSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.pm-main-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4; /* Ou ton ratio actuel */
    overflow: hidden;    /* Indispensable pour le zoom */
    background: #f9f9f9;
    cursor: zoom-in;     /* Curseur élégant qui indique l'action */
}

.pm-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* Remplit bien l'espace */
    transition: transform 0.2s ease-out; /* Transition fluide pour le mouvement */
    pointer-events: none; /* Laisse le wrapper gérer les événements de souris */

}



@media (max-width: 768px){

  .pm-info{
    padding: 0 12px !important;
  }

  .pm-name{
    font-size: 20px !important;
    line-height: 1.2;
  }

  .pm-price{
    font-size: 16px !important;
  }

  .pm-desc{
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin: 10px 0 !important;
  }

  /* bloc détails */
  .pm-info > div[style*="grid"]{
    gap: 10px 15px !important;
    padding: 12px 0 !important;
  }

  .pm-info span{
    line-height: 1.3;
  }

  /* tailles */
  .pm-sizes{
    gap: 6px !important;
  }

  /* boutons */
  .pm-actions{
    gap: 8px !important;
    margin-top: 12px;
  }

  .btn-add-large{
    font-size: 13px !important;
  }

  .btn-fav-large{
    width: 44px !important;
    height: 44px !important;
  }

  /* image principale */
  .pm-main-wrapper{
    max-height: 45vh !important;
  }

  /* thumbnails */
  .pm-thumb{
    width: 45px !important;
    height: 45px !important;
  }

  /* fermeture plus accessible */
  .pm-close{
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
}
/* Container principal du Modal */
#productModalBg .pm-box {
    display: flex;
    flex-direction: column;
    max-height: 92vh; /* Ne dépasse jamais l'écran du iPhone */
    width: min(95%, 500px);
    overflow-y: auto; /* Permet le scroll interne si nécessaire */
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
}

/* Sur Mobile : On empile, on ne met pas côte à côte */
@media (max-width: 768px) {
    .pm-box {
        flex-direction: column !important;
        padding-top: 40px; /* Espace pour le bouton fermer */
    }
    
    .pm-gallery {
        width: 100% !important;
        max-height: 40vh !important; /* Image moins haute sur mobile */
    }

    .pm-main-wrapper {
        max-height: 35vh !important;
    }

    .pm-info {
        padding: 15px !important;
    }

    /* Grille de détails : 2 colonnes c'est trop sur petit iPhone */
    .pm-info div[style*="display:grid"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
}

  /* Rotation de la flèche quand ouvert */
  .order-card.active .order-content { display: block !important; }
  .order-card.active .order-content ~ div span:last-child { transform: rotate(180deg); }