/* ===================================================
   SAMOSSA LONS — Styles des pages internes
   Complément à style.min.css : règles manquantes pour
   les blocs utilisés dans le contenu des pages
   (cartes produits pleine largeur, événements, contact,
   livraison, histoire, hubs, simulateur, articles blog).
   =================================================== */

/* ---------------------------------------------------
   0-bis. Correctifs de contraste (lisibilité)
   --------------------------------------------------- */

/* `.subtitle` est défini en #7C5200 (or foncé) : illisible sur les
   fonds sombres des bannières et du bandeau CTA rouge. */
.hero .subtitle,
.page-banner .subtitle,
.page-hero .subtitle,
.cta-banner .subtitle,
.contact-hero-card .subtitle {
  color: var(--or-clair);
}

/* `.breadcrumb` est défini en blanc translucide : correct dans une
   bannière sombre, invisible dans une section claire (articles blog). */
.breadcrumb { color: var(--texte-clair); }
.breadcrumb a { color: var(--rouge); }
.breadcrumb a:hover { text-decoration: underline; }

.hero .breadcrumb,
.page-banner .breadcrumb,
.page-hero .breadcrumb,
.cta-banner .breadcrumb { color: rgba(255,255,255,0.65); }

.hero .breadcrumb a,
.page-banner .breadcrumb a,
.page-hero .breadcrumb a,
.cta-banner .breadcrumb a { color: var(--or-clair); }

/* Les titres héritent de la couleur quand un conteneur impose du texte
   clair en inline (h1-h4 sont forcés en var(--brun) par le thème). */
[style*="color:#fff"] h1, [style*="color:#fff"] h2,
[style*="color:#fff"] h3, [style*="color:#fff"] h4,
[style*="color:#FFF"] h1, [style*="color:#FFF"] h2,
[style*="color:#FFF"] h3, [style*="color:#FFF"] h4,
[style*="color:#ffffff"] h1, [style*="color:#ffffff"] h2,
[style*="color:#ffffff"] h3, [style*="color:#ffffff"] h4,
[style*="color:rgba(255,255,255"] h1, [style*="color:rgba(255,255,255"] h2,
[style*="color:rgba(255,255,255"] h3, [style*="color:rgba(255,255,255"] h4,
[style*="color:var(--blanc)"] h1, [style*="color:var(--blanc)"] h2,
[style*="color:var(--blanc)"] h3, [style*="color:var(--blanc)"] h4 {
  color: inherit;
}

/* Or vif sur beige clair : ratio ~2:1. On descend d'un cran en or foncé. */
.highlight-text,
.story-text .highlight-text { color: #7C5200; }

/* Boutons WhatsApp : le vert de marque #25D366 ne donne que 1.98:1 avec du
   texte blanc. On passe sur le vert foncé WhatsApp #075E54 (7.7:1) et on
   garde le teal #128C7E pour le survol. */
.btn-whatsapp {
  background: #075E54;
  color: var(--blanc);
}

.btn-whatsapp:hover {
  background: #128C7E;
  box-shadow: 0 6px 20px rgba(7,94,84,0.45);
}

.whatsapp-float {
  background: #075E54;
  box-shadow: 0 4px 20px rgba(7,94,84,0.5);
}

.whatsapp-float:hover { box-shadow: 0 6px 28px rgba(7,94,84,0.6); }

/* Barre de commande mobile : même vert, texte passé en blanc */
.mob-btn-wa { background: #075E54; color: var(--blanc); }
.mob-btn-wa:active { background: #128C7E; }

/* `.btn-secondary` est un bouton fantôme blanc (pensé pour les bandeaux
   sombres .cta-banner / .hero). Dans une section claire il disparaît. */
.section .btn-secondary {
  color: var(--brun);
  border-color: var(--brun);
}

.section .btn-secondary:hover {
  background: var(--brun);
  color: var(--blanc);
}

/* Badge produit repeint en vert via un style inline : texte brun illisible */
.product-card-badge[style*="var(--vert)"],
.product-card-badge[style*="--vert)"] { color: var(--blanc); }

/* ---------------------------------------------------
   0. Utilitaires génériques manquants
   --------------------------------------------------- */

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2.5rem;
  align-items: start;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.75rem;
}

.card {
  background: var(--blanc);
  border-radius: var(--radius);
  box-shadow: var(--ombre);
  padding: 1.75rem;
  transition: var(--transition);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-lg);
}

.card h3,
.card h4 {
  color: var(--brun);
  margin-bottom: 0.6rem;
}

.card p { color: var(--texte-clair); font-size: 0.97rem; }
.card p:not(:last-child) { margin-bottom: 0.75rem; }

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

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

.section-tag {
  display: inline-block;
  background: var(--or-clair);
  color: #7C5200;
  padding: 0.3rem 0.9rem;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
}

.btn-sm {
  padding: 0.5rem 1.1rem;
  font-size: 0.88rem;
}

/* Hero des pages ville (variante de .page-banner) */
.page-hero {
  min-height: 38vh;
  display: flex;
  align-items: flex-end;
  padding: 3rem 0 3rem;
  background: linear-gradient(135deg, var(--vert-fonce) 0%, #1A3A2A 60%, #2D1500 100%);
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 70%, rgba(230,145,10,0.15) 0%, transparent 60%);
}

.page-hero > .container { position: relative; z-index: 2; }
.page-hero h1 { color: var(--blanc); }
.page-hero p  { color: rgba(255,255,255,0.85); }
.page-hero .breadcrumb,
.page-hero .breadcrumb a { color: rgba(255,255,255,0.7); }

/* Colonne texte des blocs "story" */
.story-text > h2,
.story-text > h3 { margin-bottom: 1rem; }
.story-text p { color: var(--texte-clair); margin-bottom: 1rem; }
.story-text p:last-child { margin-bottom: 0; }

.value-text h4 { color: var(--brun); margin-bottom: 0.25rem; }
.value-text p  { color: var(--texte-clair); font-size: 0.95rem; }

/* Badge des pages prestation */
.badge-prestation {
  display: inline-block;
  background: var(--vert-clair);
  color: var(--vert-fonce);
  border: 1px solid rgba(45,106,79,0.25);
  padding: 0.35rem 0.9rem;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0.25rem 0.35rem 0.25rem 0;
  transition: var(--transition);
}

a.badge-prestation:hover {
  background: var(--vert);
  color: var(--blanc);
  transform: translateY(-2px);
}

/* ---------------------------------------------------
   1. Page "Nos samossas" — cartes produit pleine largeur
   --------------------------------------------------- */

.product-card-full {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  background: var(--blanc);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--ombre);
  margin-bottom: 2.5rem;
  transition: var(--transition);
}

.product-card-full:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-lg);
}

.product-card-full:hover .product-card-img img { transform: scale(1.05); }

/* neutralise le height:200px de la carte compacte */
.product-card-full .product-card-img {
  height: auto;
  min-height: 260px;
}

.product-card-full-body {
  padding: 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.product-card-full-body h3 {
  color: var(--brun);
  margin: 0;
}

.product-card-full-body > p {
  color: var(--texte-clair);
  font-size: 0.98rem;
  margin: 0;
}

.flavor-tag {
  display: inline-block;
  padding: 0.22rem 0.75rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0.4rem 0.4rem 0;
}

.flavor-tag.gasy      { background: var(--vert-clair);  color: var(--vert-fonce); }
.flavor-tag.populaire { background: var(--or-clair);    color: #7C5200; }
.flavor-tag.epice     { background: var(--rouge-clair); color: var(--rouge-fonce); }
.flavor-tag.doux      { background: var(--brun-clair);  color: var(--brun); }

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

.ingredient-chip {
  background: var(--gris);
  color: var(--texte-clair);
  border-radius: 50px;
  padding: 0.28rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.product-card-full-footer {
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--gris);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.custom-order-box {
  background: linear-gradient(135deg, var(--or-pale) 0%, var(--brun-clair) 100%);
  border: 2px dashed rgba(230,145,10,0.55);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  text-align: center;
  margin-top: 1rem;
}

.custom-order-box h3 { color: var(--brun); margin: 0.5rem 0 0.75rem; }

.custom-order-box p {
  color: var(--texte-clair);
  max-width: 620px;
  margin: 0 auto 1.5rem;
}

/* ---------------------------------------------------
   2. Page "Événements"
   --------------------------------------------------- */

.event-detail-card {
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  background: var(--blanc);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--ombre);
  margin-bottom: 2.5rem;
  transition: var(--transition);
}

.event-detail-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-lg);
}

.event-detail-visual {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4.5rem;
}

.event-detail-body {
  padding: 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.event-detail-body h3 { color: var(--brun); margin: 0; }
.event-detail-body > p { color: var(--texte-clair); margin: 0; }

.event-tag {
  align-self: flex-start;
  background: var(--rouge-clair);
  color: var(--rouge-fonce);
  padding: 0.25rem 0.85rem;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.event-includes { display: grid; gap: 0.5rem; }

.event-includes li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--texte-clair);
  font-size: 0.95rem;
}

.event-includes li::before {
  content: '✔';
  position: absolute;
  left: 0;
  color: var(--vert);
  font-weight: 700;
}

/* Formules */
.formule-card {
  position: relative;
  background: var(--blanc);
  border-radius: var(--radius-lg);
  box-shadow: var(--ombre);
  padding: 2rem 1.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}

.formule-card:hover { transform: translateY(-6px); box-shadow: var(--ombre-lg); }

.formule-card.featured {
  border: 2px solid var(--rouge);
  box-shadow: 0 10px 40px rgba(198,40,40,0.18);
}

.formule-badge {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--rouge);
  color: var(--blanc);
  padding: 0.25rem 1rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

.formule-icon { font-size: 2.75rem; line-height: 1; margin-bottom: 0.5rem; }

.formule-price {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--rouge);
  margin: 0.35rem 0 1rem;
}

.formule-price span {
  display: block;
  font-family: 'Nunito', sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--texte-clair);
}

.formule-features {
  display: grid;
  gap: 0.55rem;
  text-align: left;
  margin-bottom: 1.5rem;
  flex: 1;
}

.formule-features li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--texte-clair);
  font-size: 0.93rem;
}

.formule-features li::before {
  content: '•';
  position: absolute;
  left: 0.35rem;
  color: var(--or);
  font-weight: 800;
}

/* Process en timeline verticale */
.process-timeline { max-width: 780px; margin: 0 auto; }

.process-step { display: grid; grid-template-columns: 64px 1fr; gap: 1.5rem; }

.process-step-left {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.process-num {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--rouge);
  color: var(--blanc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(198,40,40,0.3);
}

.process-line {
  flex: 1;
  width: 2px;
  min-height: 40px;
  background: linear-gradient(to bottom, var(--rouge-clair), transparent);
  margin: 0.5rem 0;
}

.process-content { padding-bottom: 2rem; }
.process-content h3 { color: var(--brun); margin-bottom: 0.5rem; }
.process-content p  { color: var(--texte-clair); }

/* ---------------------------------------------------
   3. Page "Contact"
   --------------------------------------------------- */

.contact-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

/* Carte sombre : le contenu de la page fixe en inline du texte blanc
   (color:rgba(255,255,255,…)), le fond doit donc rester foncé. */
.contact-hero-card {
  background: linear-gradient(135deg, var(--vert-fonce) 0%, #1A3A2A 60%, #2D1500 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--ombre-lg);
  padding: 2.25rem;
  color: rgba(255,255,255,0.85);
}

.contact-hero-card h2,
.contact-hero-card h3,
.contact-hero-card h4 { color: var(--blanc); margin-bottom: 1rem; }
.contact-hero-card > p { color: rgba(255,255,255,0.8); margin-bottom: 1.5rem; }

.contact-method {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.contact-method:last-of-type { border-bottom: none; }

.cm-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.cm-icon.phone { background: var(--rouge-clair); }
.cm-icon.wa    { background: rgba(37,211,102,0.18); }

.cm-text { flex: 1; min-width: 0; }
.cm-text h4 { color: var(--blanc); margin-bottom: 0.15rem; }
.cm-text p  { color: rgba(255,255,255,0.72); font-size: 0.9rem; }

.cm-badge {
  flex-shrink: 0;
  background: var(--or-clair);
  color: #7C5200;
  padding: 0.22rem 0.7rem;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* Le fond/couleur sont posés en inline dans le contenu (blanc translucide) */
.anti-spam-note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1.5rem;
  background: rgba(255,255,255,0.1);
  border-left: 3px solid var(--or);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.75);
}

.contact-actions { display: grid; gap: 1.5rem; }

.contact-action-card {
  position: relative;
  background: var(--blanc);
  border-radius: var(--radius-lg);
  box-shadow: var(--ombre);
  padding: 2rem 1.75rem;
  text-align: center;
  transition: var(--transition);
}

.contact-action-card:hover { transform: translateY(-4px); box-shadow: var(--ombre-lg); }
.contact-action-card h3 { color: var(--brun); margin: 0.5rem 0 0.5rem; }
.contact-action-card p  { color: var(--texte-clair); font-size: 0.93rem; margin-bottom: 1.25rem; }

.contact-action-card.phone-card { border-top: 4px solid var(--rouge); }
.contact-action-card.wa-card    { border-top: 4px solid #25D366; }

.ca-icon { font-size: 2.5rem; line-height: 1; display: block; }

.preference-badge {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--or);
  color: var(--brun);
  padding: 0.22rem 0.9rem;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Conseils de commande */
.order-tips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.tip-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--blanc);
  border-radius: var(--radius);
  box-shadow: var(--ombre);
  padding: 1.25rem;
}

.tip-icon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
.tip-text h4 { color: var(--brun); margin-bottom: 0.2rem; font-size: 1rem; }
.tip-text p  { color: var(--texte-clair); font-size: 0.9rem; }

/* Zone de livraison — carte sombre elle aussi (texte blanc en inline) */
.zone-map {
  background: linear-gradient(135deg, var(--vert-fonce) 0%, #24503C 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--ombre-lg);
  padding: 2rem;
  text-align: center;
  color: rgba(255,255,255,0.85);
}

.zone-map h3 { color: var(--blanc); margin-bottom: 0.75rem; }
.zone-map > p { color: rgba(255,255,255,0.78); margin-bottom: 1.25rem; }

.zone-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}

.zone-chip {
  background: var(--vert-clair);
  color: var(--vert-fonce);
  border-radius: 50px;
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
}

/* ---------------------------------------------------
   4. Page "Livraison Jura" — grille des villes
   --------------------------------------------------- */

.ville-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.ville-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--blanc);
  border-radius: var(--radius);
  box-shadow: var(--ombre);
  padding: 1.35rem 1.25rem;
  transition: var(--transition);
}

a.ville-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-lg);
  border-color: var(--or);
}

.ville-card.chef-lieu {
  border: 2px solid var(--or);
  background: linear-gradient(135deg, var(--blanc) 0%, var(--or-pale) 100%);
}

.chef-badge {
  position: absolute;
  top: -0.7rem;
  right: 1rem;
  background: var(--or);
  color: var(--brun);
  padding: 0.18rem 0.7rem;
  border-radius: 50px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ville-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.ville-card-header h3,
.ville-card-header h4 { color: var(--brun); font-size: 1.05rem; margin: 0; }

.ville-distance {
  flex-shrink: 0;
  color: var(--texte-clair);
  font-size: 0.82rem;
  font-weight: 600;
}

.ville-card p { color: var(--texte-clair); font-size: 0.9rem; }

.ville-card-footer {
  margin-top: auto;
  padding-top: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-top: 1px solid var(--gris);
}

.cp {
  background: var(--gris);
  color: var(--texte-clair);
  border-radius: 50px;
  padding: 0.15rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
}

.ville-link { color: var(--rouge); font-size: 0.85rem; font-weight: 700; }
a.ville-card:hover .ville-link { text-decoration: underline; }

.communes-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 3rem;
}

.communes-list li {
  background: var(--blanc);
  border: 1px solid var(--gris);
  border-radius: 50px;
  padding: 0.28rem 0.85rem;
  font-size: 0.85rem;
  color: var(--texte-clair);
}

/* ---------------------------------------------------
   5. Page "Livraison & tarifs" — zones
   --------------------------------------------------- */

.zone-highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.zone-highlight-card {
  background: var(--blanc);
  border-radius: var(--radius-lg);
  box-shadow: var(--ombre);
  padding: 1.75rem 1.25rem;
  text-align: center;
  transition: var(--transition);
}

.zone-highlight-card:hover { transform: translateY(-4px); box-shadow: var(--ombre-lg); }

.zhc-icon     { font-size: 2.25rem; line-height: 1; margin-bottom: 0.5rem; }
.zhc-zone     { font-weight: 800; color: var(--brun); font-size: 1.05rem; }
.zhc-distance { color: var(--texte-clair); font-size: 0.86rem; margin: 0.2rem 0 0.6rem; }

.zhc-price {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--rouge);
}

.zone-map-wrap {
  background: var(--blanc);
  border-radius: var(--radius-lg);
  box-shadow: var(--ombre);
  padding: 2rem;
}

.zone-svg-container {
  max-width: 560px;
  margin: 0 auto 1.5rem;
}

.zone-svg-container svg { width: 100%; height: auto; display: block; }

.zone-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  justify-content: center;
}

.zone-legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--texte-clair);
}

.zone-legend-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

.zone-table-wrap {
  background: var(--blanc);
  border-radius: var(--radius-lg);
  box-shadow: var(--ombre);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.zone-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}

.zone-table th {
  background: var(--brun);
  color: var(--blanc);
  text-align: left;
  padding: 1rem 1.25rem;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.zone-table td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--gris);
  font-size: 0.94rem;
  color: var(--texte-clair);
  vertical-align: middle;
}

.zone-table tr:last-child td { border-bottom: none; }

.zone-badge-cell { display: flex; align-items: center; gap: 0.65rem; }

.zone-color-badge {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

.zone-name  { font-weight: 700; color: var(--brun); }
.zone-frais { font-weight: 800; color: var(--rouge); white-space: nowrap; }
.zone-frais.gratuit { color: var(--vert); }
.zone-communes { font-size: 0.9rem; }

.zone-note-row td {
  background: var(--or-pale);
  font-size: 0.86rem;
  font-style: italic;
}

/* Retrait sur place */
.pickup-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
  background: var(--blanc);
  border-radius: var(--radius-lg);
  box-shadow: var(--ombre);
  padding: 2.25rem;
  margin-bottom: 3rem;
}

.pickup-content h2,
.pickup-content h3 { color: var(--brun); margin-bottom: 0.75rem; }
.pickup-content > p { color: var(--texte-clair); margin-bottom: 1.25rem; }

.pickup-advantages { display: grid; gap: 0.5rem; margin-bottom: 1.5rem; }

.pickup-advantages li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--texte-clair);
  font-size: 0.95rem;
}

.pickup-advantages li::before {
  content: '✔';
  position: absolute;
  left: 0;
  color: var(--vert);
  font-weight: 700;
}

.pickup-cta { display: flex; flex-wrap: wrap; gap: 1rem; }

.pickup-badge-gratuit {
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--vert), var(--vert-fonce));
  color: var(--blanc);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 800;
  box-shadow: 0 8px 26px rgba(45,106,79,0.35);
}

.pb-label {
  display: block;
  font-family: 'Nunito', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.9;
}

/* Icône des questions FAQ de cette page */
.fq-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--or-clair);
  color: var(--or);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  transition: var(--transition);
}

.faq-question.open .fq-icon {
  background: var(--rouge-clair);
  color: var(--rouge);
  transform: rotate(180deg);
}

/* ---------------------------------------------------
   6. Page "Notre histoire"
   --------------------------------------------------- */

.quote-block {
  position: relative;
  background: linear-gradient(135deg, var(--or-pale) 0%, var(--brun-clair) 100%);
  border-left: 5px solid var(--or);
  border-radius: var(--radius);
  padding: 2rem 2.25rem;
  margin: 2.5rem auto;
  max-width: 820px;
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-style: italic;
  color: var(--brun);
  line-height: 1.6;
}

.quote-author {
  display: block;
  margin-top: 1rem;
  font-family: 'Dancing Script', cursive;
  font-style: normal;
  font-size: 1.25rem;
  color: #7C5200;
}

.madagascar-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}

.fact-card {
  background: var(--blanc);
  border-radius: var(--radius);
  box-shadow: var(--ombre);
  padding: 1.75rem 1.25rem;
  text-align: center;
  transition: var(--transition);
}

.fact-card:hover { transform: translateY(-4px); box-shadow: var(--ombre-lg); }

.fact-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--rouge);
  margin-bottom: 0.35rem;
}

.fact-card p { color: var(--texte-clair); font-size: 0.92rem; }

.spice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}

.spice-item {
  background: var(--blanc);
  border-radius: var(--radius);
  box-shadow: var(--ombre);
  padding: 1.5rem 1.25rem;
  text-align: center;
  transition: var(--transition);
}

.spice-item:hover { transform: translateY(-4px); box-shadow: var(--ombre-lg); }
.spice-item h4 { color: var(--brun); margin: 0.5rem 0 0.35rem; }
.spice-item p  { color: var(--texte-clair); font-size: 0.9rem; }

.timeline {
  position: relative;
  max-width: 760px;
  margin: 2.5rem auto 0;
  padding-left: 2rem;
  border-left: 3px solid var(--or-clair);
}

.timeline-item { position: relative; padding-bottom: 2.25rem; }
.timeline-item:last-child { padding-bottom: 0; }

.timeline-item::before {
  content: '';
  position: absolute;
  left: calc(-2rem - 9px);
  top: 0.45rem;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--or);
  border: 3px solid var(--creme);
  box-shadow: 0 0 0 2px var(--or-clair);
}

.timeline-date {
  display: block;
  font-family: 'Dancing Script', cursive;
  font-size: 1.2rem;
  color: #7C5200;
  margin-bottom: 0.2rem;
}

.timeline-item h4 { color: var(--brun); margin-bottom: 0.35rem; }
.timeline-item p  { color: var(--texte-clair); font-size: 0.96rem; }

/* ---------------------------------------------------
   7. Hubs (pages-seo, prestations)
   --------------------------------------------------- */

.hub-stats,
.hub-stat-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.hub-stat {
  background: var(--blanc);
  border-radius: var(--radius);
  box-shadow: var(--ombre);
  padding: 1.25rem 1rem;
  text-align: center;
}

.hub-stat-val,
.hub-stat-number {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--rouge);
  line-height: 1.2;
}

.hub-stat-label {
  display: block;
  color: var(--texte-clair);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hub-search {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--blanc);
  border: 1px solid var(--gris);
  border-radius: 50px;
  box-shadow: var(--ombre);
  padding: 0.7rem 1.25rem;
  max-width: 520px;
  margin: 0 auto 2.5rem;
  color: var(--texte-clair);
}

.hub-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-family: 'Nunito', sans-serif;
  font-size: 0.95rem;
  color: var(--texte);
}

.hub-section { margin-bottom: 3rem; }

.hub-section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
  border-bottom: 2px solid var(--or-clair);
}

.hub-section-header h2 {
  flex: 1;
  min-width: 0;
  font-size: 1.3rem;
  margin: 0;
  text-align: left;
}

.hub-section-icon { font-size: 1.5rem; line-height: 1; }

.hub-section-header .count {
  flex-shrink: 0;
  background: var(--gris);
  color: var(--texte-clair);
  border-radius: 50px;
  padding: 0.2rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
}

.pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.pill {
  display: inline-block;
  background: var(--blanc);
  border: 1px solid var(--gris);
  border-radius: 50px;
  padding: 0.35rem 0.9rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--texte-clair);
  transition: var(--transition);
}

.pill:hover { transform: translateY(-2px); box-shadow: var(--ombre); }

.pill-ville:hover   { border-color: var(--vert);  color: var(--vert-fonce); }
.pill-produit:hover { border-color: var(--rouge); color: var(--rouge-fonce); }
.pill-event:hover   { border-color: var(--or);    color: #7C5200; }
.pill-prest:hover   { border-color: var(--brun);  color: var(--brun); }
.pill-gloss:hover   { border-color: #3050A0;      color: #1A2A5E; }

.event-group { margin-bottom: 1.5rem; }

.event-group-title {
  font-weight: 800;
  color: var(--brun);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}

.hub-intro-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.hub-badge {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(230,145,10,0.4);
  color: var(--blanc);
  border-radius: 50px;
  padding: 0.3rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

.prestations-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
}

.prestation-hub-card {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border-radius: var(--radius-lg);
  box-shadow: var(--ombre);
  overflow: hidden;
  transition: var(--transition);
}

.prestation-hub-card:hover { transform: translateY(-6px); box-shadow: var(--ombre-lg); }

.prestation-hub-card-header {
  background: linear-gradient(135deg, var(--vert-fonce), var(--vert));
  color: var(--blanc);
  padding: 1.5rem;
  font-size: 2.25rem;
  text-align: center;
}

.prestation-hub-card-body { padding: 1.5rem; flex: 1; }
.prestation-hub-card-body h3 { color: var(--brun); margin-bottom: 0.5rem; font-size: 1.1rem; }
.prestation-hub-card-body p  { color: var(--texte-clair); font-size: 0.93rem; }

.prestation-hub-card-footer {
  padding: 1rem 1.5rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--gris);
}

.prestation-hub-card-tag {
  background: var(--or-clair);
  color: #7C5200;
  border-radius: 50px;
  padding: 0.2rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 700;
}

.prestation-hub-card-link { color: var(--rouge); font-weight: 700; font-size: 0.88rem; }
.prestation-hub-card:hover .prestation-hub-card-link { text-decoration: underline; }

/* ---------------------------------------------------
   8. Simulateur de commande (wizard)
   --------------------------------------------------- */

.simulator-wrap { max-width: 760px; margin: 0 auto; }

.sim-intro-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(135deg, var(--or-pale) 0%, var(--brun-clair) 100%);
  border-radius: var(--radius);
  padding: 1.1rem 1.35rem;
  margin-bottom: 2rem;
  color: var(--texte-clair);
  font-size: 0.95rem;
}

.sib-icon { font-size: 1.75rem; line-height: 1; flex-shrink: 0; }

.wizard-progress {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 2rem;
}

.wizard-step-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.wizard-step-dot .dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gris);
  color: var(--texte-clair);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  transition: var(--transition);
}

.wizard-step-dot.active .dot,
.wizard-step-dot.done .dot {
  background: var(--rouge);
  color: var(--blanc);
  box-shadow: 0 4px 14px rgba(198,40,40,0.3);
}

.dot-label {
  font-size: 0.75rem;
  color: var(--texte-clair);
  text-align: center;
  max-width: 90px;
}

.wizard-step-dot.active .dot-label { color: var(--rouge); font-weight: 700; }

.wizard-connector {
  flex: 1;
  max-width: 70px;
  height: 3px;
  background: var(--gris);
  border-radius: 3px;
  margin: 17px 0.4rem 0;
}

.sim-card {
  background: var(--blanc);
  border-radius: var(--radius-lg);
  box-shadow: var(--ombre);
  padding: 2rem;
}

.sim-card-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--brun);
  margin-bottom: 0.35rem;
}

.sim-card-subtitle { color: var(--texte-clair); font-size: 0.93rem; margin-bottom: 1.5rem; }

.sim-hidden { display: none; }

.event-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

.event-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  background: var(--blanc);
  border: 2px solid var(--gris);
  border-radius: var(--radius);
  padding: 1.25rem 0.9rem;
  cursor: pointer;
  text-align: center;
  font-family: 'Nunito', sans-serif;
  transition: var(--transition);
}

.event-type-btn:hover { border-color: var(--or); transform: translateY(-3px); }

.event-type-btn.selected {
  border-color: var(--rouge);
  background: var(--or-pale);
  box-shadow: 0 6px 20px rgba(198,40,40,0.15);
}

.et-icon  { font-size: 1.9rem; line-height: 1; }
.et-label { font-weight: 800; color: var(--brun); }
.et-desc  { font-size: 0.8rem; color: var(--texte-clair); }

.error-msg {
  display: none;
  margin-top: 1rem;
  background: var(--rouge-clair);
  color: var(--rouge-fonce);
  border-radius: var(--radius);
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.error-msg.visible { display: block; }

.wizard-nav {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 1.75rem;
}

.btn-wizard-next,
.btn-wizard-prev,
.btn-restart {
  border: none;
  border-radius: 50px;
  padding: 0.85rem 2rem;
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.btn-wizard-next { background: var(--rouge); color: var(--blanc); margin-left: auto; }
.btn-wizard-next:hover { background: var(--rouge-fonce); transform: translateY(-2px); }

.btn-wizard-prev { background: var(--gris); color: var(--texte-clair); }
.btn-wizard-prev:hover { background: var(--brun-clair); }

.btn-restart { background: var(--vert); color: var(--blanc); }
.btn-restart:hover { background: var(--vert-fonce); transform: translateY(-2px); }

.slider-wrap { margin-bottom: 1.5rem; }

.slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.slider-label { font-weight: 700; color: var(--brun); }

.slider-value-input { display: flex; align-items: center; gap: 0.4rem; }

.slider-value-input input {
  width: 84px;
  border: 2px solid var(--gris);
  border-radius: var(--radius);
  padding: 0.4rem 0.6rem;
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  color: var(--brun);
}

.slider-value-input input:focus { outline: none; border-color: var(--or); }

.slider-wrap input[type="range"] { width: 100%; accent-color: var(--rouge); }

.slider-animated-label {
  display: block;
  margin-top: 0.5rem;
  font-family: 'Dancing Script', cursive;
  font-size: 1.15rem;
  color: #7C5200;
}

.product-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
}

.product-check-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--blanc);
  border: 2px solid var(--gris);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  cursor: pointer;
  transition: var(--transition);
}

.product-check-item:hover { border-color: var(--or); }

.product-check-item.checked {
  border-color: var(--rouge);
  background: var(--or-pale);
}

.pci-emoji { font-size: 1.5rem; line-height: 1; }
.pci-info  { flex: 1; min-width: 0; }
.pci-name  { font-weight: 700; color: var(--brun); font-size: 0.95rem; }
.pci-price { color: var(--texte-clair); font-size: 0.82rem; }

.repartition-section {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gris);
}

.repartition-title { font-weight: 700; color: var(--brun); margin-bottom: 1rem; }

.repartition-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  font-weight: 700;
  color: var(--brun);
}

.total-badge {
  background: var(--rouge-clair);
  color: var(--rouge-fonce);
  border-radius: 50px;
  padding: 0.25rem 0.9rem;
  font-weight: 800;
}

.total-badge.ok { background: var(--vert-clair); color: var(--vert-fonce); }

/* ---------------------------------------------------
   9. Articles de blog (mise en page longue)
   --------------------------------------------------- */

.article-body {
  max-width: 780px;
  margin: 0 auto;
}

.article-body h2 { margin: 2.5rem 0 1rem; }
.article-body h3 { margin: 2rem 0 0.75rem; color: var(--brun); }
.article-body p  { margin-bottom: 1.15rem; color: var(--texte); }
.article-body ul,
.article-body ol { margin: 0 0 1.5rem; padding-left: 1.5rem; }
.article-body ul li { list-style: disc; margin-bottom: 0.5rem; }
.article-body ol li { list-style: decimal; margin-bottom: 0.5rem; }

.article-meta {
  color: var(--texte-clair);
  font-size: 0.88rem;
  border-bottom: 1px solid var(--gris);
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}

.highlight-box,
.tip-box,
.danger-box {
  border-radius: var(--radius);
  padding: 1.35rem 1.5rem;
  margin: 1.75rem 0;
  font-size: 0.97rem;
}

.highlight-box {
  background: var(--or-pale);
  border-left: 4px solid var(--or);
  color: var(--brun);
}

.tip-box {
  background: var(--vert-clair);
  border-left: 4px solid var(--vert);
  color: var(--vert-fonce);
}

.danger-box {
  background: var(--rouge-clair);
  border-left: 4px solid var(--rouge);
  color: var(--rouge-fonce);
}

.highlight-box h3,
.tip-box h3,
.tip-box h4,
.danger-box h3,
.danger-box h4 { margin: 0 0 0.5rem; color: inherit; }

.highlight-box p:last-child,
.tip-box p:last-child,
.danger-box p:last-child { margin-bottom: 0; }

.qty-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75rem 0;
  background: var(--blanc);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--ombre);
}

.qty-table th {
  background: var(--brun);
  color: var(--blanc);
  padding: 0.85rem 1rem;
  text-align: left;
  font-size: 0.88rem;
}

.qty-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--gris);
  font-size: 0.94rem;
}

.qty-table tr:last-child td { border-bottom: none; }

.highlight-cell { background: var(--or-pale); font-weight: 800; color: var(--brun); }

.method-card {
  background: var(--blanc);
  border-radius: var(--radius);
  box-shadow: var(--ombre);
  padding: 1.5rem;
  margin: 1.75rem 0;
}

.method-icon { font-size: 2rem; line-height: 1; margin-bottom: 0.5rem; }
.method-card h3 { margin-top: 0; }

.method-rating { display: flex; gap: 0.15rem; margin-bottom: 0.75rem; font-size: 1.05rem; }
.star { color: var(--or); }
.star-empty { color: var(--gris); }

.step-list { counter-reset: step; padding-left: 0 !important; }

.step-list li {
  list-style: none !important;
  counter-increment: step;
  position: relative;
  padding-left: 2.75rem;
  margin-bottom: 1rem;
}

.step-list li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--rouge);
  color: var(--blanc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.9rem;
}

/* ---------------------------------------------------
   10. Compléments widgets d'articles générés (otc-*)
   --------------------------------------------------- */

.otc-widget-calculator-inner { display: block; }

.otc-calc-form { display: grid; gap: 0.85rem; }

.otc-calc-form label { font-weight: 600; font-size: 0.92rem; color: var(--brun); }

.otc-calc-form input,
.otc-calc-form select {
  width: 100%;
  border: 2px solid var(--gris);
  border-radius: var(--radius);
  padding: 0.55rem 0.8rem;
  font-family: 'Nunito', sans-serif;
  font-size: 0.95rem;
}

.otc-calc-form input:focus,
.otc-calc-form select:focus { outline: none; border-color: var(--or); }

.otc-quiz-submit { margin-top: 1rem; }

.otc-faq { margin: 2rem 0; }
.otc-faq details {
  background: var(--blanc);
  border-radius: var(--radius);
  box-shadow: var(--ombre);
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
}
.otc-faq summary { font-weight: 700; color: var(--brun); cursor: pointer; }

/* ---------------------------------------------------
   11. Responsive
   --------------------------------------------------- */

@media (max-width: 900px) {
  .product-card-full,
  .event-detail-card { grid-template-columns: 1fr; }

  .product-card-full .product-card-img,
  .event-detail-visual { min-height: 220px; max-height: 300px; }

  .contact-main-grid { grid-template-columns: 1fr; }

  .pickup-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .pickup-cta { justify-content: center; }
  .pickup-advantages { text-align: left; }
}

@media (max-width: 640px) {
  .product-card-full-body,
  .event-detail-body,
  .contact-hero-card,
  .sim-card,
  .pickup-card,
  .zone-map-wrap { padding: 1.5rem 1.25rem; }

  .product-card-full-footer { flex-direction: column; align-items: flex-start; }

  .page-hero { min-height: 30vh; padding: 2rem 0; }
  .page-hero h1 { font-size: clamp(1.5rem, 5vw, 2.5rem); }

  .process-step { grid-template-columns: 44px 1fr; gap: 1rem; }
  .process-num { width: 42px; height: 42px; font-size: 1.15rem; }

  .timeline { padding-left: 1.5rem; }
  .timeline-item::before { left: calc(-1.5rem - 9px); }

  .wizard-progress { gap: 0; }
  .dot-label { font-size: 0.68rem; max-width: 62px; }
  .wizard-connector { max-width: 28px; }

  .wizard-nav { flex-direction: column-reverse; }
  .btn-wizard-next, .btn-wizard-prev, .btn-restart { width: 100%; margin-left: 0; }

  .hub-section-header { flex-wrap: wrap; }
}