/* ==========================================================================
   BY SWANIE — Biscuiterie Artisanale
   Feuille de style principale — design "gourmand moderne"
   --------------------------------------------------------------------------
   Univers : éditorial, doux, premium. Grands titres serif expressifs,
   navigation flottante en pilule, dégradés rose poudré → mimosa,
   cartes très arrondies. Même architecture que le site Azur & Moi.
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES — modifier ici pour changer l'identité visuelle
   ========================================================================== */
:root {
  /* Couleurs — charte By Swanie alignée sur les flyers : rose tendre, blanc, encre douce */
  --encre:       #443a3e;   /* encre charbon doux — titres, footer */
  --biscuit:     #d97b8f;   /* rose soutenu — accent principal */
  --biscuit-fonce:#c05f77;
  --rose:        #f6cdd6;   /* rose des cercles produits */
  --rose-doux:   #fdf2f4;   /* fond général */
  --rose-section:#fae3e8;   /* fond des sections chaudes */
  --mimosa:      #f2aebe;   /* rose bonbon — boutons d'action */
  --mimosa-fonce:#e793a7;   /* survol des boutons */
  --texte:       #5a4d51;
  --texte-doux:  #94818a;
  --blanc:       #ffffff;
  --bordure:     #f4d9df;

  /* Typographies — ronde et joueuse comme les flyers */
  --font-titres: "Baloo 2", "Comic Sans MS", cursive;
  --font-texte:  "Plus Jakarta Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-marque: "Great Vibes", cursive;

  /* Dégradé signature (roses des flyers) */
  --degrade-signature: linear-gradient(120deg, #f6cdd6 0%, #fae3e8 45%, #f9d3db 100%);

  /* Divers */
  --radius:      24px;
  --radius-sm:   14px;
  --ombre:       0 12px 34px rgba(74, 52, 39, 0.09);
  --ombre-forte: 0 24px 60px rgba(74, 52, 39, 0.16);
  --transition:  all 0.3s cubic-bezier(0.25, 0.6, 0.3, 1);
  --largeur-max: 1200px;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}

body {
  font-family: var(--font-texte);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--texte);
  background-color: var(--rose-doux);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background-color: var(--mimosa);
  color: var(--encre);
}

img { max-width: 100%; display: block; }

a {
  color: var(--biscuit);
  text-decoration: none;
  transition: var(--transition);
}

a:hover { color: var(--encre); }

ul { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-titres);
  color: var(--encre);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0.01em;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.3rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3rem); }
h3 { font-size: 1.35rem; }

.mot-accent {
  font-style: italic;
  color: var(--biscuit);
}

.marque-inline {
  font-family: var(--font-marque);
  font-size: 1.45em;
  color: var(--biscuit);
}

/* ==========================================================================
   3. UTILITAIRES
   ========================================================================== */
.conteneur {
  width: min(var(--largeur-max), 92%);
  margin-inline: auto;
}

/* --- Boutons — pilules avec flèche animée --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.95rem 2.1rem;
  border-radius: 100px;
  font-family: var(--font-texte);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: var(--transition);
  text-align: center;
  justify-content: center;
}

.btn::after {
  content: "→";
  font-family: var(--font-texte);
  transition: transform 0.3s ease;
}

.btn:hover::after { transform: translateX(4px); }

.btn-principal {
  background-color: var(--mimosa);
  color: var(--encre);
  box-shadow: 0 10px 24px rgba(231, 147, 167, 0.4);
}

.btn-principal:hover {
  background-color: var(--mimosa-fonce);
  color: var(--encre);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(231, 147, 167, 0.5);
}

.btn-secondaire {
  background-color: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(6px);
  color: var(--encre);
  border-color: rgba(74, 52, 39, 0.25);
}

.btn-secondaire:hover {
  background-color: var(--encre);
  border-color: var(--encre);
  color: var(--blanc);
}

.btn-petit {
  padding: 0.55rem 1.3rem;
  font-size: 0.88rem;
}

/* --- Badge / étiquette de section --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  color: var(--biscuit);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

.badge::before {
  content: "";
  width: 28px;
  height: 2px;
  background-color: var(--biscuit);
  border-radius: 2px;
}

.entete-section .badge { justify-content: center; }
.entete-section .badge::before { display: none; }

.entete-section {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3.5rem;
}

.entete-section p {
  color: var(--texte-doux);
  font-size: 1.08rem;
  margin-top: 0.9rem;
}

/* ==========================================================================
   4. HEADER & NAVIGATION — barre flottante en pilule
   ========================================================================== */
.header {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--largeur-max), 94%);
  z-index: 1000;
  background-color: rgba(253, 244, 242, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(74, 52, 39, 0.07);
  border-radius: 100px;
  box-shadow: 0 6px 24px rgba(74, 52, 39, 0.07);
  transition: var(--transition);
}

.header.scrolle {
  box-shadow: 0 12px 34px rgba(74, 52, 39, 0.13);
  background-color: rgba(253, 244, 242, 0.95);
}

.header .conteneur {
  width: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  padding: 0 1.6rem 0 1.2rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.logo img { height: 60px; }

.logo-nom {
  font-family: var(--font-marque);
  font-size: 1.7rem;
  color: var(--encre);
  line-height: 1;
}

.nav-liste {
  display: flex;
  align-items: center;
  gap: 1.35rem;
}

.nav-liste a {
  color: var(--encre);
  font-size: 0.9rem;
  font-weight: 500;
  position: relative;
  padding: 0.3rem 0;
}

.nav-liste a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background-color: var(--biscuit);
  transition: var(--transition);
}

.nav-liste a:hover::after { width: 100%; }

.nav-liste a.btn::after { display: none; }

/* --- Burger (mobile) --- */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.burger span {
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--encre);
  transition: var(--transition);
}

.burger.ouvert span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.ouvert span:nth-child(2) { opacity: 0; }
.burger.ouvert span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   5. HERO — photo gourmande + voile rose, halos mimosa animés
   ========================================================================== */
.hero {
  min-height: 96vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 160px 0 100px;
  background-image:
    linear-gradient(105deg, rgba(253, 244, 242, 0.96) 0%, rgba(253, 244, 242, 0.82) 42%, rgba(249, 231, 229, 0.35) 100%),
    url("images/hero.jpg");
  background-size: cover;
  background-position: center right;
  background-color: var(--rose-section);
}

/* Halos lumineux flottants */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.4;
  pointer-events: none;
}

.hero::before {
  width: 480px;
  height: 480px;
  top: -140px;
  right: -100px;
  background: radial-gradient(circle, rgba(231, 147, 167, 0.55), transparent 70%);
  animation: flotter 9s ease-in-out infinite alternate;
}

.hero::after {
  width: 380px;
  height: 380px;
  bottom: -120px;
  left: 12%;
  background: radial-gradient(circle, rgba(243, 215, 211, 0.9), transparent 70%);
  animation: flotter 11s ease-in-out infinite alternate-reverse;
}

.hero-contenu {
  max-width: 640px;
  position: relative;
  z-index: 1;
}

.surtitre {
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--biscuit);
  margin-bottom: 1.4rem;
}

.hero h1 { margin-bottom: 1.4rem; }

.hero-contenu > p {
  font-size: 1.12rem;
  color: var(--texte);
  max-width: 540px;
  margin-bottom: 2.2rem;
}

.hero-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ==========================================================================
   6. BANDEAU DÉFILANT
   ========================================================================== */
.bandeau-defilant {
  background-color: var(--encre);
  color: var(--rose);
  overflow: hidden;
  padding: 0.9rem 0;
}

.defilement {
  display: flex;
  gap: 2.2rem;
  width: max-content;
  animation: defiler 30s linear infinite;
  font-family: var(--font-titres);
  font-style: italic;
  font-size: 1.05rem;
  white-space: nowrap;
}

.defilement .sep { color: var(--mimosa); font-style: normal; }

@keyframes defiler {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==========================================================================
   7. SECTIONS GÉNÉRIQUES
   ========================================================================== */
.section { padding: 6.5rem 0; }

.section-rose { background-color: var(--rose-section); }

.bloc-duo {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 4rem;
  align-items: center;
}

.bloc-duo h2 { margin-bottom: 1.2rem; }
.bloc-duo p { margin-bottom: 1rem; }

.liste-atouts { margin-top: 1.6rem; display: grid; gap: 0.75rem; }

.liste-atouts li {
  position: relative;
  padding-left: 2rem;
}

.liste-atouts li::before {
  content: "✿";
  position: absolute;
  left: 0;
  color: var(--mimosa-fonce);
}

.visuel { margin: 0; }

.visuel img {
  border-radius: var(--radius);
  box-shadow: var(--ombre-forte);
  width: 100%;
}

.visuel figcaption {
  margin-top: 0.9rem;
  font-size: 0.88rem;
  color: var(--texte-doux);
  text-align: center;
  font-style: italic;
}

/* ==========================================================================
   8. CARTES PRODUITS
   ========================================================================== */
.grille-produits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.carte-produit {
  background-color: var(--blanc);
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(74, 52, 39, 0.06);
  box-shadow: 0 10px 30px rgba(74, 52, 39, 0.07);
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.25,0.6,0.3,1), box-shadow 0.35s ease;
}

.carte-produit:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px rgba(74, 52, 39, 0.15);
}

.carte-img {
  position: relative;
  aspect-ratio: 4 / 3.2;
  overflow: hidden;
  margin: 10px 10px 0;
  border-radius: 18px;
}

.carte-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.carte-produit:hover .carte-img img { transform: scale(1.06); }

.etiquette {
  position: absolute;
  top: 16px;
  left: 16px;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  color: var(--encre);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4rem 0.95rem;
  border-radius: 100px;
  box-shadow: 0 4px 14px rgba(74, 52, 39, 0.12);
}

.carte-corps {
  padding: 1.4rem 1.6rem 1.6rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.carte-corps h3 {
  margin-bottom: 0.2rem;
  font-size: 1.3rem;
  font-family: var(--font-titres);
}

.meta {
  color: #C2617A;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 0.7rem;
}

.carte-corps > p:not(.meta) {
  font-size: 0.94rem;
  color: var(--texte-doux);
  flex: 1;
}

.carte-pied {
  margin-top: 1.3rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(74, 52, 39, 0.09);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.prix {
  font-family: var(--font-titres);
  font-size: 1.75rem;
  font-weight: 700;
  color: #C2617A;
  line-height: 1;
}

/* Bouton devis moderne dans les cartes produits */
.carte-pied .lien-commander {
  font-weight: 700;
  font-size: 0.86rem;
  color: #fff;
  background: linear-gradient(135deg, #C2617A 0%, #A84D63 100%);
  padding: 0.6rem 1.15rem;
  border-radius: 100px;
  box-shadow: 0 6px 16px rgba(168, 77, 99, 0.28);
  transition: var(--transition);
  white-space: nowrap;
}
.carte-pied .lien-commander:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(168, 77, 99, 0.38);
}

.lien-commander {
  font-weight: 600;
  font-size: 0.92rem;
}

/* ==========================================================================
   9. CARTES PARFUMS
   ========================================================================== */
.grille-parfums {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.8rem;
}

.carte-parfum {
  background-color: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: 2.3rem 1.6rem;
  text-align: center;
  transition: var(--transition);
}

.carte-parfum:hover {
  transform: translateY(-6px);
  box-shadow: var(--ombre);
  border-color: transparent;
}

.parfum-icone {
  font-size: 2.4rem;
  display: block;
  margin-bottom: 1rem;
}

.carte-parfum h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.carte-parfum p { font-size: 0.92rem; color: var(--texte-doux); }

/* ==========================================================================
   10. ÉTAPES "COMMENT COMMANDER"
   ========================================================================== */
.etapes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.etape {
  background-color: var(--blanc);
  border-radius: var(--radius);
  padding: 2.4rem 2rem;
  box-shadow: var(--ombre);
  position: relative;
}

.numero {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--degrade-signature);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-titres);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--encre);
  margin-bottom: 1.3rem;
}

.etape h3 { margin-bottom: 0.5rem; font-size: 1.2rem; }
.etape p { font-size: 0.95rem; color: var(--texte-doux); }

/* ==========================================================================
   11. BANDEAU D'APPEL À L'ACTION
   ========================================================================== */
.cta {
  background:
    radial-gradient(circle at 85% 20%, rgba(231, 147, 167, 0.35), transparent 45%),
    radial-gradient(circle at 10% 85%, rgba(243, 215, 211, 0.5), transparent 50%),
    var(--encre);
  color: var(--rose-doux);
  padding: 6rem 0;
  text-align: center;
}

.cta h2 {
  color: var(--blanc);
  margin-bottom: 0.9rem;
}

.cta h2 em { color: var(--mimosa); }

.cta p {
  font-size: 1.1rem;
  opacity: 0.85;
  max-width: 560px;
  margin: 0 auto 2.2rem;
}

.cta .hero-boutons { justify-content: center; }

.cta .btn-secondaire {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--blanc);
  border-color: rgba(255, 255, 255, 0.5);
}

.cta .btn-secondaire:hover {
  background-color: var(--blanc);
  color: var(--encre);
}

/* ==========================================================================
   12. PIED DE PAGE
   ========================================================================== */
.footer {
  background-color: var(--encre);
  color: rgba(253, 244, 242, 0.8);
  padding: 3.5rem 0 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-haut {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-logo {
  width: 130px;
  height: 130px;
  object-fit: contain;
  background-color: var(--rose-doux);
  border-radius: 50%;
  padding: 14px;
  margin-bottom: 1rem;
}

.footer-marque {
  font-family: var(--font-marque);
  font-size: 2.6rem;
  color: var(--blanc);
  line-height: 1.1;
}

.footer-sous-titre { font-size: 0.9rem; opacity: 0.75; }

.footer-contact { display: grid; gap: 0.4rem; text-align: right; }

.footer-contact a { color: rgba(253, 244, 242, 0.85); font-size: 0.95rem; }
.footer-contact a:hover { color: var(--mimosa); }

.footer-bas {
  padding-top: 1.6rem;
  text-align: center;
  font-size: 0.8rem;
  opacity: 0.6;
}

/* ==========================================================================
   13. BOUTON INSTAGRAM FLOTTANT
   ========================================================================== */
.flottant-insta {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 900;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--degrade-signature);
  color: var(--encre);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--ombre-forte);
  transition: var(--transition);
}

.flottant-insta:hover {
  transform: translateY(-4px) scale(1.05);
  color: var(--encre);
}

/* ==========================================================================
   14. ANIMATIONS
   ========================================================================== */
@keyframes flotter {
  from { transform: translateY(0) translateX(0); }
  to   { transform: translateY(30px) translateX(-20px); }
}

.reveler {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveler.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveler { opacity: 1; transform: none; transition: none; }
  .defilement { animation: none; }
  .hero::before, .hero::after { animation: none; }
}

/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .grille-produits { grid-template-columns: repeat(2, 1fr); }
  .grille-parfums { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .nav {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background-color: rgba(253, 244, 242, 0.98);
    border-radius: var(--radius);
    box-shadow: var(--ombre-forte);
    padding: 1.4rem;
    display: none;
  }

  .nav.ouvert { display: block; }

  .nav-liste {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .burger { display: flex; }

  .hero {
    background-image:
      linear-gradient(180deg, rgba(253, 244, 242, 0.95) 0%, rgba(253, 244, 242, 0.85) 60%, rgba(249, 231, 229, 0.6) 100%),
      url("images/hero.jpg");
    background-position: center;
    min-height: auto;
  }

  .bloc-duo { grid-template-columns: 1fr; gap: 2.5rem; }

  .etapes { grid-template-columns: 1fr; }

  .footer-contact { text-align: left; }
}

/* Menu long (9 onglets) : bascule en burger sous 1300px pour éviter le débordement */
@media (max-width: 1300px) {
  .nav {
    position: absolute;
    top: calc(100% + 10px);
    left: 0; right: 0;
    background-color: rgba(253, 244, 242, 0.98);
    border-radius: var(--radius);
    box-shadow: var(--ombre-forte);
    padding: 1.4rem;
    display: none;
  }
  .nav.ouvert { display: block; }
  .nav-liste { flex-direction: column; align-items: flex-start; gap: 1rem; flex-wrap: nowrap; }
  .nav-liste a { font-size: 1rem; }
  .burger { display: flex; }
}

@media (max-width: 560px) {
  .grille-produits { grid-template-columns: 1fr; }
  .grille-parfums { grid-template-columns: 1fr; }
  .section { padding: 4.5rem 0; }
}

/* ==========================================================================
   16. PAGES INTÉRIEURES (Cookies, Événements, Où nous trouver)
   ========================================================================== */

/* --- En-tête de page (hero réduit) --- */
.hero-page {
  padding: 170px 0 70px;
  background: var(--degrade-signature);
  position: relative;
  overflow: hidden;
}

.hero-page::after {
  content: "";
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  top: -100px;
  right: -80px;
  background: radial-gradient(circle, rgba(231, 147, 167, 0.6), transparent 70%);
  pointer-events: none;
}

.hero-page .conteneur { position: relative; z-index: 1; max-width: 760px; }
.hero-page h1 { margin-bottom: 1rem; font-size: clamp(2.4rem, 5vw, 3.6rem); }
.hero-page p { max-width: 600px; }
.hero-page .hero-boutons { margin-top: 1.8rem; }

/* --- Lien actif dans le menu --- */
.nav-liste a.actif { color: var(--biscuit); }
.nav-liste a.actif::after { width: 100%; }

/* --- Mention "à compléter" (contenu d'exemple) --- */
.a-completer {
  display: inline-block;
  background-color: rgba(231, 147, 167, 0.25);
  border: 1px dashed var(--mimosa-fonce);
  border-radius: 8px;
  padding: 0.2rem 0.7rem;
  font-size: 0.82rem;
  color: var(--biscuit-fonce);
  margin-bottom: 0.8rem;
}

/* --- Cartes lieux (Où nous trouver) --- */
.grille-lieux {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.carte-lieu {
  background-color: var(--blanc);
  border-radius: var(--radius);
  padding: 2.3rem 2rem;
  box-shadow: var(--ombre);
}

.lieu-icone { font-size: 2.2rem; display: block; margin-bottom: 1rem; }
.carte-lieu h3 { margin-bottom: 0.6rem; font-size: 1.2rem; }
.carte-lieu ul { display: grid; gap: 0.45rem; margin-top: 0.6rem; }
.carte-lieu li { padding-left: 1.4rem; position: relative; font-size: 0.95rem; }
.carte-lieu li::before { content: "✿"; position: absolute; left: 0; color: var(--mimosa-fonce); }

/* --- Cartes avis --- */
.grille-avis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.carte-avis {
  background-color: var(--blanc);
  border-radius: var(--radius);
  padding: 2.2rem 2rem;
  box-shadow: var(--ombre);
  margin: 0;
}

.etoiles { color: var(--mimosa-fonce); letter-spacing: 0.2em; margin-bottom: 0.9rem; }
.carte-avis blockquote { font-style: italic; margin-bottom: 1rem; }
.carte-avis figcaption { font-size: 0.88rem; color: var(--texte-doux); font-weight: 600; }

/* --- Note générique --- */
.note {
  text-align: center;
  font-size: 0.95rem;
  color: var(--biscuit-fonce);
  background-color: rgba(231, 147, 167, 0.18);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.6rem;
}

/* --- Cartes univers (accueil : Biscuits / Cookies / Événements) --- */
.grille-univers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.carte-univers {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--ombre);
  background-color: var(--blanc);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.carte-univers:hover { transform: translateY(-8px); box-shadow: var(--ombre-forte); }

.univers-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--degrade-signature); }
.univers-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.carte-univers:hover .univers-img img { transform: scale(1.06); }

.univers-img-emoji {
  aspect-ratio: 16 / 10;
  background: var(--degrade-signature);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
}

.univers-corps { padding: 1.7rem 1.8rem 1.9rem; display: flex; flex-direction: column; flex: 1; }
.univers-corps h3 { font-size: 1.4rem; margin-bottom: 0.4rem; }
.univers-corps p { font-size: 0.95rem; flex: 1; }
.univers-corps .lien-commander { margin-top: 1.2rem; }

/* --- Responsive pages intérieures --- */
@media (max-width: 1024px) {
  .grille-lieux, .grille-avis, .grille-univers { grid-template-columns: 1fr; }
}

/* ==========================================================================
   17. CERCLES PARFUMS (photos produits des flyers)
   ========================================================================== */
.grille-cercles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2.2rem 1rem;
  justify-items: center;
}

.grille-cercles-3, .grille-cercles-5 { max-width: 900px; margin-inline: auto; }

.cercle-parfum { text-align: center; }

.cercle-parfum img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--blanc);
  box-shadow: var(--ombre);
  transition: var(--transition);
}

.cercle-parfum:hover img { transform: translateY(-6px) scale(1.05); box-shadow: var(--ombre-forte); }

.cercle-parfum p {
  margin-top: 0.7rem;
  font-family: var(--font-titres);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--encre);
  line-height: 1.1;
  -webkit-text-stroke: 4px #fff;
  paint-order: stroke fill;
}

.sous-nom { font-size: 0.82rem; color: var(--texte-doux); font-style: italic; }

/* ==========================================================================
   18. GALERIE MOSAÏQUE (photos maison)
   ========================================================================== */
.galerie-mosaique { columns: 3 260px; column-gap: 1.2rem; }

.galerie-mosaique img {
  width: 100%;
  border-radius: var(--radius-sm);
  margin-bottom: 1.2rem;
  box-shadow: var(--ombre);
  break-inside: avoid;
  display: block;
}

/* ==========================================================================
   19. THÈME NOËL (page noel.html)
   ========================================================================== */
.theme-noel .hero-page { background: linear-gradient(120deg, #dce9d2 0%, #edf4e6 45%, #e2eeda 100%); }
.theme-noel .hero-page::after { background: radial-gradient(circle, rgba(163, 199, 138, 0.5), transparent 70%); }
.theme-noel .surtitre { color: #6d9455; }
.theme-noel .badge { color: #6d9455; }
.theme-noel .badge::before { background-color: #6d9455; }
.theme-noel .mot-accent { color: #6d9455; }
.theme-noel .cercle-parfum img { background-color: #eef4e7; }
.theme-noel .section-rose { background-color: #f0f6ea; }
.note-noel { background-color: #e6f0dd; color: #4f6b3d; margin-top: 3rem; }

/* ==========================================================================
   20. BANDE DE RÉASSURANCE
   ========================================================================== */
.reassurance {
  background-color: var(--blanc);
  border-top: 1px solid var(--bordure);
  padding: 2.8rem 0;
}

.reassurance-grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: center;
}

.reassurance-item span { font-size: 2rem; display: block; margin-bottom: 0.5rem; }
.reassurance-item p { font-size: 0.88rem; color: var(--texte-doux); line-height: 1.5; }
.reassurance-item strong { color: var(--encre); font-size: 0.98rem; }

@media (max-width: 820px) {
  .reassurance-grille { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
}

/* Réassurance version flyers : pictos dessinés, 3 colonnes */
.reassurance-grille { grid-template-columns: repeat(3, 1fr); }
.reassurance-item img {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 0.7rem;
  display: block;
}
.reassurance-item img.reassurance-logo { object-fit: contain; background-color: var(--rose-doux); padding: 6px; }
@media (max-width: 820px) { .reassurance-grille { grid-template-columns: 1fr; gap: 2rem; } }

/* ==========================================================================
   21. FORMULAIRE (devenir distributeur)
   ========================================================================== */
.formulaire {
  max-width: 760px;
  margin: 0 auto;
  background-color: var(--blanc);
  border-radius: var(--radius);
  box-shadow: var(--ombre);
  padding: 2.5rem 2.5rem 2rem;
}

.champs-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }

.champ { margin-bottom: 1.2rem; }

.champ label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--encre);
  margin-bottom: 0.4rem;
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--bordure);
  border-radius: var(--radius-sm);
  font-family: var(--font-texte);
  font-size: 0.95rem;
  color: var(--texte);
  background-color: var(--rose-doux);
  transition: var(--transition);
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--biscuit);
  background-color: var(--blanc);
}

.champ .erreur, .champ input.erreur, .champ textarea.erreur { border-color: #d9534f; }

.form-note { font-size: 0.8rem; color: var(--texte-doux); margin-top: 0.9rem; }

.form-succes {
  display: none;
  max-width: 760px;
  margin: 2rem auto 0;
  background-color: #e9f6e7;
  color: #3f6b3a;
  border-radius: var(--radius-sm);
  padding: 1.2rem 1.6rem;
  text-align: center;
}

.form-succes.visible { display: block; }

@media (max-width: 640px) {
  .champs-duo { grid-template-columns: 1fr; gap: 0; }
  .formulaire { padding: 1.8rem 1.4rem 1.5rem; }
}

/* Pictos de réassurance : noir sur fond blanc */
.reassurance-item img { border-radius: 0; background-color: var(--blanc); object-fit: contain; }
.reassurance-item img.reassurance-logo { background-color: var(--blanc); padding: 0; }

/* ==========================================================================
   22. LOGO XXL + MENU : pilule flottante → bandeau pleine largeur au scroll
   ========================================================================== */
.logo img { height: 74px; transition: var(--transition); }

.header .conteneur { height: 88px; }

.header.scrolle {
  top: 0;
  width: 100%;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  background-color: rgba(253, 244, 242, 0.97);
  box-shadow: 0 8px 30px rgba(74, 52, 39, 0.12);
}

.header.scrolle .conteneur {
  width: min(var(--largeur-max), 94%);
  margin-inline: auto;
  height: 64px;
}

.header.scrolle .logo img { height: 50px; }

@media (max-width: 820px) {
  .logo img { height: 60px; }
  .header .conteneur { height: 74px; }
}

/* Bandeau défilant modernisé : majuscules espacées, typo sobre */
.defilement {
  font-family: var(--font-texte);
  font-style: normal;
  font-weight: 700;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  gap: 2.8rem;
}
.defilement .sep { color: var(--mimosa); letter-spacing: 0; }

/* ==========================================================================
   23. BOX COOKIES : macaron prix + tryptique des tailles
   ========================================================================== */
.box-entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2.5rem;
  margin-bottom: 3rem;
}

.box-entete h2 { margin-bottom: 0.6rem; }
.box-entete p { color: var(--texte-doux); max-width: 520px; }

.macaron {
  flex-shrink: 0;
  width: 175px;
  height: 175px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--biscuit) 0%, var(--biscuit-fonce) 100%);
  color: var(--blanc);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: rotate(8deg);
  box-shadow: var(--ombre-forte);
  outline: 2px dashed rgba(255, 255, 255, 0.65);
  outline-offset: -12px;
  transition: var(--transition);
}

.macaron:hover { transform: rotate(0deg) scale(1.05); }

.macaron-prix {
  font-family: var(--font-titres);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
}

.macaron-texte {
  font-family: var(--font-marque);
  font-size: 1.5rem;
  line-height: 1.05;
  margin-top: 0.2rem;
}

.tryptique-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.carte-box {
  background-color: var(--blanc);
  border-radius: var(--radius);
  box-shadow: var(--ombre);
  padding: 2.2rem 1.6rem 2rem;
  text-align: center;
  transition: var(--transition);
}

.carte-box:hover { transform: translateY(-6px); box-shadow: var(--ombre-forte); }

.box-visuel {
  height: 145px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 1rem;
}

.box-cookie { border-radius: 50%; object-fit: cover; }
.box-cookie-l { width: 135px; height: 135px; }
.box-cookie-m { width: 100px; height: 100px; }
.box-cookie-s { width: 70px; height: 70px; }

.taille {
  display: inline-block;
  background-color: var(--rose-section);
  color: var(--biscuit-fonce);
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 100px;
  padding: 0.2rem 0.9rem;
  margin-bottom: 0.6rem;
}

.carte-box h3 { font-size: 1.35rem; margin-bottom: 0.2rem; }
.carte-box p { color: var(--texte-doux); font-size: 0.95rem; }

@media (max-width: 820px) {
  .box-entete { flex-direction: column; text-align: center; }
  .macaron { width: 150px; height: 150px; }
  .tryptique-box { grid-template-columns: 1fr; }
}

/* Cookies décoratifs en fond de la section box */
#box { position: relative; overflow: hidden; }
#box .conteneur { position: relative; z-index: 1; }

.deco-cookie {
  position: absolute;
  opacity: 0.14;
  pointer-events: none;
  user-select: none;
}

.deco-1 { top: -50px; left: -50px; width: 240px; transform: rotate(-18deg); }
.deco-2 { top: 26%; right: -70px; width: 280px; transform: rotate(22deg); }
.deco-3 { bottom: -60px; left: 6%; width: 200px; transform: rotate(12deg); }
.deco-4 { bottom: 18%; right: 30%; width: 130px; transform: rotate(-10deg); }

@media (max-width: 820px) {
  .deco-2, .deco-4 { display: none; }
}

/* En-têtes de pages : fond rose très doux (fini le vieux rose soutenu) */
.hero-page {
  background: linear-gradient(120deg, #fdf3f5 0%, #fbeaee 55%, #f9e3e9 100%);
}
.hero-page::after { opacity: 0.3; }

/* Menu : un peu d'air pour le bouton Nous contacter */
.nav-liste { gap: 0.8rem; flex-wrap: nowrap; }
.nav-liste .btn-petit { padding: 0.5rem 1.15rem; }

/* Macaron « 30€ la box au choix » — style flyers : vieux rose, pointillés blancs */
.macaron {
  background: #b5566b;
  transform: rotate(0deg);
  outline: none;
  border: none;
  box-shadow: 0 18px 40px rgba(181, 86, 107, 0.35);
  position: relative;
}

.macaron::before {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.85);
  pointer-events: none;
}

.macaron:hover { transform: scale(1.06) rotate(-4deg); }

.macaron-prix {
  font-family: var(--font-titres);
  font-size: 3.4rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.macaron-texte {
  font-family: var(--font-marque);
  font-size: 1.65rem;
  line-height: 1;
  margin-top: 0.3rem;
}

/* Schémas des box (dessins SVG) */
.box-schema { width: 100%; max-width: 220px; margin-inline: auto; }
.box-visuel { height: auto; margin-bottom: 1.2rem; }

/* Prix à la pièce sous chaque box */
.prix-piece {
  margin-top: 0.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: #8F3D51;
}

/* Tryptique : 3 blocs de même hauteur, dessins et textes alignés */
.tryptique-box { align-items: stretch; }

.carte-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.box-visuel {
  height: 280px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
}

.box-schema {
  max-width: 225px;
  max-height: 100%;
  width: auto;
  height: auto;
}

.carte-box .prix-piece { margin-top: auto; padding-top: 0.5rem; }

/* Parfums cookies : deux rangées de 5 en quinconce, centrées */
.cercles-quinconce { overflow: hidden; }

.cercles-quinconce .rangee {
  display: flex;
  justify-content: center;
  gap: 3rem;
}

.cercles-quinconce .rangee-1 { transform: translateX(-52px); }
.cercles-quinconce .rangee-2 { transform: translateX(52px); margin-top: 2.2rem; }

.cercles-quinconce .cercle-parfum img { width: 165px; height: 165px; }

/* Quinconce 5 + 4 : la rangée courte se centre d'elle-même dans les creux,
   pas de décalage manuel (sinon elle se désaligne) */
.quinconce-5-4 .rangee-1,
.quinconce-5-4 .rangee-2 { transform: none; }

/* Libellés parfums en arc arrondi (même police que les titres : Baloo 2) */
.arc-parfum {
  display: block;
  width: 178px;
  max-width: 100%;
  margin: 0 auto -40px;
  overflow: visible;
  pointer-events: none;
}
.arc-parfum text {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 700;
  font-size: 34px;
  fill: var(--encre);
  text-anchor: middle;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 5px;
  stroke-linejoin: round;
}

/* Bouton devis sous les rangées de parfums / meringues */
.bloc-cta-parfums { text-align: center; margin-top: 2.8rem; }

/* Pastilles parfums cliquables (home) */
a.cercle-parfum { display: block; text-decoration: none; color: inherit; }

/* Hero deux collections (haut de page biscuits) — style immersif d'accueil */
.hero-collections {
  min-height: 94vh;
  text-align: center;
  background-image:
    linear-gradient(rgba(253, 244, 242, 0.90) 0%, rgba(253, 244, 242, 0.80) 55%, rgba(253, 244, 242, 0.88) 100%),
    url("images/hero.jpg");
  background-size: cover;
  background-position: center;
}
.hero-collections .conteneur { width: 100%; }
.hero-collections-surtitre { margin-bottom: 0.4rem; }
.hero-collections-titre { margin-bottom: 3rem; }
.hero-collections-grille {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 3rem;
  align-items: start;
  max-width: 1000px;
  margin: 0 auto;
}
.hero-col { display: flex; flex-direction: column; align-items: center; }
.hero-col .surtitre { color: #C2617A; margin-bottom: 0.3rem; }
.hero-col h2 { font-size: 2.4rem; margin: 0 0 0.9rem; line-height: 1.08; }
.hero-col > p { margin-bottom: 1.6rem; max-width: 400px; }
.hero-col-sep { width: 1px; background: rgba(74, 52, 39, 0.16); align-self: stretch; }
@media (max-width: 820px) {
  .hero-collections { min-height: auto; padding-top: 120px; padding-bottom: 60px; }
  .hero-collections-titre { margin-bottom: 2rem; }
  .hero-collections-grille { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-col-sep { width: 60%; height: 1px; justify-self: center; }
  .hero-col h2 { font-size: 2rem; }
}

/* Galerie horizontale scrollable (page biscuits) */
.galerie-scroll-hint {
  text-align: center;
  font-size: 0.85rem;
  color: var(--vieux-rose, #a84d63);
  opacity: 0.75;
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
}
.galerie-scroll {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 0.4rem 0.2rem 1.2rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--vieux-rose, #c2617a) transparent;
}
.galerie-scroll img {
  flex: 0 0 auto;
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 18px;
  scroll-snap-align: center;
  box-shadow: var(--ombre);
  transition: var(--transition);
}
.galerie-scroll img:hover { transform: translateY(-5px); box-shadow: var(--ombre-forte); }
.galerie-scroll::-webkit-scrollbar { height: 8px; }
.galerie-scroll::-webkit-scrollbar-track { background: transparent; }
.galerie-scroll::-webkit-scrollbar-thumb {
  background: var(--vieux-rose, #c2617a);
  border-radius: 99px;
}
@media (max-width: 600px) {
  .galerie-scroll img { width: 150px; height: 150px; }
}

@media (max-width: 1024px) {
  .cercles-quinconce .rangee { flex-wrap: wrap; gap: 1.6rem; }
  .cercles-quinconce .rangee-1, .cercles-quinconce .rangee-2 { transform: none; margin-top: 1.6rem; }
  .cercles-quinconce .cercle-parfum img { width: 140px; height: 140px; }
}

/* Correctif survol parfums : ne couper que l'horizontal, laisser le zoom respirer */
.cercles-quinconce {
  overflow: visible;
  overflow-x: clip;
  padding-top: 14px;
}

/* Parfums regroupés par familles */
.groupes-parfums { display: grid; gap: 3.5rem; }

.groupe-titre {
  text-align: center;
  font-size: 1.6rem;
  margin-bottom: 1.6rem;
}

.groupes-parfums .rangee {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem;
}

.groupes-parfums .cercle-parfum { max-width: 185px; }

.groupes-parfums .cercle-parfum img,
.cercle-emoji {
  width: 160px;
  height: 160px;
}

.cercle-emoji {
  border-radius: 50%;
  background-color: var(--blanc);
  box-shadow: var(--ombre);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.6rem;
  margin-inline: auto;
  transition: var(--transition);
}

.cercle-parfum:hover .cercle-emoji { transform: translateY(-6px) scale(1.05); box-shadow: var(--ombre-forte); }

/* ==========================================================================
   24. BLOC PRIX SIGNATURE — épuré, esprit marque premium
   ========================================================================== */
.prix-bloc {
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, #4d4046 0%, var(--encre) 65%);
  color: var(--blanc);
  border-radius: 24px;
  padding: 2rem 2.8rem 1.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  box-shadow: 0 26px 55px rgba(68, 58, 62, 0.28);
}

.prix-bloc::after {
  content: "";
  position: absolute;
  right: -34px;
  top: -34px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(242, 174, 190, 0.22);
}

.prix-bloc-label {
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-size: 0.72rem;
  font-weight: 700;
  color: #F2AEBE;
}

.prix-bloc-montant {
  font-family: var(--font-titres);
  font-size: 4.8rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.prix-bloc-sous {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 820px) {
  .prix-bloc { padding: 1.6rem 2.2rem 1.5rem; }
  .prix-bloc-montant { font-size: 3.8rem; }
}

/* ==========================================================================
   25. PRIX EN TYPO GÉANTE — éditorial, sans cadre
   ========================================================================== */
.prix-typo { flex-shrink: 0; text-align: center; }

.prix-typo-montant {
  display: block;
  font-family: var(--font-titres);
  font-weight: 700;
  font-size: clamp(5.5rem, 11vw, 9rem);
  line-height: 0.95;
  color: transparent;
  -webkit-text-stroke: 3px var(--biscuit);
  text-stroke: 3px var(--biscuit);
  transition: var(--transition);
}

.box-entete:hover .prix-typo-montant {
  color: var(--biscuit);
  -webkit-text-stroke-color: var(--biscuit);
}

.prix-typo-label {
  display: block;
  margin-top: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--encre);
}

@media (max-width: 820px) {
  .prix-typo-montant { -webkit-text-stroke-width: 2px; }
}

/* Prix « 30€ » façon titres des flyers : lettres bulle rose saumon, épais contour blanc */
.prix-typo-montant {
  color: #F2B3A9;
  -webkit-text-stroke: 12px #ffffff;
  text-stroke: 12px #ffffff;
  paint-order: stroke fill;
  text-shadow: 0 10px 28px rgba(74, 52, 39, 0.16);
}

.box-entete:hover .prix-typo-montant {
  color: #EFA093;
  -webkit-text-stroke-color: #ffffff;
}

.prix-typo-label { color: var(--biscuit-fonce); }

@media (max-width: 820px) {
  .prix-typo-montant { -webkit-text-stroke-width: 8px; }
}

/* Harmonisation section box : tout au langage des flyers */
.titre-bulle {
  color: #F2B3A9;
  -webkit-text-stroke: 10px #ffffff;
  text-stroke: 10px #ffffff;
  paint-order: stroke fill;
  text-shadow: 0 8px 22px rgba(74, 52, 39, 0.14);
  letter-spacing: 0.01em;
}

.box-entete p { color: var(--texte); }
.box-entete .marque-inline { white-space: nowrap; font-size: 1.3em; }

@media (max-width: 820px) {
  .titre-bulle { -webkit-text-stroke-width: 7px; }
}

/* Titres 9/12/18 Cookies sur les couvercles : même typo bulle que le titre */
.box-visuel { position: relative; }

.box-lid-titre {
  position: absolute;
  top: 5.5%;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  font-family: var(--font-titres);
  font-weight: 700;
  font-size: 1.55rem;
  white-space: nowrap;
  color: #F2B3A9;
  -webkit-text-stroke: 6px #ffffff;
  text-stroke: 6px #ffffff;
  paint-order: stroke fill;
  z-index: 1;
  pointer-events: none;
}

/* Chips « 3 tailles disponibles » sous l'intro de la section box */
.chips-tailles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.chips-tailles .taille { margin-bottom: 0; }

.taille-forte {
  background-color: var(--biscuit);
  color: var(--blanc);
}

/* Harmonisation finale de la section box */
.chips-tailles .taille {
  background-color: var(--blanc);
  color: var(--biscuit-fonce);
  border: 1px solid rgba(217, 123, 143, 0.35);
}

.chips-tailles .taille-forte {
  background-color: var(--biscuit);
  color: var(--blanc);
  border: none;
}

.carte-box > p {
  font-family: var(--font-titres);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--encre);
}

.carte-box .prix-piece {
  font-family: var(--font-texte);
  font-size: 0.92rem;
}

/* « 3 tailles disponibles » en texte, pas en tag */
.tailles-libelle {
  align-self: center;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--encre);
}

/* Harmonisation des couleurs : une seule famille de rose partout */
.titre-bulle,
.prix-typo-montant,
.box-lid-titre {
  color: #EFA0B2;
}

.box-entete:hover .prix-typo-montant { color: #E68CA1; }

.prix-piece { color: var(--biscuit-fonce); }

/* Cookies décoratifs supplémentaires */
.deco-cookie { opacity: 0.16; }
.deco-5 { top: 55%; left: -60px; width: 210px; transform: rotate(25deg); }
.deco-6 { top: 4%; left: 38%; width: 120px; transform: rotate(-14deg); }
.deco-7 { bottom: -70px; right: 10%; width: 230px; transform: rotate(8deg); }
.deco-8 { top: 42%; right: 34%; width: 100px; transform: rotate(-22deg); }

@media (max-width: 820px) {
  .deco-5, .deco-6, .deco-8 { display: none; }
}

/* ==========================================================================
   26. HERO AVEC PHOTO EN FOND (esprit flyers : voile rose + photo gourmande)
   ========================================================================== */
.hero-photo {
  background-size: cover;
  background-position: center bottom;
  min-height: 480px;
  display: flex;
  align-items: center;
}

.hero-photo-cookies {
  background-image:
    linear-gradient(155deg, rgba(253, 243, 245, 0.97) 0%, rgba(253, 243, 245, 0.88) 42%, rgba(251, 233, 238, 0.35) 100%),
    url("images/hero-cookies.jpg");
}

.hero-photo-biscuits {
  background-image:
    linear-gradient(155deg, rgba(253, 243, 245, 0.97) 0%, rgba(253, 243, 245, 0.88) 42%, rgba(251, 233, 238, 0.35) 100%),
    url("images/hero-biscuits.jpg");
}

@media (max-width: 820px) {
  .hero-photo {
    background-image:
      linear-gradient(180deg, rgba(253, 243, 245, 0.96) 0%, rgba(253, 243, 245, 0.88) 55%, rgba(251, 233, 238, 0.55) 100%),
      var(--hero-photo-mobile, none);
    min-height: auto;
  }
  .hero-photo-cookies { --hero-photo-mobile: url("images/hero-cookies.jpg"); }
  .hero-photo-biscuits { --hero-photo-mobile: url("images/hero-biscuits.jpg"); }
}

/* ==========================================================================
   27. HARMONISATION FINALE PAGE COOKIES
   ========================================================================== */

/* Hero : photo bien plus discrète sous un voile rose renforcé */
.hero-photo-cookies {
  background-image:
    linear-gradient(155deg, rgba(253, 243, 245, 0.98) 0%, rgba(253, 243, 245, 0.94) 48%, rgba(252, 238, 241, 0.8) 100%),
    url("images/hero-cookies.jpg");
}

.hero-photo-biscuits {
  background-image:
    linear-gradient(155deg, rgba(253, 243, 245, 0.98) 0%, rgba(253, 243, 245, 0.94) 48%, rgba(252, 238, 241, 0.8) 100%),
    url("images/hero-biscuits.jpg");
}

/* Bandeau d'appel à l'action : vieux rose de la charte au lieu du charbon */
.cta {
  background:
    radial-gradient(circle at 85% 18%, rgba(255, 255, 255, 0.14), transparent 45%),
    radial-gradient(circle at 12% 85%, rgba(255, 255, 255, 0.08), transparent 50%),
    linear-gradient(140deg, #C2617A 0%, #A84D63 100%);
}

.cta h2 em { color: #FBD9E0; }
.cta p { opacity: 0.92; }
.cta .btn-secondaire { border-color: rgba(255, 255, 255, 0.65); }

/* Parfums : étiquettes toujours lisibles, jamais chevauchées */
.groupes-parfums .cercle-parfum {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.groupes-parfums .cercle-parfum p {
  margin-top: 0.8rem;
  position: relative;
  z-index: 2;
  line-height: 1.3;
}

.groupes-parfums .rangee { row-gap: 2.8rem; }

/* ==========================================================================
   28. FOOTER FUN — style flyers : vague, vieux rose, slogan, filigrane géant
   ========================================================================== */
.footer-fun {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 25%, rgba(255, 255, 255, 0.12), transparent 45%),
    linear-gradient(150deg, #C2617A 0%, #A84D63 70%);
  padding: 0 0 6.5rem;
  border-top: none;
  color: rgba(255, 255, 255, 0.9);
}

.footer-vague { line-height: 0; }
.footer-vague svg { width: 100%; height: 70px; display: block; }

.footer-fun-contenu {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}

.footer-fun-logo {
  width: 130px;
  height: 130px;
  object-fit: contain;
  background-color: var(--rose-doux);
  border-radius: 50%;
  padding: 12px;
  box-shadow: 0 16px 40px rgba(74, 30, 42, 0.3);
  transition: var(--transition);
}

.footer-fun-logo:hover { transform: rotate(-6deg) scale(1.05); }

.footer-fun-slogan {
  font-family: var(--font-marque);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  color: var(--blanc);
  line-height: 1.1;
  text-shadow: 0 4px 18px rgba(74, 30, 42, 0.35);
}

.footer-fun-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
}

.chip-contact {
  background-color: rgba(255, 255, 255, 0.94);
  color: #A84D63;
  font-weight: 600;
  font-size: 0.92rem;
  border-radius: 100px;
  padding: 0.6rem 1.4rem;
  transition: var(--transition);
}

a.chip-contact:hover { transform: translateY(-3px) rotate(-1.5deg); background-color: var(--blanc); color: #8F3D51; }

.chip-lieu { background-color: rgba(255, 255, 255, 0.18); color: var(--blanc); }

.footer-fun-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.6rem;
}

.footer-fun-nav a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.88rem;
  font-weight: 500;
}

.footer-fun-nav a:hover { color: var(--blanc); text-decoration: underline; }

.footer-fun-legal { font-size: 0.75rem; opacity: 0.65; max-width: 640px; }

.footer-fun-filigrane {
  position: absolute;
  bottom: -0.55em;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-marque);
  font-size: clamp(6rem, 16vw, 13rem);
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.12);
  pointer-events: none;
  user-select: none;
  line-height: 1;
}

/* Footer : slogan plus discret, sans filigrane */
.footer-fun { padding-bottom: 3rem; }
.footer-fun-slogan { font-size: clamp(1.7rem, 3.2vw, 2.2rem); }

/* Slogan du footer : écriture manuscrite moderne */
.footer-fun-slogan {
  font-family: "Dancing Script", cursive;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Footer réorganisé en colonnes */
.footer-fun-contenu { text-align: left; align-items: stretch; }

.footer-grille {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.5fr;
  gap: 2.5rem;
  align-items: start;
  width: 100%;
}

.footer-col { display: flex; flex-direction: column; gap: 0.55rem; align-items: flex-start; }

.footer-col-marque { gap: 1rem; }
.footer-col-marque .footer-fun-logo { width: 105px; height: 105px; }
.footer-col-marque .footer-fun-slogan { font-size: 1.9rem; text-align: left; }

.footer-col-titre {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 0.4rem;
}

.footer-col > a:not(.chip-contact) {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  font-weight: 500;
}

.footer-col > a:not(.chip-contact):hover { color: var(--blanc); text-decoration: underline; }

.footer-col .chip-contact { font-size: 0.88rem; padding: 0.5rem 1.2rem; }

.footer-ligne-basse {
  width: 100%;
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  text-align: center;
}

@media (max-width: 900px) {
  .footer-grille { grid-template-columns: 1fr 1fr; }
  .footer-col-marque { grid-column: 1 / -1; align-items: center; }
  .footer-col-marque .footer-fun-slogan { text-align: center; }
}

@media (max-width: 560px) {
  .footer-grille { grid-template-columns: 1fr; }
  .footer-col { align-items: center; }
}

/* Pages légales */
.texte-legal { max-width: 760px; }
.texte-legal h2 { font-size: 1.35rem; margin: 2.2rem 0 0.7rem; }
.texte-legal p { margin-bottom: 0.8rem; }
.footer-fun-legal a { color: rgba(255,255,255,0.85); text-decoration: underline; }

/* ==========================================================================
   29. FOOTER PRO — sobre et structuré, esprit SaaS
   ========================================================================== */
.footer-pro { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 3rem; }

.footer-pro-logo {
  width: 84px;
  height: 84px;
  object-fit: contain;
  background-color: var(--rose-doux);
  border-radius: 50%;
  padding: 8px;
}

.footer-pro-desc {
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  max-width: 280px;
}

.footer-social {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blanc);
  transition: var(--transition);
}

.footer-social:hover { background-color: var(--blanc); color: #A84D63; border-color: var(--blanc); }

.footer-pro .footer-col > a {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
  font-weight: 400;
  padding: 0.1rem 0;
}

.footer-pro .footer-col > a:hover { color: var(--blanc); text-decoration: none; }

.footer-pro-ligne { font-size: 0.92rem; color: rgba(255, 255, 255, 0.6); }

.footer-cta-btn {
  margin-top: 0.9rem;
  background-color: var(--blanc);
  color: #A84D63 !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  border-radius: 10px;
  padding: 0.65rem 1.4rem !important;
  transition: var(--transition);
}

.footer-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(74, 30, 42, 0.35); }

.footer-pro-basse {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  text-align: left;
}

.footer-pro-basse p { font-size: 0.78rem; opacity: 0.6; margin: 0; }

.footer-pro-liens { display: flex; gap: 1.4rem; }

.footer-pro-liens a {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

.footer-pro-liens a:hover { color: var(--blanc); }

@media (max-width: 900px) {
  .footer-pro { grid-template-columns: 1fr 1fr; }
  .footer-pro .footer-col-marque { grid-column: 1 / -1; align-items: flex-start; }
  .footer-pro-basse { justify-content: center; text-align: center; }
}

/* ==========================================================================
   30. FOOTER MÉGA-TITRE — agence créative : un titre, un bouton, une ligne
   ========================================================================== */
.footer-mega {
  text-align: center;
  align-items: center;
  gap: 1.8rem;
  padding-top: 2rem;
}

.footer-mega-titre {
  font-size: clamp(3rem, 8vw, 5.8rem);
  line-height: 1.05;
  color: #F6CDD6;
  -webkit-text-stroke: 10px #ffffff;
  text-stroke: 10px #ffffff;
  paint-order: stroke fill;
  text-shadow: 0 12px 34px rgba(74, 30, 42, 0.3);
}

.footer-mega-btn {
  background-color: var(--blanc);
  color: #A84D63;
  font-size: 1.08rem;
  padding: 1.1rem 2.8rem;
  box-shadow: 0 16px 40px rgba(74, 30, 42, 0.3);
}

.footer-mega-btn:hover {
  background-color: var(--rose-doux);
  color: #8F3D51;
  transform: translateY(-3px);
}

.footer-mega-liens {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 2rem;
  margin-top: 0.8rem;
}

.footer-mega-liens a {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.95rem;
  font-weight: 500;
}

.footer-mega-liens a:hover { color: var(--blanc); text-decoration: underline; }

.footer-mega-basse {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  text-align: left;
}

.footer-mega-basse p { font-size: 0.78rem; opacity: 0.6; margin: 0; }

.footer-mega-droite { display: flex; align-items: center; gap: 1.4rem; }

.footer-mega-droite a:not(.footer-social) {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
}

.footer-mega-droite a:not(.footer-social):hover { color: var(--blanc); }

.footer-mega-droite .footer-social { width: 34px; height: 34px; }

@media (max-width: 820px) {
  .footer-mega-titre { -webkit-text-stroke-width: 6px; }
  .footer-mega-basse { justify-content: center; text-align: center; }
}

/* Footer méga : bloc infos (logo, liens, contacts) sous le titre */
.footer-info {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.3fr;
  gap: 3rem;
  width: 100%;
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  text-align: left;
}

.footer-info .footer-col > a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.93rem;
  font-weight: 400;
  padding: 0.08rem 0;
}

.footer-info .footer-col > a:hover { color: var(--blanc); text-decoration: underline; }

@media (max-width: 820px) {
  .footer-info { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .footer-info .footer-col { align-items: center; }
  .footer-info .footer-col-marque { align-items: center; }
  .footer-pro-desc { text-align: center; }
}

/* Titre du footer : blanc plein, lisible (fini le contour brouillé) */
.footer-mega-titre {
  color: #ffffff;
  -webkit-text-stroke: 0;
  text-stroke: 0;
  text-shadow: 0 5px 20px rgba(74, 30, 42, 0.28);
}

/* ==========================================================================
   31. CONFIGURATEUR DE DEVIS
   ========================================================================== */
.devis-grille {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 2rem;
  align-items: start;
}

.devis-colonne { max-width: none; }

.devis-titre-bloc {
  font-size: 1.25rem;
  margin-bottom: 1.2rem;
  color: var(--biscuit-fonce);
}

.btn-ajouter { width: 100%; margin-top: 0.4rem; }
.btn-ajouter:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; box-shadow: none; }
.btn-ajouter:disabled::after { transform: none; }

.devis-panier { margin-top: 2rem; padding-top: 1.6rem; border-top: 1.5px dashed var(--bordure); }

#c-lignes { display: grid; gap: 0.7rem; }

#c-lignes li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  background-color: var(--rose-doux);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1.1rem;
  font-size: 0.92rem;
}

.ligne-retirer {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background-color: var(--rose);
  color: var(--biscuit-fonce);
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.ligne-retirer:hover { background-color: var(--biscuit); color: var(--blanc); }

.devis-envoi { text-align: center; margin-top: 2.5rem; }

@media (max-width: 900px) {
  .devis-grille { grid-template-columns: 1fr; }
}

/* ==========================================================================
   32. CONFIGURATEUR PICTO — tuiles, pilules, compteur
   ========================================================================== */
.champ-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--encre);
  margin-bottom: 0.6rem;
}

.tuiles-categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 0.8rem;
  margin-bottom: 1.4rem;
}

.tuile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 1rem 0.5rem 0.9rem;
  background-color: var(--rose-doux);
  border: 2px solid var(--bordure);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-texte);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--texte);
  text-align: center;
  line-height: 1.25;
  transition: var(--transition);
}

.tuile img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--blanc);
}

.tuile-emoji {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background-color: var(--blanc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
}

.tuile:hover { transform: translateY(-3px); border-color: var(--mimosa); }

.tuile.active {
  border-color: var(--biscuit);
  background-color: var(--blanc);
  box-shadow: var(--ombre);
  color: var(--biscuit-fonce);
}

.pilules { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.pilule {
  border: 1.5px solid var(--bordure);
  background-color: var(--blanc);
  color: var(--texte);
  border-radius: 100px;
  padding: 0.45rem 1.05rem;
  font-family: var(--font-texte);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.pilule:hover { border-color: var(--mimosa); transform: translateY(-2px); }

.pilule.active {
  background-color: var(--biscuit);
  border-color: var(--biscuit);
  color: var(--blanc);
}

.stepper { display: flex; align-items: center; gap: 0.6rem; }

.stepper button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--bordure);
  background-color: var(--blanc);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--biscuit-fonce);
  cursor: pointer;
  transition: var(--transition);
}

.stepper button:hover { background-color: var(--biscuit); color: var(--blanc); border-color: var(--biscuit); }

.stepper input {
  width: 80px;
  text-align: center;
  font-weight: 700;
  font-size: 1.05rem;
}

.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Devis : 35% coordonnées / 65% produits, tuiles plus spacieuses */
.devis-grille { grid-template-columns: 35fr 65fr; gap: 1.6rem; }

.devis-coordonnees .champ input,
.devis-coordonnees .champ textarea { padding: 0.7rem 0.9rem; }

.tuiles-categories { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 0.9rem; }

.tuile { font-size: 0.82rem; padding: 1.1rem 0.6rem 1rem; }
.tuile img, .tuile-emoji { width: 64px; height: 64px; }

/* ==========================================================================
   33. DEVIS — mise en page définitive 35/65 (priorité maximale)
   ========================================================================== */
#configurateur .devis-grille {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 1.6rem;
  align-items: flex-start;
  width: 100%;
}

#configurateur .devis-coordonnees {
  flex: 0 0 35% !important;
  width: 35% !important;
  max-width: none !important;
  margin: 0 !important;
  min-width: 0;
}

#configurateur .devis-produits {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  min-width: 0;
}

#configurateur .tuiles-categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.9rem;
}

@media (max-width: 1100px) {
  #configurateur .tuiles-categories { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  #configurateur .devis-grille { flex-direction: column; }
  #configurateur .devis-coordonnees,
  #configurateur .devis-produits { flex: 1 1 100% !important; width: 100% !important; }
  #configurateur .tuiles-categories { grid-template-columns: repeat(2, 1fr); }
}

/* Mini-tuiles photo pour les options du configurateur */
.tuiles-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 0.7rem;
}

.tuile-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 0.4rem 0.6rem;
  background-color: var(--blanc);
  border: 2px solid var(--bordure);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-texte);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--texte);
  text-align: center;
  line-height: 1.2;
  transition: var(--transition);
}

.tuile-option img,
.option-emoji {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.option-emoji {
  background-color: var(--rose-doux);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.tuile-option:hover { transform: translateY(-2px); border-color: var(--mimosa); }

.tuile-option.active {
  border-color: var(--biscuit);
  background-color: var(--rose-doux);
  color: var(--biscuit-fonce);
  box-shadow: var(--ombre);
}

/* ==========================================================================
   34. DEVIS v3 — coordonnées en haut, récap à gauche, produits à droite
   ========================================================================== */
.devis-haut { max-width: none; margin: 0 0 1.6rem; }

.champs-ligne {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}

.champs-ligne .champ { margin-bottom: 0; }

.devis-bas {
  display: flex;
  gap: 1.6rem;
  align-items: flex-start;
}

.devis-recap {
  flex: 0 0 35%;
  max-width: none;
  margin: 0;
  min-width: 0;
  position: sticky;
  top: 110px;
}

.devis-produits {
  flex: 1 1 auto;
  max-width: none;
  margin: 0;
  min-width: 0;
}

.recap-vide {
  background-color: var(--rose-doux);
  border: 1.5px dashed var(--bordure);
  border-radius: var(--radius-sm);
  padding: 1.4rem 1.2rem;
  font-size: 0.92rem;
  color: var(--texte-doux);
  text-align: center;
}

.devis-recap .devis-envoi { margin-top: 1.4rem; text-align: center; }

@media (max-width: 1024px) {
  .champs-ligne { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .devis-bas { flex-direction: column; }
  .devis-recap { position: static; order: 2; flex: 1 1 100%; width: 100%; }
  .devis-produits { order: 1; flex: 1 1 100%; width: 100%; }
}

@media (max-width: 560px) {
  .champs-ligne { grid-template-columns: 1fr; }
}

/* Récap façon mini-panier : photo, détails, quantité modifiable */
.ligne-panier {
  display: flex !important;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.8rem !important;
}

.ligne-panier img,
.ligne-emoji {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background-color: var(--blanc);
}

.ligne-emoji { display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }

.ligne-infos {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.ligne-infos strong { font-size: 0.88rem; line-height: 1.25; }

.ligne-details { font-size: 0.78rem; color: var(--texte-doux); line-height: 1.3; }

.ligne-qte {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.ligne-qte button {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--bordure);
  background-color: var(--blanc);
  color: var(--biscuit-fonce);
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  transition: var(--transition);
}

.ligne-qte button:hover { background-color: var(--biscuit); color: var(--blanc); border-color: var(--biscuit); }

.ligne-qte span { min-width: 22px; text-align: center; font-weight: 700; font-size: 0.95rem; }

.ligne-panier .ligne-retirer { width: 26px; height: 26px; font-size: 0.8rem; }

/* Répartition des cookies par parfum */
.repartition {
  margin: 0.9rem 0 0.4rem;
  background-color: var(--rose-doux);
  border: 1.5px dashed var(--bordure);
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  display: grid;
  gap: 0.55rem;
}

.repartition-hint {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--biscuit-fonce);
}

.repartition-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.88rem;
}

.repartition-ligne input {
  width: 72px;
  padding: 0.35rem 0.5rem;
  text-align: center;
  font-weight: 700;
  border: 1.5px solid var(--bordure);
  border-radius: 8px;
  background-color: var(--blanc);
}

/* 5 champs de coordonnées sur une ligne */
.champs-ligne { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1024px) { .champs-ligne { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .champs-ligne { grid-template-columns: 1fr; } }

/* ==========================================================================
   35. DÉCORS FLOTTANTS — cookies & biscuits qui donnent le sourire
   ========================================================================== */
.section-avec-deco { position: relative; overflow: hidden; }
.section-avec-deco .conteneur { position: relative; z-index: 1; }

.deco-flottant {
  position: absolute;
  pointer-events: none;
  user-select: none;
  opacity: 0.25;
  z-index: 0;
}

.df-droite {
  top: 14%;
  right: -45px;
  width: 190px;
  transform: rotate(16deg);
  animation: flotter 9s ease-in-out infinite alternate;
}

.df-gauche {
  bottom: -40px;
  left: -40px;
  width: 160px;
  transform: rotate(-14deg);
  animation: flotter 11s ease-in-out infinite alternate-reverse;
}

@media (max-width: 820px) {
  .deco-flottant { width: 110px; opacity: 0.18; }
}

@media (prefers-reduced-motion: reduce) {
  .deco-flottant { animation: none; }
}

/* Titre du footer : taille réduite */
.footer-mega-titre { font-size: clamp(2rem, 4.5vw, 3.2rem); }

/* Bloc marque du footer : logo + texte côte à côte, compact */
.footer-info { margin-top: 2rem; padding-top: 2rem; gap: 2rem; }

.footer-info .footer-col-marque {
  flex-direction: row;
  align-items: center;
  gap: 1.1rem;
}

.footer-info .footer-pro-logo {
  width: 70px;
  height: 70px;
  padding: 6px;
  flex-shrink: 0;
}

.footer-info .footer-pro-desc {
  font-size: 0.88rem;
  line-height: 1.55;
  max-width: 340px;
}

@media (max-width: 820px) {
  .footer-info .footer-col-marque {
    flex-direction: row;
    justify-content: center;
  }
  .footer-info .footer-pro-desc { text-align: left; }
}

/* Footer modernisé : carte verre dépoli, titres fins, micro-interactions */
.footer-info .footer-col-marque {
  background-color: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  padding: 1.3rem 1.5rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.footer-info .footer-col-titre {
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.55);
  position: relative;
  padding-bottom: 0.5rem;
}

.footer-info .footer-col-titre::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.45);
}

.footer-info .footer-col > a {
  transition: var(--transition);
}

.footer-info .footer-col > a:hover {
  color: var(--blanc);
  text-decoration: none;
  transform: translateX(4px);
}

@media (max-width: 820px) {
  .footer-info .footer-col-titre::after { left: 50%; transform: translateX(-50%); }
  .footer-info .footer-col > a:hover { transform: none; }
}

/* Footer info : deux blocs (marque + contact) */
.footer-info { grid-template-columns: 1.4fr 1fr; }
@media (max-width: 820px) { .footer-info { grid-template-columns: 1fr; } }

/* Footer 2026 : plus aucun trait, deux cartes verre dépoli symétriques */
.footer-info {
  border-top: none;
  margin-top: 1.2rem;
  padding-top: 0;
  align-items: stretch;
}

.footer-ligne-basse {
  border-top: none;
  margin-top: 1.8rem;
  padding-top: 0;
}

.footer-info .footer-col-titre { padding-bottom: 0; margin-bottom: 0.6rem; }
.footer-info .footer-col-titre::after { display: none; }

.footer-info .footer-col {
  background-color: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  padding: 1.4rem 1.6rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  justify-content: center;
}

.footer-mega-basse p,
.footer-mega-droite a:not(.footer-social) { opacity: 0.55; }

/* ==========================================================================
   36. MACARON COOKIE CROQUÉ — le prix dans un cookie
   ========================================================================== */
.macaron-cookie {
  flex-shrink: 0;
  width: clamp(170px, 20vw, 230px);
  transform: rotate(-6deg);
  filter: drop-shadow(0 16px 34px rgba(74, 52, 39, 0.25));
  transition: var(--transition);
}

.macaron-cookie:hover { transform: rotate(2deg) scale(1.05); }

.macaron-cookie svg { width: 100%; height: auto; display: block; }

.mc-prix {
  font-family: var(--font-titres);
  font-size: 64px;
  font-weight: 700;
  fill: #A84D63;
  stroke: #ffffff;
  stroke-width: 8px;
  paint-order: stroke fill;
}

.mc-label {
  font-family: var(--font-marque);
  font-size: 24px;
  fill: #6F4020;
}

/* ==========================================================================
   37. FOOTER OUVERT — fini les encadrés, logo XXL, contact en ligne
   ========================================================================== */
.footer-info {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem 3rem;
}

.footer-info .footer-col {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.footer-info .footer-col-marque {
  flex: 1 1 460px;
  flex-direction: row;
  align-items: center;
  gap: 1.8rem;
}

.footer-info .footer-pro-logo {
  width: 150px;
  height: 150px;
  padding: 10px;
  background-color: #ffffff;
  box-shadow: 0 18px 44px rgba(74, 30, 42, 0.3);
}

.footer-info .footer-pro-desc {
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  max-width: 380px;
}

.footer-info .footer-col:not(.footer-col-marque) {
  flex: 1 1 360px;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.55rem;
}

.footer-info .footer-col-titre { display: none; }

.footer-info .footer-col > a,
.footer-info .footer-pro-ligne { font-size: 0.98rem; }

@media (max-width: 900px) {
  .footer-info { justify-content: center; }
  .footer-info .footer-col-marque { flex-direction: column; text-align: center; flex: 1 1 100%; }
  .footer-info .footer-pro-desc { text-align: center; }
  .footer-info .footer-col:not(.footer-col-marque) { align-items: center; flex: 1 1 100%; }
  .footer-info .footer-pro-logo { width: 120px; height: 120px; }
}

/* ==========================================================================
   38. FOOTER ÉDITORIAL — composition de designer
   ========================================================================== */
.footer-editorial {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  column-gap: 3rem;
  row-gap: 2rem;
  width: 100%;
  margin-top: 2.5rem;
  text-align: left;
  align-items: start;
}

.fe-marque { display: flex; gap: 1.3rem; align-items: flex-start; }

.fe-logo {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  object-fit: contain;
  background-color: #ffffff;
  padding: 7px;
  box-shadow: 0 14px 34px rgba(74, 30, 42, 0.28);
  flex-shrink: 0;
}

.fe-nom {
  font-family: "Dancing Script", cursive;
  font-weight: 700;
  font-size: 2.1rem;
  color: var(--blanc);
  line-height: 1;
}

.fe-sous {
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  margin: 0.5rem 0 0.9rem;
}

.fe-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  max-width: 300px;
}

.fe-label {
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.6rem;
}

.fe-grand {
  display: inline-block;
  font-family: var(--font-titres);
  font-weight: 600;
  font-size: 1.18rem;
  color: var(--blanc);
  background-image: linear-gradient(#ffffff, #ffffff);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 0.35s ease, color 0.3s ease;
  padding-bottom: 3px;
}

.fe-grand:hover { color: var(--blanc); background-size: 100% 2px; }

/* Bandeau défilant en filigrane */
.footer-marquee {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  margin-top: 3rem;
  pointer-events: none;
}

.footer-marquee-defile {
  display: flex;
  align-items: center;
  gap: 2.6rem;
  width: max-content;
  animation: defiler 38s linear infinite;
  font-family: var(--font-titres);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.13);
  white-space: nowrap;
}

.footer-marquee-defile i { font-style: normal; font-size: 0.6em; color: rgba(255, 255, 255, 0.2); }

@media (max-width: 1024px) {
  .footer-editorial { grid-template-columns: 1fr 1fr; }
  .fe-marque { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .footer-editorial { grid-template-columns: 1fr; text-align: center; }
  .fe-marque { flex-direction: column; align-items: center; text-align: center; }
  .fe-desc { margin-inline: auto; }
}

/* Footer : marque + une seule colonne de contacts, fluide */
.footer-editorial {
  grid-template-columns: 1.5fr auto;
  align-items: center;
}

.fe-contacts {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: flex-start;
}

@media (max-width: 1024px) {
  .footer-editorial { grid-template-columns: 1fr; }
  .fe-marque { grid-column: auto; }
}

@media (max-width: 640px) {
  .fe-contacts { align-items: center; }
}

/* Description de la marque sur 2 lignes */
.fe-desc { max-width: none; }

/* Contacts du footer : pictos ligne + hauteur alignée sur le bloc marque */
.footer-editorial { align-items: stretch; }

.fe-contacts {
  justify-content: space-between;
  align-self: stretch;
  gap: 0.6rem;
}

.fe-contacts .fe-grand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  background-position: 2.8rem 100%;
}

.fe-ico {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition);
}

.fe-ico svg { width: 17px; height: 17px; }

.fe-contacts .fe-grand:hover .fe-ico {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #A84D63;
}

/* Ligne d'appel discrète sous les parfums */
.ligne-cta {
  margin-top: 3rem;
  text-align: center;
  font-size: 1.02rem;
  color: var(--texte-doux);
}

.ligne-cta a {
  font-weight: 600;
  color: var(--biscuit);
  background-image: linear-gradient(var(--biscuit), var(--biscuit));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 0.35s ease;
  padding-bottom: 2px;
}

.ligne-cta a:hover { background-size: 100% 2px; color: var(--biscuit-fonce); }

/* Ligne d'appel : typo de titre, ton complice */
.ligne-cta {
  font-family: var(--font-titres);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--encre);
  line-height: 1.5;
}

.ligne-cta a { font-family: var(--font-titres); font-size: 1.35rem; }

/* Bouton principal foncé : contraste fort sur fonds roses */
.btn-fonce {
  background-color: #C2617A;
  color: var(--blanc);
  font-size: 1.05rem;
  padding: 1.05rem 2.6rem;
  box-shadow: 0 14px 32px rgba(194, 97, 122, 0.45);
}

.btn-fonce:hover {
  background-color: #A84D63;
  color: var(--blanc);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(168, 77, 99, 0.5);
}

/* Bouton « Nous contacter » du menu : vieux rose comme le footer */
.nav-liste .btn-petit {
  background-color: #C2617A;
  color: var(--blanc);
  box-shadow: 0 8px 20px rgba(194, 97, 122, 0.4);
}

.nav-liste .btn-petit:hover {
  background-color: #A84D63;
  color: var(--blanc);
  transform: translateY(-2px);
}

/* Menu et logo agrandis */
.header .conteneur { height: 114px; }
.logo img { height: 82px; }
.nav-liste a { font-size: 0.85rem; white-space: nowrap; }
.nav-liste .btn-petit { padding: 0.6rem 1.35rem; font-size: 0.92rem; }

.header.scrolle .conteneur { height: 84px; }
.header.scrolle .logo img { height: 56px; }

@media (max-width: 820px) {
  .header .conteneur { height: 92px; }
  .logo img { height: 66px; }
}

/* Menu élargi, liens centrés entre logo et bouton */
.header { width: min(1400px, 96%); }
.header .conteneur { padding: 0 1.4rem 0 1.2rem; }

@media (min-width: 821px) {
  .nav { flex: 1; display: flex; }
  .nav-liste { width: 100%; gap: 1.6rem; }
  .nav-liste li:first-child { margin-left: auto; }
  .nav-liste li:last-child { margin-left: auto; }
}

/* Hero cookies : tagline et punchline */
.hero-tagline {
  font-family: var(--font-titres);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--biscuit-fonce);
  margin-bottom: 0.9rem;
}

.hero-page p { margin-bottom: 0.7rem; }

.hero-punch {
  font-family: var(--font-titres);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--encre);
  margin-top: 0.4rem;
}

/* Hero photo : hauteur façon home, texte calé à gauche */
.hero-photo {
  min-height: 86vh;
  padding: 180px 0 110px;
}

.hero-page .conteneur { max-width: none; }
.hero-page h1 { max-width: 700px; }
.hero-page p { max-width: 620px; }

@media (max-width: 820px) {
  .hero-photo { min-height: auto; padding: 130px 0 70px; }
}

/* ==========================================================================
   39. BULLES ALLERGÈNES
   ========================================================================== */
.cercle-parfum, .tuile-option { position: relative; }

.info-allerg {
  position: absolute;
  top: 6px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--blanc);
  border: 1.5px solid var(--bordure);
  color: var(--biscuit-fonce);
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: var(--transition);
}

.info-allerg:hover { background-color: var(--biscuit); border-color: var(--biscuit); color: var(--blanc); }

.bulle-allerg {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background-color: var(--encre);
  color: var(--blanc);
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.45;
  padding: 0.55rem 0.85rem;
  border-radius: 10px;
  width: max-content;
  max-width: 210px;
  text-align: center;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 10;
}

.bulle-allerg::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--encre);
}

.info-allerg:hover ~ .bulle-allerg,
.info-allerg:focus-visible ~ .bulle-allerg,
.montre-allerg .bulle-allerg {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Bulles ingrédients + allergènes : plus larges, texte à gauche */
.bulle-allerg {
  max-width: 265px;
  text-align: left;
  font-size: 0.73rem;
  line-height: 1.5;
}

.bulle-allerg strong { color: #F2AEBE; }
.bulle-allerg em { opacity: 0.75; font-size: 0.68rem; }

/* Bulle allergènes : à droite du petit i */
@media (min-width: 641px) {
  .bulle-allerg {
    bottom: auto;
    top: -6px;
    left: calc(100% + 12px);
    transform: translateX(-6px);
  }

  .bulle-allerg::after {
    top: 16px;
    left: -12px;
    transform: none;
    border: 6px solid transparent;
    border-right-color: var(--encre);
  }

  .info-allerg:hover ~ .bulle-allerg,
  .info-allerg:focus-visible ~ .bulle-allerg,
  .montre-allerg .bulle-allerg {
    transform: translateX(0);
  }
}

/* La tuile dont la bulle est ouverte passe au premier plan */
.tuile-option.montre-allerg,
.cercle-parfum.montre-allerg,
.tuile-option:has(.info-allerg:hover),
.cercle-parfum:has(.info-allerg:hover),
.tuile-option:has(.info-allerg:focus-visible),
.cercle-parfum:has(.info-allerg:focus-visible) {
  z-index: 40;
}

/* ==========================================================================
   40. CONFIGURATEUR v4 — design « franchise » : blanc, un accent, coches
   ========================================================================== */
:root { --accent-devis: #C2617A; --accent-devis-fonce: #A84D63; }

#configurateur .formulaire {
  background-color: #ffffff;
  border: 1px solid #F6ECEF;
  border-radius: 26px;
  box-shadow: 0 18px 50px rgba(74, 52, 39, 0.07);
  padding: 2.2rem 2.2rem 2rem;
}

/* Titres numérotés en pastilles */
#configurateur .devis-titre-bloc {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--encre);
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

#configurateur .devis-titre-bloc::before {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--accent-devis);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#configurateur .devis-haut .devis-titre-bloc::before { content: "1"; }
#configurateur .devis-produits .devis-titre-bloc::before { content: "2"; }
#configurateur .devis-recap .devis-titre-bloc::before { content: "3"; }

/* Champs : fond doux, focus ring moderne */
#configurateur input,
#configurateur select,
#configurateur textarea {
  background-color: #FBF7F8;
  border: 1.5px solid #F0E3E7;
  border-radius: 12px;
}

#configurateur input:focus,
#configurateur select:focus,
#configurateur textarea:focus {
  background-color: #ffffff;
  border-color: var(--accent-devis);
  box-shadow: 0 0 0 4px rgba(194, 97, 122, 0.12);
  outline: none;
}

/* Tuiles : blanches, sélection = accent + coche */
#configurateur .tuile,
#configurateur .tuile-option {
  background-color: #ffffff;
  border: 1.5px solid #F3E6EA;
  border-radius: 16px;
}

#configurateur .tuile:hover,
#configurateur .tuile-option:hover {
  border-color: #E5C3CE;
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(74, 52, 39, 0.1);
}

#configurateur .tuile.active,
#configurateur .tuile-option.active {
  border-color: var(--accent-devis);
  background-color: #ffffff;
  color: var(--accent-devis-fonce);
  box-shadow: 0 12px 30px rgba(194, 97, 122, 0.18);
}

#configurateur .tuile.active::after,
#configurateur .tuile-option.active::after {
  content: "✓";
  position: absolute;
  top: -9px;
  left: -9px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--accent-devis);
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 12px rgba(194, 97, 122, 0.4);
}

#configurateur .tuile { position: relative; }

/* Compteur : pilule segmentée */
#configurateur .stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  background-color: #ffffff;
  border: 1.5px solid #F0E3E7;
  border-radius: 999px;
  padding: 5px;
}

#configurateur .stepper button {
  width: 38px;
  height: 38px;
  border: none;
  background-color: #F8EEF1;
  color: var(--accent-devis-fonce);
}

#configurateur .stepper button:hover { background-color: var(--accent-devis); color: #fff; }

#configurateur .stepper input {
  width: 58px;
  border: none;
  background: transparent;
  font-size: 1.1rem;
}

#configurateur .stepper input:focus { box-shadow: none; border: none; }

/* Boutons d'action : accent plein */
#configurateur .btn-ajouter,
#configurateur .devis-envoi .btn {
  background-color: var(--accent-devis);
  color: #ffffff;
  border-radius: 15px;
  font-weight: 600;
  box-shadow: 0 12px 30px rgba(194, 97, 122, 0.35);
}

#configurateur .btn-ajouter:hover:not(:disabled),
#configurateur .devis-envoi .btn:hover {
  background-color: var(--accent-devis-fonce);
  color: #ffffff;
  transform: translateY(-2px);
}

#configurateur .btn-ajouter:disabled {
  background-color: #F0E0E5;
  color: #C4A5B0;
  opacity: 1;
  box-shadow: none;
}

/* Mini-panier : lignes blanches nettes */
#configurateur #c-lignes li {
  background-color: #ffffff;
  border: 1.5px solid #F3E6EA;
  box-shadow: 0 6px 18px rgba(74, 52, 39, 0.06);
  border-radius: 14px;
}

#configurateur .recap-vide {
  background-color: #FBF7F8;
  border: 1.5px dashed #E5C3CE;
  border-radius: 14px;
}

#configurateur .repartition {
  background-color: #FBF7F8;
  border: 1.5px solid #F0E3E7;
  border-radius: 14px;
}

#configurateur .repartition input { background-color: #ffffff; }

#configurateur .ligne-qte button,
#configurateur .ligne-retirer {
  border: none;
  background-color: #F8EEF1;
  color: var(--accent-devis-fonce);
}

#configurateur .ligne-qte button:hover,
#configurateur .ligne-retirer:hover { background-color: var(--accent-devis); color: #fff; }

#configurateur .champ-label,
#configurateur .champ label { color: #6B5560; }

/* Pastille de prix sur les tuiles produits */
.tuile-prix {
  background-color: #F8EEF1;
  color: var(--accent-devis-fonce);
  font-weight: 700;
  font-size: 0.74rem;
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  margin-top: 0.2rem;
}

.tuile-option.active .tuile-prix { background-color: var(--accent-devis); color: #fff; }

/* Focus des tuiles : anneau rose au lieu du bleu navigateur */
#configurateur .tuile:focus,
#configurateur .tuile-option:focus { outline: none; }

#configurateur .tuile:focus-visible,
#configurateur .tuile-option:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(194, 97, 122, 0.25);
}

/* Prix en tag flottant en haut à droite + blocs pleine largeur */
#configurateur .tuiles-options {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

#configurateur .tuile-option { padding-top: 1rem; }

.tuile-prix {
  position: absolute;
  top: 8px;
  right: 8px;
  margin: 0;
  background-color: var(--accent-devis);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(194, 97, 122, 0.35);
}

.tuile-option.active .tuile-prix { background-color: var(--accent-devis-fonce); }

/* ==========================================================================
   41. COMPTEURS +/- PAR CHOIX (répartition intuitive)
   ========================================================================== */
.tuile-distrib { cursor: default; }
.tuile-distrib:hover { transform: none; }

.tuile-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 0.6rem;
}

.st-moins, .st-plus {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--accent-devis, #C2617A);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: var(--transition);
}

.st-moins:hover, .st-plus:hover { background-color: #A84D63; transform: scale(1.1); }
.st-moins.off, .st-plus.off { opacity: 0.3; pointer-events: none; }

.st-q { min-width: 22px; text-align: center; font-weight: 800; font-size: 1.05rem; color: var(--encre); }

.distrib-msg {
  margin-top: 0.9rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--biscuit-fonce, #A84D63);
  background-color: rgba(194, 97, 122, 0.08);
  border-radius: var(--radius-sm);
  padding: 0.7rem 1rem;
}

.distrib-msg.ok { color: #2f8a52; background-color: rgba(47, 138, 82, 0.1); }

/* Message « choisir la base d'abord » : alerte + secousse */
.distrib-msg.alerte { color: #c0453e; background-color: rgba(192, 69, 62, 0.1); font-weight: 700; }
.distrib-msg.secoue { animation: secousse 0.4s ease; }
@keyframes secousse {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* Prix barré des packs (économie affichée) */
.pack-prix { display: block; margin-top: 0.5rem; font-size: 1.05rem; }
.pack-prix s { color: var(--texte-doux); font-weight: 500; margin-right: 0.4rem; }
.pack-prix strong { color: var(--biscuit-fonce); font-size: 1.15rem; }
.pack-eco { display: inline-block; margin-left: 0.5rem; background-color: #e9f6e7; color: #2f8a52; font-style: normal; font-weight: 700; font-size: 0.82rem; border-radius: 999px; padding: 0.15rem 0.7rem; }

/* Pastille de prix pack en promo : prix barré + prix pack */
.tuile-prix.prix-promo { font-size: 0.72rem; line-height: 1.2; padding: 0.2rem 0.7rem; }
.tuile-prix.prix-promo s { opacity: 0.7; font-weight: 500; }

/* Description de catégorie dans le configurateur */
.cat-description {
  margin: -0.2rem 0 1rem;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--texte);
  background-color: var(--rose-doux);
  border-left: 3px solid var(--biscuit);
  border-radius: 0 10px 10px 0;
  padding: 0.7rem 1rem;
}

/* Description de catégorie : police un peu plus petite */
.cat-description { font-size: 0.88rem; line-height: 1.5; padding: 0.6rem 0.9rem; }

/* ==========================================================================
   BLOG / JOURNAL (non listé dans le menu)
   ========================================================================== */
.blog-hero { padding: 128px 0 2.5rem; text-align: center; }
.blog-hero p.intro { max-width: 640px; margin: 0.6rem auto 0; color: var(--texte-doux); }
.blog-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
@media (max-width: 900px) { .blog-grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .blog-grille { grid-template-columns: 1fr; } }
.blog-carte {
  display: flex; flex-direction: column; background: var(--blanc);
  border: 1px solid rgba(74,52,39,0.06); border-radius: 24px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(74,52,39,0.07); text-decoration: none; color: inherit;
  transition: transform 0.35s cubic-bezier(0.25,0.6,0.3,1), box-shadow 0.35s ease;
}
.blog-carte:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(74,52,39,0.14); }
.blog-carte-img { aspect-ratio: 16/10; overflow: hidden; }
.blog-carte-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.blog-carte:hover .blog-carte-img img { transform: scale(1.05); }
.blog-carte-corps { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.blog-tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #C2617A; margin-bottom: 0.5rem; }
.blog-carte h2 { font-size: 1.3rem; font-family: var(--font-titres); margin-bottom: 0.5rem; line-height: 1.2; }
.blog-carte p { color: var(--texte-doux); font-size: 0.94rem; flex: 1; }
.blog-lien { margin-top: 1.1rem; font-weight: 700; color: #C2617A; }

/* Article */
.article-entete { padding: 128px 0 0.5rem; text-align: center; }
.article-entete .surtitre { color: #C2617A; }
.article-entete h1 { max-width: 820px; margin: 0.5rem auto 0.7rem; }
.article-meta { color: var(--texte-doux); font-size: 0.9rem; }
.article-media { max-width: 940px; margin: 2rem auto 0; padding: 0 1.5rem; }
.article-media img { width: 100%; border-radius: 26px; box-shadow: var(--ombre); }
.article-corps { max-width: 720px; margin: 0 auto; padding: 2.5rem 1.5rem 1rem; }
.article-corps h2 { font-size: 1.6rem; margin: 2.2rem 0 0.8rem; }
.article-corps p { margin-bottom: 1.1rem; line-height: 1.78; }
.article-corps ul { margin: 0 0 1.2rem 1.3rem; }
.article-corps li { margin-bottom: 0.55rem; line-height: 1.7; }
.article-corps a { color: #C2617A; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.article-cta { text-align: center; background: var(--rose-section); border-radius: 26px; padding: 2.3rem 1.5rem; margin: 2.6rem auto; max-width: 720px; }
.article-cta h2 { margin-bottom: 0.4rem; }
.article-cta p { color: var(--texte-doux); margin-bottom: 1.3rem; }
.article-retour { display: inline-block; margin: 0.5rem 0 3rem; font-weight: 700; color: #C2617A; }

/* ==========================================================================
   BISCUITS À COLORIER (page ateliers)
   ========================================================================== */
.grille-kits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
@media (max-width: 900px) { .grille-kits { grid-template-columns: 1fr; } }
.carte-kit {
  background: var(--blanc); border: 1px solid rgba(74,52,39,0.06); border-radius: 26px;
  padding: 2rem 1.7rem; text-align: center; box-shadow: 0 10px 30px rgba(74,52,39,0.07);
  display: flex; flex-direction: column; align-items: center;
  transition: transform 0.35s cubic-bezier(0.25,0.6,0.3,1), box-shadow 0.35s ease;
}
.carte-kit:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(74,52,39,0.14); }
.kit-tag {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #C2617A; background: rgba(231,147,167,0.16); padding: 0.35rem 0.9rem;
  border-radius: 100px; margin-bottom: 1.1rem;
}
.kit-emoji { font-size: 2.4rem; margin-bottom: 0.6rem; line-height: 1; }
.carte-kit h3 { font-family: var(--font-titres); font-size: 1.2rem; margin-bottom: 0.6rem; }
.kit-inclus { color: var(--texte-doux); font-size: 0.92rem; flex: 1; margin-bottom: 1.2rem; line-height: 1.6; }
.kit-prix { font-family: var(--font-titres); font-weight: 700; font-size: 2.2rem; color: #C2617A; }
.kit-vedette { border-color: rgba(194,97,122,0.4); box-shadow: 0 16px 40px rgba(168,77,99,0.16); }

/* Carte vedette "atelier animé" */
.atelier-vedette {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  background: var(--blanc); border: 1px solid rgba(194,97,122,0.28); border-radius: 26px;
  padding: 2rem 2.4rem; box-shadow: 0 16px 40px rgba(168,77,99,0.14); margin-bottom: 3rem;
}
.atelier-vedette .av-corps { flex: 1; }
.atelier-vedette h3 { font-family: var(--font-titres); font-size: 1.55rem; margin: 0.4rem 0 0.6rem; }
.atelier-vedette .av-corps > p { color: var(--texte-doux); margin: 0; }
.av-prix { text-align: center; flex-shrink: 0; }
.av-des { display: block; font-size: 0.85rem; color: var(--texte-doux); margin-bottom: 0.1rem; }
.atelier-vedette .kit-prix { font-size: 2.9rem; }
.section-sep-titre { text-align: center; font-size: 1.05rem; color: var(--texte-doux); margin: 0 0 1.8rem; }
@media (max-width: 700px) {
  .atelier-vedette { flex-direction: column; text-align: center; padding: 1.8rem; }
}

.kit-img { width: 100%; aspect-ratio: 16/11; border-radius: 16px; overflow: hidden; margin-bottom: 1.2rem; background: #fff; }
.kit-img img { width: 100%; height: 100%; object-fit: cover; }
.carte-kit { padding: 1.1rem 1.3rem 1.9rem; }

/* Types de biscuits personnalisés (cartes avec photo) */
.grille-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
@media (max-width: 900px) { .grille-types { grid-template-columns: 1fr; } }
.carte-type {
  background: var(--blanc); border: 1px solid rgba(74,52,39,0.06); border-radius: 26px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(74,52,39,0.07); display: flex; flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.25,0.6,0.3,1), box-shadow 0.35s ease;
}
.carte-type:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(74,52,39,0.14); }
.carte-type-img { aspect-ratio: 4/3; overflow: hidden; }
.carte-type-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.carte-type:hover .carte-type-img img { transform: scale(1.05); }
.carte-type-corps { padding: 1.4rem 1.5rem 1.6rem; }
.carte-type-corps h3 { font-family: var(--font-titres); font-size: 1.25rem; margin-bottom: 0.5rem; }
.carte-type-corps p { color: var(--texte-doux); font-size: 0.94rem; }

/* ==========================================================================
   PAGE BISCUITS PERSONNALISÉS — version éditoriale moderne
   ========================================================================== */
/* Hero fond photo "personnalisation" (biscuits + palette de couleurs) */
.hero-photo-perso {
  background-image:
    linear-gradient(155deg, rgba(253,243,245,0.96) 0%, rgba(253,243,245,0.86) 44%, rgba(251,233,238,0.5) 100%),
    url("images/hero-perso.jpg");
}
@media (max-width: 820px) {
  .hero-photo-perso { --hero-photo-mobile: url("images/hero-perso.jpg"); }
}
.hero-perso-lead { max-width: 680px; font-size: 1.08rem; }

.conteneur-etroit { max-width: 840px; }
.prose-centre { max-width: 720px; margin: 0 auto; text-align: center; }
.prose-centre p { margin-bottom: 1.1rem; line-height: 1.8; color: var(--texte-doux); }

/* Présentations alternées image + texte */
.showcase { display: grid; gap: 4rem; }
.showcase-row { display: grid; grid-template-columns: 1fr 1fr; gap: 3.2rem; align-items: center; }
.showcase-row.inverse .showcase-img { order: 2; }
.showcase-img img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: 28px; box-shadow: 0 22px 50px rgba(74,52,39,0.16);
}
.showcase-tag {
  display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: #C2617A; margin-bottom: 0.5rem;
}
.showcase-txt h3 { font-family: var(--font-titres); font-size: 1.95rem; line-height: 1.12; margin-bottom: 0.8rem; }
.showcase-txt > p { margin-bottom: 1.1rem; line-height: 1.75; }
.showcase-txt ul { list-style: none; padding: 0; margin: 0; }
.showcase-txt li { position: relative; padding-left: 1.6rem; margin-bottom: 0.55rem; color: var(--texte-doux); }
.showcase-txt li::before { content: "✿"; position: absolute; left: 0; top: 0; color: #E793A7; }
@media (max-width: 800px) {
  .showcase { gap: 2.6rem; }
  .showcase-row { grid-template-columns: 1fr; gap: 1.4rem; }
  .showcase-row.inverse .showcase-img { order: 0; }
  .showcase-txt h3 { font-size: 1.55rem; }
}

/* FAQ 2026 — accordéon épuré, chevron circulaire animé */
.faq { display: grid; gap: 0.9rem; max-width: 800px; margin: 0 auto; }
.faq-item {
  background: rgba(255,255,255,0.75);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(74,52,39,0.08); border-radius: 20px; padding: 0 1.7rem;
  box-shadow: 0 8px 26px rgba(74,52,39,0.05);
  transition: box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.faq-item:hover { border-color: rgba(194,97,122,0.28); }
.faq-item[open] {
  background: linear-gradient(180deg, #ffffff, #FEF6F8);
  border-color: rgba(194,97,122,0.32);
  box-shadow: 0 16px 40px rgba(168,77,99,0.13);
}
.faq-item summary {
  cursor: pointer; padding: 1.35rem 0; font-weight: 700; font-family: var(--font-titres);
  font-size: 1.06rem; color: var(--encre); list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1.2rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-doux, #F8EEF1)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23C2617A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 8 11 13 6'/%3E%3C/svg%3E")
    center / 16px no-repeat;
  transition: transform .3s ease, background-color .25s ease;
}
.faq-item[open] summary::after {
  transform: rotate(180deg);
  background-color: #FCE9EE;
}
.faq-item p {
  padding: 0 0 1.4rem; color: var(--texte-doux); line-height: 1.75;
  animation: faq-apparait .32s ease;
}
@keyframes faq-apparait { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

/* Frise chronologique « Comment ça marche » */
.frise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; position: relative; margin-top: 1rem; }
.frise::before {
  content: ""; position: absolute; top: 27px; left: 16.6%; right: 16.6%; height: 3px;
  background: linear-gradient(90deg, #E793A7, #C2617A); border-radius: 99px; z-index: 0;
}
.frise-etape { text-align: center; position: relative; z-index: 1; padding: 0 1rem; }
.frise-num {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 1.2rem;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #C2617A, #A84D63); color: #fff;
  font-family: var(--font-titres); font-weight: 700; font-size: 1.45rem;
  box-shadow: 0 10px 22px rgba(168,77,99,0.35), 0 0 0 6px var(--rose-section, #fdf3f5);
}
.frise-etape h3 { font-family: var(--font-titres); font-size: 1.2rem; margin-bottom: 0.5rem; }
.frise-etape p { color: var(--texte-doux); font-size: 0.95rem; max-width: 280px; margin: 0 auto; line-height: 1.6; }
@media (max-width: 720px) {
  .frise { grid-template-columns: 1fr; gap: 2rem; }
  .frise::before { left: 27px; right: auto; top: 12px; bottom: 12px; width: 3px; height: auto; }
  .frise-etape { text-align: left; display: grid; grid-template-columns: 56px 1fr; column-gap: 1.2rem; align-items: center; padding: 0; }
  .frise-num { margin: 0; }
  .frise-etape h3, .frise-etape p { grid-column: 2; }
  .frise-etape p { max-width: none; margin: 0; }
}

/* Cartes atouts / occasions — style pro avec icônes ligne */
.grille-atouts { display: grid; gap: 1.6rem; }
.grille-atouts.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grille-atouts.cols-3 { grid-template-columns: repeat(3, 1fr); }
.carte-atout {
  background: var(--blanc); border: 1px solid rgba(74,52,39,0.07); border-radius: 22px;
  padding: 2rem 1.7rem; text-align: left; box-shadow: 0 10px 30px rgba(74,52,39,0.06);
  transition: transform 0.35s cubic-bezier(0.25,0.6,0.3,1), box-shadow 0.35s ease, border-color 0.35s;
}
.carte-atout:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(74,52,39,0.13); border-color: rgba(194,97,122,0.25); }
.carte-atout h3 { font-family: var(--font-titres); font-size: 1.18rem; margin-bottom: 0.5rem; }
.carte-atout p { color: var(--texte-doux); font-size: 0.94rem; line-height: 1.62; }
.icone-pastille {
  width: 54px; height: 54px; border-radius: 16px; margin-bottom: 1.1rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #FCE9EE, #F7D9E2); color: #C2617A;
}
.icone-pastille svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) { .grille-atouts.cols-4, .grille-atouts.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grille-atouts.cols-4, .grille-atouts.cols-3 { grid-template-columns: 1fr; } }

/* Hero personnalisés : hauteur maîtrisée (évite l'étirement) */
.hero-page.hero-photo-perso { min-height: 0; }
.hero-photo.hero-photo-perso { min-height: 540px; }

/* Badges numérotés « Comment ça marche » */
.num-etape {
  width: 50px; height: 50px; border-radius: 15px; margin-bottom: 1.1rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #C2617A, #A84D63); color: #fff;
  font-family: var(--font-titres); font-weight: 700; font-size: 1.35rem;
  box-shadow: 0 8px 18px rgba(168,77,99,0.32);
}
.grille-etapes .carte-atout { position: relative; }

/* Cartes occasions avec photo (page personnalisés) */
.grille-occasions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.carte-occasion {
  background: var(--blanc); border: 1px solid rgba(74,52,39,0.07); border-radius: 24px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(74,52,39,0.06); display: flex; flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.25,0.6,0.3,1), box-shadow 0.35s ease;
}
.carte-occasion:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(74,52,39,0.14); }
.occ-img { aspect-ratio: 16/10; overflow: hidden; }
.occ-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.carte-occasion:hover .occ-img img { transform: scale(1.05); }
.occ-corps { padding: 1.3rem 1.5rem 1.6rem; }
.occ-tete { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.55rem; }
.occ-ico {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-doux, #F8EEF1); color: #C2617A;
}
.occ-ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.occ-tete h3 { font-family: var(--font-titres); font-size: 1.16rem; margin: 0; line-height: 1.15; }
.occ-corps p { color: var(--texte-doux); font-size: 0.92rem; line-height: 1.6; }
@media (max-width: 900px) { .grille-occasions { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grille-occasions { grid-template-columns: 1fr; } }

/* FAQ 2026 — disposition deux colonnes + ouverture animée */
.faq-split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 3.5rem; align-items: start; }
.faq-aside { position: sticky; top: 110px; }
.faq-aside h2 { margin: 0.4rem 0 0; }
.faq-aside p { color: var(--texte-doux); margin: 1rem 0 1.6rem; line-height: 1.7; max-width: 380px; }
.faq-split .faq { max-width: none; margin: 0; }
@media (max-width: 860px) {
  .faq-split { grid-template-columns: 1fr; gap: 2rem; }
  .faq-aside { position: static; text-align: center; }
  .faq-aside p { margin-inline: auto; }
}
/* expansion fluide (navigateurs récents ; snap ailleurs) */
.faq { interpolate-size: allow-keywords; }
.faq-item::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size .34s ease, content-visibility .34s allow-discrete;
}
.faq-item[open]::details-content { block-size: auto; }

/* ==========================================================================
   SECTION ÉLÉGANTE « Vous imaginez, on façonne » (test éditorial)
   ========================================================================== */
.section-elegant { position: relative; overflow: hidden; }
.section-elegant::before {
  content: ""; position: absolute; top: -110px; right: -140px; width: 460px; height: 400px;
  background: radial-gradient(circle at 42% 42%, rgba(247,204,216,0.5), rgba(247,204,216,0) 70%);
  border-radius: 50%; pointer-events: none; z-index: 0;
}
.section-elegant .conteneur { position: relative; z-index: 1; }
.deco-feuille { position: absolute; top: 30px; right: 48px; width: 150px; height: auto; color: #E9B9C8; opacity: 0.7; pointer-events: none; z-index: 0; }
@media (max-width: 700px) { .deco-feuille { width: 90px; right: 12px; top: 16px; } }

.entete-elegant { text-align: center; }
.entete-elegant .surtitre { color: #C2617A; }
.deco-coeur { display: block; color: #E793A7; font-size: 1.05rem; margin: 0.35rem 0 0.4rem; }
.titre-serif {
  font-family: "Playfair Display", Georgia, serif; font-weight: 700;
  font-size: clamp(2.3rem, 5vw, 3.6rem); line-height: 1.06; letter-spacing: -0.01em;
  color: var(--encre); margin: 0;
}
.titre-serif em { font-style: italic; font-weight: 600; color: #C2617A; }
.prose-elegante { margin-top: 1.6rem; }
.prose-elegante p { text-align: center; }

/* cartes élégantes : icône dans cercle rosé + filet + petit cœur */
.carte-elegante { text-align: center; align-items: center; padding: 2.2rem 1.6rem 1.6rem; }
.icone-cercle {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 0.9rem;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 38%, #FCE7EE, #F6D3DF); color: #C2617A;
}
.icone-cercle svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ligne-deco { display: block; width: 34px; height: 2px; background: #E793A7; border-radius: 2px; margin: 0 auto 0.9rem; }
.carte-elegante h3 { margin-bottom: 0.5rem; }
.carte-elegante p { color: var(--texte-doux); font-size: 0.93rem; line-height: 1.6; }
.coeur-bas { display: block; color: #EFB9C9; margin-top: 1.1rem; font-size: 0.95rem; }

/* Photo biscuits décorative à gauche du bloc élégant */
.deco-biscuits-gauche {
  position: absolute; left: -40px; top: 70px; width: 320px; height: auto;
  border-radius: 26px; box-shadow: 0 22px 50px rgba(74,52,39,0.16);
  transform: rotate(-3deg); z-index: 0; pointer-events: none;
}
@media (max-width: 1200px) { .deco-biscuits-gauche { display: none; } }

/* Fond décoratif accessoires de pâtisserie (bloc « Nos créations ») */
.section-patiss { position: relative; overflow: hidden; }
.section-patiss .conteneur { position: relative; z-index: 1; }
.deco-patiss {
  position: absolute; z-index: 0; color: #C2617A; opacity: 0.09;
  fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}
.deco-patiss * { vector-effect: non-scaling-stroke; }
.dp-1 { top: 46px;  left: -18px; width: 190px; transform: rotate(-12deg); }
.dp-2 { top: 90px;  right: 46px; width: 76px;  transform: rotate(10deg); }
.dp-3 { bottom: 90px; left: 46px; width: 58px; transform: rotate(-9deg); }
.dp-4 { bottom: 44px; right: 30px; width: 120px; transform: rotate(13deg); }
.dp-5 { top: 46%; left: 8%; width: 120px; transform: rotate(6deg); opacity: 0.07; }
.dp-6 { bottom: 30%; right: -30px; width: 200px; transform: rotate(8deg); opacity: 0.07; }
@media (max-width: 700px) { .dp-5, .dp-6 { display: none; } }

/* Fond ustensiles de pâtisserie (photos détourées) */
.section-patiss { background: #ecdcd6; }
.outil { position: absolute; z-index: 0; pointer-events: none; height: auto; }
.o-rouleau  { top: 0;     right: 0;   width: 250px; }
.o-farine   { top: 0;     left: 0;    width: 165px; }
.o-poche    { top: 120px; left: 0;    width: 140px; }
.o-sprinkles{ top: 150px; right: 24px;width: 115px; }
.o-cutter   { top: 44%;   right: 0;   width: 135px; }
.o-fouet    { bottom: 20px;right: 0;  width: 185px; }
.o-palette  { bottom: 16px;left: 0;   width: 180px; }
@media (max-width: 980px) { .o-poche, .o-sprinkles, .o-cutter, .o-palette { display: none; } }
@media (max-width: 640px) { .outil { display: none; } }

/* Fond « atelier » (ustensiles) pleine largeur — section Vous imaginez, on façonne */
#avantages { padding: 0; }
.fond-atelier {
  width: 100%;
  background:
    linear-gradient(rgba(249,236,238,0.28), rgba(249,236,238,0.28)),
    url("images/fond-atelier.jpg");
  background-size: cover; background-position: center;
  padding: clamp(3rem, 6vw, 5.5rem) 0;
}
.atelier-texte { max-width: 760px; margin: 0 auto; padding: 0 1.5rem; }
.atelier-cartes { max-width: 1180px; margin: 3rem auto 0; padding: 0 1.5rem; }

/* Réutilisation du style moderne sur d'autres pages */
.section-plein { padding: 0; }
.hero-photo-entreprise {
  background-image:
    linear-gradient(155deg, rgba(253,243,245,0.95) 0%, rgba(253,243,245,0.86) 42%, rgba(251,233,238,0.5) 100%),
    url("images/boite-grande.jpg");
}
@media (max-width: 820px) { .hero-photo-entreprise { --hero-photo-mobile: url("images/boite-grande.jpg"); } }
.hero-page.hero-photo-entreprise { min-height: 0; }
.hero-photo.hero-photo-entreprise { min-height: 540px; }

/* ==========================================================================
   FINITIONS PREMIUM /personnalises
   ========================================================================== */
/* Chips de réassurance dans le hero */
.hero-chips { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.7rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: rgba(255,255,255,0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(194,97,122,0.22); border-radius: 100px;
  padding: 0.5rem 1rem; font-size: 0.85rem; font-weight: 600; color: var(--encre);
}
.chip svg { width: 15px; height: 15px; fill: none; stroke: #C2617A; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* Bande de valeurs */
.bande-valeurs { background: linear-gradient(120deg, #FBEDF0, #FCE7EE); padding: 1.7rem 0; }
.bande-valeurs-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.bv-item { display: flex; align-items: center; gap: 0.85rem; justify-content: center; }
.bv-ico { width: 44px; height: 44px; flex-shrink: 0; border-radius: 13px; background: #fff; color: #C2617A; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(168,77,99,0.14); }
.bv-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bv-item strong { display: block; font-family: var(--font-titres); font-size: 0.98rem; color: var(--encre); line-height: 1.2; }
.bv-item span { font-size: 0.8rem; color: var(--texte-doux); }
@media (max-width: 760px) { .bande-valeurs-grille { grid-template-columns: 1fr 1fr; gap: 1rem 0.6rem; } }

/* Teaser Instagram */
.insta-teaser { text-align: center; background: linear-gradient(150deg, #FDF3F5, #FBE9EE); }
.insta-teaser .conteneur { max-width: 680px; }
.insta-teaser h2 { margin: 0.3rem 0 0.6rem; }
.insta-teaser p { color: var(--texte-doux); margin-bottom: 1.4rem; }
.insta-teaser .btn svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Bouton devis flottant */
.devis-flottant {
  position: fixed; left: 22px; bottom: 22px; z-index: 900;
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: linear-gradient(135deg, #C2617A, #A84D63); color: #fff;
  padding: 0.85rem 1.45rem; border-radius: 100px; font-weight: 700; font-size: 0.92rem;
  text-decoration: none; box-shadow: 0 12px 30px rgba(168,77,99,0.42);
  transition: transform .25s ease, box-shadow .25s ease;
}
.devis-flottant:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(168,77,99,0.52); }
.devis-flottant svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 600px) { .devis-flottant span { display: none; } .devis-flottant { left: 14px; bottom: 14px; padding: 0.85rem; } }

/* Bouton WhatsApp flottant (bas gauche, tout le site) */
.flottant-wa {
  position: fixed; left: 22px; bottom: 22px; z-index: 900;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(37,211,102,0.45);
  transition: transform .25s ease, box-shadow .25s ease;
}
.flottant-wa:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 34px rgba(37,211,102,0.55); }
.flottant-wa svg { width: 28px; height: 28px; }
@media (max-width: 600px) { .flottant-wa { left: 14px; bottom: 14px; } }
/* sur /personnalises, le bouton devis se place au-dessus du WhatsApp */
.devis-flottant { bottom: 90px; }
@media (max-width: 600px) { .devis-flottant { bottom: 80px; } }

/* Réorganisation boutons flottants : devis à gauche · Instagram + WhatsApp à droite */
.devis-flottant { bottom: 22px; }
.flottant-wa {
  left: auto; right: 22px; bottom: 88px;
  background: #6FB394;                       /* vert adouci, mieux intégré */
  box-shadow: 0 8px 22px rgba(111,179,148,0.40);
}
.flottant-wa:hover { box-shadow: 0 14px 30px rgba(111,179,148,0.52); }
@media (max-width: 600px) {
  .devis-flottant { bottom: 14px; }
  .flottant-wa { left: auto; right: 14px; bottom: 78px; }
}

/* Hero Noël en fond photo (comme personnalisés), voile vert-crème */
.theme-noel .hero-page.hero-photo-noel,
.hero-photo-noel {
  background-image:
    linear-gradient(155deg, rgba(248,250,246,0.94) 0%, rgba(248,250,246,0.8) 40%, rgba(226,239,222,0.4) 100%),
    url("images/hero-noel.jpg") !important;
  background-size: cover;
  background-position: center;
}
@media (max-width: 820px) { .hero-photo-noel { --hero-photo-mobile: url("images/hero-noel.jpg"); } }
.hero-page.hero-photo-noel { min-height: 0; }
.hero-photo.hero-photo-noel { min-height: 680px; }

/* Parfums de Noël en quinconce 3+2 avec libellés en arc (léger décalage organique) */
.quinconce-noel .rangee-1, .quinconce-noel .rangee-2 { transform: none; }
.quinconce-noel .rangee-2 { margin-top: 1.2rem; }
.quinconce-noel .rangee-1 .cercle-parfum:nth-child(1) { transform: translateY(34px); }
.quinconce-noel .rangee-1 .cercle-parfum:nth-child(3) { transform: translateY(20px); }
.quinconce-noel .rangee-2 .cercle-parfum:nth-child(2) { transform: translateY(26px); }
@media (max-width: 700px) {
  .quinconce-noel .rangee-1 .cercle-parfum, .quinconce-noel .rangee-2 .cercle-parfum { transform: none !important; }
}

/* Bandeau déroulant infos commandes de Noël */
.notice-noel {
  background: linear-gradient(135deg, #eef6e7, #e2efdb);
  border: 1px solid rgba(92,140,80,0.28); border-radius: 16px;
  padding: 0 1.5rem; box-shadow: 0 8px 22px rgba(92,140,80,0.12);
}
.notice-noel summary {
  cursor: pointer; padding: 1.05rem 0; font-weight: 700; font-family: var(--font-titres);
  color: #3f6b3a; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.notice-noel summary::-webkit-details-marker { display: none; }
.notice-noel summary::after { content: "+"; font-size: 1.45rem; color: #4f8047; transition: transform .25s ease; }
.notice-noel[open] summary::after { transform: rotate(45deg); }
.notice-noel p { padding: 0 0 1.1rem; color: #47593f; line-height: 1.6; }

/* Bandeau promo défilant (droite → gauche) — version moderne */
.bandeau-promo {
  background: linear-gradient(135deg, #2f6b2c 0%, #43813d 50%, #2f6b2c 100%);
  overflow: hidden; position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 3px 14px rgba(47,107,44,0.22);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.bandeau-promo-defile {
  display: inline-flex; align-items: center; white-space: nowrap;
  animation: bp-defile 36s linear infinite; will-change: transform;
}
.bandeau-promo:hover .bandeau-promo-defile { animation-play-state: paused; }
.bp-item {
  color: #fff; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.07em;
  text-transform: uppercase; padding: 0.82rem 0;
}
.bp-sep { margin: 0 2rem; color: #a7d69d; font-size: 0.85rem; }
@keyframes bp-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bandeau-promo-defile { animation: none; transform: none; } }

/* Galerie scrollable pleine largeur (page Noël) avec images plus grandes */
.galerie-scroll-pleine {
  width: 100vw; margin-left: calc(50% - 50vw);
  padding: 0.4rem 4vw 1.2rem;
  justify-content: safe center;
}
.galerie-scroll-pleine img { width: 320px; height: 320px; }
@media (max-width: 600px) { .galerie-scroll-pleine img { width: 220px; height: 220px; } }

/* ======================= COMMANDER NOËL — dates & lieux de retrait ======================= */
.commande-noel {
  background: linear-gradient(160deg, #eef5e6 0%, #e2eeda 55%, #dbe9cf 100%);
  border-top: 1px solid #d6e6c8;
}
.commande-noel .entete-section { margin-bottom: 2.2rem; }
.commande-noel .titre-serif em { color: #6d9455; }

.retraits-grille {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.3rem;
  margin: 0 auto 2.4rem;
  max-width: 1000px;
}
.retrait-carte {
  flex: 1 1 260px;
  max-width: 320px;
  background: #fff;
  border: 1px solid #e4eeda;
  border-radius: 20px;
  padding: 1.6rem 1.5rem 1.5rem;
  box-shadow: 0 14px 34px rgba(109, 148, 85, 0.13);
  display: flex;
  flex-direction: column;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.retrait-carte:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 46px rgba(109, 148, 85, 0.22);
}
.rc-date {
  display: inline-block;
  align-self: center;
  background: #eef5e6;
  color: #5c803f;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: .32rem .85rem;
  border-radius: 999px;
  margin-bottom: .9rem;
}
.rc-lieu {
  font-family: "Baloo 2", cursive;
  font-size: 1.22rem;
  color: #3f5a2a;
  margin: 0 0 .35rem;
  line-height: 1.25;
}
.rc-adresse { color: #7a8a6b; font-size: .95rem; margin: 0 0 .3rem; }
.rc-horaire { color: #6d9455; font-size: .92rem; font-weight: 600; margin: 0; }
.rc-btn {
  margin-top: 1.1rem;
  align-self: stretch;
  border-color: #a8c98c !important;
  color: #5c803f !important;
}
.rc-btn:hover { background: #6d9455 !important; border-color: #6d9455 !important; color: #fff !important; }

.commande-noel-action { text-align: center; }
.btn-grand {
  font-size: 1.18rem;
  padding: 1.05rem 2.4rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #d24b4b 0%, #b83636 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 16px 34px rgba(184, 54, 54, 0.34);
  transition: transform .22s ease, box-shadow .22s ease;
}
.btn-grand:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 22px 46px rgba(184, 54, 54, 0.44);
}
.commande-noel-note { margin-top: 1.1rem; color: #7a8a6b; font-size: .95rem; }
.commande-noel-note a { color: #5c803f; font-weight: 600; text-decoration: none; }
.commande-noel-note a:hover { text-decoration: underline; }

/* Bannière « retrait choisi » sur la page /devis */
.retrait-noel-banniere {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  background: #eef5e6;
  border: 1px solid #cfe3bd;
  border-radius: 14px;
  padding: .85rem 1.1rem;
  margin-bottom: 1.4rem;
  color: #3f5a2a;
  font-size: .98rem;
}
.retrait-noel-banniere .rnb-ico { font-size: 1.15rem; }
.retrait-noel-banniere strong { color: #5c803f; }
.retrait-noel-banniere .rnb-modif {
  margin-left: auto;
  color: #6d9455;
  font-weight: 600;
  font-size: .88rem;
  text-decoration: none;
}
.retrait-noel-banniere .rnb-modif:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .retrait-carte { max-width: 100%; flex-basis: 100%; }
  .btn-grand { font-size: 1.05rem; padding: .95rem 1.6rem; }
}

/* ======================= COMMANDE DE NOËL — configurateur thème Noël ======================= */
.theme-commande-noel {
  --accent-devis: #6d9455;
  --accent-devis-fonce: #5c803f;
}
.theme-commande-noel #configurateur .btn-ajouter:disabled {
  background-color: #e7efe0;
  color: #a4b596;
}
.theme-commande-noel #configurateur .btn-ajouter,
.theme-commande-noel #configurateur .devis-envoi .btn {
  box-shadow: 0 12px 30px rgba(109, 148, 85, 0.32);
}
.hero-commande-noel .surtitre { letter-spacing: .04em; }

/* Bloc de choix du retrait (dans le récap, après les produits) */
.bloc-retrait {
  margin-top: 1.5rem;
  padding: 1.15rem 1.2rem 1.25rem;
  background: #eef5e6;
  border: 1px solid #d6e6c8;
  border-radius: 16px;
}
.retrait-titre {
  display: block;
  font-weight: 700;
  color: #3f5a2a;
  margin-bottom: .65rem;
  font-size: 1rem;
}
.select-retrait {
  width: 100%;
  padding: .82rem 2.6rem .82rem 1rem;
  border-radius: 12px;
  border: 1.5px solid #cfe3bd;
  background-color: #fff;
  color: #3f5a2a;
  font-family: inherit;
  font-size: .98rem;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236d9455' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
.select-retrait:focus {
  outline: none;
  border-color: #6d9455;
  box-shadow: 0 0 0 3px rgba(109, 148, 85, 0.18);
}
.select-retrait.erreur { border-color: #d24b4b; box-shadow: 0 0 0 3px rgba(210, 75, 75, 0.14); }
.retrait-aide { margin: .55rem 0 0; font-size: .85rem; color: #7a8a6b; }

/* ======================= COMMANDE DE NOËL — prix par ligne & total ======================= */
.theme-commande-noel .ligne-prix {
  display: block;
  margin-top: .3rem;
  font-size: .9rem;
  color: #6d9455;
  font-weight: 600;
}
.theme-commande-noel .ligne-prix strong { color: #3f5a2a; }
.recap-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .3rem .8rem;
  margin-top: 1rem;
  padding: 1rem 1.15rem;
  background: #eef5e6;
  border: 1px solid #d6e6c8;
  border-radius: 14px;
}
.recap-total > span:first-child {
  font-weight: 700;
  color: #3f5a2a;
  font-size: 1.02rem;
}
.recap-total strong {
  font-family: "Baloo 2", cursive;
  font-size: 1.5rem;
  color: #5c803f;
  margin-left: auto;
}
.recap-total-note {
  flex-basis: 100%;
  font-size: .8rem;
  color: #7a8a6b;
  font-weight: 500;
}

/* Commande de Noël : blocs élargis (+30 %) */
.theme-commande-noel #configurateur .conteneur { width: min(1560px, 96%); }

/* Commande de Noël : photos des biscuits un peu plus grosses */
.theme-commande-noel #configurateur .tuile-option img,
.theme-commande-noel #configurateur .option-emoji { width: 68px; height: 68px; }

/* ============================================================
   OUTIL DE COMMANDE DE NOËL — nouvelle version pilotée par l'admin
   ============================================================ */
#cn-section { background: linear-gradient(180deg, #fbfdf9 0%, #f2f8ec 100%); }
.cn-chargement { text-align: center; color: #7a8a6b; padding: 3rem 1rem; font-size: 1.05rem; }
.cn-ferme {
  max-width: 640px; margin: 1rem auto; padding: 2.2rem 2rem; text-align: center;
  background: #fff; border: 1px solid #e4eeda; border-radius: 20px;
  box-shadow: 0 16px 40px rgba(109,148,85,.14); color: #3f5a2a; font-size: 1.1rem; line-height: 1.6;
}
.cn-ferme::before { content: "🎄"; display: block; font-size: 2.4rem; margin-bottom: .6rem; }

.cn-app { display: flex; flex-direction: column; gap: 1.3rem; }
.cn-bloc {
  background: #fff; border: 1px solid #e8f0e0; border-radius: 22px;
  padding: 1.6rem 1.7rem; box-shadow: 0 12px 34px rgba(109,148,85,.10);
}
.cn-bloc-titre {
  display: flex; align-items: center; gap: .7rem; margin: 0 0 1.2rem;
  font-family: "Baloo 2", cursive; font-size: 1.32rem; color: #3f5a2a; font-weight: 700;
}
.cn-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: #6d9455; color: #fff;
  font-size: .95rem; font-weight: 700; flex: none;
}
.cn-champs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.cn-champ { display: flex; flex-direction: column; }
.cn-champ label, .cn-label {
  font-size: .82rem; font-weight: 700; color: #5c6b4d; margin-bottom: .4rem; letter-spacing: .01em;
}
.cn-optionnel { color: #9aab8a; font-weight: 500; }
.cn-champ input, .cn-champ textarea, .cn-retrait select {
  width: 100%; padding: .72rem .9rem; border: 1.5px solid #dbe7cf; border-radius: 12px;
  font-family: inherit; font-size: .98rem; color: #2f4020; background: #fff; transition: border-color .15s, box-shadow .15s;
}
.cn-champ input:focus, .cn-champ textarea:focus, .cn-retrait select:focus {
  outline: none; border-color: #6d9455; box-shadow: 0 0 0 3px rgba(109,148,85,.16);
}
.cn-erreur { border-color: #d24b4b !important; box-shadow: 0 0 0 3px rgba(210,75,75,.14) !important; }

.cn-grille { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.3rem; align-items: start; }
.cn-recap { position: sticky; top: 92px; }

/* segmented control (modes) */
.cn-modes { display: inline-flex; background: #eef5e6; border-radius: 14px; padding: 4px; margin-bottom: 1.4rem; gap: 4px; }
.cn-mode {
  border: none; background: transparent; padding: .6rem 1.3rem; border-radius: 11px;
  font-family: inherit; font-weight: 700; font-size: .95rem; color: #6d8258; cursor: pointer; transition: .18s;
}
.cn-mode.actif { background: #fff; color: #3f5a2a; box-shadow: 0 4px 12px rgba(109,148,85,.18); }

.cn-label { display: block; margin: 1.2rem 0 .7rem; font-size: .9rem; }
.cn-panneau { margin-bottom: .4rem; }

/* cartes format / coffret */
.cn-formats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.cn-format-card {
  display: flex; flex-direction: column; gap: .25rem; text-align: left;
  padding: 1rem 1.1rem; border: 2px solid #e4eeda; border-radius: 16px; background: #fff; cursor: pointer;
  transition: transform .16s, border-color .16s, box-shadow .16s;
}
.cn-format-card:hover { transform: translateY(-2px); border-color: #a8c98c; }
.cn-format-card.actif { border-color: #6d9455; background: #f4f9ee; box-shadow: 0 8px 22px rgba(109,148,85,.2); }
.cn-format-nom { font-family: "Baloo 2", cursive; font-weight: 700; color: #3f5a2a; font-size: 1.05rem; }
.cn-format-desc { font-size: .84rem; color: #7a8a6b; line-height: 1.35; }
.cn-format-meta { display: flex; align-items: center; justify-content: space-between; margin-top: .35rem; font-size: .82rem; color: #8a9a7a; }
.cn-format-prix { font-family: "Baloo 2", cursive; font-weight: 700; color: #5c803f; font-size: 1.15rem; }

/* chips parfums */
.cn-parfums { display: flex; flex-wrap: wrap; gap: .6rem; }
.cn-parfum {
  display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .85rem .45rem .45rem;
  border: 2px solid #e4eeda; border-radius: 999px; background: #fff; cursor: pointer; font-family: inherit;
  font-size: .92rem; font-weight: 600; color: #3f5a2a; transition: .16s;
}
.cn-parfum img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.cn-parfum-emoji { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #eef5e6; font-size: 1.1rem; }
.cn-parfum:hover { border-color: #a8c98c; }
.cn-parfum.actif { border-color: #6d9455; background: #f4f9ee; }
.cn-parfum-prix { background: #6d9455; color: #fff; border-radius: 999px; padding: .1rem .5rem; font-size: .78rem; font-weight: 700; }

/* quantité + ajout */
.cn-ligne-ajout { display: flex; align-items: flex-end; gap: 1rem; margin-top: 1.4rem; flex-wrap: wrap; }
.cn-qte label { display: block; font-size: .82rem; font-weight: 700; color: #5c6b4d; margin-bottom: .4rem; }
.cn-stepper { display: inline-flex; align-items: center; border: 1.5px solid #dbe7cf; border-radius: 12px; overflow: hidden; }
.cn-stepper button { border: none; background: #eef5e6; color: #3f5a2a; width: 40px; height: 44px; font-size: 1.3rem; cursor: pointer; transition: .15s; }
.cn-stepper button:hover { background: #6d9455; color: #fff; }
.cn-stepper input { width: 56px; height: 44px; border: none; text-align: center; font-family: inherit; font-size: 1.05rem; font-weight: 700; color: #3f5a2a; }
.cn-ajouter { flex: 1; min-width: 200px; }

/* options */
.cn-options { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px dashed #dbe7cf; }
.cn-opt { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; cursor: pointer; font-size: .96rem; color: #3f5a2a; }
.cn-opt input { width: 19px; height: 19px; accent-color: #6d9455; }
.cn-opt-supp { color: #5c803f; font-weight: 700; font-size: .85rem; }
.cn-opt-texte { margin: .5rem 0; }
.cn-opt-texte label { display: block; font-size: .88rem; font-weight: 600; color: #5c6b4d; margin-bottom: .35rem; }
.cn-opt-texte input { width: 100%; padding: .6rem .8rem; border: 1.5px solid #dbe7cf; border-radius: 10px; font-family: inherit; font-size: .95rem; }
.cn-opt-texte input:focus { outline: none; border-color: #6d9455; box-shadow: 0 0 0 3px rgba(109,148,85,.16); }

/* récap */
.cn-vide { color: #9aab8a; text-align: center; padding: 1.6rem 1rem; border: 1px dashed #dbe7cf; border-radius: 14px; }
.cn-lignes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.cn-ligne { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .6rem; background: #f7faf3; border: 1px solid #e8f0e0; border-radius: 13px; padding: .7rem .8rem; }
.cn-ligne-info { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.cn-ligne-info strong { color: #3f5a2a; font-size: .98rem; }
.cn-ligne-detail { font-size: .82rem; color: #7a8a6b; }
.cn-ligne-prix { font-size: .86rem; color: #6d9455; font-weight: 600; margin-top: .15rem; }
.cn-ligne-prix b { color: #3f5a2a; }
.cn-ligne-qte { display: inline-flex; align-items: center; gap: .35rem; }
.cn-ligne-qte button { width: 26px; height: 26px; border: 1px solid #dbe7cf; background: #fff; border-radius: 7px; cursor: pointer; color: #3f5a2a; font-size: 1rem; }
.cn-ligne-qte button:hover { background: #6d9455; color: #fff; border-color: #6d9455; }
.cn-ligne-qte span { min-width: 20px; text-align: center; font-weight: 700; color: #3f5a2a; }
.cn-ligne-x { border: none; background: none; color: #b9c4aa; cursor: pointer; font-size: 1rem; padding: .2rem; }
.cn-ligne-x:hover { color: #d24b4b; }

.cn-options-recap { margin-top: .7rem; display: flex; flex-direction: column; gap: .3rem; }
.cn-opt-recap { display: flex; justify-content: space-between; gap: .8rem; font-size: .88rem; color: #5c6b4d; padding: .25rem 0; border-top: 1px dotted #e2ead8; }
.cn-opt-recap-val { color: #3f5a2a; font-style: italic; text-align: right; }

.cn-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .8rem; margin-top: 1rem; padding: 1rem 1.15rem; background: #eef5e6; border: 1px solid #d6e6c8; border-radius: 14px; }
.cn-total > span:first-child { font-weight: 700; color: #3f5a2a; font-size: 1.02rem; }
.cn-total strong { font-family: "Baloo 2", cursive; font-size: 1.6rem; color: #5c803f; margin-left: auto; }
.cn-total-note { flex-basis: 100%; font-size: .78rem; color: #7a8a6b; }

.cn-retrait { margin-top: 1.3rem; }
.cn-retrait label { display: block; font-size: .88rem; font-weight: 700; color: #5c6b4d; margin-bottom: .45rem; }
.cn-retrait select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.4rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236d9455' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 1rem center;
}
.cn-retrait-aide { margin: .45rem 0 0; font-size: .82rem; color: #7a8a6b; }
.cn-champ-message { margin-top: 1.2rem; }
.cn-envoyer { width: 100%; margin-top: 1.3rem; }
.cn-note { margin-top: .7rem; font-size: .82rem; color: #8a9a7a; text-align: center; line-height: 1.5; }

@media (max-width: 860px) {
  .cn-grille { grid-template-columns: 1fr; }
  .cn-recap { position: static; }
  .cn-champs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .cn-champs { grid-template-columns: 1fr; }
  .cn-bloc { padding: 1.3rem 1.2rem; }
}