/* ============================================================
   POLICES — SYSTÈME À TROIS NIVEAUX

   1. SCRIPT   → Mrs Saint Delafield (Google Fonts)
                  Menu, footer, phrases d'accroche, sous-titres

   2. TITRES   → Playfair Display italic (romantique, dramatique)

   3. DISCRET  → Raleway light (élégante, aérienne, sobre)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;600;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,500;1,700&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400;1,500&family=Nunito:wght@300;400;500;600&display=swap');

/* ============================================================
   PALETTE DE COULEURS ET VARIABLES
   ============================================================ */
:root {
  /* Palette tirée de palette.jpg
     Rose Quartz #F9CBD6 · Blush #F2AFBC · Red Wine #9E182B · Oat Milk #F2E0D2 */
  --rose-pale:    #FEF2F6;   /* rose quartz très éclairci — fonds de sections */
  --rose-pastel:  #F9CBD6;   /* rose quartz — bordures, séparateurs */
  --rose-poudre:  #D4728A;   /* entre blush et red wine — hover, icônes */
  --rose-profond: #B5354C;   /* vers red wine — liens actifs, accents forts */
  --blanc-casse:  #FAF6F3;   /* oat milk éclairci — fond principal */
  --creme:        #F2E0D2;   /* oat milk — sections alternées */
  --vert-sauge:   #C07882;   /* rose médium — surtitres, labels */
  --vert-clair:   #F2AFBC;   /* blush — accents légers, dégradés */
  --vert-pale:    #FEEEF3;   /* rose quartz pâle — hover cartes */
  --texte:        #3A1E28;   /* rouge vin très sombre — texte principal */
  --texte-doux:   #7A5060;   /* rose-vin médium — texte secondaire */
  --texte-leger:  #B8A8B0;   /* gris rosé clair — placeholders */
  --bordeaux:     #9E182B;   /* red wine — couleur forte principale */
  --blanc:        #FFFFFF;

  --font-script: 'Dancing Script', cursive;            /* menu, footer, accroches, sous-titres */
  --font-titre:  'Playfair Display', Georgia, serif;  /* titres principaux */
  --font-doux:   'Cormorant Garamond', Georgia, serif; /* réserve poétique */
  --font-texte:  'Nunito', 'Helvetica Neue', sans-serif; /* corps de texte */

  --rayon:        12px;
  --ombre-douce:  0 4px 20px rgba(180, 100, 122, 0.08);
  --ombre-carte:  0 8px 35px rgba(180, 100, 122, 0.14);
}

/* ============================================================
   RÉINITIALISATION & BASE
   ============================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-texte);
  background-color: var(--blanc-casse);
  color: var(--texte);
  line-height: 1.75;
  font-size: 1rem;
}

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

a {
  color: inherit;
  text-decoration: none;
}

/* Barre de défilement élégante */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--blanc-casse); }
::-webkit-scrollbar-thumb { background: var(--rose-pastel); border-radius: 3px; }

/* ============================================================
   TYPOGRAPHIE
   ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--font-titre);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 2rem); }
h4 { font-size: 1.15rem; }

p {
  color: var(--texte-doux);
  margin-bottom: 1.2rem;
}
p:last-child { margin-bottom: 0; }

/* ============================================================
   SÉPARATEUR FLORAL DÉCORATIF
   ============================================================ */
.separateur {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem auto 0;
  max-width: 280px;
}

/* Ligne de fleurs réutilisable dans le HTML */
.ligne-florale {
  text-align: center;
  font-size: 0.88rem;
  color: var(--rose-pastel);
  letter-spacing: 1.3rem;
  overflow: hidden;
  white-space: nowrap;
  margin: 2.5rem 0;
  opacity: 0.6;
  user-select: none;
}
.separateur::before,
.separateur::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--rose-pastel), transparent);
}
.separateur-fleur {
  color: var(--rose-poudre);
  font-size: 1.1rem;
}

/* ============================================================
   BANNIÈRE DÉFILANTE
   ============================================================ */
.banniere-defilement {
  background-color: var(--bordeaux);
  overflow: hidden;
  white-space: nowrap;
  padding: 1rem 0;
}

.banniere-texte {
  display: inline-block;
  font-family: var(--font-texte);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  color: var(--rose-pale);
  animation: defilement 50s linear infinite;
}

@keyframes defilement {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================================
   NAVIGATION (barre de menu)
   ============================================================ */
.nav-wrapper {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(250, 247, 245, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(242, 184, 198, 0.35);
  box-shadow: 0 2px 15px rgba(180, 100, 122, 0.06);
}

.navbar {
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  position: relative;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-script);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--bordeaux);
  letter-spacing: 0.01em;
  transition: opacity 0.3s;
  white-space: nowrap;
}
.nav-logo:hover { opacity: 0.7; }

.nav-logo-img {
  height: 42px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.nav-liens {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  flex-wrap: nowrap;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav-liens > li > a::before {
  content: '❤ ';
  font-size: 0.65rem;
  color: var(--bordeaux);
  opacity: 0.7;
}

.nav-liens a {
  font-size: 0.77rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte);
  position: relative;
  padding-bottom: 4px;
  transition: color 0.3s;
  white-space: nowrap;
}
.nav-liens a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--rose-poudre);
  transition: width 0.35s ease;
}
.nav-liens a:hover,
.nav-liens a.active { color: var(--rose-profond); }
.nav-liens a:hover::after,
.nav-liens a.active::after { width: 100%; }

/* Menu déroulant Créations */
.nav-dropdown { position: relative; }

.nav-sous-menu {
  display: none;
  position: absolute;
  top: 100%;
  padding-top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--blanc);
  border: 1px solid rgba(242, 184, 198, 0.4);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
  min-width: 230px;
  padding: 0.6rem 0;
  list-style: none;
  z-index: 200;
}

.nav-dropdown:hover .nav-sous-menu { display: block; }

.nav-sous-menu li a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1.4rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--texte);
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.nav-sous-menu-sep {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--rose-pastel), transparent);
  margin: 0.4rem 1rem;
}

.nav-sous-menu li a::after { display: none; }
.nav-sous-menu li a:hover {
  background: var(--rose-pale);
  color: var(--bordeaux);
}

/* ============================================================
   SECTION HÉRO (grande bannière d'accueil)
   ============================================================ */
.hero {
  min-height: 65vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 0 5rem;
  background:
    linear-gradient(160deg, var(--rose-pale) 0%, var(--blanc-casse) 45%, var(--vert-pale) 100%);
  position: relative;
  overflow: hidden;
}

/* Grille deux colonnes */
.hero-colonnes {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0;
  align-items: center;
  align-self: stretch;
  position: relative;
  z-index: 1;
}

/* Colonne gauche — 1/3 */
.hero-gauche {
  text-align: center;
  padding: 0 2.5rem;
}

/* Colonne droite — 2/3, séparée par un liseré */
.hero-droite {
  padding: 0 4rem 0 3rem;
  border-left: 1px solid rgba(242, 184, 198, 0.4);
  text-align: left;
}

.hero-droite .separateur {
  margin: 1.5rem 0;
  justify-content: flex-start;
}

.hero-note-digital {
  width: 100%;
  margin: 0 0 2rem;
  padding: 0.7rem 3rem;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(242, 175, 188, 0.4);
  border-radius: 0;
  backdrop-filter: blur(4px);
  text-align: center;
  box-sizing: border-box;
}

.hero-note-titre {
  display: block;
  font-family: var(--font-doux);
  font-style: italic;
  font-size: 0.8rem;
  color: var(--rose-poudre);
  letter-spacing: 0.05em;
  margin-bottom: 0.35rem;
}

.hero-note-digital p {
  font-family: var(--font-texte);
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--texte-doux);
  margin: 0;
}

.hero-note-digital strong {
  color: var(--texte);
  font-weight: 600;
}

/* Bordure florale haut et bas */
.hero::before {
  content: '✿  ❀  ✾  ✿  ❀  ✾  ✿  ❀  ✾  ✿  ❀  ✾  ✿';
  position: absolute;
  top: 14px; left: 0; right: 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--rose-pastel);
  opacity: 0.55;
  letter-spacing: 1.6rem;
  overflow: hidden;
  white-space: nowrap;
}
.hero::after {
  content: '✿  ❀  ✾  ✿  ❀  ✾  ✿  ❀  ✾  ✿  ❀  ✾  ✿';
  position: absolute;
  bottom: 14px; left: 0; right: 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--vert-clair);
  opacity: 0.55;
  letter-spacing: 1.6rem;
  overflow: hidden;
  white-space: nowrap;
}

.hero-inner {
  max-width: 680px;
  position: relative;
  z-index: 1;
}

/* Cercle du logo */
.hero-logo {
  width: min(440px, 90%);
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-logo img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.hero-initiales {
  font-family: var(--font-titre);
  font-style: italic;
  font-size: 3rem;
  color: var(--rose-profond);
  line-height: 1;
  letter-spacing: -0.02em;
}

.hero-sous-titre {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--vert-sauge);
  margin-bottom: 0.6rem;
}

.hero h1 {
  font-family: var(--font-script);
  font-size: clamp(3rem, 6vw, 4.8rem);
  color: var(--bordeaux);
  margin-bottom: 1.5rem;
}

.hero-accroche {
  font-family: var(--font-titre);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-style: italic;
  color: var(--texte-doux);
  margin-bottom: 2.5rem;
  line-height: 1.8;
}

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

/* ============================================================
   BOUTONS
   ============================================================ */
.btn {
  display: inline-block;
  padding: 0.85rem 2.2rem;
  border-radius: 50px;
  font-family: var(--font-texte);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

.btn-primaire {
  background: linear-gradient(135deg, var(--rose-poudre), var(--rose-profond));
  color: var(--blanc);
  box-shadow: 0 4px 15px rgba(180, 100, 122, 0.3);
}
.btn-primaire:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 22px rgba(180, 100, 122, 0.42);
}

.btn-secondaire {
  background: transparent;
  color: var(--rose-profond);
  border: 1.5px solid var(--rose-poudre);
}
.btn-secondaire:hover {
  background: var(--rose-pale);
  transform: translateY(-2px);
}

/* ============================================================
   MISE EN PAGE GÉNÉRALE
   ============================================================ */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}

section { padding: 5rem 0; }

.section-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.section-header h2 { color: var(--texte); }

.section-surtitre {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vert-sauge);
  margin-bottom: 0.6rem;
}

.section-intro {
  font-family: var(--font-script);
  font-size: 1.8rem;
  line-height: 1.9;
  color: var(--texte-doux);
}

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

/* ============================================================
   GRILLE DES 9 CATÉGORIES
   ============================================================ */
.categories-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.categories-separateur {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2.5rem 0;
}
.categories-separateur::before,
.categories-separateur::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--rose-pastel), transparent);
}
.categories-separateur .separateur-fleur {
  color: var(--rose-poudre);
  font-size: 1.1rem;
}

.carte-categorie {
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: 2rem 1.5rem 1.75rem;
  text-align: center;
  color: var(--texte);
  box-shadow: var(--ombre-douce);
  border: 1px solid rgba(242, 184, 198, 0.2);
  transition: all 0.35s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  position: relative;
  overflow: hidden;
}

.carte-categorie::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--rose-pastel), var(--vert-clair));
  opacity: 0;
  transition: opacity 0.35s ease;
}

.carte-categorie:hover {
  transform: translateY(-7px);
  box-shadow: var(--ombre-carte);
  border-color: var(--rose-pastel);
}
.carte-categorie:hover::before { opacity: 1; }

.carte-icone {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--rose-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 0.25rem;
  transition: background 0.3s;
}
.carte-categorie:hover .carte-icone { background: var(--rose-pastel); }

.carte-nom {
  font-family: var(--font-titre);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--texte);
}

.carte-desc {
  font-size: 0.84rem;
  color: var(--texte-leger);
  line-height: 1.55;
  margin: 0;
}

/* ============================================================
   SECTION "COMMENT COMMANDER" (les 3 étapes)
   ============================================================ */
.etapes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}

.etape { padding: 1rem; }

.etape:nth-child(1) { transform: translateY(0px); }
.etape:nth-child(2) { transform: translateY(40px); }
.etape:nth-child(3) { transform: translateY(40px); }
.etape:nth-child(4) { transform: translateY(0px); }

.cigogne-arc {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  opacity: 0.8;
  pointer-events: none;
}

.etape-numero {
  font-family: var(--font-titre);
  font-size: 3.5rem;
  color: var(--rose-pastel);
  line-height: 1;
  margin-bottom: 1rem;
}

.etape h4 {
  font-family: var(--font-titre);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--texte);
  margin-bottom: 0.5rem;
}

/* ============================================================
   APERÇU CRÉATIONS — section accueil
   ============================================================ */
.accueil-apercu {
  padding: 4.5rem 0 3.5rem;
  background: var(--blanc);
}

.apercu-grille-vedettes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
  max-width: 1100px;
  margin: 0 auto 1.75rem;
}

.apercu-carte {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--texte);
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--blanc);
  border: 1px solid var(--rose-pastel);
  box-shadow: var(--ombre-douce);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

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

.apercu-visuel {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.apercu-visuel img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.6rem;
  transition: transform 0.3s ease;
}

.apercu-carte:hover .apercu-visuel img {
  transform: scale(1.03);
}

.apercu-info {
  padding: 0.7rem 1rem 0.8rem;
  border-top: 1px solid var(--rose-pastel);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.apercu-categorie {
  font-family: var(--font-texte);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte);
}

.apercu-details {
  font-family: var(--font-texte);
  font-size: 0.7rem;
  color: var(--texte-doux);
}

.apercu-autres {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  max-width: 840px;
  margin: 0 auto;
}

.apercu-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 1rem;
  border-radius: 999px;
  background: var(--rose-pale);
  border: 1px solid var(--rose-pastel);
  font-family: var(--font-texte);
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--texte-doux);
  text-decoration: none;
  transition: background 0.18s, color 0.18s, transform 0.18s, box-shadow 0.18s;
}

.apercu-chip:hover {
  background: var(--rose-pastel);
  color: var(--texte);
  transform: translateY(-2px);
  box-shadow: 0 3px 10px rgba(180, 100, 122, 0.15);
}

.apercu-voir-tout {
  text-align: center;
  margin-top: 2.25rem;
}

@media (max-width: 768px) {
  .apercu-grille-vedettes {
    display: flex;
    overflow-x: auto;
    gap: 1rem;
    padding: 0 1rem 0.75rem;
    max-width: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
  }
  .apercu-grille-vedettes::-webkit-scrollbar { display: none; }
  .apercu-carte {
    min-width: 72vw;
    max-width: 260px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}

/* ============================================================
   SECTION APPEL À L'ACTION (bande colorée)
   ============================================================ */
.section-cta {
  text-align: center;
  padding: 5rem 2rem;
  background: linear-gradient(135deg, var(--rose-pale) 0%, var(--vert-pale) 100%);
  position: relative;
}
.section-cta::before {
  content: '✿  ❀  ✾  ✿  ❀  ✾  ✿  ❀  ✾  ✿  ❀  ✾  ✿';
  position: absolute;
  top: 14px; left: 0; right: 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--rose-pastel);
  opacity: 0.55;
  letter-spacing: 1.6rem;
  overflow: hidden;
  white-space: nowrap;
}
.section-cta::after {
  content: '✿  ❀  ✾  ✿  ❀  ✾  ✿  ❀  ✾  ✿  ❀  ✾  ✿';
  position: absolute;
  bottom: 14px; left: 0; right: 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--vert-clair);
  opacity: 0.55;
  letter-spacing: 1.6rem;
  overflow: hidden;
  white-space: nowrap;
}

.section-cta h2 { color: var(--texte); margin-bottom: 0.75rem; }

.section-cta .citation {
  font-family: var(--font-script);
  font-size: 1.5rem;
  line-height: 1.9;
  color: var(--texte-doux);
  margin-bottom: 2rem;
}

/* ============================================================
   SECTION FORMAT DIGITAL — Bloc visible page d'accueil
   ============================================================ */
.section-format-digital {
  background: var(--creme);
  padding: 3rem 2rem;
}

.format-digital-inner {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  gap: 1.75rem;
  align-items: flex-start;
  background: var(--blanc);
  border-radius: var(--rayon);
  border-left: 4px solid var(--rose-poudre);
  padding: 2rem 2.25rem;
  box-shadow: var(--ombre-douce);
}

.format-digital-icone {
  font-size: 1.4rem;
  color: var(--rose-poudre);
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.format-digital-texte h3 {
  font-family: var(--font-titre);
  font-size: 1.15rem;
  color: var(--texte);
  margin-bottom: 0.85rem;
}

.format-digital-texte p {
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--texte-doux);
  margin-bottom: 0.6rem;
}

.format-digital-texte p:last-child { margin-bottom: 0; }

/* ============================================================
   NOTE DIGITAL DISCRÈTE — Toutes les pages intérieures
   ============================================================ */
.note-digital {
  background: var(--blanc);
  border-left: 3px solid var(--rose-pastel);
  border-radius: 0 8px 8px 0;
  padding: 0.7rem 1.1rem;
  margin: 0 auto 0 auto;
  max-width: 860px;
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
}

.note-digital-wrapper {
  padding: 0.85rem 2rem 0;
}

.note-digital-icone {
  font-size: 0.9rem;
  color: var(--rose-poudre);
  flex-shrink: 0;
  margin-top: 2px;
}

.note-digital p {
  font-family: var(--font-texte);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--texte-leger);
  margin: 0;
}

.note-digital strong {
  color: var(--texte-doux);
  font-weight: 600;
}

/* ============================================================
   PAGE TARIFS
   ============================================================ */
.tarifs-page {
  padding: 3rem 0 5rem;
}

.tarifs-intro {
  font-family: var(--font-script);
  font-size: 1.8rem;
  color: var(--texte-doux);
  text-align: center;
  margin-bottom: 3rem;
}

/* ============================================================
   SECTION PRIX — Tarifs page
   ============================================================ */
.prix-section { margin-bottom: 4rem; }

.prix-badge {
  display: inline-block;
  background: var(--bordeaux);
  color: var(--rose-pale);
  font-family: var(--font-texte);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.4rem 1.1rem;
  border-radius: 20px;
  margin-bottom: 2rem;
}

.prix-niveaux {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2rem;
  padding: 1.25rem 1.5rem;
  background: rgba(255,255,255,0.6);
  border-radius: var(--rayon);
  border: 1px solid rgba(242,175,188,0.25);
}

.prix-niveau {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.prix-niveau-etoiles {
  font-size: 0.7rem;
  color: var(--rose-poudre);
  white-space: nowrap;
  padding-top: 0.2rem;
  min-width: 3rem;
  letter-spacing: 0.1em;
}

.prix-niveau strong {
  font-size: 0.9rem;
  color: var(--texte);
  display: block;
  margin-bottom: 0.1rem;
}

.prix-niveau p {
  font-size: 0.82rem;
  color: var(--texte-leger);
  margin: 0;
  line-height: 1.5;
}

.prix-section-titre {
  font-family: var(--font-titre);
  font-size: 1.4rem;
  font-style: italic;
  color: var(--texte);
  margin-bottom: 0.4rem;
}

.prix-section-intro {
  font-size: 0.85rem;
  color: var(--texte-leger);
  margin-bottom: 1.5rem;
}

/* Table à la carte */
.prix-table-wrapper {
  overflow-x: auto;
  border-radius: var(--rayon);
  border: 1px solid rgba(242, 175, 188, 0.25);
  margin-bottom: 1rem;
}

.prix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  background: var(--blanc);
}

.prix-table thead tr {
  background: linear-gradient(135deg, var(--rose-pale), var(--vert-pale));
}

.prix-table th {
  padding: 0.85rem 1rem;
  text-align: left;
  font-family: var(--font-texte);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--texte);
  white-space: nowrap;
}

.prix-table th:not(:first-child) { text-align: center; }

.th-etoiles {
  display: block;
  font-size: 0.65rem;
  color: var(--rose-poudre);
  letter-spacing: 0.1em;
  margin-bottom: 0.15rem;
}

.prix-groupe-header td {
  background: var(--rose-pale);
  padding: 0.45rem 1rem;
  font-family: var(--font-texte);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--rose-poudre);
  text-transform: uppercase;
}

.prix-table tbody tr:not(.prix-groupe-header) td {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid rgba(242, 175, 188, 0.12);
  color: var(--texte-doux);
}

.prix-table tbody tr:not(.prix-groupe-header) td:not(:first-child) {
  text-align: center;
  font-weight: 700;
  color: var(--rose-profond);
}

.prix-table tbody tr:not(.prix-groupe-header):hover td {
  background: var(--rose-pale);
}

.prix-sur-devis {
  text-align: center !important;
  font-style: italic;
  color: var(--texte-doux) !important;
  font-weight: 400 !important;
}

.prix-note {
  font-size: 0.78rem;
  color: var(--texte-leger);
  text-align: center;
  margin-top: 2rem;
}

/* Encart d'alerte sous le badge — rappel visuel uniquement */
.prix-alerte {
  background: rgba(242, 184, 198, 0.15);
  border: 1px solid rgba(242, 184, 198, 0.45);
  border-radius: var(--rayon);
  padding: 0.85rem 1.1rem;
  font-size: 0.87rem;
  color: var(--texte);
  margin-bottom: 1.75rem;
  line-height: 1.55;
}

/* Bloc récapitulatif en bas de l'accordéon */
.prix-rappel {
  background: var(--rose-pale);
  border-left: 3px solid var(--rose-profond);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--rayon) var(--rayon) 0;
  font-size: 0.87rem;
  color: var(--texte);
  margin-top: 2rem;
  line-height: 1.65;
}

/* Mention numérique — bandeau compact en haut des packs */
.prix-notice-num {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(158, 24, 43, 0.07);
  border: 1px solid rgba(158, 24, 43, 0.18);
  border-radius: var(--rayon);
  padding: 0.6rem 1rem;
  font-size: 0.82rem;
  color: var(--bordeaux);
  font-weight: 600;
  margin-bottom: 1.25rem;
  line-height: 1.4;
}
.prix-notice-num span {
  font-weight: 400;
  color: var(--texte-doux);
}

/* Formule mise en évidence dans la colonne gauche */
.tarif-formule {
  font-weight: 600;
  font-size: 0.87rem;
  color: var(--bordeaux);
  background: rgba(107, 16, 32, 0.06);
  padding: 0.55rem 1rem;
  border-radius: var(--rayon);
  text-align: center;
  margin: 0.85rem 0 0;
  letter-spacing: 0.01em;
}

/* Packs */
.packs-categorie { margin-bottom: 2.5rem; }

.packs-categorie-titre {
  font-family: var(--font-titre);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--rose-profond);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(242, 175, 188, 0.25);
}

.packs-grille {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.packs-grille .pack-card {
  flex: 1 1 200px;
  max-width: 260px;
}

.pack-card {
  border: 1px solid rgba(242, 175, 188, 0.3);
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--blanc);
}

.pack-card-premium {
  border-color: var(--rose-poudre);
  box-shadow: var(--ombre-douce);
}

.pack-card-header {
  background: linear-gradient(160deg, var(--rose-pale), var(--vert-pale));
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(242, 175, 188, 0.2);
  text-align: center;
}

.pack-card-premium .pack-card-header {
  background: linear-gradient(160deg, var(--rose-pastel), var(--vert-clair));
}

.pack-nom {
  display: block;
  font-family: var(--font-texte);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--texte);
  margin-bottom: 0.3rem;
}

.pack-contenu {
  font-size: 0.75rem;
  color: var(--texte-doux);
  line-height: 1.5;
  margin: 0;
}

.pack-prix-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.pack-prix-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.65rem 0.4rem;
  border-right: 1px solid rgba(242, 175, 188, 0.15);
  gap: 0.15rem;
}

.pack-prix-col:last-child { border-right: none; }

.pack-formule {
  font-size: 0.6rem;
  color: var(--rose-poudre);
  letter-spacing: 0.08em;
}

.pack-barre {
  font-size: 0.72rem;
  color: var(--texte-leger);
  text-decoration: line-through;
}

.pack-reduit {
  font-family: var(--font-texte);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--bordeaux);
}

/* Grille détail */
.tarifs-grille {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 3rem;
  align-items: start;
}

.tarif-bloc {
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(242, 175, 188, 0.25);
}

.tarif-bloc:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.tarif-titre {
  font-family: var(--font-titre);
  font-size: 1.3rem;
  font-style: italic;
  color: var(--rose-profond);
  margin-bottom: 1rem;
}

.tarif-bloc p {
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--texte-doux);
  margin-bottom: 0.75rem;
}

.tarif-bloc p:last-child { margin-bottom: 0; }

.tarif-liste {
  list-style: none;
  margin: 0.5rem 0 0.75rem 0.5rem;
}

.tarif-liste li {
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--texte-doux);
  padding-left: 1.2rem;
  position: relative;
}

.tarif-liste li::before {
  content: '✦';
  position: absolute;
  left: 0;
  font-size: 0.55rem;
  color: var(--rose-poudre);
  top: 0.45rem;
}

.tarifs-aside {
  position: sticky;
  top: 90px;
}

.tarifs-page > .container {
  max-width: none;
  padding: 0 3rem;
}

.tarifs-deux-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}

.tarifs-droite {
  position: sticky;
  top: 90px;
}

@media (max-width: 860px) {
  .tarifs-page > .container {
    padding: 0 1.25rem;
  }
  .tarifs-deux-col {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .tarifs-droite {
    position: static;
  }
}

.tarif-pourquoi {
  background: linear-gradient(160deg, var(--rose-pale) 0%, var(--vert-pale) 100%);
  border: 1px solid rgba(242, 175, 188, 0.3);
  border-radius: var(--rayon);
  padding: 2rem 1.75rem;
  position: relative;
  overflow: hidden;
  margin-top: 3rem;
}

.tarif-pourquoi-icone {
  display: block;
  font-size: 1.2rem;
  color: var(--rose-poudre);
  margin-bottom: 0.75rem;
}

.tarif-pourquoi h3 {
  font-family: var(--font-titre);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--texte);
  margin-bottom: 1rem;
}

.tarif-pourquoi p {
  font-size: 0.87rem;
  line-height: 1.85;
  color: var(--texte-doux);
  margin-bottom: 0.85rem;
}

.tarif-pourquoi-fin {
  font-family: var(--font-doux);
  font-style: italic;
  font-size: 0.95rem !important;
  color: var(--texte) !important;
  line-height: 2 !important;
}

.tarif-cigogne {
  width: 90px;
  opacity: 0.6;
  display: block;
  margin: 1.25rem auto 0;
}

.tarifs-page strong {
  color: var(--texte);
  font-weight: 700;
}

/* Accordéon tarifs */
.prix-accordeon {
  margin-top: 3rem;
  border-radius: var(--rayon);
  border: 1px solid rgba(242, 175, 188, 0.35);
  overflow: hidden;
}

.prix-accordeon[open] .prix-accordeon-fleche {
  transform: rotate(180deg);
}

.prix-accordeon-titre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.75rem;
  background: linear-gradient(135deg, var(--rose-pale), var(--vert-pale));
  cursor: pointer;
  list-style: none;
  user-select: none;
  gap: 1rem;
}

.prix-accordeon-titre::-webkit-details-marker { display: none; }

.prix-accordeon-titre:hover {
  background: linear-gradient(135deg, var(--rose-pastel), var(--vert-clair));
}

.prix-accordeon-label {
  font-family: var(--font-titre);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--rose-profond);
}

.prix-accordeon-fleche {
  font-size: 1rem;
  color: var(--rose-poudre);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.prix-accordeon .prix-section {
  padding: 2rem 1.75rem;
  margin-bottom: 0;
}

.lien-tarifs {
  font-family: var(--font-texte);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--rose-profond);
  text-decoration: none;
  border-bottom: 1px solid var(--rose-pastel);
  transition: color 0.2s, border-color 0.2s;
}

.lien-tarifs:hover {
  color: var(--bordeaux);
  border-color: var(--bordeaux);
}

/* ============================================================
   EN-TÊTE DE PAGE INTÉRIEURE
   ============================================================ */
.page-header {
  text-align: center;
  padding: 2.5rem 2rem 3rem;
  background: linear-gradient(160deg, var(--rose-pale) 0%, var(--blanc-casse) 100%);
  border-bottom: 1px solid rgba(242, 184, 198, 0.2);
  position: relative;
}
.page-header::before {
  content: '✿  ❀  ✾  ✿  ❀  ✾  ✿  ❀  ✾  ✿  ❀  ✾  ✿';
  position: absolute;
  top: 10px; left: 0; right: 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--rose-pastel);
  opacity: 0.45;
  letter-spacing: 1.4rem;
  overflow: hidden;
  white-space: nowrap;
}
.page-header::after {
  content: '✿  ❀  ✾  ✿  ❀  ✾  ✿  ❀  ✾  ✿  ❀  ✾  ✿';
  position: absolute;
  bottom: 10px; left: 0; right: 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--vert-clair);
  opacity: 0.45;
  letter-spacing: 1.4rem;
  overflow: hidden;
  white-space: nowrap;
}

.page-header h1 {
  color: var(--rose-profond);
  font-style: italic;
  font-size: clamp(1.9rem, 4vw, 3rem);
  margin-bottom: 0.5rem;
}

.page-sous-titre {
  font-family: var(--font-script);
  font-size: 1.7rem;
  line-height: 1.9;
  color: var(--texte-doux);
  max-width: none;
  white-space: nowrap;
  margin: 1rem auto 0;
}

/* Lien "Retour" discret */
.lien-retour {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vert-sauge);
  margin-bottom: 1.5rem;
  transition: color 0.3s;
}
.lien-retour:hover { color: var(--rose-profond); }

/* ============================================================
   PAGE NOTRE HISTOIRE
   ============================================================ */
.histoire-contenu {
  padding: 2.5rem 3rem 3rem;
}

.histoire-intro {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0;
  align-items: start;
}

.histoire-photo-cadre {
  padding-right: 3.5rem;
  border-right: 1px solid rgba(242, 184, 198, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.histoire-photo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--rayon);
}

.histoire-texte {
  padding-left: 3.5rem;
  display: flex;
  flex-direction: column;
}

.histoire-contenu h2 {
  font-style: italic;
  color: var(--rose-profond);
  margin: 0 0 1.2rem;
}

.histoire-contenu p {
  font-size: 1.05rem;
  line-height: 1.9;
}

.histoire-contenu strong {
  font-weight: 800;
  color: var(--texte);
}

.histoire-trois-col {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0;
  align-items: center;
}

.histoire-col-texte {
  padding-right: 3.5rem;
}

.histoire-poeme {
  padding: 3rem 2rem 0 3.5rem;
  border-left: 1px solid rgba(242, 184, 198, 0.5);
  font-family: var(--font-doux);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 2.1;
  color: var(--texte);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.histoire-col-cigogne {
  padding-left: 2rem;
  border-left: 1px solid rgba(242, 184, 198, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.cigogne-bas {
  width: 130px;
  opacity: 0.85;
}

.histoire-boutons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(242, 184, 198, 0.4);
}

/* Zones d'emplacement à remplir (les "placeholder") */
.placeholder-texte {
  background: var(--creme);
  border: 2px dashed var(--rose-pastel);
  border-radius: var(--rayon);
  padding: 2.5rem 2rem;
  text-align: center;
  color: var(--texte-doux);
  font-style: italic;
  font-family: var(--font-titre);
  font-size: 1rem;
  margin: 1.5rem 0;
  line-height: 2;
}

.placeholder-image {
  background: var(--rose-pale);
  border: 2px dashed var(--rose-pastel);
  border-radius: var(--rayon);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--texte-leger);
  font-style: italic;
  font-family: var(--font-titre);
  font-size: 1.1rem;
  margin: 1.5rem 0;
  text-align: center;
  padding: 2rem;
}

.placeholder-image small {
  font-family: var(--font-texte);
  font-style: normal;
  font-size: 0.8rem;
  color: var(--texte-leger);
  max-width: 340px;
}

/* ============================================================
   PAGE CONTACT
   ============================================================ */
.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 4rem;
  max-width: 950px;
  margin: 0 auto;
  padding: 4rem 2rem 5rem;
  align-items: start;
}

.contact-infos h3 {
  font-style: italic;
  color: var(--texte);
  margin-bottom: 1.25rem;
}

.contact-photo {
  width: min(200px, 80%);
  height: auto;
  display: block;
  margin: 0 auto 1.5rem;
}

.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  color: var(--texte-doux);
}

.contact-detail a {
  color: var(--rose-profond);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.contact-detail a:hover {
  color: var(--bordeaux);
}

.contact-icone {
  color: var(--rose-poudre);
  font-size: 1rem;
  margin-top: 3px;
  flex-shrink: 0;
}

.contact-citation {
  margin-top: 2.5rem;
  padding: 1.5rem;
  background: var(--rose-pale);
  border-left: 3px solid var(--rose-poudre);
  border-radius: 0 var(--rayon) var(--rayon) 0;
}

.contact-citation p {
  font-family: var(--font-script);
  font-size: 1.4rem;
  line-height: 1.9;
  color: var(--texte);
  margin: 0;
}

/* Formulaire de contact */
.formulaire {
  background: var(--blanc);
  padding: 2.5rem;
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
  border: 1px solid rgba(242, 184, 198, 0.2);
}

.formulaire h3 {
  font-style: italic;
  color: var(--texte);
  margin-bottom: 2rem;
}

.champ-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.champ-groupe {
  margin-bottom: 1.4rem;
}

.champ-groupe label {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-bottom: 0.5rem;
}

.champ-groupe input,
.champ-groupe select,
.champ-groupe textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--blanc-casse);
  border: 1.5px solid rgba(242, 184, 198, 0.4);
  border-radius: 8px;
  font-family: var(--font-texte);
  font-size: 0.95rem;
  color: var(--texte);
  transition: border-color 0.3s, box-shadow 0.3s;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.champ-groupe input:focus,
.champ-groupe select:focus,
.champ-groupe textarea:focus {
  border-color: var(--rose-poudre);
  box-shadow: 0 0 0 3px rgba(212, 136, 154, 0.13);
}

.champ-groupe input::placeholder,
.champ-groupe textarea::placeholder {
  color: var(--texte-leger);
}

.champ-groupe textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.6;
}

.champ-groupe select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23D4889A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.cases-grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem 1rem;
  margin-top: 0.5rem;
}

.case-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--texte-doux);
}

.case-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid rgba(242, 175, 188, 0.6);
  border-radius: 4px;
  background: var(--blanc-casse);
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.case-item input[type="checkbox"]:checked {
  background: var(--bordeaux);
  border-color: var(--bordeaux);
}

.case-item input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 10px;
  font-weight: 700;
}

.formulaire-note {
  font-size: 0.79rem;
  color: var(--texte-leger);
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 0;
}

.btn-formulaire {
  width: 100%;
  justify-content: center;
  cursor: pointer;
  font-family: var(--font-texte);
}

/* ============================================================
   PAGE CRÉATIONS (liste des catégories)
   ============================================================ */
.options-commande {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: stretch;
}

.option-carte {
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: 1.5rem 1.5rem;
  text-align: center;
  box-shadow: var(--ombre-carte);
  border: 1px solid rgba(242, 184, 198, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.option-carte p {
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 0.4rem;
}

.option-cigogne {
  width: 150px;
  opacity: 0.85;
  margin-top: auto;
  padding-top: 1.5rem;
  animation: vol-doux 5s ease-in-out infinite;
}

.option-etoiles {
  font-size: 1.1rem;
  color: var(--rose-poudre);
  letter-spacing: 4px;
  margin-bottom: 1rem;
  display: block;
}

.option-carte h4 {
  font-style: italic;
  color: var(--texte);
  margin-bottom: 0.5rem;
}

.info-format {
  background: var(--blanc);
  border-left: 3px solid var(--rose-pastel);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  padding: 1rem 1.25rem;
  margin-top: 1.25rem;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.info-format-icone {
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.info-format-texte {
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--texte-doux);
  margin: 0;
}

.info-format-texte strong {
  color: var(--texte);
  font-weight: 600;
}

.perso-note {
  text-align: center;
  font-family: var(--font-titre);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--texte);
  margin-top: 1.5rem;
  letter-spacing: 0.01em;
  line-height: 1.6;
}

/* ============================================================
   PAGE CATÉGORIE (placeholder "bientôt disponible")
   ============================================================ */
.categorie-placeholder {
  max-width: 640px;
  margin: 0 auto;
  padding: 4rem 2rem;
  text-align: center;
}

/* ============================================================
   PAGE PRODUITS (liste des articles d'une catégorie)
   ============================================================ */
/* ============================================================
   GALERIE COLLECTIONS
   ============================================================ */

.galerie-section { padding: 3rem 0 5rem; }

/* ── Naissance : deux chemins ── */
.naissance-chemins {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 720px;
  margin: 0 auto 0.5rem;
  border: 1px solid var(--rose-pastel);
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--blanc);
  box-shadow: var(--ombre-douce);
}

.naissance-chemin {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.75rem 1.25rem;
  text-decoration: none;
  color: var(--texte);
  transition: background 0.2s;
  gap: 0.35rem;
}

.naissance-chemin:hover { background: var(--rose-pale); }

.naissance-chemin-emoji { font-size: 1.75rem; line-height: 1; }

.naissance-chemin-titre {
  font-family: var(--font-texte);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--texte);
}

.naissance-chemin-desc {
  font-family: var(--font-texte);
  font-size: 0.75rem;
  color: var(--texte-doux);
  line-height: 1.4;
}

.naissance-chemin-sep {
  display: flex;
  align-items: center;
  padding: 0 0.25rem;
  color: var(--rose-pastel);
  font-size: 1.1rem;
  border-left: 1px solid var(--rose-pastel);
  border-right: 1px solid var(--rose-pastel);
}

@media (max-width: 540px) {
  .naissance-chemins { flex-direction: column; }
  .naissance-chemin-sep {
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--rose-pastel);
    border-bottom: 1px solid var(--rose-pastel);
    padding: 0.25rem 0;
    justify-content: center;
  }
}

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

/* Carte collection */
.collection-carte {
  border: 1px solid rgba(242, 175, 188, 0.35);
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--blanc);
  box-shadow: var(--ombre-douce);
  transition: box-shadow 0.25s ease;
}

.collection-carte:hover {
  box-shadow: 0 6px 28px rgba(180, 100, 130, 0.15);
}

/* Résumé cliquable */
.collection-apercu {
  list-style: none;
  cursor: pointer;
  display: block;
}

.collection-apercu::-webkit-details-marker { display: none; }

/* Image principale */
.collection-img-cadre {
  position: relative;
  overflow: hidden;
}

.collection-img-principale {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.collection-apercu:hover .collection-img-principale {
  transform: scale(1.04);
}

/* ── Mini-carousel sur les cartes de galerie ── */
.carte-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.88);
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.18s;
  color: var(--texte-principal);
  padding: 0;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.collection-img-cadre:hover .carte-nav-btn { opacity: 1; }
.carte-nav-prev { left: 6px; }
.carte-nav-next { right: 6px; }
.carte-dots {
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 4px;
  pointer-events: none;
  z-index: 3;
}
.carte-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  display: inline-block;
  transition: background 0.15s;
}
.carte-dot.active { background: var(--rose-profond); }
@media (max-width: 768px) {
  .carte-nav-btn { opacity: 0.75; width: 32px; height: 32px; }
}

.collection-badge {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(4px);
  color: var(--rose-profond);
  font-family: var(--font-texte);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.85rem;
  border-radius: 20px;
  border: 1px solid rgba(242, 175, 188, 0.5);
  transition: opacity 0.2s;
}

.collection-carte[open] .collection-badge {
  opacity: 0;
}

/* Infos sous l'image */
.collection-info {
  padding: 0.65rem 0.9rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.collection-nom {
  font-family: var(--font-titre);
  font-size: 1rem;
  font-style: italic;
  color: var(--rose-profond);
}

.collection-nb-pieces {
  font-size: 0.72rem;
  color: var(--texte-leger);
}

/* Contenu ouvert : grille des pièces */
.collection-pieces {
  padding: 0 1.4rem 1.5rem;
  border-top: 1px solid rgba(242, 175, 188, 0.2);
}

.pieces-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  padding: 1.25rem 0 1rem;
}

.piece-carte img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: calc(var(--rayon) / 2);
  border: 1px solid rgba(242, 175, 188, 0.2);
  transition: opacity 0.2s ease;
}

.piece-carte a {
  display: block;
  border-radius: calc(var(--rayon) / 2);
  overflow: hidden;
}

.piece-carte a:hover img {
  opacity: 0.85;
}

.piece-nom {
  font-size: 0.75rem;
  text-align: center;
  color: var(--texte-doux);
  margin-top: 0.4rem;
  line-height: 1.3;
}

.piece-detail {
  display: block;
  color: var(--texte-leger);
  font-size: 0.7rem;
}

.collection-action {
  text-align: center;
  margin-top: 0.5rem;
}

.collection-pack-teaser {
  font-size: 0.87rem;
  color: var(--texte-leger);
  margin-bottom: 1rem;
  padding: 0.65rem 1rem;
  background: rgba(242, 184, 198, 0.12);
  border-radius: var(--rayon);
}

.lien-pack {
  color: var(--rose-profond);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

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

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

/* ============================================================
   MODAL COLLECTION (CSS :target)
   ============================================================ */

.collection-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 8000;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
}

.collection-modal:target {
  display: flex;
}

.collection-modal-fond {
  position: absolute;
  inset: 0;
  background: rgba(20, 10, 15, 0.6);
  backdrop-filter: blur(3px);
}

.collection-modal-panneau {
  position: relative;
  z-index: 1;
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: 2rem 2rem 1.75rem;
  width: min(680px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.collection-modal-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(242, 175, 188, 0.3);
}

.collection-modal-titre {
  font-family: var(--font-titre);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--rose-profond);
  margin: 0;
}

.collection-modal-fermer {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(242, 175, 188, 0.15);
  color: var(--texte-doux);
  font-size: 1rem;
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.2s;
}

.collection-modal-fermer:hover {
  background: rgba(242, 175, 188, 0.35);
}

.pack-retour-lien {
  font-size: 0.84rem;
  color: var(--texte-leger);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  transition: color 0.2s;
  flex-shrink: 0;
}
.pack-retour-lien:hover { color: var(--rose-profond); }

/* La carte sur la page redevient un lien simple */
a.collection-carte {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* ============================================================
   LIGHTBOX (CSS :target — sans JavaScript)
   ============================================================ */

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  align-items: center;
  justify-content: center;
}

.lightbox:target {
  display: flex;
}

.lightbox-fond {
  position: absolute;
  inset: 0;
  background: rgba(20, 10, 15, 0.92);
}

.lightbox-contenu {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 88vw;
  max-height: 90vh;
}

.lightbox-contenu img {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--rayon);
  display: block;
}

.lightbox-legende {
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--font-texte);
  font-size: 0.82rem;
  margin-top: 0.9rem;
  text-align: center;
}

.lightbox-legende span {
  color: rgba(255, 255, 255, 0.4);
}

.lightbox-fermer {
  position: fixed;
  top: 1.25rem;
  right: 1.5rem;
  z-index: 2;
  color: white;
  font-size: 1.4rem;
  text-decoration: none;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.2s;
}

.lightbox-fermer:hover { background: rgba(255, 255, 255, 0.25); }

.lightbox-prev,
.lightbox-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  color: white;
  font-size: 2rem;
  line-height: 1;
  text-decoration: none;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.2s;
}

.lightbox-prev:hover,
.lightbox-next:hover { background: rgba(255, 255, 255, 0.28); }

.lightbox-prev { left: 1.25rem; }
.lightbox-next { right: 1.25rem; }

.produits-section { padding: 3rem 0 5rem; }

/* Mise en page 1/3 - 2/3 */
.produits-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  align-items: start;
}

.produits-colonne {
  position: sticky;
  top: 80px;
}

.produits-groupe-titre {
  font-family: var(--font-titre);
  font-style: italic;
  font-size: 1rem;
  color: var(--texte-doux);
  margin: 1.5rem 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(249, 203, 214, 0.4);
}
.produits-groupe-titre:first-child { margin-top: 0; }

/* Cartes produits compactes (colonne gauche) */
.carte-produit {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  background: var(--blanc);
  border: 1px solid rgba(249, 203, 214, 0.2);
  margin-bottom: 0.5rem;
  transition: all 0.25s ease;
  cursor: default;
}
.carte-produit:hover {
  background: var(--rose-pale);
  border-color: var(--rose-pastel);
}

.produit-icone {
  font-size: 1.1rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--rose-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.25s;
}
.carte-produit:hover .produit-icone { background: var(--rose-pastel); }

.produit-nom {
  font-family: var(--font-titre);
  font-size: 0.92rem;
  font-style: italic;
  color: var(--texte);
  font-weight: 400;
  margin: 0;
  flex: 1;
}

.produit-desc { display: none; }

.produit-lien {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bordeaux);
  white-space: nowrap;
  transition: color 0.2s;
  flex-shrink: 0;
}
.produit-lien:hover { color: var(--rose-profond); }

/* Zone galerie (colonne droite) */
.galerie-colonne {
  min-height: 400px;
}

.galerie-placeholder {
  background: var(--rose-pale);
  border: 2px dashed var(--rose-pastel);
  border-radius: var(--rayon);
  min-height: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--texte-leger);
  font-family: var(--font-titre);
  font-style: italic;
  font-size: 1.1rem;
  text-align: center;
  padding: 2rem;
}

@media (max-width: 900px) {
  .produits-layout { grid-template-columns: 1fr; }
  .produits-colonne { position: static; }
}
@media (max-width: 600px) {
  .produit-desc { display: none; }
}

/* ============================================================
   PIED DE PAGE (footer)
   ============================================================ */
.site-footer {
  background-color: #6B1020;
  color: rgba(255, 255, 255, 0.75);
  padding: 3.5rem 2rem 2.5rem;
  text-align: center;
}

.social-liens {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin: 1rem 0 1.5rem;
}
.social-lien {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  flex-shrink: 0;
}
.social-lien:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}
.social-lien svg {
  width: 17px;
  height: 17px;
  display: block;
}
.hero-social {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
  font-size: 0.78rem;
  color: var(--texte-leger);
  font-family: var(--font-texte);
}
.hero-social .social-lien {
  width: 32px;
  height: 32px;
  border-color: rgba(242, 184, 198, 0.6);
  color: var(--rose-poudre);
}
.hero-social .social-lien:hover {
  background: rgba(242, 184, 198, 0.15);
  border-color: var(--rose-poudre);
  color: var(--rose-fonce);
}
.contact-social {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.25rem;
}
.contact-social .social-lien {
  width: 34px;
  height: 34px;
  border-color: rgba(242, 184, 198, 0.5);
  color: var(--rose-poudre);
}
.contact-social .social-lien:hover {
  background: rgba(242, 184, 198, 0.15);
  border-color: var(--rose-poudre);
  color: var(--rose-fonce);
}

.nav-social-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}
.nav-social-nav .social-lien {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rose-poudre);
  transition: color 0.3s;
}
.nav-social-nav .social-lien:hover { color: var(--bordeaux); }
.nav-social-nav .social-lien svg {
  width: 1.05rem;
  height: 1.05rem;
}
@media (max-width: 1100px) {
  .nav-social-nav { display: none; }
}

.site-footer::before {
  content: '✿  ❀  ✾  ✿  ❀  ✾  ✿  ❀  ✾  ✿  ❀  ✾  ✿';
  display: block;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.18);
  letter-spacing: 1.4rem;
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 2rem;
}

.footer-inner { max-width: 1100px; margin: 0 auto; }

.footer-titre {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 2.2rem;
  color: var(--rose-pale);
  margin-bottom: 0.5rem;
}

.footer-sous-titre {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.footer-liens {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.footer-liens a {
  font-size: 0.77rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  transition: color 0.3s;
}
.footer-liens a:hover { color: var(--rose-pastel); }

.footer-message {
  font-family: var(--font-script);
  font-size: 1.6rem;
  line-height: 1.9;
  color: rgba(255,255,255,0.35);
  margin-bottom: 0.75rem;
}

.footer-copyright {
  font-size: 0.76rem;
  color: rgba(255,255,255,0.25);
  margin: 0;
}

.footer-legal {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.2);
  margin: 0.4rem 0 0;
}
.footer-legal a {
  color: rgba(255,255,255,0.35);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-legal a:hover { color: rgba(255,255,255,0.7); }

/* ============================================================
   CIGOGNES DÉCORATIVES
   ============================================================ */

/* Empêche les cigognes de bloquer les clics */
.cigogne-deco {
  pointer-events: none;
  user-select: none;
  display: block;
}

/* Flottement doux pour les cigognes en vol */
@keyframes rebond {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%       { transform: translateY(10px); opacity: 1; }
}

.scroll-indicateur {
  position: absolute;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  color: var(--bordeaux);
  font-size: 0.65rem;
  font-family: var(--font-texte);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  animation: rebond 1.6s ease-in-out infinite;
  z-index: 2;
}

.scroll-indicateur svg {
  width: 28px;
  height: 28px;
  stroke: var(--bordeaux);
  stroke-width: 2.5;
}

@keyframes vol-doux {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-10px) rotate(1.5deg); }
}

/* Balancement pour la cigogne endormie */
@keyframes balancement {
  0%, 100% { transform: rotate(-3deg); }
  50%       { transform: rotate(3deg); }
}

/* Cigogne dans le héro — vole depuis le coin bas-droit */
.cigogne-hero {
  position: absolute;
  bottom: -15px;
  right: 20px;
  width: 340px;
  opacity: 0.88;
  animation: vol-doux 5s ease-in-out infinite;
}

/* Cigogne endormie dans le footer */
.cigogne-footer {
  width: 88px;
  opacity: 0.5;
  margin: 1.5rem auto 0.25rem;
  animation: balancement 7s ease-in-out infinite;
}

/* Cigogne centrée (entre sections, dans les pages) */
.cigogne-centre {
  margin: 1.5rem auto;
  width: 190px;
  animation: vol-doux 5s ease-in-out infinite;
}

/* Cigogne flottant à droite d'un texte */
.cigogne-droite {
  float: right;
  width: 160px;
  margin: 0 0 1.5rem 2rem;
  animation: vol-doux 4.5s ease-in-out infinite;
}

/* Petite cigogne (page Contact) */
.cigogne-petite {
  width: 110px;
  margin: 2rem auto 0;
  opacity: 0.8;
  animation: vol-doux 4s ease-in-out infinite;
}

/* ============================================================
   HAMBURGER — affiché sur mobile uniquement
   ============================================================ */
.nav-toggle { display: none; }

.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--bordeaux);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-toggle:checked + .nav-hamburger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle:checked + .nav-hamburger span:nth-child(2) {
  opacity: 0;
}
.nav-toggle:checked + .nav-hamburger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   RESPONSIVE — Tablette (≤ 900px)
   ============================================================ */
@media (max-width: 900px) {
  .categories-grille,
  .options-commande {
    grid-template-columns: repeat(2, 1fr);
  }
  .etapes {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
    gap: 1.5rem;
  }
  .etape:nth-child(1),
  .etape:nth-child(2),
  .etape:nth-child(3),
  .etape:nth-child(4) {
    transform: none;
  }
  .contact-wrapper {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 3rem 1.5rem;
  }
  .histoire-trois-col { grid-template-columns: 1fr; }
  .histoire-poeme { border-top: 1px solid rgba(242,184,198,0.3); padding-top: 1.5rem; }
}

/* ── Navigation compacte — petits laptops (1101–1440px) ── */
@media (min-width: 1101px) and (max-width: 1440px) {
  .nav-liens {
    gap: 0.9rem;
  }
  .nav-liens a {
    font-size: 0.71rem;
    letter-spacing: 0.07em;
  }
  .navbar {
    padding: 0.9rem 1.5rem;
  }
}

/* ============================================================
   RESPONSIVE — Navigation hamburger (≤ 1100px)
   ============================================================ */
@media (max-width: 1100px) {

  .nav-hamburger { display: flex; }

  .navbar {
    padding: 0.75rem 1.25rem;
    flex-wrap: wrap;
    align-items: center;
  }

  .nav-logo span { font-size: 1.4rem; }
  .nav-logo-img  { height: 34px; }

  .nav-liens {
    display: none;
    position: static;
    transform: none;
    left: auto;
    width: 100%;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem 0 0.75rem;
    order: 3;
    flex-wrap: nowrap;
  }

  .nav-toggle:checked ~ .nav-liens { display: flex; }

  .nav-liens > li {
    border-top: 1px solid rgba(242, 184, 198, 0.2);
  }

  .nav-liens > li > a {
    display: block;
    padding: 0.7rem 0.25rem;
    font-size: 0.8rem;
  }

  .nav-liens > li > a::before { display: none; }
  .nav-liens a::after { display: none; }

  /* Dropdown créations — toujours visible dans le menu hamburger */
  .nav-sous-menu {
    position: static;
    display: block;
    box-shadow: none;
    border: none;
    border-top: none;
    background: rgba(242, 184, 198, 0.07);
    border-radius: 0;
    padding: 0.25rem 0 0.5rem 1rem;
    min-width: auto;
    transform: none;
  }

  .nav-sous-menu li a {
    padding: 0.4rem 0.75rem;
    font-size: 0.78rem;
  }

  .nav-sous-menu-sep { margin: 0.3rem 0.5rem; }
}

/* ============================================================
   RESPONSIVE — Mobile (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {

  /* --- Bannière --- */
  .banniere-defilement { font-size: 0.85rem; padding: 0.75rem 0; }

  /* --- Héro --- */
  .hero { min-height: auto; padding: 2rem 0 3rem; }

  .hero-note-digital { padding: 0.6rem 1.25rem; font-size: 0.82rem; }

  .hero-colonnes {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 0 1.25rem;
  }

  .hero-gauche { text-align: center; }
  .hero-logo {
    border-radius: 0;
    background: none;
    border: none;
    box-shadow: none;
    width: auto;
    height: auto;
  }
  .hero-logo { width: min(320px, 85%); }
  .hero-logo img { width: 100%; }
  .hero h1 { font-size: 2.2rem; }
  .hero-accroche { font-size: 1rem; }
  .hero-boutons { justify-content: center; }

  .hero-droite {
    padding: 2rem 0 0;
    border-left: none;
    border-top: 1px solid rgba(242, 184, 198, 0.4);
    text-align: center;
  }
  .hero-droite .separateur { margin: 1rem auto; justify-content: center; }
  .hero-droite h2 { font-size: 1.5rem; }

  .cigogne-hero {
    position: static;
    display: block;
    width: 120px;
    margin: 1.5rem auto 0;
    right: auto;
    bottom: auto;
  }

  /* --- En-têtes de page --- */
  .page-header { padding: 2rem 1.25rem; }
  .page-header h1 { font-size: 2rem; }
  .page-sous-titre { font-size: 1rem; white-space: normal !important; }

  /* --- Sections --- */
  section { padding: 2.5rem 0; }
  .container { padding: 0 1.25rem; }

  /* --- Tarifs --- */
  .tarifs-page > .container { padding: 0 1.25rem; }
  .tarifs-deux-col { grid-template-columns: 1fr; gap: 2rem; }
  .tarifs-droite { position: static; }
  .prix-table { font-size: 0.78rem; }
  .prix-table th, .prix-table td { padding: 0.5rem 0.4rem; }
  .pack-prix-grille { grid-template-columns: repeat(3, 1fr); }
  .pack-card-header { padding: 0.75rem; }
  .packs-grille { grid-template-columns: 1fr; }

  /* --- Galerie collections --- */
  .collections-grille { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .collection-modal { padding: 0.75rem; }
  .collection-modal-panneau { padding: 1.25rem 1rem 1rem; max-height: 92vh; }
  .pieces-grille { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }

  /* --- Lightbox --- */
  .lightbox-prev { left: 0.5rem; }
  .lightbox-next { right: 0.5rem; }
  .lightbox-fermer { top: 0.75rem; right: 0.75rem; }
  .lightbox-contenu img { max-height: 70vh; }

  /* --- Notre Histoire --- */
  .histoire-contenu { padding: 2rem 1.25rem 3rem; }
  .histoire-intro { grid-template-columns: 1fr; }
  .histoire-photo-cadre { display: block; border-right: none; border-bottom: 1px solid rgba(242,184,198,0.5); padding-right: 0; padding-bottom: 2rem; }
  .histoire-texte { padding-left: 0; padding-top: 1.5rem; }

  /* --- Contact --- */
  .champ-grille { grid-template-columns: 1fr; }
  .cases-grille { grid-template-columns: 1fr; }
  .formulaire { padding: 1.5rem 1rem; }

  /* --- Catégories / Personnalisation --- */
  .categories-grille, .options-commande { grid-template-columns: 1fr; }

  /* --- Cigognes --- */
  .cigogne-droite { float: none; width: 100px; margin: 0 auto 1rem; }
  .cigogne-centre { width: 120px; }
  .cigogne-arc { display: none; }
}

/* ════════════════════════════════════════════
   VIEWER PRODUIT (layout 3 colonnes)
   ════════════════════════════════════════════ */

.viewer-panneau {
  width: min(1140px, 98%) !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.viewer-layout {
  display: grid;
  grid-template-columns: 78px 1fr clamp(260px, 26%, 310px);
  gap: 0.75rem;
  flex: 1;
  height: calc(92vh - 80px);
  min-height: 480px;
  overflow: hidden;
}

/* ── Miniatures gauche ── */
.viewer-thumbs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  overflow: hidden;
  min-height: 0;
}

.viewer-nav-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: var(--rose-profond);
  padding: 0.1rem 0;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.2s;
}

.viewer-nav-btn:hover { color: var(--rose-poudre); }

.viewer-thumb-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  padding: 0.1rem 0;
}

.viewer-thumb-list::-webkit-scrollbar { display: none; }

.viewer-thumb-item {
  width: 70px;
  height: 70px;
  object-fit: contain;
  border: 2px solid rgba(242, 175, 188, 0.35);
  border-radius: 6px;
  cursor: pointer;
  background: var(--rose-pale);
  padding: 3px;
  flex-shrink: 0;
  transition: border-color 0.2s;
}

.viewer-thumb-item:hover { border-color: var(--rose-poudre); }
.viewer-thumb-item.active { border-color: var(--rose-profond); }

/* ── Grande image centrale ── */
.viewer-main {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rose-pale);
  border-radius: var(--rayon);
  border: 1px solid rgba(242, 175, 188, 0.35);
  overflow: hidden;
  min-height: 0;
}

.viewer-main {
  position: relative;
}

.viewer-main img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.viewer-legende {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  font-family: var(--font-texte);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--texte-doux);
  text-align: center;
  padding: 0.3rem 0.75rem;
  background: rgba(255, 248, 250, 0.88);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(242, 175, 188, 0.45);
  pointer-events: none;
}

/* ── Flèches gauche/droite sur l'image ── */
.viewer-img-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 248, 250, 0.88);
  border: 1px solid rgba(242, 175, 188, 0.5);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--rose-profond);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  transition: opacity 0.18s, background 0.18s;
  padding: 0;
}
.viewer-img-btn:hover { opacity: 1; background: rgba(255, 248, 250, 0.98); }
.viewer-img-btn.viewer-img-prev { left: 10px; }
.viewer-img-btn.viewer-img-next { right: 10px; }

/* ── Animations de glissement ── */
@keyframes slideFromRight {
  from { opacity: 0; transform: translateX(36px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideFromLeft {
  from { opacity: 0; transform: translateX(-36px); }
  to   { opacity: 1; transform: translateX(0); }
}
.viewer-main img.slide-from-right { animation: slideFromRight 0.28s ease; }
.viewer-main img.slide-from-left  { animation: slideFromLeft  0.28s ease; }

/* ── Panneau info droite ── */
.viewer-info {
  overflow-y: scroll;
  min-height: 0;
  padding-right: 0.25rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(190, 100, 120, 0.55) rgba(242, 175, 188, 0.22);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.viewer-info::-webkit-scrollbar {
  width: 6px;
}
.viewer-info::-webkit-scrollbar-track {
  background: rgba(242, 175, 188, 0.22);
  border-radius: 3px;
}
.viewer-info::-webkit-scrollbar-thumb {
  background: rgba(190, 100, 120, 0.55);
  border-radius: 3px;
}

.viewer-info-titre {
  font-family: var(--font-titre);
  font-size: 1.4rem;
  font-style: italic;
  color: var(--rose-profond);
  margin: 0 0 0.4rem;
}

.viewer-section-label {
  font-family: var(--font-texte);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rose-profond);
  margin: 0.6rem 0 0.3rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid rgba(242, 175, 188, 0.4);
}

.viewer-section-label:first-of-type { margin-top: 0; }

/* Pièces */
.viewer-pieces-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.viewer-piece-ligne {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.18rem 0;
  border-bottom: 1px solid rgba(242, 175, 188, 0.12);
  gap: 0.5rem;
}

.viewer-piece-nom {
  font-size: 0.82rem;
  color: var(--texte-principal);
  font-weight: 500;
}

.viewer-piece-dim {
  font-size: 0.75rem;
  color: var(--texte-leger);
  font-style: italic;
  white-space: nowrap;
}

/* Tarifs */
.viewer-tarif-entete,
.viewer-tarif-ligne {
  display: grid;
  grid-template-columns: 1fr repeat(3, 38px);
  gap: 0.2rem;
  align-items: center;
  padding: 0.18rem 0;
  border-bottom: 1px solid rgba(242, 175, 188, 0.1);
  font-size: 0.78rem;
}

.viewer-tarif-entete {
  font-weight: 700;
  color: var(--rose-profond);
  border-bottom-color: rgba(242, 175, 188, 0.35);
}

.viewer-tarif-nom { color: var(--texte-principal); font-size: 0.8rem; }
.viewer-tarif-col { text-align: right; color: var(--texte-leger); font-size: 0.78rem; }

.viewer-tarif-note {
  font-size: 0.66rem;
  color: var(--texte-leger);
  margin: 0.35rem 0 0;
  font-style: italic;
  white-space: nowrap;
}

/* Packs */
.viewer-pack-ligne {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.22rem 0;
  border-bottom: 1px solid rgba(242, 175, 188, 0.12);
}

.viewer-pack-nom {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--texte-principal);
}

.viewer-pack-nom small {
  font-weight: 400;
  color: var(--texte-leger);
  font-size: 0.72rem;
  margin-left: 0.3rem;
}

.viewer-pack-prix {
  font-size: 0.75rem;
  color: var(--rose-profond);
  font-weight: 600;
}

.viewer-pack-premium .viewer-pack-nom { color: var(--rose-profond); }

/* Actions */
.viewer-actions {
  margin-top: auto;
  padding-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
}

.viewer-actions .btn { text-align: center; font-size: 0.85rem; padding: 0.6rem 1rem; }

.viewer-lien-tarifs {
  text-align: center;
  font-size: 0.78rem;
  color: var(--rose-profond);
  text-decoration: none;
  font-family: var(--font-texte);
}

.viewer-lien-tarifs:hover { text-decoration: underline; }

/* ── Tablette / petit laptop (769 – 1100px) ── */
@media (min-width: 769px) and (max-width: 1100px) {
  .viewer-layout {
    grid-template-columns: 60px 1fr 220px;
    gap: 0.75rem;
  }

  .viewer-thumb-item { width: 46px; height: 46px; }

  .viewer-tarif-entete,
  .viewer-tarif-ligne {
    grid-template-columns: 1fr repeat(3, 32px);
    font-size: 0.74rem;
  }

  .viewer-tarif-note { white-space: normal; font-size: 0.62rem; }

  .viewer-pleine-page { padding: 0.75rem 1rem 1.5rem; }

  .viewer-pleine-page .viewer-thumbs {
    height: calc(100vh - 130px);
    min-height: 320px;
  }

  .viewer-pleine-page .viewer-main {
    height: calc(100vh - 130px);
    min-height: 320px;
  }

  .viewer-packs-sous-image {
    grid-template-columns: 60px 1fr 220px;
    padding: 0 1rem;
  }

  .packs-sous-img-grille {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Responsive viewer (mobile ≤ 768px) ── */
@media (max-width: 768px) {
  .viewer-panneau { overflow-y: auto !important; }

  /* Empilement : image → miniatures → infos */
  .viewer-layout {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: unset;
    gap: 0.4rem;
  }
  .viewer-main   { order: 1; }
  .viewer-thumbs { order: 2; }
  .viewer-info   { order: 3; }

  /* Image principale — pleine largeur */
  .viewer-main {
    width: 100%;
    height: 75vw;
    min-height: 240px;
    max-height: 400px;
  }

  /* Flèches ‹ › plus grandes pour les doigts */
  .viewer-img-btn {
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
    opacity: 0.85;
  }

  /* Bande de miniatures horizontale sous l'image */
  .viewer-thumbs {
    flex-direction: row;
    height: 72px;
    width: 100%;
    overflow: visible;
  }

  /* Cacher ↑/↓ — navigation via les flèches ‹ › sur l'image */
  .viewer-nav-btn { display: none; }

  .viewer-thumb-list {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    height: 72px;
    width: 100%;
    flex: 1;
    gap: 6px;
    padding: 4px 8px;
  }
  .viewer-thumb-list::-webkit-scrollbar { display: none; }

  .viewer-thumb-item {
    width: 62px;
    height: 62px;
    flex-shrink: 0;
  }

  .viewer-info { max-height: none; }
}

/* ════════════════════════════════════════════
   ── Pages collection (pleine page) ──
   ════════════════════════════════════════════ */

.collection-page-entete {
  background: linear-gradient(135deg, var(--rose-pale) 0%, var(--blanc) 100%);
  padding: 0.9rem 0 0.7rem;
  text-align: center;
}

.collection-retour {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--rose-profond);
  text-decoration: none;
  font-size: 0.88rem;
  font-family: var(--font-texte);
  opacity: 0.75;
  margin-bottom: 0.6rem;
  transition: opacity 0.2s;
}
.collection-retour:hover { opacity: 1; }

.collection-page-entete h1 {
  font-family: var(--font-titre);
  font-size: 2.2rem;
  color: var(--rose-profond);
  font-style: italic;
  margin: 0 0 0.25rem;
}

.collection-page-entete .separateur { margin: 0.4rem auto 0; }

.viewer-pleine-page {
  padding: 0.5rem 1.25rem 1rem;
  max-width: 1400px;
  margin: 0 auto;
}

.viewer-pleine-page .viewer-layout {
  height: auto;
  min-height: unset;
  align-items: start;
}

/* Colonnes image + miniatures : restent visibles pendant le défilement */
.viewer-pleine-page .viewer-thumbs {
  position: sticky;
  top: 70px;
  height: calc(100vh - 140px);
  min-height: 400px;
  overflow: hidden;
}

.viewer-pleine-page .viewer-main {
  position: sticky;
  top: 70px;
  height: calc(100vh - 140px);
  min-height: 400px;
}

/* Panneau info : hauteur libre, tout visible sans scroll */
.viewer-pleine-page .viewer-info {
  overflow: visible;
  height: auto;
  min-height: 0;
  scrollbar-width: none;
}

.viewer-pleine-page .viewer-info::-webkit-scrollbar { display: none; }

.plus-modeles-section {
  background: var(--fond-clair);
  padding: 1.75rem 1.5rem;
  text-align: center;
}

.plus-modeles-section .section-titre {
  margin-bottom: 1.25rem;
}

.plus-modeles-liens {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

@media (max-width: 768px) {
  .collection-page-entete { padding: 1rem 0 0.9rem; }
  .collection-page-entete h1 { font-size: 1.7rem; }

  .viewer-pleine-page { padding: 0.4rem 0.5rem 1rem; }
  .viewer-pleine-page .viewer-layout { height: auto; min-height: unset; }

  /* Reset sticky — tout défile naturellement */
  .viewer-pleine-page .viewer-thumbs {
    position: static;
    height: 72px;
    min-height: unset;
    overflow: visible;
  }
  .viewer-pleine-page .viewer-main {
    position: static;
    height: 75vw;
    max-height: 400px;
    min-height: 240px;
  }
  .viewer-pleine-page .viewer-info {
    padding: 0.75rem 1.25rem 1rem;
    text-align: center;
  }

  /* Grille tarifs et liste pièces : texte gauche, bloc centré sur la page */
  .viewer-pleine-page .viewer-tarif-entete,
  .viewer-pleine-page .viewer-tarif-ligne,
  .viewer-pleine-page .viewer-pieces-liste,
  .viewer-pleine-page .viewer-section-label {
    text-align: left;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }

  .viewer-tarif-note { white-space: normal; }

  .plus-modeles-section { padding: 2rem 1rem; }
  .plus-modeles-liens {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
  }
  .plus-modeles-liens .btn {
    width: 100%;
    max-width: 320px;
    text-align: center;
  }
}

/* ── Packs sous la photo (mariage) ── */
.viewer-packs-sous-image {
  display: grid;
  grid-template-columns: 78px 1fr clamp(260px, 26%, 310px);
  gap: 0.75rem;
  padding: 0 1.25rem;
  max-width: 1400px;
  margin: 0.5rem auto 0;
}

.viewer-packs-contenu {
  grid-column: 2;
  background: var(--fond-clair);
  border-radius: var(--rayon);
  padding: 0.75rem 1rem 1rem;
}

.packs-legende-gammes {
  font-style: italic;
  font-size: 0.68rem;
  color: var(--texte-leger);
  white-space: nowrap;
}

.packs-sous-img-grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.pack-sous-img-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--blanc);
  border: 1px solid rgba(242, 175, 188, 0.3);
  border-radius: 8px;
  padding: 0.5rem 0.65rem 0.6rem;
}

.pack-sous-img-premium {
  border-color: var(--rose-poudre);
  background: linear-gradient(135deg, rgba(242, 175, 188, 0.08) 0%, var(--blanc) 100%);
}

.pack-sous-img-nom {
  font-family: var(--font-texte);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--rose-profond);
  letter-spacing: 0.04em;
  margin-bottom: 0.1rem;
}

.pack-sous-img-contenu {
  font-size: 0.7rem;
  color: var(--texte-leger);
  line-height: 1.3;
  margin-bottom: 0.35rem;
}

.pack-sous-img-prix {
  font-size: 0.78rem;
  color: var(--texte-principal);
  font-family: var(--font-texte);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
}

.pack-sous-img-prix span {
  color: var(--rose-poudre);
  font-size: 0.65rem;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .viewer-packs-sous-image {
    grid-template-columns: 1fr;
    padding: 0 0.75rem;
    margin-top: 0.75rem;
  }
  .viewer-packs-contenu {
    grid-column: 1;
    padding: 0.75rem 0.9rem 1rem;
  }
  .packs-sous-img-grille { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .packs-legende-gammes { white-space: normal; }
}

@media (max-width: 400px) {
  .packs-sous-img-grille { grid-template-columns: 1fr; }
  .viewer-tarif-entete,
  .viewer-tarif-ligne { grid-template-columns: 1fr repeat(3, auto); }
}

/* ============================================================
   RESPONSIVE — Petit mobile (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {

  /* Boutons plus compacts */
  .btn { padding: 0.72rem 1.5rem; font-size: 0.74rem; }

  /* Hero */
  .hero { padding: 1.5rem 0 2rem; }
  .hero h1 { font-size: 2rem; }
  .hero-accroche { font-size: 0.95rem; margin-bottom: 1.75rem; }
  .hero-boutons { gap: 0.6rem; }
  .hero-boutons .btn { width: 100%; text-align: center; }

  /* Sections */
  section { padding: 2rem 0; }
  .container { padding: 0 1rem; }
  .section-cta { padding: 2.5rem 1rem; }

  /* Catégories */
  .categories-grille, .options-commande { grid-template-columns: 1fr; }
  .carte-categorie { padding: 1.5rem 1rem 1.25rem; }

  /* Packs */
  .pack-card-header { padding: 0.6rem 0.75rem; }
  .pack-nom { font-size: 0.85rem; }
  .pack-contenu { font-size: 0.72rem; }
  .pack-prix-grille { gap: 0.2rem; }
  .pack-prix-col { padding: 0.4rem 0.25rem; }
  .pack-barre { font-size: 0.75rem; }
  .pack-reduit { font-size: 0.9rem; }
  .pack-formule { font-size: 0.62rem; margin-bottom: 0.1rem; }

  /* Table tarifs */
  .prix-table { font-size: 0.73rem; }
  .prix-table th, .prix-table td { padding: 0.4rem 0.3rem; }

  /* Page header */
  .page-header { padding: 1.5rem 1rem; }
  .page-header h1 { font-size: 1.7rem; }

  /* Collection cartes */
  .collections-grille { gap: 0.6rem; }
  .collection-info { padding: 0.5rem 0.75rem; }
  .collection-nom { font-size: 0.82rem; }
  .collection-nb-pieces { font-size: 0.68rem; }

  /* Formulaire contact */
  .formulaire { padding: 1.25rem 0.9rem; }
  .champ-groupe input,
  .champ-groupe textarea,
  .champ-groupe select { font-size: 0.88rem; padding: 0.65rem 0.9rem; }

  /* Section CTA */
  .section-cta .citation { font-size: 1.2rem; }

  /* Aperçu accueil */
  .apercu-chip { font-size: 0.7rem; padding: 0.35rem 0.8rem; }

  /* Naissance chemins */
  .naissance-chemins { gap: 1rem; flex-direction: column; }
  .naissance-chemin { padding: 1.25rem 1rem; }

  /* Viewer */
  .viewer-pleine-page { padding: 0.25rem 0.5rem 1rem; }
  .viewer-info-titre { font-size: 1.2rem; }
  .viewer-actions .btn { font-size: 0.78rem; padding: 0.65rem 0.9rem; }
}

/* ============================================================
   MODE VITRINE — MASQUAGE DES ÉLÉMENTS COMMERCIAUX
   Le projet n'a pas abouti. Ce site est en mode présentation.

   Pour réactiver : supprimer ce bloc entier, de ce commentaire
   jusqu'à la balise "FIN MODE VITRINE" incluse.
   ============================================================ */

/* Lien Tarifs dans la navigation principale */
.nav-liens li:has(> a[href="tarifs.html"]),
.nav-liens li:has(> a[href="pages/tarifs.html"]) {
  display: none !important;
}

/* Lien Tarifs dans le pied de page */
.footer-liens li:has(> a[href="tarifs.html"]) {
  display: none !important;
}

/* Sections tarifs dans les visionneuses de collections */
.viewer-tarif-entete,
.viewer-tarif-ligne,
.viewer-tarif-note,
.viewer-pack-ligne,
.viewer-lien-tarifs,
.viewer-section-label:has(+ .viewer-tarif-entete),
.viewer-section-label:has(+ .viewer-pack-ligne) {
  display: none !important;
}

/* Boutons "Commander ce modèle" (liens avec ?modele= dans l'URL) */
a[href*="contact.html?modele="] {
  display: none !important;
}

/* Modales de packs avec tarifs (mariage, naissance) */
#modal-packs-mariage,
#modal-packs-naissance {
  display: none !important;
}

/* Section "Comment commander ?" sur la page d'accueil */
#section-commander {
  display: none !important;
}

/* Page Personnalisation : note de prix et bouton vers les tarifs */
.perso-note,
a[href="tarifs.html"].btn,
a[href="tarifs.html"].lien-tarifs {
  display: none !important;
}

/* Page Contact — masquage complet */
.nav-liens li:has(> a[href="contact.html"]),
.nav-liens li:has(> a[href="pages/contact.html"]),
.footer-liens li:has(> a[href="contact.html"]) {
  display: none !important;
}
a.btn[href="contact.html"],
a.btn[href="pages/contact.html"] {
  display: none !important;
}
#bloc-formulaire {
  display: none !important;
}

/* Page Contact : citation et détail "sur commande" */
.contact-citation,
.contact-detail-commande {
  display: none !important;
}

/* Éléments marqués manuellement pour le mode vitrine */
.vitrine-masque {
  display: none !important;
}

/* ============================================================
   FIN MODE VITRINE
   ============================================================ */
}