/* Palette et polices Olinea */
:root{--ol-bordeaux:#6E2531;--ol-bordeaux-fonce:#561C26;--ol-rose:#DCBAB4;--ol-rose-pale:#F7EEEC;--ol-blanc:#FFFFFF;--ol-texte:#2B2124;--ol-texte-doux:#4A3D3F;--ol-gris:#6F5F5C;--ol-filet:#EFE9E6;--ol-titre:Prata,serif;--ol-corps:"Open Sans",sans-serif}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ol-blanc);color:var(--ol-texte);font-family:var(--ol-corps);-webkit-font-smoothing:antialiased}
img,video{max-width:100%}
a{color:var(--ol-texte);text-decoration:none;transition:color .3s ease}a:hover{color:var(--ol-bordeaux)}

/* Bandeau */
.ol-bandeau{background:var(--ol-bordeaux);color:#FFFFFF;font-size:12px;letter-spacing:.12em;text-align:center;padding:10px 16px}

/* En-tête */
.ol-entete{position:sticky;top:0;z-index:50;background:#FFFFFF;border-bottom:1px solid var(--ol-filet)}
.ol-entete__inner{max-width:1280px;margin:0 auto;padding:20px 5%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.ol-entete__nav{flex:0 1 auto}
.ol-entete__logo{flex:1 1 0;display:flex}
.ol-entete__logo svg{display:block;height:24px;width:auto}
.ol-entete__actions{flex:1 1 0;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:12px 24px;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.ol-panier{display:flex;align-items:center;gap:8px}
.menu-principal{display:flex;flex-wrap:wrap;gap:8px 28px;list-style:none;margin:0;padding:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.menu-principal a{position:relative;display:inline-block;padding-bottom:4px}
.menu-principal a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ol-bordeaux);transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
.menu-principal a:hover::after,.menu-principal .current-menu-item>a::after{transform:scaleX(1)}
.menu-principal .current-menu-item>a{color:var(--ol-bordeaux)}

/* Boutons et liens */
.ol-bouton{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 32px;box-sizing:border-box;background:var(--ol-bordeaux);border:1px solid var(--ol-bordeaux);color:#FFFFFF;font-family:var(--ol-corps);font-size:12px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:background .3s ease,color .3s ease,border-color .3s ease}
.ol-bouton:hover{background:var(--ol-bordeaux-fonce);border-color:var(--ol-bordeaux-fonce);color:#FFFFFF}
.ol-bouton--petit{min-height:44px;padding:0 22px}
.ol-bouton--contour{background:transparent;color:var(--ol-bordeaux)}
.ol-bouton--contour:hover{background:var(--ol-bordeaux);border-color:var(--ol-bordeaux);color:#FFFFFF}
.ol-bouton--blanc{background:#FFFFFF;border-color:#FFFFFF;color:var(--ol-bordeaux)}
.ol-bouton--blanc:hover{background:var(--ol-rose-pale);border-color:var(--ol-rose-pale);color:var(--ol-bordeaux)}
.ol-bouton--transparent{background:transparent;border-color:#FFFFFF;color:#FFFFFF}
.ol-bouton--transparent:hover{background:#FFFFFF;border-color:#FFFFFF;color:var(--ol-bordeaux)}
.ol-lien{display:inline-block;align-self:flex-start;font-size:12px;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:6px}

/* Typographie */
.ol-surtitre{margin:0;display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--ol-bordeaux)}
.ol-surtitre::before{content:"";width:36px;height:1px;background:currentColor;flex:none}
.ol-surtitre--centre{justify-content:center}
.ol-surtitre--centre::after{content:"";width:36px;height:1px;background:currentColor;flex:none}
.ol-titre{margin:0;font-family:var(--ol-titre);font-weight:400;line-height:1.15}
.ol-titre--xl{font-size:clamp(34px,4.2vw,54px)}
.ol-titre--l{font-size:clamp(30px,3.4vw,44px)}
.ol-titre--m{font-size:clamp(26px,2.8vw,36px)}
.ol-texte{margin:0;font-size:15px;line-height:1.9;color:var(--ol-texte-doux)}
.ol-accent{color:var(--ol-bordeaux)}
.ol-numero{font-family:var(--ol-titre);font-size:56px;line-height:1;color:var(--ol-rose)}

/* Mise en page */
.ol-conteneur{max-width:1280px;margin:0 auto;padding-left:5%;padding-right:5%}
.ol-section{padding-top:clamp(80px,9vw,128px);padding-bottom:clamp(80px,9vw,128px)}
.ol-fond-rose{background:var(--ol-rose-pale)}
.ol-filet-haut{border-top:1px solid var(--ol-filet)}
.ol-ariane{padding-top:32px;font-size:12px;color:var(--ol-gris)}
.ol-ariane a{color:var(--ol-gris)}

/* Cartes produits */
.ol-carte{display:flex;flex-direction:column;gap:14px}
.ol-carte__image{overflow:hidden;background:#EFE7E1}
.ol-carte__image img{display:block;width:100%;object-fit:cover;transition:transform .8s ease}
.ol-carte:hover .ol-carte__image img{transform:scale(1.04)}
.ol-pastille{width:14px;height:14px;border-radius:50%;border:1px solid rgba(43,33,36,.15);flex:none}

/* FAQ */
.ol-faq{border-top:1px solid var(--ol-filet)}
.ol-faq details{padding:22px 0;border-bottom:1px solid var(--ol-filet)}
.ol-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:24px;font-family:var(--ol-titre);font-size:19px}
.ol-faq summary::-webkit-details-marker{display:none}
.ol-faq summary::after{content:"+";flex:none;color:var(--ol-bordeaux);font-family:var(--ol-corps);font-size:22px;line-height:1;transition:transform .4s ease}
.ol-faq details[open] summary::after{transform:rotate(45deg)}
.ol-faq p{margin:14px 0 0;font-size:15px;line-height:1.85;color:var(--ol-texte-doux)}

/* Pied de page */
.ol-pied{border-top:1px solid var(--ol-filet);background:#FFFFFF}
.ol-pied__inner{max-width:1280px;margin:0 auto;padding:72px 5% 36px;display:flex;flex-direction:column;gap:56px}
.ol-pied__colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px;font-size:14px;line-height:2}
.ol-pied__colonne{display:flex;flex-direction:column}
.ol-pied__colonne svg{display:block;height:48px;width:auto;margin-bottom:16px}
.ol-pied__titre{margin-bottom:8px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ol-bordeaux)}
.ol-pied__bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-top:24px;border-top:1px solid var(--ol-filet);font-size:12px;color:var(--ol-gris)}
.ol-pied__bas a{color:var(--ol-gris)}

/* Contenu des pages (blocs HTML personnalisés) */
.contenu-page{min-height:40vh}
.contenu-page > *{margin-top:0;margin-bottom:0}

/* Apparition douce au scroll, sur toutes les pages */
.ol-revele {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1s cubic-bezier(.22, 1, .36, 1), transform 1s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--ol-i, 0) * .12s);
}

.ol-revele.est-visible {
  opacity: 1;
  transform: none;
}

/* =========================================
   Panier latéral
   ========================================= */
.ol-tiroir {
  position: fixed;
  inset: 0;
  z-index: 10000;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear .6s;
}

.ol-tiroir.est-ouvert {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s;
}

/* Pendant le « coucou », la page reste utilisable */
.ol-tiroir.est-coucou {
  pointer-events: none;
}

.ol-tiroir.est-coucou .ol-tiroir__panneau {
  pointer-events: auto;
}

html.ol-tiroir-ouvert {
  overflow: hidden;
}

/* Voile sombre derrière le panier */
.ol-tiroir__voile {
  position: absolute;
  inset: 0;
  background: rgba(43, 33, 36, .32);
  opacity: 0;
  transition: opacity .6s ease;
}

.ol-tiroir.est-ouvert .ol-tiroir__voile {
  opacity: 1;
}

.ol-tiroir.est-coucou .ol-tiroir__voile {
  opacity: 0;
}

/* Panneau qui glisse depuis la droite */
.ol-tiroir__panneau {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--ol-blanc);
  color: var(--ol-texte);
  font-family: var(--ol-corps);
  box-shadow: -20px 0 60px rgba(86, 28, 38, .12);
  transform: translateX(100%);
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
  outline: none;
}

.ol-tiroir.est-ouvert .ol-tiroir__panneau {
  transform: none;
}

/* En-tête du panier */
.ol-tiroir__haut {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 28px;
  border-bottom: 1px solid var(--ol-filet);
}

.ol-tiroir__titre {
  margin: 0;
  font-family: var(--ol-titre);
  font-size: 22px;
}

.ol-tiroir__fermer {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 28px;
  line-height: 1;
  color: var(--ol-texte);
  cursor: pointer;
  transition: color .3s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}

.ol-tiroir__fermer:hover {
  color: var(--ol-bordeaux);
  transform: rotate(90deg);
}

/* Contenu */
.ol-tiroir__contenu {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ol-tiroir__liste {
  flex: 1;
  overflow-y: auto;
  margin: 0;
  padding: 4px 28px;
  list-style: none;
}

.ol-tiroir__article {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--ol-filet);
  transition: opacity .3s ease, transform .4s ease;
}

.ol-tiroir__article.est-en-cours {
  opacity: .5;
  pointer-events: none;
}

.ol-tiroir__article.est-retire {
  opacity: 0;
  transform: translateX(24px);
}

.ol-tiroir__vignette img {
  display: block;
  width: 80px;
  height: 100px;
  object-fit: cover;
  background: var(--ol-rose-pale);
}

.ol-tiroir__infos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ol-tiroir__nom {
  font-family: var(--ol-titre);
  font-size: 16px;
  line-height: 1.35;
  color: var(--ol-texte);
  text-decoration: none;
  transition: color .3s ease;
}

.ol-tiroir__nom:hover {
  color: var(--ol-bordeaux);
}

/* Détails : taille, couleur, dimensions */
.ol-tiroir__infos dl.variation {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  font-size: 12px;
  color: var(--ol-gris);
}

.ol-tiroir__infos dl.variation dt,
.ol-tiroir__infos dl.variation dd,
.ol-tiroir__infos dl.variation p {
  margin: 0;
}

/* Quantité et prix */
.ol-tiroir__ligne {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.ol-tiroir__quantite {
  display: inline-flex;
  align-items: center;
  border: 1px solid #E4D6D2;
}

.ol-tiroir__quantite button {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 16px;
  color: var(--ol-texte);
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}

.ol-tiroir__quantite button:hover {
  background: var(--ol-rose-pale);
  color: var(--ol-bordeaux);
}

.ol-tiroir__quantite button:disabled {
  opacity: .3;
  cursor: default;
  background: none;
}

.ol-tiroir__quantite span {
  min-width: 28px;
  text-align: center;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.ol-tiroir__prix {
  font-size: 14px;
}

.ol-tiroir__retirer {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  color: var(--ol-gris);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color .3s ease;
}

.ol-tiroir__retirer:hover {
  color: var(--ol-bordeaux);
}

/* Bas du panier : total et boutons */
.ol-tiroir__bas {
  padding: 20px 28px 28px;
  border-top: 1px solid var(--ol-filet);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ol-tiroir__total {
  margin: 0;
  display: flex;
  justify-content: space-between;
  font-family: var(--ol-titre);
  font-size: 18px;
}

.ol-tiroir__note {
  margin: 0;
  font-size: 12px;
  color: var(--ol-gris);
}

.ol-tiroir__bouton {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

/* Panier vide */
.ol-tiroir__vide {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 40px 28px;
  text-align: center;
  color: var(--ol-texte-doux);
}

.ol-tiroir__vide p {
  margin: 0;
}

/* Bouton flottant du panier */
.ol-flottant {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9990;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ol-bordeaux);
  color: var(--ol-blanc);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(86, 28, 38, .28);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease, opacity .4s ease, background .3s ease;
}

.ol-flottant:hover {
  transform: translateY(-3px);
  background: var(--ol-bordeaux-fonce);
  box-shadow: 0 16px 36px rgba(86, 28, 38, .34);
}

.ol-flottant:focus-visible {
  outline: 2px solid var(--ol-bordeaux);
  outline-offset: 4px;
}

/* Caché quand le panier est vide ou quand le panier latéral est ouvert */
.ol-flottant.est-vide,
html.ol-tiroir-ouvert .ol-flottant {
  opacity: 0;
  transform: scale(.6);
  pointer-events: none;
}

.ol-flottant__nombre {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--ol-blanc);
  color: var(--ol-bordeaux);
  font-family: var(--ol-corps);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

@media (max-width: 480px) {
  .ol-flottant {
    right: 16px;
    bottom: 16px;
    width: 54px;
    height: 54px;
  }
}
/* Mobile */
@media (max-width: 480px) {
  .ol-tiroir__haut,
  .ol-tiroir__bas {
    padding-left: 20px;
    padding-right: 20px;
  }

  .ol-tiroir__liste {
    padding: 4px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ol-tiroir,
  .ol-tiroir * {
    transition: none !important;
  }
}

/* Mobile */
@media (max-width:820px){
.ol-entete{position:static}
.ol-entete__inner{justify-content:center}
.ol-entete__nav,.ol-entete__actions{flex-basis:100%;justify-content:center}
.menu-principal{justify-content:center}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;scroll-behavior:auto !important}}


