:root{
  --bg:#fbf7f3;        /* crème chaud */
  --card:#ffffff;
  --accent:#d96b4a;    /* terracotta */
  --accent-2:#f2b880;  /* pêche clair */
  --muted:#6f6b66;     /* gris chaud */
  --title:#3b2f2a;     /* brun chaud */
  --shadow: 0 14px 40px rgba(45,40,38,0.08);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: 'Inter', 'Segoe UI', system-ui, Arial, sans-serif;
  background:linear-gradient(180deg,var(--bg),#fff);
  color:var(--muted);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}

/* Header */
header{
  background:linear-gradient(90deg, rgba(255,255,255,0.7), rgba(250,245,240,0.7));
  backdrop-filter: blur(6px);
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid rgba(60,50,45,0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header-content{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  gap:1rem;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.5rem 1rem;
}
.logo{
  width: 150px;
  height: auto;
  display: flex;
  border-radius:12px;
  object-fit:cover; 
  border:2px solid rgba(0,0,0,0.04);
  /*max-width: 100vw;   /* limite à la largeur de l’écran */
}

/* Style pour le titre manuscrit */
.site-title{
  font-family: 'Dancing Script', 'Segoe UI', Arial, sans-serif;
  font-size: 4.5rem;        /* plus grand */
  line-height: 1.50;
  color: var(--title, #3b2f2a);
  font-weight: 700;
  letter-spacing: 1.6;    /* léger espacement pour meilleure lisibilité */
  margin: 0;
  text-shadow: 0 2px 6px rgba(59,47,42,0.08);
  transform-origin: left center;
  text-align: center;
  width: 100%;
}

/* Ajustement responsive */
@media (max-width: 800px){
  .site-title{ font-size: 2.2rem; }
}
@media (max-width: 480px){
  .site-title{ font-size: 1.6rem; }
}

/* Nav */
nav{display:flex;justify-content:center;padding:.6rem 0}
.menu{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
.menu a{padding:.5rem .9rem;border-radius:10px;color:var(--title);text-decoration:none;font-weight:600;transition:all .18s}
.menu a:hover, .menu .active{background:rgba(217,107,74,0.12);color:var(--accent);transform:translateY(-2px)}

/* Bouton hamburger caché par défaut */
.hamburger {
  display: none;
  font-size: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
}

/* Main */
main{max-width:1200px;margin:2rem auto;padding:1.25rem;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow)}
h1,h2,h3{color:var(--title);margin:.2rem 0}
p{color:var(--muted)}

/* Listing card */
.listing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem}
.card{background:linear-gradient(180deg,#fff,#fbfbfb);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);transition:transform .22s,box-shadow .22s}
.card:hover{transform:translateY(-8px);box-shadow:0 28px 60px rgba(45,40,38,0.12)}
.card img{width:100%;height:200px;object-fit:cover;display:block}
.card-body{padding:1rem}
.card-title{font-weight:700;color:var(--title);margin:0 0 .4rem}
.card-meta{font-size:.95rem;color:#8b7f78;margin-bottom:.6rem}
.cta{display:inline-block;background:var(--accent);color:#fff;padding:.6rem .9rem;border-radius:10px;text-decoration:none;font-weight:700;box-shadow:0 8px 24px rgba(217,107,74,0.18)}

/* Gallery cosy */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.gallery img{width:100%;height:120px;object-fit:cover;border-radius:10px;cursor:pointer;transition:transform .18s,filter .18s}
.gallery img:hover{transform:scale(1.03);filter:brightness(1.03)}

/* Lightbox */
.lightbox{display:none;align-items:center;justify-content:center;position:fixed;inset:0;background:rgba(10,8,6,0.88);z-index:9999;width: 100%; height: 100%}
.lightbox.active{display:flex}
.lightbox-image{max-width:92%;max-height:86%;border-radius:12px;box-shadow:0 40px 120px rgba(0,0,0,0.6);margin: auto;display: block;margin-top: 5%}
.prev, .next {cursor: pointer;position: absolute;top: 50%;font-size: 60px;color: white;padding: 16px;user-select: none;text-decoration: none}
.prev { left: 0}
.next { right: 0}
.close {position: absolute;top: 20px; right: 35px;color: white;font-size: 40px;cursor: pointer}

/* Footer */
footer{background:#2b2623;color:#efe7e2;padding:1.2rem;text-align:center;border-radius:0 0 12px 12px}

/* Responsive */
@media(max-width:800px){ .gallery{grid-template-columns:repeat(2,1fr)} }
@media(max-width:480px){ .gallery{grid-template-columns:1fr} .card img{height:160px} }
@media (max-width: 420px) {
  .btn-send { padding: 0.5rem 0.9rem; font-size: 0.92rem; }
  .btn-spinner { right: 0.45rem; width: 1.4rem; height: 1.4rem; }
}
@media (max-width: 768px) {
  .menu {
    display: none; /* caché par défaut */
    flex-direction: column;
    background: #f8f8f8;
    width: 100%;
    text-align: center;
  }

  .menu.show {
    display: flex; /* affiché quand actif */
  }

  .hamburger {
    display: block; /* bouton visible */
  }
}

/* Button styles for "Envoyer" button with loading spinner */
.btn-send {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.6rem 1.2rem;
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-600) 100%);
  color: var(--text-on-primary);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1;
  transition: transform 160ms cubic-bezier(.2,.9,.2,1), box-shadow 160ms ease, opacity 160ms ease;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

/* content wrapper */
.btn-content {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: transform 220ms ease;
}

/* icon */
.btn-icon {
  width: 1.05rem;
  height: 1.05rem;
  transform-origin: center;
  transition: transform 220ms ease;
}

/* hover and active */
.btn-send:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(3, 10, 18, 0.16);
}
.btn-send:active {
  transform: translateY(-1px) scale(0.995);
}

/* icon micro animation on hover */
.btn-send:hover .btn-icon {
  transform: translateX(4px) rotate(-6deg);
}

/* focus visible for keyboard users */
.btn-send:focus-visible {
  outline: 3px solid rgba(0, 102, 204, 0.18);
  outline-offset: 4px;
  border-radius: calc(var(--radius) + 2px);
}

/* spinner (hidden until loading) */
.btn-spinner {
  position: absolute;
  width: 1.6rem;
  height: 1.6rem;
  right: 0.6rem;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 160ms ease, transform 160ms ease;
  color: rgba(255,255,255,0.95);
  pointer-events: none;
}

/* stroke dash animation */
.btn-spinner circle {
  stroke-dasharray: 120;
  stroke-dashoffset: 90;
  transform-origin: 50% 50%;
  animation: spin 1s linear infinite;
}

/* loading state */
.btn-send.is-loading {
  pointer-events: none;
  opacity: 0.95;
}
.btn-send.is-loading .btn-content {
  transform: translateX(-10px);
  opacity: 0.6;
}
.btn-send.is-loading .btn-spinner {
  opacity: 1;
  transform: scale(1);
}

/* disabled state */
.btn-send[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* keyframes */
@keyframes spin {
  0% { transform: rotate(0deg); stroke-dashoffset: 120; }
  50% { transform: rotate(180deg); stroke-dashoffset: 40; }
  100% { transform: rotate(360deg); stroke-dashoffset: 120; }
}

/* Video container */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* ratio 16:9 */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  text-align: center;
  margin: 0 auto;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}