/* ============================================================
   French Cosmetic Packing
   Palette champagne : ivoire chaud, champagne pâle, or champagne
   mat, encre. Typo : Raleway (titres) + Cormorant Garamond (corps)
   ============================================================ */

:root{
  --ivoire:#FBF9F6;       /* fond principal */
  --champagne:#F3EDE2;    /* fond de section pâle */
  --or:#BCA887;           /* accent or champagne mat */
  --or-fonce:#A3906F;     /* accent appuyé, petits textes or */
  --or-pale:#E4DAC6;      /* filets, bordures douces */
  --encre:#2C2925;        /* texte principal */
  --gris:#8A8378;         /* texte secondaire */
  --transition:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Cormorant Garamond',serif;
  font-size:18px;
  line-height:1.8;
  color:var(--encre);
  background:var(--ivoire);
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3,h4,.btn,.nav-link{font-family:'Raleway',sans-serif}

.kicker{
  font-family:'Raleway',sans-serif;
  font-size:12px;font-weight:400;
  text-transform:uppercase;letter-spacing:.35em;
  color:var(--or-fonce);
}
h2.section-title{
  font-weight:200;
  font-size:clamp(28px,4.5vw,46px);
  text-transform:uppercase;
  letter-spacing:.28em;
  line-height:1.4;
  margin:14px 0 18px;
}
.gold-line{
  width:64px;height:1px;margin:0 0 28px;
  background:linear-gradient(90deg,var(--or),#DFD2B4,var(--or));
  background-size:200% 100%;
  animation:goldshimmer 7s ease-in-out infinite alternate;
}
@keyframes goldshimmer{
  from{background-position:0% 0}
  to{background-position:100% 0}
}
@media (prefers-reduced-motion: reduce){.gold-line{animation:none}}
.center .gold-line{margin-left:auto;margin-right:auto}
.center{text-align:center}
.lead{font-size:21px;color:var(--gris);max-width:680px}
.center .lead{margin-left:auto;margin-right:auto}
.italic-tag{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;font-size:22px;color:var(--or-fonce);
}
section{padding:120px 24px;position:relative}
.container{max-width:1160px;margin:0 auto}

/* ---------- Reveal (GSAP hooks) ---------- */
.reveal{opacity:0;transform:translateY(36px)}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important;transform:none !important}
  html{scroll-behavior:auto}
}

/* ---------- Header ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  transition:background .4s var(--transition), box-shadow .4s;
  background:transparent;
}
header.scrolled,header.on-light{
  background:rgba(251,249,246,.92);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--or-pale);
}
.header-inner{
  max-width:1240px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 28px;gap:24px;
}
.logo{
  font-family:'Raleway',sans-serif;
  font-weight:300;font-size:21px;
  letter-spacing:.3em;color:var(--encre);
  text-decoration:none;text-transform:uppercase;
  line-height:1.6;white-space:nowrap;
  transition:color .3s;
}
@media(max-width:1180px){.logo{font-size:14px}}
.logo:hover{color:var(--or-fonce)}
.nav-desktop{display:flex;align-items:center;gap:34px}
.nav-link{
  font-size:12px;font-weight:400;
  text-transform:uppercase;letter-spacing:.22em;
  color:var(--encre);text-decoration:none;
  position:relative;padding:4px 0;
  transition:color .3s;
}
.nav-link::after{
  content:"";position:absolute;left:0;bottom:0;
  width:0;height:1px;background:var(--or);
  transition:width .35s var(--transition);
}
.nav-link:hover{color:var(--or-fonce)}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.nav-link.active{color:var(--or-fonce)}

.btn{
  display:inline-block;
  font-size:12px;font-weight:500;
  text-transform:uppercase;letter-spacing:.25em;
  text-decoration:none;
  padding:16px 36px;
  transition:all .35s var(--transition);
  position:relative;
  cursor:pointer;border:none;
}
.btn-gold{
  background:var(--or);color:var(--ivoire);
}
.btn-gold:hover{
  background:var(--or-fonce);
  box-shadow:0 10px 30px rgba(163,144,111,.35);
}
.btn-outline{
  background:transparent;color:var(--encre);
  border:1px solid var(--or);
}
.btn-outline:hover{background:var(--or);color:var(--ivoire)}
.header-cta{padding:12px 26px}

/* Burger */
.burger{
  display:none;background:none;border:none;cursor:pointer;
  width:34px;height:26px;position:relative;z-index:1002;
}
.burger span{
  display:block;position:absolute;left:0;width:100%;height:1px;
  background:var(--or-fonce);transition:all .35s var(--transition);
}
.burger span:nth-child(1){top:4px}
.burger span:nth-child(2){top:13px}
.burger span:nth-child(3){top:22px}
.burger.open span:nth-child(1){top:13px;transform:rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){top:13px;transform:rotate(-45deg)}

.nav-mobile{
  position:fixed;inset:0;z-index:1001;
  background:rgba(251,249,246,.98);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:34px;
  opacity:0;pointer-events:none;
  transition:opacity .4s var(--transition);
}
.nav-mobile.open{opacity:1;pointer-events:auto}
.nav-mobile .nav-link{font-size:16px}

@media(max-width:1020px){
  .nav-desktop{display:none}
  .burger{display:block}
}

/* ---------- Hero (clair) ---------- */
.hero{
  min-height:100vh;
  background:linear-gradient(160deg,var(--ivoire) 0%,var(--champagne) 55%,#F0E7D8 100%);
  background-size:160% 160%;
  animation:heroshift 22s ease-in-out infinite alternate;
  color:var(--encre);
  display:flex;align-items:center;
  padding:150px 24px 80px;
  position:relative;overflow:hidden;
}
@keyframes heroshift{
  from{background-position:0% 0%}
  to{background-position:100% 100%}
}
@media (prefers-reduced-motion: reduce){.hero{animation:none}}
#hero-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:1;
}
.hero-content{
  position:relative;z-index:2;
  max-width:1160px;margin:0 auto;width:100%;
}
.hero-content .kicker{font-size:16px;letter-spacing:.4em}
@media(max-width:760px){.hero-content .kicker{font-size:13px}}
.hero h1{
  font-weight:200;
  font-size:clamp(32px,5.2vw,62px);
  text-transform:uppercase;
  letter-spacing:.22em;
  line-height:1.35;
  max-width:800px;
  margin:26px 0;
}
.hero h1 .gold{color:var(--or-fonce)}
.hero-sub{
  font-size:22px;font-style:italic;
  color:var(--gris);
  max-width:560px;margin-bottom:48px;
}
.hero-ctas{display:flex;gap:20px;flex-wrap:wrap}
.scroll-hint{
  position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--gris);font-family:'Raleway',sans-serif;
  font-size:10px;text-transform:uppercase;letter-spacing:.3em;
}
.scroll-hint::after{
  content:"";width:1px;height:44px;
  background:linear-gradient(var(--or),transparent);
  animation:scrollpulse 2s infinite;
}
@keyframes scrollpulse{
  0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  100%{transform:scaleY(0);transform-origin:bottom}
}
@media (prefers-reduced-motion: reduce){.scroll-hint::after{animation:none}}

/* ---------- Chiffres ---------- */
.stats{
  background:var(--ivoire);
  padding:90px 24px;
  border-top:1px solid var(--or-pale);
  border-bottom:1px solid var(--or-pale);
}
.stats-grid{
  max-width:960px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:48px;
  text-align:center;
}
.stat-number{
  font-family:'Raleway',sans-serif;
  font-weight:200;font-size:clamp(36px,4vw,54px);
  color:var(--or-fonce);line-height:1.1;
}
.stat-suffix{font-size:.55em;color:var(--or)}
.stat-label{
  font-family:'Raleway',sans-serif;
  font-size:11px;font-weight:400;
  text-transform:uppercase;letter-spacing:.2em;
  color:var(--gris);margin-top:14px;line-height:1.7;
}
@media(max-width:720px){.stats-grid{grid-template-columns:1fr;gap:36px}}

/* ---------- Histoire ---------- */
.histoire{background:var(--ivoire)}
.histoire-grid{
  display:grid;grid-template-columns:1.1fr .9fr;gap:72px;
  align-items:center;
}
.histoire-text p{margin-bottom:22px}
.photo-placeholder{
  background:var(--champagne);
  aspect-ratio:4/5;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.photo-placeholder::before{
  content:"";position:absolute;inset:16px;
  border:1px solid var(--or);pointer-events:none;
  z-index:2;
}
.photo-placeholder img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:1;
}
.photo-placeholder span{
  font-family:'Raleway',sans-serif;
  font-weight:300;font-size:12px;
  text-transform:uppercase;letter-spacing:.3em;
  color:var(--gris);text-align:center;
  padding:0 36px;line-height:2.2;
}
@media(max-width:900px){.histoire-grid{grid-template-columns:1fr;gap:48px}}

/* ---------- Illustrations ligne (flacons, pots, tubes) ---------- */
.deco-svg{
  display:block;margin:0 auto 26px;
  width:56px;height:72px;
  stroke:var(--or);fill:none;stroke-width:.95;
  stroke-linecap:round;stroke-linejoin:round;
}
.deco-svg.large{width:120px;height:160px;stroke-width:.8;opacity:.55}
.illu-img{
  display:block;margin:0 auto 26px;
  height:110px;width:auto;max-width:160px;
  object-fit:contain;
}
.filigrane{
  position:absolute;z-index:0;pointer-events:none;user-select:none;
  stroke:var(--or);fill:none;stroke-width:.55;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:.16;
}
.filigrane-float{animation:filifloat 12s ease-in-out infinite alternate}
@keyframes filifloat{
  from{transform:translateY(0)}
  to{transform:translateY(-24px)}
}
@media (prefers-reduced-motion: reduce){.filigrane-float{animation:none}}
section > .container{position:relative;z-index:2}

/* ---------- Cartes savoir-faire ---------- */
.produits{background:var(--champagne)}
.cards-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:36px;
  margin-top:64px;
}
.card{
  background:var(--ivoire);
  border:1px solid var(--or-pale);
  padding:52px 40px 44px;
  display:flex;flex-direction:column;
  transform-style:preserve-3d;
  transition:box-shadow .4s;
  will-change:transform;
  position:relative;text-align:center;
}
.card:hover{box-shadow:0 24px 60px rgba(44,41,37,.1)}
.card h3{
  font-weight:300;font-size:16px;
  text-transform:uppercase;letter-spacing:.22em;
  margin:0 0 22px;line-height:1.7;
}
.card p{font-size:17px;color:var(--gris);margin-bottom:20px;flex:1}
.card .card-specs{
  list-style:none;border-top:1px solid var(--or-pale);
  padding-top:18px;text-align:left;
}
.card .card-specs li{
  font-family:'Raleway',sans-serif;
  font-size:12px;letter-spacing:.08em;
  color:var(--encre);padding:7px 0;
  display:flex;justify-content:space-between;gap:12px;
}
.card .card-specs li b{font-weight:500;color:var(--gris);text-transform:uppercase;font-size:10px;letter-spacing:.15em}
.card-link{
  font-family:'Raleway',sans-serif;
  font-size:11px;text-transform:uppercase;letter-spacing:.22em;
  color:var(--or-fonce);text-decoration:none;
  display:inline-block;margin-top:22px;
  border-bottom:1px solid transparent;
  transition:border-color .3s;
}
.card-link:hover{border-color:var(--or-fonce)}
@media(max-width:900px){.cards-grid{grid-template-columns:1fr}}

/* ---------- Certifications ---------- */
.certifs{background:var(--ivoire)}
.badges-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
  margin-top:64px;max-width:1000px;margin-left:auto;margin-right:auto;
}
.badge{
  background:rgba(255,255,255,.55);
  border:1px solid var(--or-pale);
  backdrop-filter:blur(8px);
  padding:52px 36px;text-align:center;
  transition:transform .4s var(--transition), border-color .4s, box-shadow .4s;
}
.badge:hover{
  transform:translateY(-8px);
  border-color:var(--or);
  box-shadow:0 24px 50px rgba(44,41,37,.08);
}
.badge-icon{
  width:64px;height:64px;margin:0 auto 26px;
  border:1px solid var(--or);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;
  font-style:italic;font-size:22px;color:var(--or-fonce);
}
.badge-logo{
  height:84px;margin:0 auto 26px;
  display:flex;align-items:center;justify-content:center;
}
.badge-logo img{
  max-height:84px;max-width:150px;
  object-fit:contain;
}
.badge-logo .badge-icon{display:none;margin:0}
.badge-logo.fallback img{display:none}
.badge-logo.fallback .badge-icon{display:flex}
.badge h3{
  font-weight:400;font-size:14px;
  text-transform:uppercase;letter-spacing:.22em;
  color:var(--or-fonce);margin-bottom:16px;line-height:1.7;
}
.badge p{font-size:16px;color:var(--gris)}
@media(max-width:820px){.badges-grid{grid-template-columns:1fr}}
.badges-grid.four{grid-template-columns:repeat(4,1fr);max-width:1100px}
@media(max-width:900px){.badges-grid.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.badges-grid.four{grid-template-columns:1fr}}

/* ---------- Engagements ---------- */
.rse{background:var(--champagne);overflow:hidden}
.rse-inner{position:relative;z-index:2}
.rse-items{
  display:grid;grid-template-columns:repeat(4,1fr);gap:40px;
  margin-top:64px;
}
.rse-item{text-align:center}
.rse-item h3{
  font-weight:400;font-size:12px;
  text-transform:uppercase;letter-spacing:.2em;
  margin-bottom:12px;
}
.rse-item p{font-size:16px;color:var(--gris)}
.rse-deco{will-change:transform}
@media(max-width:900px){.rse-items{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.rse-items{grid-template-columns:1fr}}

/* ---------- Bande contact ---------- */
.cta-band{
  background:var(--ivoire);
  text-align:center;padding:130px 24px;
  position:relative;overflow:hidden;
  border-top:1px solid var(--or-pale);
}
.cta-band::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:1px;height:70px;background:linear-gradient(var(--or),transparent);
}
.cta-band h2{
  font-weight:200;font-size:clamp(26px,4vw,42px);
  text-transform:uppercase;letter-spacing:.26em;line-height:1.55;
  max-width:860px;margin:0 auto 22px;
}
.cta-band p{
  font-style:italic;font-size:21px;color:var(--gris);
  max-width:600px;margin:0 auto 20px;
}
.cta-mail{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(24px,3vw,34px);font-style:italic;
  color:var(--or-fonce);text-decoration:none;
  border-bottom:1px solid var(--or);
  padding-bottom:4px;
  transition:color .3s,border-color .3s;
  display:inline-block;margin-top:14px;
}
.cta-mail:hover{color:var(--encre);border-color:var(--encre)}

/* ---------- Footer ---------- */
footer{
  background:var(--champagne);
  border-top:1px solid var(--or-pale);
  padding:70px 24px 40px;
}
.footer-grid{
  max-width:1160px;margin:0 auto 50px;
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;
}
.footer-brand p{
  font-size:16px;color:var(--gris);
  max-width:360px;margin-top:20px;
}
footer h4{
  font-weight:400;font-size:11px;
  text-transform:uppercase;letter-spacing:.25em;
  color:var(--or-fonce);margin-bottom:20px;
}
footer ul{list-style:none}
footer ul li{margin-bottom:10px}
footer ul a{
  font-size:16px;color:var(--encre);
  text-decoration:none;transition:color .3s;
}
footer ul a:hover{color:var(--or-fonce)}
.footer-bottom{
  max-width:1160px;margin:0 auto;
  border-top:1px solid var(--or-pale);
  padding-top:28px;text-align:center;
}
.footer-bottom p{
  font-family:'Raleway',sans-serif;
  font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gris);
}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr;gap:36px}}

/* ---------- Pages internes : bandeau ---------- */
.page-hero{
  background:linear-gradient(180deg,var(--champagne) 0%,var(--ivoire) 100%);
  color:var(--encre);
  padding:210px 24px 110px;
  text-align:center;
}
.page-hero h1{
  font-weight:200;
  font-size:clamp(28px,4.6vw,50px);
  text-transform:uppercase;letter-spacing:.26em;
  line-height:1.5;margin:20px 0;
}
.page-hero .kicker{font-size:17px;letter-spacing:.42em}

/* ---------- Timeline ---------- */
.timeline{
  max-width:760px;margin:70px auto 0;position:relative;
  padding-left:44px;
}
.timeline::before{
  content:"";position:absolute;left:8px;top:6px;bottom:6px;
  width:1px;background:linear-gradient(var(--or),var(--or-pale));
}
.tl-item{position:relative;padding-bottom:52px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:"";position:absolute;left:-41px;top:8px;
  width:11px;height:11px;border-radius:50%;
  background:var(--ivoire);border:1px solid var(--or);
}
.tl-year{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;font-size:24px;color:var(--or-fonce);
}
.tl-item h3{
  font-weight:400;font-size:14px;
  text-transform:uppercase;letter-spacing:.2em;
  margin:6px 0 10px;
}
.tl-item p{color:var(--gris);font-size:17px}

/* ---------- Équipe ---------- */
.team-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:36px;
  margin-top:64px;
}
.team-card{text-align:center}
.team-icon{
  width:112px;height:112px;margin:0 auto 24px;
  border:1px solid var(--or);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  position:relative;
  transition:transform .4s var(--transition), box-shadow .4s;
}
.team-icon::before{
  content:"";position:absolute;inset:6px;
  border:1px solid var(--or-pale);border-radius:50%;
}
.team-card:hover .team-icon{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(163,144,111,.18);
}
.team-icon svg{
  width:44px;height:44px;
  stroke:var(--or-fonce);fill:none;stroke-width:1.1;
  stroke-linecap:round;stroke-linejoin:round;
}
.team-card h3{
  font-weight:400;font-size:14px;
  text-transform:uppercase;letter-spacing:.2em;
}
.team-card p{font-style:italic;color:var(--gris);font-size:17px}
.team-grid.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.team-grid.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.team-grid{grid-template-columns:1fr}}
@media(max-width:560px){.team-grid.four{grid-template-columns:1fr}}

/* ---------- Services : lignes détaillées ---------- */
.ligne-block{
  display:grid;grid-template-columns:230px 1fr 1fr;gap:48px;
  align-items:center;padding:70px 0;
  border-bottom:1px solid var(--or-pale);
}
.ligne-block:last-of-type{border-bottom:none}
.ligne-visual{display:flex;align-items:center;justify-content:center}
.ligne-visual img{
  width:230px;height:230px;object-fit:cover;
  border:1px solid var(--or-pale);
}
.ligne-visual svg{
  width:140px;height:190px;
  stroke:var(--or);fill:none;stroke-width:.9;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:.85;
  animation:filifloat 9s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce){.ligne-visual svg{animation:none}}
@media(max-width:1020px){
  .ligne-block{grid-template-columns:1fr 1fr}
  .ligne-visual{grid-column:1/-1}
  .ligne-visual img{width:200px;height:200px}
  .ligne-visual svg{width:100px;height:135px}
}
@media(max-width:900px){.ligne-block{grid-template-columns:1fr;gap:36px}}
.ligne-block h3{
  font-weight:200;font-size:clamp(20px,2.5vw,28px);
  text-transform:uppercase;letter-spacing:.25em;
  margin:12px 0 20px;line-height:1.5;
}
.ligne-block p{margin-bottom:18px}
.ops-list{list-style:none;margin-top:8px}
.ops-list li{
  font-family:'Raleway',sans-serif;font-size:13px;
  letter-spacing:.06em;padding:9px 0 9px 24px;
  border-bottom:1px solid var(--or-pale);
  position:relative;
}
.ops-list li::before{
  content:"";position:absolute;left:0;top:50%;
  width:10px;height:1px;background:var(--or);
}
.ops-list li:last-child{border-bottom:none}
.spec-table{width:100%;border-collapse:collapse;margin-top:10px}
.spec-table td{
  padding:12px 0;border-bottom:1px solid var(--or-pale);
  font-size:17px;vertical-align:top;
}
.spec-table td:first-child{
  font-family:'Raleway',sans-serif;font-size:11px;
  text-transform:uppercase;letter-spacing:.18em;
  color:var(--gris);width:38%;padding-right:16px;
}

/* ---------- Page contact ---------- */
.contact-simple{
  max-width:720px;margin:0 auto;text-align:center;
}
.contact-simple .big-mail{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(26px,4vw,40px);font-style:italic;
  color:var(--or-fonce);text-decoration:none;
  border-bottom:1px solid var(--or);
  padding-bottom:6px;display:inline-block;margin:30px 0 40px;
  transition:color .3s,border-color .3s;
}
.contact-simple .big-mail:hover{color:var(--encre);border-color:var(--encre)}
.aide-chiffrage{
  background:var(--champagne);
  border:1px solid var(--or-pale);
  padding:44px 40px;margin-top:56px;text-align:left;
}
.aide-chiffrage h3{
  font-weight:400;font-size:13px;
  text-transform:uppercase;letter-spacing:.22em;
  color:var(--or-fonce);margin-bottom:18px;text-align:center;
}
.aide-chiffrage ul{list-style:none}
.aide-chiffrage li{
  padding:9px 0 9px 26px;position:relative;
  font-size:17px;border-bottom:1px solid var(--or-pale);
}
.aide-chiffrage li:last-child{border-bottom:none}
.aide-chiffrage li::before{
  content:"";position:absolute;left:0;top:50%;
  width:12px;height:1px;background:var(--or);
}

/* ---------- Bandeau d'ambiance ---------- */
.ambiance-band{
  max-width:1160px;margin:0 auto;
  height:clamp(200px,26vw,340px);
  overflow:hidden;position:relative;
  border:1px solid var(--or-pale);
}
@media(max-width:1200px){.ambiance-band{margin:0 24px}}
.ambiance-band img{
  width:100%;height:130%;
  object-fit:cover;object-position:center;
  will-change:transform;
}

/* ---------- Vidéos ---------- */
.videos-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:36px;
  margin-top:56px;
}
.video-slot{margin:0}
.video-slot video{
  width:100%;display:block;
  border:1px solid var(--or-pale);
  background:var(--champagne);
  aspect-ratio:16/9;object-fit:cover;
}
.video-slot figcaption{
  font-style:italic;color:var(--gris);
  font-size:17px;margin-top:14px;
}
.videos-grid:has(.video-slot:only-child){grid-template-columns:minmax(0,640px);justify-content:center}
@media(max-width:820px){.videos-grid{grid-template-columns:1fr}}

/* ---------- Curseur personnalisé ---------- */
.cursor-dot{
  position:fixed;top:0;left:0;z-index:9999;
  width:8px;height:8px;border-radius:50%;
  background:var(--or-fonce);pointer-events:none;
  transform:translate(-50%,-50%);
  transition:width .25s,height .25s,opacity .3s;
  opacity:0;
}
.cursor-dot.visible{opacity:1}
.cursor-dot.grow{width:36px;height:36px;background:rgba(188,168,135,.28)}
@media (hover:none), (prefers-reduced-motion: reduce){.cursor-dot{display:none}}