:root {
  --cream:  #fdf8f2;
  --cream2: #f5ede0;
  --moss:   #3d5a3e;
  --moss2:  #2d4230;
  --rose:   #e8b4b8;
  --rose2:  #d4888e;
  --terra:  #c17b5c;
  --ink:    #2c2416;
  --muted:  #7a6a58;
  --border: rgba(61,90,62,0.12);
  --ser:    'Lora', Georgia, serif;
  --san:    'Nunito', sans-serif;
  --ease:   cubic-bezier(0.23,1,0.32,1);
}
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--san); background:var(--cream); color:var(--ink); overflow-x:hidden; font-weight:300; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }

/* ── ICÔNES SVG ── */
/* Style commun à toutes les icônes : taille relative au texte,
   couleur héritée via currentColor (s'aligne sur la charte). */
.icon {
  width:1.2em; height:1.2em;
  flex-shrink:0;
  stroke-width:2;
}

/* ── FOND ANIMÉ : pétales & fleurs ── */
/* Calque fixe derrière tout le contenu, n'intercepte aucun clic. */
.petals {
  position:fixed; inset:0;
  pointer-events:none;          /* laisse passer les clics */
  overflow:hidden;
  z-index:0;                    /* derrière le contenu */
}
/* Tout le contenu réel passe au-dessus du fond animé */
nav, section, header, footer { position:relative; z-index:1; }

/* Un élément flottant (pétale ou fleur) */
.petal {
  position:absolute;
  top:-8%;                      /* démarre juste au-dessus de l'écran */
  color:var(--rose);
  opacity:0;                    /* rendu visible par l'animation */
  will-change:transform, opacity;
  /* deux animations combinées :
     - "fall"  : la chute verticale (sur l'élément lui-même)
     - "sway"  : l'ondulation gauche/droite (sur le SVG enfant) */
  animation:fall linear infinite;
}
.petal svg {
  width:100%; height:100%;
  animation:sway ease-in-out infinite alternate;
}

/* Chute du haut vers le bas, avec légère rotation */
@keyframes fall {
  0%   { transform:translateY(0) rotate(0deg);     opacity:0; }
  10%  { opacity:.18; }                 /* rose discret, couleur conservée */
  90%  { opacity:.18; }
  100% { transform:translateY(108vh) rotate(220deg); opacity:0; }
}
/* Balancement latéral pour un mouvement naturel */
@keyframes sway {
  from { transform:translateX(-18px); }
  to   { transform:translateX(18px); }
}

/* Respecte les utilisateurs qui limitent les animations */
@media (prefers-reduced-motion: reduce) {
  .petals { display:none; }
}

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:0.55rem 3rem;
  background:rgba(253,248,242,0.94);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .3s, transform .4s var(--ease);
}
nav.scrolled { box-shadow:0 2px 20px rgba(44,36,22,0.08); }
/* Navbar masquée : glisse vers le haut hors de l'écran */
nav.nav-hidden { transform:translateY(-100%); }
.nav-logo {
  display:flex; align-items:center;
  height:72px;
}
.nav-logo img {
  height:100%; width:auto; object-fit:contain;
  transition:transform .3s var(--ease);
}
.nav-logo:hover img { transform:scale(1.05); }
.nav-links { display:flex; gap:2rem; align-items:center; }
.nav-links a {
  font-size:.85rem; font-weight:500; color:var(--muted);
  transition:color .2s; position:relative;
}
.nav-links a:hover { color:var(--moss); }
.nav-cta {
  background:var(--moss); color:#fff !important;
  padding:.55rem 1.3rem; border-radius:30px;
  font-size:.82rem; font-weight:600;
  transition:background .25s !important;
}
.nav-cta:hover { background:var(--moss2) !important; }

/* ── HERO ── */
.hero {
  min-height:100vh; display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  padding:7rem 3rem 4rem;
  gap:3rem;
}
.hero-left { padding-right:2rem; }
.hero-tag {
  display:inline-block;
  font-size:.72rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--terra); margin-bottom:1.5rem;
  padding:.3rem .9rem; border:1px solid rgba(193,123,92,0.3);
  border-radius:30px; background:rgba(193,123,92,0.07);
}
.hero-h1 {
  font-family:var(--ser);
  font-size:clamp(2.8rem, 5.5vw, 5.5rem);
  font-weight:700; line-height:1.05; letter-spacing:-.02em;
  color:var(--ink); margin-bottom:1.5rem;
}
.hero-h1 em { color:var(--moss); font-style:italic; }
.hero-p {
  font-size:1rem; line-height:1.8; color:var(--muted);
  margin-bottom:2.5rem; max-width:420px;
}
.hero-actions { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin-bottom:3rem; }
.btn-primary {
  background:var(--moss); color:#fff;
  padding:.85rem 2rem; border-radius:30px;
  font-family:var(--san); font-size:.88rem; font-weight:600;
  transition:all .25s var(--ease);
  border:2px solid var(--moss);
}
.btn-primary:hover { background:var(--moss2); border-color:var(--moss2); transform:translateY(-2px); box-shadow:0 8px 24px rgba(61,90,62,0.25); }
.btn-outline {
  background:transparent; color:var(--moss);
  padding:.85rem 2rem; border-radius:30px;
  font-family:var(--san); font-size:.88rem; font-weight:600;
  border:2px solid var(--moss);
  transition:all .25s var(--ease);
}
.btn-outline:hover { background:var(--moss); color:#fff; transform:translateY(-2px); }
.hero-info {
  display:flex; gap:2rem; flex-wrap:wrap;
}
.hero-info-item {
  display:flex; flex-direction:column; gap:.2rem;
}
.hi-val { font-family:var(--ser); font-size:1.6rem; font-weight:700; color:var(--moss); }
.hi-lab { font-size:.72rem; color:var(--muted); font-weight:500; }

.hero-right { position:relative; }
.hero-img-wrap {
  position:relative; border-radius:40px 40px 120px 40px;
  overflow:hidden; aspect-ratio:4/5;
}
.hero-img-wrap img {
  width:100%; height:100%; object-fit:cover;
  transition:transform 6s ease;
}
.hero-img-wrap:hover img { transform:scale(1.04); }
.hero-badge {
  position:absolute; bottom:2rem; left:-2rem;
  background:#fff; border-radius:16px;
  padding:1rem 1.25rem;
  box-shadow:0 8px 32px rgba(44,36,22,0.15);
  display:flex; align-items:center; gap:.75rem;
}
.hb-icon { color:var(--moss); display:flex; align-items:center; }
.hb-icon .icon { width:1.6rem; height:1.6rem; }
.hb-text { display:flex; flex-direction:column; }
.hb-title { font-family:var(--ser); font-size:.88rem; font-weight:700; color:var(--ink); }
.hb-sub { font-size:.7rem; color:var(--muted); }
.hero-dot {
  position:absolute; top:-1rem; right:2rem;
  width:80px; height:80px; border-radius:50%;
  background:var(--rose); opacity:.6;
}

/* ── SECTION ── */
section { padding:6rem 3rem; }
.container { max-width:1160px; margin:0 auto; }
.s-tag {
  font-size:.68rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--terra); display:block; margin-bottom:1rem;
}
.s-title {
  font-family:var(--ser);
  font-size:clamp(1.8rem,3.5vw,3.2rem);
  font-weight:700; line-height:1; letter-spacing:-.02em;
  color:var(--ink); margin-bottom:1rem;
}
.s-title em { color:var(--moss); font-style:italic; }
.s-sub { font-size:.92rem; color:var(--muted); line-height:1.75; max-width:460px; }

/* ── SECTION DARK ── */
.s-dark { background:var(--moss); }
.s-dark .s-title { color:#fff; }
.s-dark .s-title em { color:var(--rose); }
.s-dark .s-tag { color:var(--rose); }
.s-dark .s-sub { color:rgba(255,255,255,0.6); }

/* ── CRÉATIONS ── */
.creations-header {
  display:grid; grid-template-columns:1fr 1fr;
  gap:3rem; align-items:end; margin-bottom:3.5rem;
}
.creations-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}
.creation-card {
  border-radius:24px; overflow:hidden;
  position:relative; cursor:pointer;
  transition:transform .4s var(--ease);
}
.creation-card:hover { transform:translateY(-8px); }
.creation-card:nth-child(2) { margin-top:2rem; }
.creation-card:nth-child(3) { margin-top:-1rem; }
.cc-img {
  aspect-ratio:3/4; overflow:hidden;
}
.cc-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.creation-card:hover .cc-img img { transform:scale(1.06); }
.cc-info {
  position:absolute; bottom:0; left:0; right:0;
  padding:1.5rem 1.25rem 1.25rem;
  background:linear-gradient(0deg, rgba(44,36,22,0.85) 0%, transparent 100%);
  color:#fff;
}
.cc-name { font-family:var(--ser); font-size:1.1rem; font-weight:600; margin-bottom:.25rem; }
.cc-price { font-size:.8rem; color:rgba(255,255,255,0.7); }

/* ── GALERIE (carrousel 2 lignes, défilement infini) ── */
/* Deux bandes de cartes verticales qui défilent en continu et bouclent
   sans fin. Animation pilotée par transform en JS (initGalleryMarquee),
   donc fluide (GPU). On peut saisir la galerie au clic et la pousser
   à gauche/droite ; le tactile vertical reste réservé au scroll de page. */
.gallery-viewport {
  margin-top:3rem;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.gallery-row {
  display:flex; gap:1.25rem;
  width:max-content;                  /* la bande s'étend hors écran */
  will-change:transform;              /* prépare l'accélération GPU */
  cursor:grab;                        /* chaque ligne se saisit séparément */
  touch-action:pan-y;                 /* gestes verticaux = scroll page */
}
.gallery-row.dragging { cursor:grabbing; }
.gallery-row + .gallery-row { margin-top:1.25rem; }

.gallery-item {
  flex:0 0 auto;
  width:300px;                        /* carte verticale */
  position:relative; border-radius:20px; overflow:hidden;
}
/* Pastille "Commander ce style" révélée au survol : indique qu'on
   peut cliquer une fleur pour pré-remplir le formulaire de contact. */
.gallery-item::after {
  content:"✿ Commander ce style";
  position:absolute; top:.7rem; left:.7rem; z-index:2;
  background:rgba(253,248,242,0.95); color:var(--moss);
  font-family:var(--san); font-size:.68rem; font-weight:700;
  padding:.35rem .7rem; border-radius:30px;
  box-shadow:0 4px 14px rgba(44,36,22,0.18);
  opacity:0; transform:translateY(-6px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events:none;
}
.gallery-item:hover::after { opacity:1; transform:none; }
.gallery-item img {
  width:100%; height:380px;           /* format portrait uniforme */
  object-fit:cover; display:block;
  transition:transform .5s ease;
  user-select:none; -webkit-user-drag:none; pointer-events:none;
}
.gallery-item:hover img { transform:scale(1.05); }
.gallery-item figcaption {
  position:absolute; left:0; right:0; bottom:0;
  padding:1.75rem 1rem .9rem;
  background:linear-gradient(0deg, rgba(44,36,22,0.85) 0%, transparent 100%);
  color:#fff; font-family:var(--ser); font-size:.9rem; font-weight:600;
  opacity:0; transform:translateY(10px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
  pointer-events:none;
}
.gallery-item:hover figcaption { opacity:1; transform:none; }

/* ── SERVICES ── */
.services-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0; border:1px solid var(--border); margin-top:3rem;
}
.service-item {
  padding:2.5rem 2rem;
  border-right:1px solid var(--border);
  transition:background .25s;
}
.service-item:last-child { border-right:none; }
.service-item:hover { background:var(--cream2); }
.si-num {
  font-size:.65rem; font-weight:600; letter-spacing:.18em;
  color:var(--terra); text-transform:uppercase; margin-bottom:1.25rem;
}
.si-title {
  font-family:var(--ser); font-size:1.2rem; font-weight:700;
  color:var(--ink); margin-bottom:.75rem;
}
.si-desc { font-size:.84rem; color:var(--muted); line-height:1.7; }

/* ── SECTION CONTACT ── */
.contact-inner {
  display:grid; grid-template-columns:1fr 1fr;
  gap:5rem; align-items:start;
}
.contact-left {}
.contact-infos { display:flex; flex-direction:column; gap:1.25rem; margin-top:2.5rem; }
.ci-item {
  display:flex; gap:1rem; align-items:start;
  padding:1.25rem; background:rgba(255,255,255,0.07);
  border-radius:12px; border:1px solid rgba(255,255,255,0.1);
}
.ci-icon { color:var(--rose); flex-shrink:0; margin-top:.1rem; display:flex; }
.ci-icon .icon { width:1.3rem; height:1.3rem; }
.ci-label { font-size:.68rem; color:rgba(255,255,255,0.5); text-transform:uppercase; letter-spacing:.1em; margin-bottom:.3rem; }
.ci-val { font-size:.9rem; color:#fff; font-weight:500; }
.contact-form {
  background:var(--cream); border-radius:24px;
  padding:2.5rem; display:flex; flex-direction:column; gap:1rem;
}
.cf-title { font-family:var(--ser); font-size:1.4rem; font-weight:700; color:var(--ink); margin-bottom:.5rem; }
.cf-group { display:flex; flex-direction:column; gap:.4rem; }
.cf-group label { font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.cf-group input, .cf-group select, .cf-group textarea {
  background:#fff; border:1.5px solid rgba(61,90,62,0.15);
  border-radius:10px; padding:.75rem 1rem;
  font-family:var(--san); font-size:.88rem; color:var(--ink);
  outline:none; transition:border-color .2s;
}
.cf-group input:focus, .cf-group select:focus, .cf-group textarea:focus {
  border-color:var(--moss);
}
.cf-group textarea { resize:vertical; min-height:100px; }
/* Champ "Bouquet sélectionné" : mis en avant, rempli au clic sur une photo */
.cf-selected label { color:var(--terra); }
.cf-selected input {
  border-color:var(--rose2) !important;
  background:rgba(232,180,184,0.14) !important;
  font-weight:600; color:var(--moss2);
  cursor:default;
}
.cf-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.cf-submit {
  background:var(--moss); color:#fff;
  border:none; border-radius:10px;
  padding:1rem; font-family:var(--san);
  font-size:.9rem; font-weight:600; cursor:pointer;
  transition:background .25s;
  margin-top:.5rem;
}
.cf-submit:hover { background:var(--moss2); }

/* ── AVIS CLIENTS ── */
/* Grille de 3 cartes de témoignages, dans la palette du site */
.avis-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}
.avis-card {
  background:#fff; border:1px solid var(--border);
  border-radius:24px; padding:2rem 1.75rem;
  display:flex; flex-direction:column; gap:1rem;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.avis-card:hover {
  transform:translateY(-6px);
  box-shadow:0 12px 32px rgba(44,36,22,0.08);
}
.avis-stars { color:var(--rose2); display:flex; gap:.15rem; }
.avis-stars .icon { width:1.05rem; height:1.05rem; }
.avis-text {
  font-family:var(--ser); font-style:italic;
  font-size:1rem; line-height:1.7; color:var(--ink);
}
.avis-author {
  font-size:.82rem; font-weight:600; color:var(--terra);
  margin-top:auto;
}

/* ── FAQ (page faq.html) ── */
/* En-tête de la page FAQ, avec marge pour passer sous la navbar fixe */
.faq-hero {
  padding:9rem 3rem 3rem;
  text-align:center;
}
.faq-hero .s-sub { margin:1rem auto 0; }

/* Liste des questions/réponses sous forme d'accordéon natif (<details>) */
.faq-list {
  max-width:760px; margin:0 auto;
  padding:0 1.5rem 6rem;
  display:flex; flex-direction:column; gap:1rem;
}
.faq-item {
  background:#fff; border:1px solid var(--border);
  border-radius:16px; padding:0 1.5rem;
  transition:box-shadow .3s var(--ease);
}
.faq-item[open] { box-shadow:0 8px 24px rgba(44,36,22,0.06); }

/* La question : toujours visible, cliquable */
.faq-item summary {
  list-style:none; cursor:pointer;
  font-family:var(--ser); font-weight:600; font-size:1.05rem;
  color:var(--ink);
  padding:1.25rem 0;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.faq-item summary::-webkit-details-marker { display:none; } /* retire la flèche par défaut */
/* Signe + qui devient – quand la question est ouverte */
.faq-item summary::after {
  content:'+'; font-size:1.4rem; color:var(--terra);
  transition:transform .3s var(--ease);
}
.faq-item[open] summary::after { content:'\2013'; } /* tiret – */

/* La réponse : visible une fois la question ouverte */
.faq-answer {
  font-size:.92rem; line-height:1.75; color:var(--muted);
  padding:0 0 1.25rem;
}

/* ── FOOTER ── */
footer {
  background:var(--ink); padding:2.5rem 3rem;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem;
}
.f-logo-img {
  display:flex; align-items:center;
  height:80px; flex-shrink:0;
}
.f-logo-img img {
  height:100%; width:auto; object-fit:contain;
  transition:transform .3s var(--ease);
}
.f-logo-img:hover img { transform:scale(1.05); }
.f-logo { font-family:var(--ser); font-size:1.1rem; color:#fff; font-weight:700; }
.f-logo span { color:var(--rose); font-style:italic; }
footer p { font-size:.75rem; color:rgba(255,255,255,0.3); }

/* ── REVEAL ── */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.on { opacity:1; transform:none; }
.delay-1 { transition-delay:.1s; }
.delay-2 { transition-delay:.2s; }
.delay-3 { transition-delay:.3s; }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  nav { padding:0.5rem 1.5rem; }
  .nav-logo { height:56px; }
  .nav-links { display:none; }
  .hero { grid-template-columns:1fr; padding:7rem 1.5rem 4rem; }
  .hero-right { order:-1; }
  .hero-badge { left:.5rem; }
  section { padding:4rem 1.5rem; }
  .creations-header { grid-template-columns:1fr; gap:1.5rem; }
  .creations-grid { grid-template-columns:1fr 1fr; }
  .gallery-item { width:230px; }
  .gallery-item img { height:300px; }
  .avis-grid { grid-template-columns:1fr; }
  .faq-hero { padding:8rem 1.5rem 2rem; }
  .creations-grid .creation-card:nth-child(2),
  .creations-grid .creation-card:nth-child(3) { margin-top:0; }
  .services-grid { grid-template-columns:1fr; }
  .service-item { border-right:none; border-bottom:1px solid var(--border); }
  .contact-inner { grid-template-columns:1fr; gap:3rem; }
  footer { flex-direction:column; text-align:center; padding:2rem 1.5rem; }
}
@media (max-width:560px) {
  .gallery-item { width:62vw; }
  .gallery-item img { height:280px; }
}