:root {
  --background: 270 20% 8%;
  --foreground: 270 20% 92%;
  --card: 270 18% 12%;
  --primary: 270 50% 55%;
  --secondary: 270 20% 18%;
  --muted: 270 15% 16%;
  --muted-foreground: 270 10% 55%;
  --accent: 38 70% 55%;
  --border: 270 15% 20%;
  --gold: 38 70% 55%;
  --gold-light: 38 80% 70%;
  --mauve: 280 30% 45%;
}
html { scroll-behavior: smooth; }
* { border-color: hsl(var(--border)); }
body { background: hsl(var(--background)); color: hsl(var(--foreground)); font-family: 'Raleway', sans-serif; }
h1,h2,h3,h4,h5,h6 { font-family: 'Cormorant Garamond', serif; }
.text-gold { color: hsl(var(--gold)); }
.text-gradient-gold {
  background: linear-gradient(135deg, hsl(38 70% 55%), hsl(38 80% 70%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
a { transition: color .25s ease; }
header nav a {
  position: relative;
  padding-bottom: 4px;
}
header nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0%; height: 1px;
  background: hsl(var(--primary));
  transition: width .3s ease;
}
header nav a:hover::after { width: 100%; }
header nav a:hover { color: hsl(280 40% 78%); }

.btn-gold {
  background: linear-gradient(135deg, hsl(270 50% 55%), hsl(280 40% 65%));
  color: hsl(270 20% 98%); font-weight: 600; border-radius: 9999px;
  padding: 0.9rem 2rem; display: inline-block;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 0 0 rgba(140,83,198,0);
}
.btn-gold:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 24px hsl(270 50% 55% / .45);
}
.btn-outline {
  border: 1px solid hsl(var(--primary)); color: hsl(280 40% 78%);
  border-radius: 9999px; padding: 0.9rem 2rem; display: inline-block;
  transition: transform .25s ease, background-color .25s ease, color .25s ease;
}
.btn-outline:hover {
  background-color: hsl(var(--primary));
  color: hsl(270 20% 98%);
  transform: translateY(-3px);
}

.card {
  background: linear-gradient(180deg, hsl(270 18% 14%), hsl(270 18% 10%));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,.35), 0 0 25px hsl(270 50% 55% / .2);
  border-color: hsl(var(--primary) / .5);
}

.service-option { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; border: 1px solid hsl(var(--border)); }
.service-option.is-selected { border: 2px solid hsl(var(--primary)); box-shadow: 0 0 20px hsl(270 50% 55% / .25); }

.add-extra-btn { transition: background .2s ease, color .2s ease, border-color .2s ease; }
.add-extra-btn.added {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: #fff;
}

.cart-remove-btn {
  flex-shrink: 0;
  width: 1.3rem; height: 1.3rem;
  border-radius: 9999px;
  border: 1px solid hsl(var(--border));
  background: transparent;
  color: hsl(var(--muted-foreground, 270 10% 60%));
  font-size: .65rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cart-remove-btn:hover {
  background: hsl(0 70% 45% / .2);
  border-color: hsl(0 70% 55%);
  color: hsl(0 70% 65%);
}
.service-option:hover { transform: translateY(-4px); box-shadow: 0 0 20px hsl(270 50% 55% / .3); }

.recap-steps p { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .4rem; }
.recap-steps p:last-child { margin-bottom: 0; }
.step-badge {
  flex-shrink: 0;
  width: 1.15rem; height: 1.15rem;
  border-radius: 9999px;
  background: hsl(var(--primary) / .2);
  color: hsl(var(--primary));
  font-size: .65rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-top: .05rem;
}

.hero-bg {
  background: linear-gradient(rgba(20,16,24,.9), rgba(20,16,24,.6), rgb(20,16,24)), url('assets/hero-palm.jpg');
  background-size: cover; background-position: center;
  animation: heroZoom 20s ease-in-out infinite alternate;
}
@keyframes heroZoom {
  from { background-size: 100% auto; }
  to { background-size: 110% auto; }
}

#home h1, #home p, #home .flex { animation: fadeInUp .9s ease both; }
#home p.italic { animation-delay: .15s; }
#home .flex.flex-wrap.justify-center.gap-4 { animation-delay: .3s; }
#home .flex.flex-wrap.justify-center.gap-8 { animation-delay: .45s; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.accordion-item { transition: border-color .25s ease; }
.accordion-item:hover { border-color: hsl(var(--primary) / .4); }
.accordion-content { display: none; padding: 0 0 1rem 0; color: hsl(var(--muted-foreground)); }
.accordion-item.open .accordion-content {
  display: block;
  animation: fadeInUp .3s ease both;
}
.accordion-icon { display: inline-block; transition: transform .3s ease; }
.accordion-item.open .accordion-icon { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}


.photo-preview {
  aspect-ratio: 3/4;
  border: 2px dashed hsl(var(--border));
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: hsl(var(--muted) / .3);
  transition: border-color .25s ease;
}
.photo-preview:hover { border-color: hsl(var(--gold) / .6); }

#camera-modal { backdrop-filter: blur(6px); }
#hand-guide { transition: transform .2s ease; }
#hand-guide.mirrored { transform: scaleX(-1); }
#camera-controls-live, #camera-controls-captured { display: none; }
#camera-controls-live.flex, #camera-controls-captured.flex { display: flex; }


#live-notification.show { display: block; animation: slideInLeft .4s ease both; }
#live-notification.hide { animation: slideOutLeft .4s ease both; }
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideOutLeft {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-24px); }
}

.hidden-field { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
button:disabled { opacity:.65; cursor:not-allowed; }


/* Présentation cohérente des pages informatives et juridiques */
.legal-page {
  width: min(100%, 56rem);
}
.legal-page > div {
  margin-bottom: 2rem;
}
.legal-page p,
.legal-page li,
.contact-page .contact-intro {
  text-align: justify;
  text-align-last: left;
  text-justify: inter-word;
  -webkit-hyphens: none;
  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
  line-height: 1.85;
}
.legal-page h1,
.legal-page h2,
.legal-page h3 {
  text-align: left;
  text-wrap: balance;
}
.legal-page .card {
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.legal-page .legal-details p {
  margin: 0 0 .7rem;
}
.legal-page .legal-details p:last-child {
  margin-bottom: 0;
}
.legal-page a[href^="mailto:"] {
  overflow-wrap: anywhere;
}
.no-break {
  white-space: nowrap;
}

.checkout-status {
  margin-top: .85rem;
  padding: .75rem .9rem;
  border-radius: .65rem;
  font-size: .8rem;
  line-height: 1.45;
  text-align: left;
}
.checkout-status.info { background: rgba(255,255,255,.06); }
.checkout-status.success { background: rgba(34,197,94,.12); }
.checkout-status.error { background: rgba(239,68,68,.14); }
#checkout-btn:disabled { opacity: .65; cursor: wait; }

@media (max-width: 640px) {
  .legal-page {
    width: 100%;
  }
  .legal-page p,
  .legal-page li,
  .contact-page .contact-intro {
    text-align: left;
    text-align-last: auto;
    line-height: 1.75;
  }
  .no-break {
    white-space: normal;
  }
}

/* Robustesse responsive globale */
html, body { width: 100%; max-width: 100%; overflow-x: clip; }
body { min-width: 0; }
img, video, canvas, svg { max-width: 100%; }
main, section, article, aside, header, footer, div { min-width: 0; }

/* Page À propos */
.about-page { width: 100%; }
.about-shell { width: min(100%, 74rem); margin-inline: auto; }
.about-heading { text-align: center; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.about-heading h1 { font-size: clamp(2.7rem, 7vw, 4.75rem); line-height: .95; font-weight: 500; }
.about-divider { display: flex; align-items: center; justify-content: center; gap: .45rem; margin-top: 1rem; color: hsl(var(--gold)); }
.about-divider span { width: clamp(3.5rem, 10vw, 7rem); height: 1px; background: hsl(var(--gold) / .85); }
.about-divider i { font-style: normal; font-size: 1.15rem; }
.about-hero-card,
.about-values {
  background: radial-gradient(circle at 75% 20%, hsl(270 30% 18% / .48), transparent 43%), linear-gradient(145deg, hsl(270 18% 14%), hsl(270 18% 9%));
  border: 1px solid hsl(var(--border));
  border-radius: clamp(1rem, 2.4vw, 1.65rem);
  box-shadow: 0 22px 60px rgba(0,0,0,.22);
}
.about-hero-card { display: grid; grid-template-columns: minmax(17rem, .82fr) minmax(0, 1.18fr); gap: clamp(2rem, 5vw, 4.5rem); padding: clamp(1.4rem, 3.5vw, 2.7rem); align-items: center; }
.about-portrait-wrap { border-radius: 1.25rem; overflow: hidden; aspect-ratio: 4 / 5; background: hsl(var(--muted)); box-shadow: 0 18px 45px rgba(0,0,0,.32); }
.about-portrait { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; display: block; }
.about-copy h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.06; margin-bottom: 1.55rem; font-weight: 500; text-wrap: balance; }
.about-accent,
.company-name { color: hsl(var(--gold)); }
.company-name { white-space: nowrap; font-weight: 500; }
.about-copy p,
.about-value p {
  color: hsl(var(--foreground) / .88);
  font-size: clamp(.94rem, 1.45vw, 1.08rem);
  line-height: 1.82;
  text-align: justify;
  text-align-last: left;
  text-justify: inter-word;
  -webkit-hyphens: none;
  hyphens: none;
  word-break: normal;
  overflow-wrap: break-word;
}
.about-copy p + p { margin-top: 1.25rem; }
.about-values { margin-top: clamp(1.25rem, 3vw, 2rem); padding: clamp(1.6rem, 4vw, 3rem); }
.about-values > h2 { color: hsl(var(--gold)); text-align: center; font-size: clamp(1.8rem, 4vw, 2.55rem); line-height: 1.1; font-weight: 500; text-wrap: balance; }
.about-values-rule { width: 3.5rem; height: 1px; background: hsl(var(--gold) / .75); margin: 1rem auto 1.8rem; }
.about-values-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.about-value { padding: .25rem clamp(1.2rem, 3vw, 2.3rem); }
.about-value + .about-value { border-left: 1px solid hsl(var(--gold) / .35); }
.about-icon { width: 3.3rem; height: 3.3rem; border-radius: 999px; border: 1px solid hsl(var(--gold)); color: hsl(var(--gold-light)); display: grid; place-items: center; font-size: 1.45rem; margin-bottom: 1rem; }
.about-value h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.12; margin-bottom: .8rem; text-wrap: balance; }
.about-closing { max-width: 52rem; margin: 2.25rem auto 0; padding-top: 1.8rem; border-top: 1px solid hsl(var(--gold) / .22); text-align: center; font-family: 'Cormorant Garamond', serif; font-size: clamp(1.25rem, 2.8vw, 1.7rem); line-height: 1.42; color: hsl(var(--foreground) / .93); }

@media (max-width: 820px) {
  .about-hero-card { grid-template-columns: 1fr; gap: 1.65rem; }
  .about-portrait-wrap { width: min(100%, 31rem); margin-inline: auto; aspect-ratio: 16 / 10; }
  .about-portrait { object-position: 50% 30%; }
  .about-copy h2 { margin-bottom: 1.25rem; }
  .about-values-grid { grid-template-columns: 1fr; }
  .about-value { padding: 1.25rem 0; }
  .about-value + .about-value { border-left: 0; border-top: 1px solid hsl(var(--gold) / .28); }
  .about-icon { margin-inline: auto; }
  .about-value h3 { text-align: center; }
}

@media (max-width: 480px) {
  .about-page { padding-inline: 1rem !important; }
  .about-hero-card,
  .about-values { border-radius: 1rem; padding: 1.1rem; }
  .about-portrait-wrap { aspect-ratio: 4 / 3; border-radius: .85rem; }
  .about-copy h2 { font-size: 1.85rem; }
  .about-copy p,
  .about-value p { font-size: .94rem; line-height: 1.72; }
  .about-values > h2 { font-size: 1.65rem; }
  .about-value { padding-block: 1.1rem; }
  .company-name, .no-break { white-space: nowrap; }
}

.checkout-legal-note {
  border: 1px solid hsl(var(--border));
  border-radius: .75rem;
  padding: .9rem 1rem;
  background: hsl(var(--card) / .48);
  color: hsl(var(--muted-foreground));
  font-size: .75rem;
  line-height: 1.6;
}
.checkout-legal-note p + p { margin-top: .45rem; }
.legal-page a { color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 3px; }


/* En-tête et titre principal : stabilité mobile */
.site-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  line-height: 1;
}
.site-brand > span { white-space: nowrap; }
.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  white-space: nowrap;
  flex: 0 0 auto;
}
.hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.35rem, 7vw, 3.75rem);
  line-height: 1.05;
  white-space: nowrap;
  text-wrap: nowrap;
}
@media (max-width: 640px) {
  header {
    padding-left: .85rem !important;
    padding-right: .85rem !important;
    gap: .65rem;
  }
  .site-brand {
    font-size: clamp(.9rem, 4.25vw, 1.05rem) !important;
    letter-spacing: -.015em;
  }
  .header-cta {
    padding: .62rem .78rem;
    font-size: .78rem !important;
    gap: 0;
  }
  .header-cta-icon { display: none; }
  .hero-title {
    font-size: clamp(2rem, 10.5vw, 2.8rem);
    letter-spacing: -.025em;
  }
}
@media (max-width: 360px) {
  .site-brand { font-size: .82rem !important; }
  .header-cta { padding-inline: .62rem; font-size: .73rem !important; }
  .hero-title { font-size: 1.95rem; }
}


/* Contact opérationnel et CTA À propos */
.contact-direct {
  overflow-wrap: anywhere;
}
.contact-email {
  color: hsl(var(--gold));
  font-weight: 600;
  text-decoration: none;
}
.contact-email:hover,
.about-contact-email a:hover {
  text-decoration: underline;
}
.about-contact-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.about-contact-email {
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
}
.about-contact-email a {
  color: hsl(var(--gold));
  font-weight: 600;
}
@media (max-width: 640px) {
  .about-contact-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .about-contact-actions .btn-gold {
    width: 100%;
  }
  .about-contact-email {
    text-align: center;
    overflow-wrap: anywhere;
  }
  .contact-direct .no-break,
  .about-contact-email .no-break {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}