/* ==========================================================================
   belleVUES.fr — structure clonée de johndalia.com (palette identique)
   ========================================================================== */

:root{
  --bg:#FCFBF9;
  --ink:#212121;
  --ink-soft:#636262;
  --dark:#282C2E;
  --line:rgba(33,33,33,.14);
  --white:#FFFFFF;
  --sale:#8C2B2B;

  --f-sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --f-alt:"Karla",-apple-system,BlinkMacSystemFont,Arial,sans-serif;

  --gut:clamp(16px,3.2vw,48px);
  --head-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
/* Les règles auteur (display:inline-block sur .info__save, etc.) l'emportent sur
   le display:none que le navigateur applique à [hidden]. Sans ce garde-fou, la
   pastille de remise s'affichait vide sur CHRISTIAN et MARLON, qui n'ont pas de prix. */
[hidden]{display:none!important}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-sans);font-size:14px;line-height:1.5;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.u-caps{
  text-transform:uppercase;letter-spacing:.09em;
  font-size:11px;font-weight:500;
}
.wrap{padding-inline:var(--gut)}

/* ---------------------------------------------------------------- HEADER */
.head{
  position:fixed;inset:0 0 auto 0;z-index:60;height:var(--head-h);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding-inline:var(--gut);
  color:var(--white);
  transition:background .35s ease,color .35s ease,border-color .35s ease;
  border-bottom:1px solid transparent;
}
.head.is-solid{
  background:var(--bg);color:var(--ink);border-bottom-color:var(--line);
}
.head__nav{display:flex;gap:26px}
.head__nav a{position:relative;padding-block:4px}
.head__nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.head__nav a:hover::after{transform:scaleX(1);transform-origin:left}

.head__logo{justify-self:center;display:block}
.head__logo img{height:17px;width:auto}
.head__logo .l-light{display:block}
.head__logo .l-dark{display:none}
.head.is-solid .l-light{display:none}
.head.is-solid .l-dark{display:block}

.head__util{
  justify-self:end;display:flex;gap:22px;align-items:center;
}

/* --- header responsive : sous 900px on replie nav + utilitaires --- */
.head__burger{
  display:none;width:24px;height:14px;position:relative;flex:0 0 auto;
}
.head__burger span{
  position:absolute;left:0;width:100%;height:1px;background:currentColor;
  transition:transform .3s ease,opacity .3s ease;
}
.head__burger span:nth-child(1){top:0}
.head__burger span:nth-child(2){top:50%}
.head__burger span:nth-child(3){top:100%}

@media(max-width:900px){
  .head{grid-template-columns:1fr auto 1fr}
  .head__burger{display:block;justify-self:start}
  .head__nav{
    position:fixed;inset:var(--head-h) 0 auto 0;
    flex-direction:column;gap:0;
    background:var(--bg);color:var(--ink);
    border-bottom:1px solid var(--line);
    padding:8px var(--gut) 18px;
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .3s ease,transform .3s ease;
  }
  .head__nav a{padding-block:11px;border-bottom:1px solid var(--line)}
  .head__nav a:last-child{border-bottom:0}
  body.nav-open .head__nav{opacity:1;transform:none;pointer-events:auto}
  body.nav-open{overflow:hidden}
  .head__util{gap:14px}
  /* Enfant DIRECT uniquement : « Français » et « EUR € ». Sans le combinateur `>`,
     la règle masquait aussi les <span> des compteurs, qui sont dans les <a>. */
  .head__util > span{display:none}
  .head__logo img{height:15px}
}
/* Sous 400 px on resserre les libellés au lieu de masquer un lien : la règle
   précédente visait « Recherche », remplacé depuis par « Favoris » — elle faisait
   donc disparaître le compteur de favoris. */
@media(max-width:400px){
  .head__util{gap:9px}
  .head__util a{font-size:10px;letter-spacing:.05em}
}

/* ------------------------------------------------------------------ HERO */
.hero{
  position:relative;height:100svh;min-height:560px;
  display:flex;align-items:flex-end;
  overflow:hidden;color:var(--white);
}
.hero__media{position:absolute;inset:0}
.hero__media video,.hero__media img{
  width:100%;height:100%;object-fit:cover;
}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,0) 34%,rgba(0,0,0,0) 58%,rgba(0,0,0,.46) 100%);
}
.hero__body{position:relative;padding:0 var(--gut) clamp(28px,5vh,54px)}
.hero__kicker{
  font-family:var(--f-alt);font-size:clamp(20px,2.6vw,30px);
  margin:0 0 10px;font-weight:400;letter-spacing:-.01em;
}
.hero__cta{
  display:inline-flex;align-items:center;gap:9px;
  border-bottom:1px solid currentColor;padding-bottom:3px;
}
.hero__cta svg{transition:transform .4s cubic-bezier(.22,1,.36,1)}
.hero__cta:hover svg{transform:translateX(5px)}

.hero--split{height:64svh;min-height:420px}

/* -------------------------------------------------------------- PRODUITS */
.sec{padding-block:clamp(56px,8vw,104px)}
.sec__head{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:20px;margin-bottom:clamp(24px,3.4vw,40px);
}
.sec__title{margin:0;font-size:11px}

.grid{
  display:grid;gap:clamp(20px,2.6vw,38px) clamp(12px,1.8vw,24px);
  grid-template-columns:repeat(3,1fr);
}
/* le modèle conserve 2 colonnes sur mobile — on ne descend jamais à 1 */
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.grid{gap:18px 10px}}

.card{position:relative;display:flex;flex-direction:column}

/* --- média : format portrait 5:6 comme le modèle.
   On garde object-fit:contain : les packshots n'ont que 3,2 % de marge
   latérale, un `cover` rognerait 8,3 % par côté et couperait les branches. --- */
.card__media{
  position:relative;aspect-ratio:5/6;overflow:hidden;
  background:var(--white);border:1px solid var(--line);
}
.card__link{display:block;width:100%;height:100%}
.card__media img{
  width:100%;height:100%;object-fit:contain;padding:8% 6%;
  transition:opacity .3s ease;
}
.card__media img.is-swap{opacity:0}

.card__flag{
  position:absolute;top:10px;left:10px;z-index:3;
  background:var(--ink);color:var(--bg);
  padding:4px 9px;border-radius:2px;pointer-events:none;
}
.card__flag--sale{background:var(--sale);left:auto;right:10px}

/* --- flèches de défilement des vues --- */
.card__nav{
  position:absolute;top:50%;translate:0 -50%;z-index:3;
  width:32px;height:32px;border-radius:50%;
  background:rgba(252,251,249,.86);border:1px solid var(--line);
  display:grid;place-items:center;
  opacity:0;transition:opacity .25s ease,background .2s ease;
}
.card__nav:hover{background:var(--bg)}
.card__nav--prev{left:8px}
.card__nav--next{right:8px}
.card:hover .card__nav,.card__nav:focus-visible{opacity:1}
@media(hover:none){.card__nav{opacity:1}}   /* tactile : toujours visibles */

/* --- pastilles de progression des vues --- */
.card__dots{
  position:absolute;bottom:9px;left:50%;translate:-50% 0;z-index:3;
  display:flex;gap:5px;
}
.card__dot{
  width:5px;height:5px;border-radius:50%;
  background:rgba(33,33,33,.26);transition:background .25s ease;
}
.card__dot.is-on{background:var(--ink)}

/* --- favori --- */
.card__fav{
  position:absolute;top:8px;right:8px;z-index:4;
  width:30px;height:30px;border-radius:50%;
  background:rgba(252,251,249,.86);border:1px solid var(--line);
  display:grid;place-items:center;
  transition:background .2s ease,transform .2s ease;
}
.card__fav svg{width:15px;height:15px;fill:none;stroke:var(--ink);stroke-width:1.5}
.card__fav[aria-pressed="true"] svg{fill:var(--sale);stroke:var(--sale)}
.card__fav:hover{transform:scale(1.08)}
.card--promo .card__fav{top:44px}

.card__body{padding-top:13px;display:flex;flex-direction:column;gap:6px;flex:1}
.card__name{margin:0;font-size:13px;font-weight:500}
.card__name a:hover{color:var(--ink-soft)}
.card__coloris{color:var(--ink-soft);font-size:12px;min-height:1.3em}
.card__meta{color:var(--ink-soft);font-size:12px}
.card__prices{display:flex;align-items:baseline;gap:9px;font-size:13px}
.card__old{color:var(--ink-soft);text-decoration:line-through;font-size:12px}
.card__new{color:var(--sale);font-weight:600}
.card__todo{color:var(--ink-soft);font-style:italic;font-size:12px}

/* --- pastilles de coloris sur la carte --- */
.card__swatches{display:flex;flex-wrap:wrap;gap:6px;margin-top:1px}
.card__sw{
  width:19px;height:19px;border-radius:50%;padding:0;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 50% 50%, var(--verre,#8A8A90) 0 32%, transparent 33%),
    var(--monture,#8A8A90);
  transition:box-shadow .2s ease,transform .2s ease;
}
.card__sw:hover{transform:scale(1.14)}
.card__sw.is-on{box-shadow:0 0 0 1px var(--bg),0 0 0 2px var(--ink)}
.card__sw:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.card__sw--plus{
  display:grid;place-items:center;background:none;
  color:var(--ink-soft);font-size:10px;letter-spacing:0;
}

/* --- ajouter au panier depuis la carte --- */
.card__add{
  margin-top:auto;width:100%;padding:11px;
  border:1px solid var(--ink);border-radius:2px;
  background:transparent;color:var(--ink);
  transition:background .22s ease,color .22s ease;
}
.card__add:hover{background:var(--ink);color:var(--bg)}
.card__add.is-done{background:var(--ink);color:var(--bg)}
.card__add:disabled{opacity:.4;cursor:not-allowed}

/* --- confirmation flottante --- */
.toast{
  position:fixed;left:50%;bottom:24px;translate:-50% 0;z-index:90;
  background:var(--ink);color:var(--bg);
  padding:11px 18px;border-radius:3px;
  opacity:0;pointer-events:none;transition:opacity .3s ease,translate .3s ease;
}
.toast.is-on{opacity:1;translate:-50% -6px}

/* ------------------------------------------------------------ PAGE PRODUIT */
.pdp{padding-top:var(--head-h)}
/* fil d'ariane dans la colonne d'info, au-dessus du titre — comme le modèle */
.pdp__crumb{
  color:var(--ink-soft);display:flex;gap:8px;align-items:center;
  margin-bottom:12px;
}
/* deux colonnes égales, comme le modèle */
.pdp__grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(20px,3vw,52px);padding:26px var(--gut) clamp(60px,8vw,110px);
  align-items:start;
}
@media(max-width:880px){.pdp__grid{grid-template-columns:1fr}}

.gal{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.gal figure{
  margin:0;background:var(--white);border:1px solid var(--line);
  aspect-ratio:1/1;overflow:hidden;
}
.gal figure:first-child{grid-column:1/-1;aspect-ratio:4/3}
.gal img{width:100%;height:100%;object-fit:contain;padding:5%}
@media(max-width:880px){.gal{grid-template-columns:1fr}.gal figure:first-child{aspect-ratio:1/1}}

.info{position:sticky;top:calc(var(--head-h) + 18px)}
.info__title{
  margin:0 0 4px;font-size:clamp(19px,2.1vw,25px);font-weight:500;letter-spacing:-.015em;
}
.info__sub{margin:0 0 18px;color:var(--ink-soft);font-size:13px}
.info__prices{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.info__old{color:var(--ink-soft);text-decoration:line-through;font-size:15px}
.info__new{color:var(--sale);font-size:22px;font-weight:600}
.info__save{
  display:inline-block;margin-bottom:22px;
  background:var(--sale);color:var(--white);padding:4px 9px;border-radius:2px;
}

.swatches{margin-bottom:22px}
.swatches__lab{display:block;margin-bottom:10px;color:var(--ink-soft)}
.swatches__row{display:flex;flex-wrap:wrap;gap:9px}
/* Pastille : couronne = monture (1 à 3 secteurs), cœur = teinte du verre. */
.sw{
  width:30px;height:30px;border-radius:50%;padding:0;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 50% 50%, var(--verre,#8A8A90) 0 32%, transparent 33%),
    var(--monture,#8A8A90);
  transition:box-shadow .25s ease,transform .25s ease;
}
.sw:hover{transform:scale(1.09)}
.sw.is-on{box-shadow:0 0 0 1px var(--bg),0 0 0 2px var(--ink)}
.sw:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.btn-add{
  width:100%;background:var(--ink);color:var(--bg);
  padding:16px;text-align:center;border-radius:2px;
  transition:opacity .25s ease;
}
.btn-add:hover{opacity:.86}

.acc{margin-top:26px;border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:15px 0;text-align:left;
}
.acc__sign{font-size:17px;line-height:1;transition:transform .3s ease}
.acc__item.is-open .acc__sign{transform:rotate(45deg)}
.acc__panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .38s cubic-bezier(.22,1,.36,1);
}
.acc__item.is-open .acc__panel{grid-template-rows:1fr}
.acc__inner{overflow:hidden}
.acc__inner p{margin:0 0 12px;color:var(--ink-soft);font-size:13px;line-height:1.65}
.acc__inner p:last-child{padding-bottom:16px}

/* ---------------------------------------------------------------- FOOTER */
.foot{border-top:1px solid var(--line);padding:clamp(38px,5vw,60px) var(--gut) 0}
.foot__top{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;
  padding-bottom:clamp(32px,4vw,48px);
}
@media(max-width:760px){.foot__top{grid-template-columns:1fr}}
.foot h4{margin:0 0 15px;font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase}
.foot ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.foot a:hover{color:var(--ink-soft)}
.news{display:flex;gap:10px;max-width:340px;border-bottom:1px solid var(--ink);padding-bottom:7px}
.news input{flex:1;border:0;background:none;outline:none;font:inherit;color:inherit}
.news input::placeholder{color:var(--ink-soft)}
.foot__bar{
  border-top:1px solid var(--line);padding:15px 0;
  display:flex;justify-content:space-between;gap:12px;color:var(--ink-soft);
}

/* ------------------------------------------------------------- APPARITION */
.rise{opacity:0;transform:translateY(18px)}
.rise.is-in{
  opacity:1;transform:none;
  transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1);
}
@media(prefers-reduced-motion:reduce){
  .rise,.rise.is-in{opacity:1;transform:none;transition:none}
  .card__media img{transition:none}
}