/* ===========================================================
   MY DATTES — Design tokens
   =========================================================== */
:root{
  --navy-deep:   #071433;
  --navy:        #0B2265;
  --navy-mid:    #163a8a;
  --gold:        #C6A664;
  --gold-light:  #E8D9B0;
  --gold-deep:   #9C7F3F;
  --cream:       #FBF7EF;
  --ivory:       #F2EBDA;
  --ink:         #1E1B14;
  --muted:       #6B6558;
  --white:       #ffffff;

  --font-display: 'Fraunces', serif;
  --font-body:    'Manrope', sans-serif;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6.5rem;

  --radius-s: 10px;
  --radius-m: 20px;
  --radius-l: 32px;

  --shadow-soft: 0 20px 50px -20px rgba(7,20,51,0.35);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ===========================================================
   Reset & base
   =========================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  font-size: 16px;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ font-family: var(--font-display); margin:0 0 var(--space-2); color: var(--navy); font-weight:600; }
p{ margin:0 0 var(--space-2); }
button{ font-family: inherit; cursor:pointer; }
input, textarea, select{ font-family: inherit; font-size: 1rem; }

.wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

.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:absolute; left:-999px; top:0;
  background:var(--navy); color:#fff; padding:0.75rem 1.25rem; z-index:200;
  border-radius: 0 0 8px 0;
}
.skip-link:focus{ left:0; }

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

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

/* ===========================================================
   Type helpers
   =========================================================== */
.eyebrow{
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold-deep);
  margin-bottom: var(--space-1);
}
.eyebrow-light{ color: var(--gold-light); }
.section-title-light{ color: var(--white); }
.section-lead{
  max-width: 46ch;
  color: var(--muted);
  font-size: 1.05rem;
}
.section-lead.dark{ color: rgba(255,255,255,0.75); max-width: 56ch; }

/* ===========================================================
   Buttons
   =========================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 0.95rem 2rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
  border: 1.5px solid transparent;
  min-height: 44px;
}
.btn-gold{
  background: linear-gradient(135deg, #D8BD84, var(--gold) 55%, var(--gold-deep));
  color: var(--navy-deep);
  box-shadow: 0 14px 30px -12px rgba(198,166,100,0.55);
}
.btn-gold:hover{ transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(198,166,100,0.7); }
.btn-ghost{
  border-color: rgba(255,255,255,0.5);
  color: var(--white);
}
.btn-ghost:hover{ background: rgba(255,255,255,0.08); border-color: var(--gold); }
.btn-block{ width:100%; }

.text-link{
  display:inline-block;
  font-weight:700;
  color: var(--navy);
  border-bottom: 1.5px solid var(--gold);
  padding-bottom: 2px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.text-link:hover{ color: var(--gold-deep); }

/* ===========================================================
   Reveal on scroll
   =========================================================== */
.reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* ===========================================================
   Header
   =========================================================== */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 100;
  padding: 1.1rem 0;
  transition: background 0.35s var(--ease), padding 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.site-header.scrolled{
  background: rgba(7,20,51,0.92);
  backdrop-filter: blur(10px);
  padding: 0.7rem 0;
  box-shadow: 0 10px 30px -18px rgba(0,0,0,0.5);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
}
.brand{
  display:flex; align-items:center; gap:0.6rem;
  color: var(--white);
}
.brand-mark{ display:block; height: 32px; width:auto; }
.brand-word{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--gold);
}
.main-nav{ display:flex; align-items:center; gap: clamp(1rem, 2vw, 1.9rem); }
.main-nav a{
  color: rgba(255,255,255,0.85);
  font-size: 0.92rem;
  font-weight: 600;
  position: relative;
  padding: 4px 0;
}
.main-nav a:not(.nav-cta)::after{
  content:'';
  position:absolute; left:0; right:100%; bottom:0;
  height:1.5px; background:var(--gold);
  transition: right 0.25s var(--ease);
}
.main-nav a:not(.nav-cta):hover::after{ right:0; }
.nav-cta{
  background: var(--gold);
  color: var(--navy-deep) !important;
  padding: 0.6rem 3.2rem;
  border-radius: 999px;
  font-weight:700;
  white-space: nowrap;
}
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px; height:44px;
  background:transparent; border:none;
}
.nav-toggle span{
  display:block; width:22px; height:2px; background:var(--white); margin:0 auto;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.nav-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ===========================================================
   Hero
   =========================================================== */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex;
  align-items:center;
  background: radial-gradient(140% 100% at 50% 0%, var(--navy) 0%, var(--navy-deep) 62%);
  overflow: hidden;
  padding-top: 6rem;
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-arch{
  position:absolute;
  bottom:0; left:50%;
  transform: translateX(-50%);
  width: min(1100px, 160vw);
  height: 100%;
}
.hero-glow{
  position:absolute;
  top: -10%; left:50%;
  transform: translateX(-50%);
  width: 900px; height: 900px;
  background: radial-gradient(circle, rgba(198,166,100,0.18) 0%, rgba(198,166,100,0) 68%);
}
.hero-inner{ position:relative; z-index:1; text-align:center; }
.hero-logo{
  display:block;
  width: min(340px, 70vw);
  height:auto;
  margin: 0.5rem auto 1.75rem;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,0.35));
}
.hero-title{
  color: var(--white);
  font-size: clamp(3.2rem, 9vw, 6.4rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
  line-height: 1;
}
.hero-slogan{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--gold-light);
  font-size: clamp(1.2rem, 2.6vw, 1.7rem);
  margin-bottom: var(--space-3);
}
.hero-copy{
  color: rgba(255,255,255,0.72);
  max-width: 46ch;
  margin: 0 auto var(--space-4);
  font-size: 1.05rem;
}
.hero-copy-long{
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.75;
}
.hero-actions{ display:flex; gap: 1rem; justify-content:center; flex-wrap: wrap; }

.scroll-cue{
  position:absolute; bottom: 2rem; left:50%; transform: translateX(-50%);
  width: 26px; height: 42px; border: 1.5px solid rgba(255,255,255,0.5); border-radius: 20px;
  z-index:1;
}
.scroll-cue span{
  position:absolute; top:7px; left:50%; transform: translateX(-50%);
  width:4px; height:8px; border-radius:2px; background: var(--gold);
  animation: cue 1.8s infinite var(--ease);
}
@keyframes cue{
  0%{ opacity:1; top:7px; }
  70%{ opacity:0; top:22px; }
  100%{ opacity:0; top:7px; }
}

/* ===========================================================
   About
   =========================================================== */
.about{ padding: var(--space-6) 0; }
.about-inner{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items:center;
}
.about-text h2{ font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
.about-text p{ color: var(--muted); max-width: 54ch; text-align: justify; text-justify: inter-word; }

.about-tabs{
  display:flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 1.5rem;
  border-bottom: 1px solid rgba(11,34,101,0.12);
  padding-bottom: 0;
}
.about-tab{
  background:none;
  border:none;
  padding: 0.7rem 0.2rem;
  margin-right: 1.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--muted);
  cursor: pointer;
  position: relative;
  transition: color 0.25s var(--ease);
}
.about-tab::after{
  content:'';
  position:absolute;
  left:0; right:100%; bottom:-1px;
  height: 2px;
  background: var(--gold-deep);
  transition: right 0.3s var(--ease);
}
.about-tab:hover{ color: var(--navy); }
.about-tab.active{ color: var(--navy); }
.about-tab.active::after{ right:0; }

.about-panel{
  animation: aboutFadeIn 0.4s var(--ease);
}
.about-panel[hidden]{ display:none; }
@keyframes aboutFadeIn{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}
.about-portrait{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.portrait-frame{
  position:relative;
  width: min(320px, 70vw);
  aspect-ratio: 1/1;
  border-radius: 50%;
  padding: 10px;
  background: conic-gradient(from 210deg, var(--gold-light), var(--gold), var(--gold-deep), var(--gold-light));
  box-shadow: var(--shadow-soft);
}
.portrait-frame img{
  width:100%; height:100%; object-fit: cover; border-radius:50%;
  border: 4px solid var(--cream);
}
.portrait-caption{ margin-top: var(--space-2); }
.portrait-caption strong{ display:block; font-family: var(--font-display); font-size:1.15rem; color: var(--navy); }
.portrait-caption span{ font-size: 0.85rem; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }

/* ===========================================================
   Carousel — signature element
   =========================================================== */
.varieties{
  background: #FFFFFF;
  padding: var(--space-6) 0 var(--space-5);
  color: var(--ink);
  position: relative;
  border-top: 1px solid rgba(11,34,101,0.06);
  border-bottom: 1px solid rgba(11,34,101,0.06);
}
.varieties .wrap{ text-align:center; margin-bottom: var(--space-4); }
.varieties h2{ font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
.varieties .section-lead{ margin: 0 auto; text-align:center; }

.hero-carousel{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: clamp(0.5rem, 2vw, 2rem);
  padding: 0 clamp(0.5rem, 3vw, 2rem);
}

.car-stage{
  position:relative;
  flex: 0 1 min(760px, 82vw);
  aspect-ratio: 1 / 0.8;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  cursor: grab;
  outline-offset: 6px;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.car-stage:active{ cursor: grabbing; }

.car-halo{ display:none; }

.car-slides{ position:absolute; inset:0; }

.car-slide{
  position:absolute;
  inset:0;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform: translateX(0) scale(0.94);
  pointer-events:none;
  transition: transform 0.6s var(--ease), opacity 0.45s var(--ease);
}
.car-slide img{
  max-width: 88%;
  max-height: 88%;
  width:auto; height:auto;
  object-fit: contain;
  border-radius: var(--radius-l);
  box-shadow: 0 30px 60px -25px rgba(11,34,101,0.30), 0 8px 24px -12px rgba(11,34,101,0.18);
}

.car-slide.is-active{
  opacity:1;
  transform: translateX(0) scale(1);
  pointer-events:auto;
  z-index:2;
}
.car-slide.from-right{ opacity:0; transform: translateX(60%) scale(0.9); transition:none; }
.car-slide.from-left { opacity:0; transform: translateX(-60%) scale(0.9); transition:none; }
.car-slide.to-left   { opacity:0; transform: translateX(-55%) scale(0.9); z-index:1; }
.car-slide.to-right  { opacity:0; transform: translateX(55%) scale(0.9); z-index:1; }

/* légende sous la datte */
.car-caption{
  text-align:center;
  margin: 1.25rem auto 0;
  max-width: 46ch;
  padding: 0 1.5rem;
  opacity:0;
  transform: translateY(10px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.car-caption.is-in{ opacity:1; transform: translateY(0); }
.car-badge[hidden]{ display:none; }
.car-badge{
  display:inline-block;
  background: linear-gradient(135deg, #D8BD84, var(--gold) 55%, var(--gold-deep));
  color: var(--navy-deep);
  font-size: 0.66rem;
  font-weight:800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  margin-bottom: 0.85rem;
}
.car-name{
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.15rem);
  color: var(--navy);
  margin: 0 0 0.5rem;
}
.car-desc{
  font-size: 1rem;
  color: var(--muted);
  margin:0;
}

.car-arrow{
  flex: 0 0 auto;
  width: 52px; height: 52px;
  border-radius:50%;
  border: 1.5px solid rgba(11,34,101,0.18);
  background: var(--ivory);
  color: var(--navy);
  display:flex; align-items:center; justify-content:center;
  transition: background 0.25s var(--ease), transform 0.2s var(--ease), border-color 0.25s var(--ease);
  z-index:3;
  box-shadow: 0 10px 24px -14px rgba(11,34,101,0.35);
}
.car-arrow:hover{ background: var(--gold); border-color: var(--gold); color: var(--navy-deep); transform: scale(1.07); }
.car-arrow:active{ transform: scale(0.95); }

.car-dots{
  display:flex; justify-content:center; gap: 0.55rem;
  margin-top: 1.75rem;
  flex-wrap: wrap;
  padding: 0 1.5rem;
}
.car-dots button{
  width:9px; height:9px; border-radius:50%;
  background: rgba(11,34,101,0.18);
  border:none; padding:0;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.car-dots button.active{ background: var(--gold-deep); transform: scale(1.35); }

/* ===========================================================
   Produits
   =========================================================== */
.produits{ padding: var(--space-6) 0; }
.produits .wrap:first-child{ text-align:center; margin-bottom: var(--space-4); }
.produits-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
}
.produit-card{
  background: var(--white);
  border: 1px solid rgba(198,166,100,0.25);
  border-radius: var(--radius-m);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  box-shadow: var(--shadow-soft);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.produit-card:hover{ transform: translateY(-4px); box-shadow: 0 30px 60px -25px rgba(11,34,101,0.25); }
.produit-icon{
  color: var(--gold-deep);
  margin-bottom: 1.1rem;
}
.produit-card h3{ font-size: 1.4rem; }
.produit-card p{ color: var(--muted); margin-bottom:0; }

/* ===========================================================
   Commander
   =========================================================== */
.commander{
  background: var(--navy);
  color: var(--white);
  padding: var(--space-6) 0;
}
.commander .wrap:first-child{ text-align:center; margin-bottom: var(--space-5); }
.commander .wrap:first-child .section-lead{ margin: 0 auto; }
.commander h2{ color: var(--white); }
.steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
  margin-bottom: var(--space-5);
}
.step{
  border-top: 1.5px solid var(--gold);
  padding-top: 1.25rem;
}
.step-num{
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--gold-light);
  display:block;
  margin-bottom: 0.5rem;
}
.step h3{ color:var(--white); font-size:1.2rem; }
.step p{ color: rgba(255,255,255,0.66); margin-bottom:0; font-size:0.95rem; }

.commander-note{
  text-align:center;
  max-width: 640px;
  margin: 0 auto;
  padding: 1.4rem 2rem;
  border: 1px solid rgba(198,166,100,0.55);
  border-radius: var(--radius-m);
  background: rgba(198,166,100,0.14);
}
.commander-note p{ margin:0; color: rgba(255,255,255,0.85); font-size:0.95rem; }

/* ===========================================================
   Pages légales (confidentialité / conditions)
   =========================================================== */
.legal-hero{
  background: linear-gradient(180deg, var(--navy-deep), var(--navy) 65%, var(--navy-deep));
  padding: calc(var(--space-6) + 3rem) 0 var(--space-5);
  text-align:center;
}
.legal-hero .eyebrow{ color: var(--gold-light); }
.legal-hero h1{
  font-family: var(--font-display);
  color: var(--white);
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin: 0.5rem 0 0.75rem;
}
.legal-hero p{
  color: rgba(255,255,255,0.68);
  max-width: 46ch;
  margin: 0 auto;
}
.legal-content{
  padding: var(--space-5) 0 var(--space-6);
}
.legal-content .wrap{ max-width: 780px; }
.legal-updated{
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(11,34,101,0.1);
}
.legal-content section{ margin-bottom: var(--space-4); }
.legal-content h2{
  font-family: var(--font-display);
  color: var(--navy);
  font-size: 1.5rem;
  margin-bottom: 0.9rem;
}
.legal-content h3{
  font-family: var(--font-body);
  font-weight: 800;
  color: var(--navy);
  font-size: 1.02rem;
  margin: 1.4rem 0 0.5rem;
}
.legal-content p{
  color: var(--muted);
  text-align: justify;
  text-justify: inter-word;
  margin-bottom: 0.9rem;
}
.legal-content ul{
  color: var(--muted);
  margin: 0 0 0.9rem;
  padding-left: 1.3rem;
}
.legal-content li{ margin-bottom: 0.45rem; }
.legal-content a{ color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.legal-callout{
  background: var(--ivory);
  border: 1px solid rgba(198,166,100,0.35);
  border-radius: var(--radius-m);
  padding: 1.25rem 1.5rem;
  margin-bottom: var(--space-4);
}
.legal-callout p{ margin-bottom: 0; color: var(--ink); }
.legal-toc{
  background: var(--white);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-soft);
  padding: 1.5rem 1.75rem;
  margin-bottom: var(--space-4);
}
.legal-toc p{ font-weight:800; color:var(--navy); text-align:left; margin-bottom:0.6rem; }
.legal-toc ol{ color: var(--muted); padding-left: 1.2rem; margin:0; }
.legal-toc li{ margin-bottom: 0.35rem; }
.legal-toc a{ color: var(--muted); text-decoration:none; }
.legal-toc a:hover{ color: var(--navy); text-decoration:underline; }
.galerie{ padding: var(--space-6) 0; }
.galerie .wrap:first-child{ text-align:center; margin-bottom: var(--space-4); }
.galerie-masonry{
  column-count: 3;
  column-gap: clamp(0.8rem, 2vw, 1.25rem);
}
.galerie-item{
  display:block;
  width:100%;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: clamp(0.8rem, 2vw, 1.25rem);
  border:none; padding:0;
  background: var(--ivory);
  border-radius: var(--radius-m);
  overflow:hidden;
  position:relative;
  box-shadow: var(--shadow-soft);
}
.galerie-item[hidden]{ display:none; }
.galerie-item img{
  display:block;
  width:100%; height:auto;
  transition: transform 0.5s var(--ease);
}
.galerie-item::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(7,20,51,0) 55%, rgba(7,20,51,0.45));
  opacity:0;
  transition: opacity 0.35s var(--ease);
}
.galerie-item:hover img{ transform: scale(1.07); }
.galerie-item:hover::after{ opacity:1; }

.galerie-more-wrap{
  text-align:center;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.btn-outline-navy{
  display:inline-block;
  padding: 0.75rem 2rem;
  border-radius: 999px;
  border: 1.5px solid rgba(11,34,101,0.3);
  color: var(--navy);
  font-weight:700;
  font-size: 0.95rem;
  background: transparent;
  cursor:pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.2s var(--ease);
}
.btn-outline-navy:hover{
  background: rgba(11,34,101,0.06);
  border-color: var(--navy);
  transform: translateY(-2px);
}
.btn-outline-navy[hidden]{ display:none; }

/* ===========================================================
   Avis
   =========================================================== */
.avis{
  background: linear-gradient(180deg, var(--navy-deep), #0a1c47);
  padding: var(--space-6) 0;
  color: var(--white);
}
.avis .wrap:first-child{ text-align:center; margin-bottom: var(--space-4); }
.avis-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
}
.avis-card{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(198,166,100,0.25);
  border-radius: var(--radius-m);
  padding: clamp(1.6rem, 3vw, 2.1rem);
}
.avis-stars{ color: var(--gold); letter-spacing: 0.15em; margin-bottom: 0.85rem; font-size: 0.95rem; }
.avis-ig{
  display:flex; align-items:center; gap:0.5rem;
  color: var(--gold-light);
  letter-spacing: normal;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.avis-card p{ color: rgba(255,255,255,0.85); font-size: 0.98rem; }
.avis-auteur{ color: rgba(255,255,255,0.5); font-size: 0.82rem; margin-bottom:0; }

/* ===========================================================
   Confiance
   =========================================================== */
.confiance{ padding: var(--space-5) 0; }
.confiance-inner{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
}
.confiance-badge{
  display:flex; align-items:flex-start; gap: 1.25rem;
  padding: 1.75rem;
  border-radius: var(--radius-m);
  background: var(--white);
  border: 1.5px solid rgba(198,166,100,0.45);
  box-shadow: 0 20px 45px -22px rgba(11,34,101,0.22);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.confiance-badge:hover{
  transform: translateY(-3px);
  box-shadow: 0 26px 55px -22px rgba(11,34,101,0.3);
}
.confiance-badge .confiance-icon{
  flex-shrink:0;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(198,166,100,0.18), rgba(198,166,100,0.08));
  display:flex; align-items:center; justify-content:center;
}
.confiance-badge svg{ color: var(--gold-deep); }
.confiance-badge h3{ font-size: 1.15rem; margin-bottom: 0.3rem; color: var(--navy); }
.confiance-badge p{ color: var(--muted); font-size: 0.92rem; margin-bottom:0; }

/* ===========================================================
   Contact
   =========================================================== */
.contact{ background: var(--ivory); padding: var(--space-6) 0; }
.contact-inner{
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.map-link-wrap{
  text-align:center;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.contact-info h2{ font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
.contact-list{ margin-top: var(--space-3); display:flex; flex-direction:column; gap: 1rem; }
.contact-list li{ display:flex; align-items:center; gap: 0.85rem; color: var(--ink); }
.contact-list li svg{ color: var(--gold-deep); flex-shrink:0; }
.contact-list a{ font-weight:600; border-bottom: 1px solid transparent; }
.contact-list a:hover{ border-color: var(--gold-deep); }

.contact-card{
  background: var(--white);
  border-radius: var(--radius-l);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: var(--shadow-soft);
}
.contact-form{
  animation: aboutFadeIn 0.35s var(--ease);
}
.contact-form[hidden]{ display:none; }
.hp-field{ position:absolute; left:-9999px; }
.form-row{ margin-bottom: 1.15rem; }
.form-row-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
label{
  display:block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--navy);
  margin-bottom: 0.4rem;
}
input, textarea, select{
  width:100%;
  border: 1.5px solid #DCD3BE;
  border-radius: var(--radius-s);
  padding: 0.8rem 1rem;
  background: var(--cream);
  color: var(--ink);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  min-height: 44px;
}
textarea{ min-height: 110px; resize: vertical; }
input:focus, textarea:focus, select:focus{
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(198,166,100,0.18);
  outline: none;
}
.quick-contact{
  text-align:center;
  margin-bottom: 0;
  padding-bottom: 0;
}
.quick-contact.has-panel{
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(11,34,101,0.1);
}
.quick-contact-label{
  font-size: 0.85rem;
  font-weight:700;
  color: var(--navy);
  margin-bottom: 0.9rem;
}
.quick-contact-buttons{
  display:flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content:center;
}
.quick-btn{
  display:inline-flex;
  align-items:center;
  gap: 0.5rem;
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  font-weight:700;
  font-size: 0.9rem;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
  min-height: 44px;
  border:none;
  cursor:pointer;
  font-family: var(--font-body);
}
.quick-btn-sms{
  background: var(--navy);
  color: var(--white);
}
.quick-btn-sms.active{ box-shadow: 0 0 0 3px rgba(11,34,101,0.25); }
.quick-btn-sms:hover{ transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(11,34,101,0.5); }
.quick-btn-ig{
  background: linear-gradient(135deg, #f6c453, #e1306c 45%, #5851db);
  color: var(--white);
}
.quick-btn-ig.active{ box-shadow: 0 0 0 3px rgba(225,48,108,0.25); }
.quick-btn-ig:hover{ transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(225,48,108,0.5); }

.ig-panel{
  text-align:center;
  padding-top: 0.25rem;
  animation: aboutFadeIn 0.35s var(--ease);
}
.ig-panel[hidden]{ display:none; }
.ig-panel-icon{ color: #e1306c; margin-bottom: 0.75rem; }
.ig-panel h3{
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--navy);
  margin-bottom: 0.6rem;
}
.ig-panel p{
  color: var(--muted);
  font-size: 0.92rem;
  max-width: 42ch;
  margin: 0 auto 1.4rem;
}

.form-intro{
  font-size: 0.88rem;
  color: var(--muted);
  background: rgba(198,166,100,0.1);
  border: 1px solid rgba(198,166,100,0.3);
  border-radius: var(--radius-s);
  padding: 0.8rem 1rem;
  margin-bottom: 1.25rem;
}
.form-note{
  text-align:center;
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0.85rem 0 0;
}

/* ===========================================================
   Footer
   =========================================================== */
.site-footer{ background: var(--navy-deep); color: rgba(255,255,255,0.7); }
.footer-inner{
  padding: var(--space-5) 0 var(--space-3);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-start;
  gap: 2rem;
}
.footer-brand-mark{ display:flex; align-items:center; gap:0.6rem; }
.footer-brand-mark img{ height:26px; width:auto; }
.footer-brand .brand-word{ color: var(--gold); }
.footer-brand p{ margin-top: 0.35rem; font-style: italic; font-family: var(--font-display); color: var(--gold-light); }
.footer-nav{ display:flex; flex-wrap:wrap; gap: 1.5rem; }
.footer-nav a:hover{ color: var(--gold-light); }
.footer-social a{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  border: 1px solid rgba(198,166,100,0.4);
  color: var(--gold-light);
  transition: background 0.25s var(--ease);
}
.footer-social a:hover{ background: rgba(198,166,100,0.15); }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 1.25rem 0 1.75rem;
  font-size: 0.82rem;
  display:flex;
  flex-wrap:wrap;
  gap: 0.5rem 1.5rem;
  justify-content:space-between;
  align-items:center;
}
.footer-bottom p{ margin:0; }
.footer-legal-links a{
  color: rgba(255,255,255,0.65);
  text-decoration: none;
}
.footer-legal-links a:hover{ color: var(--gold-light); text-decoration:underline; }

/* ===========================================================
   Lightbox
   =========================================================== */
.lightbox{
  position: fixed; inset:0; z-index: 300;
  background: rgba(7,20,51,0.92);
  display:none;
  align-items:center; justify-content:center;
  padding: 2rem;
}
.lightbox.open{ display:flex; }
.lightbox img{
  max-width: min(900px, 92vw);
  max-height: 88vh;
  border-radius: var(--radius-m);
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.6);
}
.lightbox-close{
  position:absolute; top: 1.5rem; right: 1.5rem;
  width:48px; height:48px; border-radius:50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(198,166,100,0.4);
  color: var(--white);
  display:flex; align-items:center; justify-content:center;
}
.lightbox-close:hover{ background: rgba(198,166,100,0.2); }

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 980px){
  .about-inner, .contact-inner{ grid-template-columns: 1fr; }
  .about-portrait{ order:-1; }
  .produits-grid, .steps, .avis-grid, .confiance-inner{ grid-template-columns: 1fr; }
  .galerie-masonry{ column-count: 2; }
}

@media (max-width: 800px){
  .main-nav{
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(320px, 82vw);
    background: var(--navy-deep);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.75rem;
    padding: 2rem 2.5rem;
    transform: translateX(100%);
    transition: transform 0.4s var(--ease);
    box-shadow: -20px 0 60px rgba(0,0,0,0.4);
  }
  .main-nav.open{ transform: translateX(0); }
  .main-nav a{ font-size: 1.1rem; }
  .nav-toggle{ display:flex; }
  .nav-cta{ margin-top: 0.5rem; }
}

@media (max-width: 640px){
  .form-row-split{ grid-template-columns: 1fr; }
  .galerie-masonry{ column-count: 2; }
  .hero{ padding-top: 5.5rem; }
}

@media (max-width: 700px){
  .hero-carousel{ padding: 0; gap: 0; }
  .car-stage{ flex: 0 1 94vw; aspect-ratio: 1 / 0.82; }
  .car-arrow{
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(4px);
  }
  .car-arrow-prev{ left: 6px; }
  .car-arrow-next{ right: 6px; }
  .car-arrow:hover{ transform: translateY(-50%) scale(1.05); }
  .car-arrow:active{ transform: translateY(-50%) scale(0.95); }
  .car-slide img{ max-width: 96%; max-height: 96%; }
}

@media (max-width: 480px){
  .galerie-masonry{ column-count: 1; }
}