/* ==========================================================================
   Passé Recomposé — Bijouterie-joaillerie, Bourgoin-Jallieu
   Feuille de styles unique
   ========================================================================== */

:root{
  --cream:#f7f1e6;
  --cream-dark:#eee3cf;
  --white:#ffffff;
  --gold:#b8924a;
  --gold-light:#d4af6a;
  --burgundy:#5c1f2b;
  --burgundy-dark:#3c1420;
  --ink:#2b231c;
  --ink-soft:#5a4f43;
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --shadow:0 22px 40px rgba(92,31,43,0.12);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:90px;}

body{
  font-family:var(--sans);
  font-weight:300;
  background:var(--cream);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:var(--serif); font-weight:400; letter-spacing:0.5px; line-height:1.2;}
img{max-width:100%; display:block;}
a{color:inherit;}

.eyebrow{
  font-family:var(--sans);
  font-size:0.72rem;
  font-weight:400;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--gold);
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip-link{
  position:fixed; left:8px; top:8px; z-index:999;
  background:var(--burgundy); color:var(--cream); padding:12px 20px;
  transform:translateY(-200%);
  transition:transform .2s ease;
}
.skip-link:focus{ transform:translateY(0); }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ============================ NAV ============================ */
nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 5%;
  background:rgba(247,241,230,0);
  transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
}
nav.scrolled{
  background:rgba(247,241,230,0.96);
  padding:12px 5%;
  box-shadow:0 2px 18px rgba(0,0,0,0.08);
  backdrop-filter:blur(6px);
}
.logo{
  font-family:var(--serif);
  font-size:1.35rem;
  letter-spacing:3px;
  color:var(--burgundy);
  text-decoration:none; white-space:nowrap;
  display:flex; align-items:center; gap:10px;
}
.logo .mark{
  width:32px; height:32px; border:1.5px solid var(--gold);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:0.9rem; color:var(--gold);
  transition:transform .6s ease;
  flex-shrink:0;
}
nav:hover .mark{ transform:rotate(180deg); }

.nav-links{ display:flex; gap:30px; align-items:center; }
.nav-links a{
  color:var(--ink); text-decoration:none; font-size:0.78rem;
  letter-spacing:1.5px; text-transform:uppercase;
  position:relative; padding-bottom:4px;
}
.nav-links a::after{
  content:''; position:absolute; bottom:0; left:0; width:0; height:1px;
  background:var(--gold); transition:width .35s ease;
}
.nav-links a:hover::after{ width:100%; }
.nav-cta{
  border:1px solid var(--gold); color:var(--gold) !important;
  padding:9px 18px; border-radius:2px;
  transition:background .35s ease, color .35s ease;
}
.nav-cta:hover{ background:var(--gold); color:var(--cream) !important; }
.nav-cta::after{ display:none; }

.burger{
  display:none; background:none; border:none; cursor:pointer;
  width:42px; height:42px; padding:9px; color:var(--burgundy);
}
.burger span{
  display:block; height:1.5px; background:currentColor; margin:5px 0;
  transition:transform .3s ease, opacity .3s ease;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ============================ BOUTONS ============================ */
.btn-primary, .btn-ghost{
  display:inline-block;
  padding:14px 30px; font-family:var(--sans); font-size:0.8rem;
  letter-spacing:1.5px; text-transform:uppercase;
  text-decoration:none; border-radius:2px; cursor:pointer; border:1px solid transparent;
  transition:background .35s ease, color .35s ease, transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.btn-primary{ background:var(--burgundy); color:var(--cream); }
.btn-primary:hover{ background:var(--gold); transform:translateY(-2px); box-shadow:0 10px 24px rgba(184,146,74,0.35); }
.btn-ghost{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn-light{ background:var(--gold-light); color:var(--burgundy-dark); }
.btn-light:hover{ background:var(--cream); }

/* ============================ HERO ============================ */
.hero{
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  position:relative;
  padding:120px 6% 100px;
  background:
    radial-gradient(circle at 20% 20%, rgba(184,146,74,0.10), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(92,31,43,0.08), transparent 45%),
    var(--cream);
}
.hero::before, .hero::after{
  content:''; position:absolute; border:1px solid rgba(184,146,74,0.35);
  border-radius:50%; pointer-events:none;
}
.hero::before{ width:340px; height:340px; top:8%; left:-120px; animation:float1 14s ease-in-out infinite; }
.hero::after{ width:220px; height:220px; bottom:6%; right:-80px; animation:float2 16s ease-in-out infinite; }
@keyframes float1{0%,100%{transform:translateY(0) rotate(0);} 50%{transform:translateY(30px) rotate(20deg);}}
@keyframes float2{0%,100%{transform:translateY(0) rotate(0);} 50%{transform:translateY(-25px) rotate(-15deg);}}

.hero > *{ position:relative; z-index:1; }
.hero .eyebrow{ opacity:0; animation:riseFade .9s ease forwards .15s; }
.hero h1{
  font-size:clamp(2.4rem, 6vw, 4.4rem);
  color:var(--burgundy);
  margin:18px 0 22px;
  opacity:0; animation:riseFade 1s ease forwards .4s;
}
.hero h1 em{ font-style:italic; color:var(--gold); }
.hero p{
  max-width:600px; color:var(--ink-soft); font-size:1.05rem; line-height:1.75;
  opacity:0; animation:riseFade 1s ease forwards .7s;
}
.hero .btns{
  margin-top:36px; display:flex; gap:16px; flex-wrap:wrap; justify-content:center;
  opacity:0; animation:riseFade 1s ease forwards 1s;
}
.hero-badges{
  margin-top:40px; display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
  opacity:0; animation:riseFade 1s ease forwards 1.2s;
}
.hero-badges span{
  border:1px solid rgba(184,146,74,0.45); border-radius:999px;
  padding:7px 16px; font-size:0.75rem; letter-spacing:1px;
  color:var(--ink-soft); background:rgba(255,255,255,0.5);
}
@keyframes riseFade{ from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:translateY(0);} }

.scroll-hint{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  font-size:0.65rem; letter-spacing:3px; color:var(--ink-soft); text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:8px; z-index:1;
}
.scroll-hint .line{
  width:1px; height:40px;
  background:linear-gradient(var(--gold), transparent);
  animation:scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine{0%,100%{transform:scaleY(.4); opacity:.4;} 50%{transform:scaleY(1); opacity:1;}}

/* ============================ SECTIONS ============================ */
section{ padding:110px 8%; position:relative; }
.section-head{ text-align:center; max-width:720px; margin:0 auto 60px; }
.section-head h2{ font-size:clamp(1.9rem,3.6vw,2.9rem); color:var(--burgundy); margin-top:14px; }
.section-head p{ color:var(--ink-soft); margin-top:16px; line-height:1.75; }

.divider{ width:60px; height:2px; background:var(--gold); margin:18px auto 0; position:relative; }
.divider::before{
  content:'✦'; position:absolute; left:50%; top:-9px; transform:translateX(-50%);
  color:var(--gold); font-size:0.9rem; background:var(--cream); padding:0 6px;
}
.about .divider::before{ background:var(--cream-dark); }
.atelier .divider::before{ background:var(--burgundy); }

.reveal{ opacity:0; transform:translateY(36px); transition:opacity .8s ease, transform .8s ease; }
.reveal.visible{ opacity:1; transform:translateY(0); }

/* ============================ À PROPOS ============================ */
.about{ background:var(--cream-dark); }
.about-grid{
  display:grid; grid-template-columns:1fr 1.15fr; gap:70px; align-items:center;
  max-width:1100px; margin:0 auto;
}
.about-visual{
  aspect-ratio:4/5; border-radius:6px; position:relative; overflow:hidden;
  background:var(--burgundy-dark);
  box-shadow:var(--shadow);
}
.about-visual img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.about-visual::after{
  content:''; position:absolute; inset:14px; border:1px solid rgba(247,241,230,0.45);
  pointer-events:none;
}
.about-visual figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:38px 22px 16px;
  background:linear-gradient(transparent, rgba(43,35,28,0.82));
  color:rgba(247,241,230,0.95); font-size:0.82rem; line-height:1.5;
}
.about-text h3{ color:var(--burgundy); font-size:1.75rem; margin:14px 0 18px; }
.about-text p{ color:var(--ink-soft); line-height:1.9; margin-bottom:16px; }
.stat-row{ display:flex; gap:40px; margin-top:30px; flex-wrap:wrap; }
.stat .num{ font-family:var(--serif); font-size:2.1rem; color:var(--gold); display:block; }
.stat .label{ font-size:0.72rem; letter-spacing:1px; color:var(--ink-soft); text-transform:uppercase; }

/* ============================ SERVICES ============================ */
.services-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:28px; max-width:1180px; margin:0 auto;
}
.serv-card{
  background:var(--white); border-radius:6px; padding:40px 30px; text-align:center;
  border:1px solid rgba(184,146,74,0.18);
  transition:transform .4s ease, box-shadow .4s ease, border-color .4s ease;
  position:relative; overflow:hidden;
}
.serv-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--gold-light), var(--burgundy));
  transform:scaleX(0); transform-origin:left; transition:transform .45s ease;
}
.serv-card:hover::before{ transform:scaleX(1); }
.serv-card:hover{ transform:translateY(-10px); box-shadow:var(--shadow); border-color:transparent; }
.serv-icon{
  width:62px; height:62px; margin:0 auto 22px; border-radius:50%;
  border:1px solid var(--gold); display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; color:var(--gold);
  transition:background .35s ease, color .35s ease;
}
.serv-card:hover .serv-icon{ background:var(--gold); color:var(--white); }
.serv-card h3{ color:var(--burgundy); font-size:1.3rem; margin-bottom:12px; }
.serv-card p{ color:var(--ink-soft); font-size:0.92rem; line-height:1.7; }
.serv-card .tag{
  display:inline-block; margin-top:16px; font-size:0.68rem; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--gold); border-top:1px solid rgba(184,146,74,0.3);
  padding-top:12px;
}

/* ============================ GALERIE ============================ */
.galerie{ background:var(--cream-dark); }
.galerie .divider::before{ background:var(--cream-dark); }
/* Nombre de colonnes volontairement fixe (4 ou 2, jamais 3) : avec 8 bijoux,
   les rangées restent toujours pleines, donc la grille reste symétrique. */
.galerie-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:22px; max-width:1180px; margin:0 auto;
}
@media(max-width:1000px){
  .galerie-grid{ grid-template-columns:repeat(2,1fr); gap:18px; }
}
.galerie-item{
  margin:0; position:relative; border-radius:6px; overflow:hidden;
  background:var(--white); border:none; padding:0; cursor:zoom-in;
  box-shadow:0 6px 18px rgba(92,31,43,0.07);
  transition:transform .4s ease, box-shadow .4s ease;
  font:inherit; color:inherit; text-align:left; display:block; width:100%;
}
.galerie-item:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.galerie-item img{
  /* height:auto est indispensable : sans lui l'attribut height="" du HTML
     fige la hauteur et neutralise aspect-ratio */
  width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; display:block;
  transition:transform .6s ease;
}
.galerie-item:hover img{ transform:scale(1.05); }
.galerie-item .legende{
  position:absolute; left:0; right:0; bottom:0;
  padding:34px 16px 14px;
  background:linear-gradient(transparent, rgba(43,35,28,0.78));
  color:var(--cream); font-size:0.85rem; letter-spacing:0.3px;
  opacity:0; transform:translateY(8px);
  transition:opacity .35s ease, transform .35s ease;
}
.galerie-item:hover .legende,
.galerie-item:focus-visible .legende{ opacity:1; transform:translateY(0); }
.galerie-note{
  max-width:760px; margin:44px auto 0; text-align:center;
  color:var(--ink-soft); font-size:0.95rem; line-height:1.8;
}

/* Visionneuse plein écran */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(30,22,18,0.94);
  display:flex; align-items:center; justify-content:center; padding:5vh 6vw;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s linear .3s;
}
.lightbox.open{ opacity:1; visibility:visible; transition:opacity .3s ease, visibility 0s linear 0s; }
.lightbox img{
  max-width:100%; max-height:78vh; object-fit:contain;
  border-radius:4px; box-shadow:0 30px 70px rgba(0,0,0,0.5);
}
.lightbox .lb-legende{
  position:absolute; bottom:5vh; left:0; right:0; text-align:center;
  color:rgba(247,241,230,0.85); font-size:0.9rem; padding:0 6vw;
}
.lightbox button{
  position:absolute; background:none; border:1px solid rgba(247,241,230,0.35);
  color:var(--cream); width:46px; height:46px; border-radius:50%;
  font-size:1.3rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s ease, border-color .3s ease;
}
.lightbox button:hover{ background:rgba(247,241,230,0.14); border-color:var(--gold-light); }
.lb-fermer{ top:3vh; right:5vw; }
.lb-prec{ left:2vw; top:50%; transform:translateY(-50%); }
.lb-suiv{ right:2vw; top:50%; transform:translateY(-50%); }

/* ============================ CERTIFICATS ============================ */
.certificats-grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:30px; max-width:1000px; margin:0 auto;
}
.certificat{
  background:var(--white); border:1px solid rgba(184,146,74,0.22);
  border-radius:6px; overflow:hidden; display:flex; flex-direction:column;
  transition:transform .35s ease, box-shadow .35s ease;
}
.certificat:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.certificat-photo{
  background:var(--cream-dark); padding:22px;
  display:flex; align-items:center; justify-content:center; min-height:220px;
}
.certificat-photo img{
  max-width:100%; max-height:260px; width:auto; height:auto;
  border-radius:4px; box-shadow:0 8px 22px rgba(43,35,28,0.18);
}
.certificat-corps{ padding:26px 26px 28px; flex:1; }
.certificat-corps h3{ color:var(--burgundy); font-size:1.35rem; margin-bottom:6px; }
.certificat-labo{
  font-size:0.72rem; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--gold); display:block; margin-bottom:16px;
}
.certificat-liste{ list-style:none; margin:0; }
.certificat-liste li{
  display:flex; justify-content:space-between; gap:14px;
  font-size:0.9rem; color:var(--ink-soft); padding:7px 0;
  border-bottom:1px dotted rgba(43,35,28,0.14);
}
.certificat-liste li:last-child{ border-bottom:none; }
.certificat-liste span:last-child{ color:var(--ink); text-align:right; }

.certificats-note{
  max-width:820px; margin:46px auto 0; text-align:center;
  color:var(--ink-soft); font-size:0.95rem; line-height:1.85;
}
.certificats-note strong{ color:var(--ink); }

@media(max-width:820px){
  .certificats-grid{ grid-template-columns:1fr; gap:22px; }
  .certificat-photo{ min-height:0; padding:18px; }
  .certificat-photo img{ max-height:220px; }
  .certificat-corps{ padding:22px; }
}

/* ============================ ATELIER ============================ */
.atelier{ background:var(--burgundy); color:var(--cream); }
.atelier .section-head h2, .atelier .section-head .eyebrow{ color:var(--cream); }
.atelier .section-head .eyebrow{ color:var(--gold-light); }
.atelier .section-head p{ color:rgba(247,241,230,0.75); }
.atelier-steps{ max-width:960px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.step{ text-align:center; }
.step .step-num{
  width:48px; height:48px; border-radius:50%; border:1px solid var(--gold-light);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px;
  color:var(--gold-light); font-family:var(--serif); font-size:1.1rem;
}
.step h4{ font-size:1.2rem; margin-bottom:10px; }
.step p{ font-size:0.9rem; color:rgba(247,241,230,0.72); line-height:1.7; }

.quote-block{ max-width:720px; margin:80px auto 0; text-align:center; }
.quote-block .mark{ font-family:var(--serif); font-size:3rem; color:var(--gold-light); display:block; margin-bottom:6px; line-height:1; }
.quote-block p{ font-family:var(--serif); font-size:1.4rem; font-style:italic; color:var(--cream); line-height:1.7; }
.quote-block .who{ margin-top:20px; font-size:0.75rem; letter-spacing:1.5px; color:var(--gold-light); text-transform:uppercase; }

/* ============================ ACCÈS ============================ */
.acces{ background:var(--cream-dark); }
.acces .divider::before{ background:var(--cream-dark); }
.acces-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:24px; max-width:1100px; margin:0 auto 50px;
}
.ville-card{
  background:var(--white); border:1px solid rgba(184,146,74,0.2); border-radius:6px;
  padding:32px 26px; text-align:center;
  transition:transform .35s ease, box-shadow .35s ease;
}
.ville-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.ville-card h3{ color:var(--burgundy); font-size:1.5rem; margin-bottom:14px; }
.ville-card .temps{ font-family:var(--serif); font-size:1.9rem; color:var(--gold); display:block; }
.ville-card .mode{ font-size:0.72rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-soft); display:block; margin-top:4px; }
.ville-card .detail{ margin-top:16px; font-size:0.88rem; color:var(--ink-soft); line-height:1.65; }
.acces-note{
  max-width:820px; margin:0 auto; text-align:center;
  color:var(--ink-soft); font-size:0.95rem; line-height:1.85;
}

/* ============================ FAQ ============================ */
.faq-liste{ max-width:800px; margin:0 auto; }
.faq-item{
  background:var(--white); border:1px solid rgba(184,146,74,0.2);
  border-radius:6px; margin-bottom:14px; overflow:hidden;
  transition:box-shadow .35s ease, border-color .35s ease;
}
.faq-item[open]{ box-shadow:var(--shadow); border-color:transparent; }
.faq-item summary{
  cursor:pointer; list-style:none;
  padding:22px 56px 22px 26px; position:relative;
  font-family:var(--serif); font-size:1.18rem; color:var(--burgundy);
  transition:color .3s ease;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--gold); }
.faq-item summary::after{
  content:'+'; position:absolute; right:24px; top:50%; transform:translateY(-50%);
  font-family:var(--sans); font-size:1.4rem; font-weight:300; color:var(--gold);
  transition:transform .3s ease;
}
.faq-item[open] summary::after{ content:'−'; }
.faq-reponse{ padding:0 26px 24px; }
.faq-reponse p{ color:var(--ink-soft); line-height:1.85; font-size:0.96rem; margin:0; }

/* ============================ BANDEAU COOKIES ============================ */
.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:300;
  background:var(--white); border:1px solid rgba(184,146,74,0.35);
  border-radius:8px; box-shadow:0 18px 50px rgba(43,35,28,0.28);
  padding:22px 26px;
  transform:translateY(140%); opacity:0;
  transition:transform .4s ease, opacity .4s ease;
}
.cookie-banner.is-visible{ transform:translateY(0); opacity:1; }
.cookie-inner{
  max-width:1100px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cookie-text{
  color:var(--ink-soft); font-size:0.9rem; line-height:1.65; margin:0;
  flex:1 1 320px;
}
.cookie-text a{ color:var(--burgundy); }
.cookie-actions{ display:flex; gap:12px; flex-shrink:0; }
.cookie-actions button{
  padding:11px 24px; font-family:var(--sans); font-size:0.78rem;
  letter-spacing:1.5px; text-transform:uppercase;
  border-radius:2px; cursor:pointer; border:1px solid transparent;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.cookie-refuser{ background:transparent; border-color:var(--ink-soft); color:var(--ink); }
.cookie-refuser:hover{ border-color:var(--gold); color:var(--gold); }
.cookie-accepter{ background:var(--burgundy); color:var(--cream); }
.cookie-accepter:hover{ background:var(--gold); }

.cookie-reglages{
  background:none; border:none; padding:0; cursor:pointer;
  color:rgba(247,241,230,0.62); font-family:var(--sans); font-size:0.78rem;
  text-decoration:underline; text-underline-offset:3px;
}
.cookie-reglages:hover{ color:var(--gold-light); }

@media(max-width:600px){
  .cookie-inner{ flex-direction:column; align-items:stretch; gap:16px; }
  .cookie-actions{ justify-content:stretch; }
  .cookie-actions button{ flex:1; }
}

/* ============================ CONTACT ============================ */
.contact-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:50px; max-width:1100px; margin:0 auto; align-items:start; }
.info-card{ background:var(--white); border:1px solid rgba(184,146,74,0.2); border-radius:6px; padding:40px; }
.info-card h3{ color:var(--burgundy); margin-bottom:24px; font-size:1.5rem; }
.info-row{ display:flex; gap:16px; margin-bottom:22px; align-items:flex-start; }
.info-row .ic{ color:var(--gold); font-size:1.1rem; width:24px; flex-shrink:0; text-align:center; }
.info-row p{ color:var(--ink-soft); font-size:0.94rem; line-height:1.7; margin:0; }
.info-row strong{ color:var(--ink); display:block; margin-bottom:3px; font-size:0.95rem; font-weight:400; }
.info-row a{ color:var(--burgundy); text-decoration:none; border-bottom:1px solid rgba(184,146,74,0.5); }
.info-row a:hover{ color:var(--gold); }

.statut{
  display:inline-flex; align-items:center; gap:8px; margin-top:4px;
  font-size:0.78rem; letter-spacing:1px; text-transform:uppercase;
  padding:5px 12px; border-radius:999px;
}
.statut::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.statut.ouvert{ background:rgba(72,124,80,0.12); color:#3d6b44; }
.statut.ferme{ background:rgba(92,31,43,0.09); color:var(--burgundy); }

.horaires-list{ list-style:none; margin:6px 0 0; }
.horaires-list li{
  display:flex; justify-content:space-between; gap:16px;
  font-size:0.92rem; color:var(--ink-soft); padding:5px 0;
  border-bottom:1px dotted rgba(43,35,28,0.14);
}
.horaires-list li:last-child{ border-bottom:none; }
.horaires-list li.today{ color:var(--burgundy); }

.form-card{ background:var(--white); border:1px solid rgba(184,146,74,0.2); border-radius:6px; padding:40px; }
.form-card h3{ color:var(--burgundy); margin-bottom:8px; font-size:1.5rem; }
.form-card > p{ color:var(--ink-soft); font-size:0.92rem; line-height:1.7; margin-bottom:24px; }
.contact-form{ display:flex; flex-direction:column; gap:20px; }
.contact-form label{ font-size:0.75rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-soft); display:block; margin-bottom:6px; }
.contact-form input, .contact-form textarea, .contact-form select{
  width:100%;
  border:none; border-bottom:1px solid rgba(43,35,28,0.25); background:transparent;
  padding:10px 2px; font-family:var(--sans); font-weight:300; font-size:0.98rem; color:var(--ink);
  outline:none; transition:border-color .3s ease; border-radius:0;
}
.contact-form textarea{ resize:vertical; min-height:90px; }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus{ border-color:var(--gold); }
.contact-form button{ align-self:flex-start; margin-top:4px; }
.form-legal{ font-size:0.76rem; color:var(--ink-soft); line-height:1.6; }
.form-legal a{ color:var(--burgundy); }
.hp-field{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

.map-embed{
  border-radius:6px; overflow:hidden; margin-top:26px;
  border:1px solid rgba(184,146,74,0.2); background:var(--cream-dark);
}
.map-embed iframe{ display:block; width:100%; height:280px; border:0; }

/* ============================ BANDEAU CTA ============================ */
.cta-band{
  background:linear-gradient(135deg, var(--burgundy), var(--burgundy-dark));
  color:var(--cream); text-align:center; padding:80px 8%;
}
.cta-band h2{ font-size:clamp(1.7rem,3vw,2.4rem); margin-bottom:16px; }
.cta-band p{ color:rgba(247,241,230,0.78); max-width:560px; margin:0 auto 30px; line-height:1.75; }
.cta-band .btns{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ============================ FOOTER ============================ */
footer{
  background:var(--ink); color:rgba(247,241,230,0.62);
  padding:60px 8% 30px; font-size:0.86rem; line-height:1.8;
}
.footer-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:40px; max-width:1100px; margin:0 auto 40px;
}
.footer-grid h4{ color:var(--gold-light); font-size:1rem; letter-spacing:1.5px; margin-bottom:14px; }
.footer-grid a{ color:rgba(247,241,230,0.62); text-decoration:none; }
.footer-grid a:hover{ color:var(--gold-light); }
.footer-grid ul{ list-style:none; }
.footer-grid li{ margin-bottom:6px; }
.flogo{ font-family:var(--serif); color:var(--gold-light); font-size:1.25rem; letter-spacing:3px; margin-bottom:12px; }
.footer-bottom{
  max-width:1100px; margin:0 auto; padding-top:24px;
  border-top:1px solid rgba(247,241,230,0.12);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:0.78rem;
}
.footer-bottom a{ color:rgba(247,241,230,0.62); text-decoration:none; }
.footer-bottom a:hover{ color:var(--gold-light); }

/* ============================ PAGES SIMPLES ============================ */
.page-header{
  padding:150px 8% 60px; text-align:center;
  background:var(--cream-dark);
}
.page-header h1{ color:var(--burgundy); font-size:clamp(2rem,4vw,3rem); margin-top:12px; }
.page-content{ max-width:780px; margin:0 auto; padding:70px 8% 100px; }
.page-content h2{ color:var(--burgundy); font-size:1.5rem; margin:38px 0 14px; }
.page-content h2:first-child{ margin-top:0; }
.page-content p, .page-content li{ color:var(--ink-soft); line-height:1.9; margin-bottom:12px; }
.page-content ul{ padding-left:22px; }
.page-content a{ color:var(--burgundy); }

.merci-wrap{
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:120px 8%;
}
.merci-wrap .ornament{ font-size:3.5rem; color:var(--gold); margin-bottom:20px; }
.merci-wrap h1{ color:var(--burgundy); font-size:clamp(2rem,4vw,2.8rem); margin-bottom:18px; }
.merci-wrap p{ color:var(--ink-soft); max-width:520px; line-height:1.8; margin-bottom:30px; }

/* ============================ RESPONSIVE ============================ */
@media(max-width:900px){
  .about-grid{ grid-template-columns:1fr; gap:44px; }
  .about-visual{ max-width:340px; margin:0 auto; }
  .contact-wrap{ grid-template-columns:1fr; gap:32px; }
  .atelier-steps{ grid-template-columns:1fr; gap:34px; }
}

/* Menu réduit en tiroir dès que les liens ne tiennent plus sur une ligne */
@media(max-width:1060px){
  .burger{ display:block; }
  .nav-links{
    position:fixed; top:0; right:0; bottom:0; width:min(78vw,320px);
    background:var(--cream); flex-direction:column; align-items:flex-start;
    justify-content:center; gap:26px; padding:40px;
    box-shadow:-8px 0 40px rgba(0,0,0,0.12);
    /* fermé : ni cliquable, ni atteignable au clavier */
    transform:translateX(100%); visibility:hidden;
    /* le masquage n'intervient qu'une fois le tiroir refermé */
    transition:transform .4s ease, visibility 0s linear .4s;
  }
  .nav-links.open{
    transform:translateX(0); visibility:visible;
    transition:transform .4s ease, visibility 0s linear 0s;
  }
  .nav-links a{ font-size:0.95rem; }
}

@media(max-width:820px){
  section{ padding:80px 7%; }
  .galerie-grid{ gap:14px; }
  /* Sur mobile il n'y a pas de survol : la légende reste toujours visible */
  .galerie-item .legende{ opacity:1; transform:none; font-size:0.78rem; padding:26px 12px 10px; }
  .lb-prec{ left:1vw; } .lb-suiv{ right:1vw; }
  .lightbox button{ width:40px; height:40px; }
  .hero{ padding:130px 7% 90px; }
  .info-card, .form-card{ padding:30px 24px; }
  .stat-row{ gap:26px; }
}

@media(max-width:480px){
  .logo{ font-size:1.1rem; letter-spacing:2px; }
  .hero .btns{ flex-direction:column; width:100%; }
  .hero .btns a{ width:100%; text-align:center; }
  .footer-bottom{ flex-direction:column; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
}

@media print{
  nav, .scroll-hint, .cta-band, .burger{ display:none !important; }
  body{ background:#fff; color:#000; }
}