/*
Theme Name: DumuniGo
Theme URI: https://dumunigo.com
Description: Thème vitrine sur-mesure de DumuniGo — livraison de repas à Bamako. Direction artistique « Braise » (mêmes couleurs et logo que l'application), avec des touches 3D légères (parallaxe, profondeur, cartes qui se soulèvent) pensées pour rester rapides sur la 3G. Éditable entièrement depuis l'éditeur graphique WordPress.
Author: DumuniGo
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: dumunigo
*/

/* ============================================================
   1. Fondations — variables Braise
   ============================================================ */
:root {
  --braise: #D63A0E;
  --braise-dark: #A82B08;
  --flamme: #FF6B2C;
  --safran: #FFB113;
  --creme: #FFF6EA;
  --creme-deep: #FFEEDC;
  --sable: #F3D9BE;
  --cacao: #2B1508;
  --cacao-doux: #8A6A55;
  --wa: #25D366;
  --ombre-chaude: 0 18px 40px rgba(214, 58, 14, .18);
  --ombre-carte: 0 10px 30px rgba(43, 21, 8, .10);
  --rayon: 26px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  color: var(--cacao);
  background: var(--creme);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
}

a { color: var(--braise); text-decoration: none; }
img { max-width: 100%; height: auto; }

/* Largeur de contenu : marges latérales resserrées sur grand écran
   (1180 -> 1560px) tout en gardant de l'air sur mobile/tablette. */
.enveloppe { width: 100%; max-width: 1560px; margin: 0 auto; padding: 0 clamp(16px, 2.5vw, 40px); }
/* Marges resserrées : le contenu respire sans « trous » (retour du 21/07) */
.section { padding: clamp(34px, 4.5vw, 62px) 0; position: relative; }
.centre { text-align: center; }
.surtitre {
  display: inline-block; font-weight: 800; font-size: .8rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--braise);
  background: var(--creme-deep); padding: 7px 16px; border-radius: 999px; margin-bottom: 14px;
}

/* ============================================================
   2. Boutons (mêmes CTA « vapeur » que l'app)
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 1.02rem; padding: 15px 30px; border-radius: 999px;
  border: none; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease;
  text-decoration: none;
}
.btn-primaire {
  color: #fff; background: linear-gradient(135deg, var(--flamme), var(--braise) 65%, var(--braise-dark));
  box-shadow: 0 14px 30px rgba(214, 58, 14, .32);
}
.btn-primaire:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 20px 40px rgba(214, 58, 14, .40); }
.btn-wa { color: #fff; background: var(--wa); box-shadow: 0 14px 28px rgba(37, 211, 102, .30); }
.btn-wa:hover { transform: translateY(-3px); }
.btn-clair {
  color: var(--braise); background: #fff; border: 2px solid var(--sable);
}
.btn-clair:hover { transform: translateY(-3px); border-color: var(--braise); }

/* ============================================================
   3. En-tête (header) collant, translucide
   ============================================================ */
.site-entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 246, 234, .97); /* fond solide : rapide sur 3G, large support */
  border-bottom: 1px solid var(--sable);
}
.entete-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; }
.site-logo { display: flex; align-items: center; flex-shrink: 0; }
.site-logo img { height: 42px; width: auto; display: block; object-fit: contain; }
.nav-menu { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; }
.nav-menu > li { white-space: nowrap; } /* jamais de retour à la ligne dans le menu */
.nav-menu a { color: var(--cacao); font-weight: 700; font-size: .96rem; transition: color .15s; white-space: nowrap; }
/* survol : on colore SEULEMENT les liens texte, jamais le bouton (sinon
   texte orange sur fond orange = invisible — bug corrigé) */
.nav-menu a:not(.btn):hover { color: var(--braise); }
.nav-menu a.btn:hover { color: #fff; } /* le bouton garde son texte blanc */
.nav-burger { display: none; background: none; border: none; font-size: 1.6rem; cursor: pointer; color: var(--cacao); }
@media (max-width: 1050px) { .nav-menu { gap: 16px; } .nav-menu a { font-size: .9rem; } }

/* ============================================================
   4. HÉRO — profondeur 3D légère (parallaxe + couches)
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(900px 480px at 82% -8%, rgba(255, 177, 19, .28), transparent 60%),
              linear-gradient(180deg, var(--creme) 0%, var(--creme-deep) 100%);
  padding: clamp(56px, 9vw, 120px) 0 clamp(64px, 10vw, 130px);
  perspective: 1200px; /* active la profondeur 3D pour les enfants */
}
/* Formes organiques floues en arrière-plan, décalées à la parallaxe */
.hero-halo { position: absolute; border-radius: 50%; filter: blur(8px); opacity: .5; will-change: transform; }
.hero-halo.a { width: 340px; height: 340px; top: -60px; right: 6%; background: radial-gradient(circle, var(--safran), transparent 70%); }
.hero-halo.b { width: 260px; height: 260px; bottom: -40px; left: -40px; background: radial-gradient(circle, var(--flamme), transparent 70%); opacity: .35; }

.hero-grille { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(2.3rem, 5.4vw, 3.6rem); }
.hero h1 .accent { color: var(--braise); }
.hero p.accroche { font-size: 1.15rem; color: var(--cacao-doux); font-weight: 600; max-width: 30ch; margin: 18px 0 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-preuves { display: flex; gap: 22px; margin-top: 26px; flex-wrap: wrap; }
.hero-preuve { font-weight: 800; }
.hero-preuve span { display: block; font-size: 1.4rem; color: var(--braise); }
.hero-preuve small { font-weight: 700; color: var(--cacao-doux); }

/* Visuel du héros : carte stable (plus d'effet flottant), tilt 3D DOUX à la souris */
.hero-visuel { position: relative; transform-style: preserve-3d; }
.carte-3d {
  position: relative; border-radius: 32px; overflow: hidden;
  box-shadow: 0 30px 64px rgba(43, 21, 8, .24), var(--ombre-chaude);
  transform: rotateY(-6deg) rotateX(3deg); transform-style: preserve-3d;
  transition: transform .35s ease; will-change: transform;
}
.carte-3d img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform .5s ease; }
.carte-3d:hover img { transform: scale(1.04); }
.carte-3d .etiquette {
  position: absolute; left: 18px; bottom: 18px; transform: translateZ(40px);
  background: #fff; padding: 12px 18px; border-radius: 18px; box-shadow: var(--ombre-carte);
  font-weight: 800;
}
.carte-3d .etiquette b { color: var(--braise); display: block; font-size: 1.15rem; }
.carte-3d .etiquette small { color: var(--cacao-doux); }
/* Badge « plat du jour » (statique, ne flotte plus) */
.badge-jour {
  position: absolute; top: -14px; left: -14px; z-index: 3;
  background: var(--braise); color: #fff; border-radius: 999px; padding: 9px 16px; font-weight: 800;
  box-shadow: 0 10px 22px rgba(214,58,14,.35); font-size: .85rem;
}

/* ============================================================
   5. Cartes 3D génériques (soulèvement au survol) — étapes, restos
   ============================================================ */
.grille { display: grid; gap: 22px; }
.grille-3 { grid-template-columns: repeat(3, 1fr); }
.grille-4 { grid-template-columns: repeat(4, 1fr); }

/* Cartes ORGANIQUES : coins asymétriques (le rectangle strict, c'est fini) */
.carte {
  background: #fff; border: 1px solid var(--sable);
  border-radius: 34px 12px 34px 12px;
  padding: 24px; box-shadow: var(--ombre-carte);
  transition: transform .25s ease, box-shadow .25s ease, border-radius .35s ease;
  transform-style: preserve-3d;
}
.carte:hover { border-radius: 12px 34px 12px 34px; } /* la forme « respire » au survol */
.grille > .carte:nth-child(even) { border-radius: 12px 34px 12px 34px; }
.grille > .carte:nth-child(even):hover { border-radius: 34px 12px 34px 12px; }
.carte:hover { transform: translateY(-8px) rotateX(3deg); box-shadow: 0 26px 50px rgba(43, 21, 8, .16); }
.carte .ico {
  width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px;
  background: linear-gradient(135deg, var(--flamme), var(--braise)); color: #fff; font-size: 1.6rem;
  margin-bottom: 16px; box-shadow: 0 10px 22px rgba(214, 58, 14, .28);
}
.carte h3 { font-size: 1.25rem; }
.carte p { color: var(--cacao-doux); font-weight: 500; margin: 0; }

/* Vitrine restaurants / plats */
.plat-carte { padding: 0; overflow: hidden; }
.plat-carte img { width: 100%; aspect-ratio: 16/11; object-fit: cover; }
.plat-carte .corps { padding: 16px 18px; }
.plat-carte h3 { font-size: 1.05rem; margin-bottom: 4px; }
.plat-carte .prix { display: inline-block; margin-top: 8px; font-weight: 800; color: var(--braise-dark);
  background: var(--creme-deep); padding: 4px 12px; border-radius: 999px; font-size: .9rem; }

/* ============================================================
   6. Bandeau CTA (vert WhatsApp intouchable)
   ============================================================ */
.bandeau-cta {
  background: linear-gradient(135deg, var(--braise), var(--braise-dark));
  color: #fff; border-radius: 32px; padding: clamp(36px, 6vw, 64px); text-align: center;
  box-shadow: var(--ombre-chaude); position: relative; overflow: hidden;
}
.bandeau-cta h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.bandeau-cta p { color: rgba(255,255,255,.9); font-weight: 600; margin-bottom: 24px; }

/* ============================================================
   7. Vidéos démo
   ============================================================ */
.grille-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.video-carte { background: #000; border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre-carte); }
.video-carte video, .video-carte iframe { width: 100%; aspect-ratio: 16/9; display: block; border: 0; }
.video-carte .legende { background: #fff; padding: 14px 18px; font-weight: 700; }

/* ============================================================
   8. FAQ (accordéon natif <details>)
   ============================================================ */
.faq-item {
  background: #fff; border: 1px solid var(--sable); border-radius: 18px; padding: 4px 22px; margin-bottom: 12px;
}
.faq-item summary {
  cursor: pointer; font-weight: 800; padding: 16px 0; list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '＋'; color: var(--braise); font-size: 1.4rem; }
.faq-item[open] summary::after { content: '－'; }
.faq-item p { color: var(--cacao-doux); font-weight: 500; padding-bottom: 16px; margin: 0; }

/* ============================================================
   9. Pied de page
   ============================================================ */
.site-pied { background: var(--cacao); color: #fff; padding: 56px 0 28px; }
.pied-grille { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 32px; margin-bottom: 32px; }
.site-pied img.logo-pied { height: 44px; background: #fff; padding: 8px 12px; border-radius: 14px; }
.site-pied h4 { color: var(--safran); font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; }
.site-pied a { color: rgba(255,255,255,.82); display: block; padding: 5px 0; font-weight: 600; }
.site-pied a:hover { color: #fff; }
.pied-bas { border-top: 1px solid rgba(255,255,255,.14); padding-top: 22px; text-align: center; color: rgba(255,255,255,.6); font-size: .9rem; }

/* ============================================================
   10. Contenu d'article/page classique (éditeur WordPress)
   ============================================================ */
.contenu-page { max-width: 760px; margin: 0 auto; padding: 56px 20px; }
.contenu-page h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: 24px; }
.contenu-page h2 { font-size: 1.6rem; margin-top: 40px; }
.contenu-page p, .contenu-page li { font-size: 1.08rem; }
.contenu-page img { border-radius: 18px; box-shadow: var(--ombre-carte); }

/* ============================================================
   11. Responsive
   ============================================================ */
@media (max-width: 900px) {
  .hero-grille { grid-template-columns: 1fr; text-align: center; }
  .hero p.accroche { margin-left: auto; margin-right: auto; }
  .hero-actions, .hero-preuves { justify-content: center; }
  .hero-visuel { max-width: 380px; margin: 10px auto 0; }
  .grille-3, .grille-4 { grid-template-columns: 1fr 1fr; }
  .pied-grille { grid-template-columns: 1fr; }
  .nav-menu { display: none; }
  .nav-menu.ouvert {
    display: flex; position: absolute; top: 74px; left: 0; right: 0; flex-direction: column;
    background: var(--creme); padding: 18px 20px; gap: 10px; border-bottom: 1px solid var(--sable);
  }
  .nav-burger { display: block; }
}
@media (max-width: 560px) {
  .grille-3, .grille-4 { grid-template-columns: 1fr; }
  .carte-3d { transform: none; } /* pas de tilt sur petit écran : lisibilité d'abord */
}

/* Accessibilité : on coupe TOUTES les animations si l'utilisateur le demande
   (ou sur les appareils qui préfèrent la sobriété) — la 3D reste un plaisir, pas une gêne */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .carte-3d, .pastille-flottante { transform: none; }
}

/* ============================================================
   12. Bandeau promo (haut de page) + CTA collant mobile
   ============================================================ */
.promo-banniere {
  background: linear-gradient(90deg, var(--braise-dark), var(--braise), var(--flamme));
  color: #fff; text-align: center; font-weight: 800; font-size: .92rem;
  padding: 9px 16px; letter-spacing: .01em;
}
.promo-banniere a { color: #fff; text-decoration: underline; }

.cta-collant {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255,246,234,.98);
  border-top: 1px solid var(--sable); box-shadow: 0 -8px 24px rgba(43,21,8,.10);
}
.cta-collant .btn { width: 100%; justify-content: center; }
@media (max-width: 900px) { .cta-collant { display: block; } body { padding-bottom: 76px; } }

/* ============================================================
   13. Bande de confiance (stats / icônes clés)
   ============================================================ */
.bande-confiance {
  background: var(--cacao); color: #fff;
}
.bande-confiance .enveloppe {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  padding: 26px 20px; text-align: center;
}
.confiance-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.confiance-item .gros { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 1.5rem; color: var(--safran); }
.confiance-item small { color: rgba(255,255,255,.8); font-weight: 700; font-size: .82rem; }
@media (max-width: 700px) { .bande-confiance .enveloppe { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   14. Étiquettes de catégorie sur les plats
   ============================================================ */
.plat-carte { position: relative; }
.tag-cat {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(255,255,255,.92); color: var(--braise-dark);
  font-weight: 800; font-size: .74rem; padding: 5px 11px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

/* ============================================================
   15. Zones desservies (puces)
   ============================================================ */
.zones-liste { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; }
.zone-puce {
  background: #fff; border: 1px solid var(--sable); border-radius: 999px;
  padding: 9px 18px; font-weight: 700; color: var(--cacao); box-shadow: var(--ombre-carte);
  transition: transform .18s ease;
}
.zone-puce:hover { transform: translateY(-3px); border-color: var(--braise); color: var(--braise); }
.zone-puce b { color: var(--braise); }

/* ============================================================
   16. Témoignages
   ============================================================ */
.avis-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 38px; }
.avis {
  background: #fff; border: 1px solid var(--sable); border-radius: var(--rayon);
  padding: 26px; box-shadow: var(--ombre-carte); display: flex; flex-direction: column; gap: 14px;
}
.avis .etoiles { color: var(--safran); font-size: 1.05rem; letter-spacing: 2px; }
.avis p { font-size: 1.02rem; font-weight: 600; margin: 0; color: var(--cacao); }
.avis .auteur { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.avis .rond {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--flamme), var(--braise)); color: #fff; font-weight: 800;
}
.avis .auteur b { display: block; }
.avis .auteur small { color: var(--cacao-doux); font-weight: 600; }
@media (max-width: 900px) { .avis-grille { grid-template-columns: 1fr; } }

/* ============================================================
   17. Réassurance (paiement, garanties)
   ============================================================ */
.reassurance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }
.reassurance .item { display: flex; gap: 14px; align-items: flex-start; }
.reassurance .rond-ico {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: var(--creme-deep); font-size: 1.4rem;
}
.reassurance h4 { margin: 0 0 3px; font-size: 1.05rem; }
.reassurance p { margin: 0; color: var(--cacao-doux); font-weight: 500; font-size: .95rem; }
.badges-paiement { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.badge-paie {
  display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--sable);
  border-radius: 14px; padding: 10px 18px; font-weight: 800; box-shadow: var(--ombre-carte);
}
.badge-paie .pastille { width: 12px; height: 12px; border-radius: 50%; }
@media (max-width: 800px) { .reassurance { grid-template-columns: 1fr; } }

/* ============================================================
   18. Pied de page enrichi
   ============================================================ */
.pied-grille-4 { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
.reseaux { display: flex; gap: 12px; margin-top: 16px; }
.reseaux a {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255,255,255,.10); color: #fff; font-size: 1.2rem; padding: 0; transition: background .18s;
}
.reseaux a:hover { background: var(--braise); }
.pied-contact-btn {
  display: inline-flex; align-items: center; gap: 8px; background: var(--wa); color: #fff;
  padding: 11px 18px; border-radius: 999px; font-weight: 800; margin-top: 8px;
}
@media (max-width: 900px) { .pied-grille-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pied-grille-4 { grid-template-columns: 1fr; } }

/* ============================================================
   19. EFFETS AU SURVOL — un ressenti différent par section
   ============================================================ */

/* « Pourquoi DumuniGo » : la carte s'incline vers l'avant, l'icône pivote,
   un liseré braise apparaît en haut */
.carte--pourquoi { position: relative; overflow: hidden; }
.carte--pourquoi::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--flamme), var(--braise)); transform: scaleX(0);
  transform-origin: left; transition: transform .35s ease;
}
.carte--pourquoi:hover { transform: translateY(-10px) rotateX(6deg); box-shadow: 0 30px 56px rgba(214,58,14,.20); }
.carte--pourquoi:hover::before { transform: scaleX(1); }
.carte--pourquoi .ico { transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.carte--pourquoi:hover .ico { transform: rotate(-8deg) scale(1.12); }

/* « Simple comme bonjour » : la carte se soulève, l'emoji rebondit */
.carte--etape:hover { transform: translateY(-10px); box-shadow: 0 28px 50px rgba(43,21,8,.16); }
.carte--etape .ico { transition: transform .4s ease; }
.carte--etape:hover .ico { animation: rebond .6s ease; }
@keyframes rebond { 0%,100%{transform:translateY(0)} 30%{transform:translateY(-10px)} 60%{transform:translateY(-4px)} }

/* Réassurance : l'icône ronde grossit et change de fond */
.reassurance .item { transition: transform .25s ease; padding: 12px; border-radius: 18px; }
.reassurance .item:hover { transform: translateY(-4px); background: #fff; box-shadow: var(--ombre-carte); }
.reassurance .rond-ico { transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .25s; }
.reassurance .item:hover .rond-ico { transform: scale(1.15) rotate(6deg); background: var(--braise); }

/* Témoignages : la carte se soulève, l'avatar tourne, les étoiles pulsent */
.avis { transition: transform .25s ease, box-shadow .25s ease; }
.avis:hover { transform: translateY(-8px); box-shadow: 0 26px 48px rgba(43,21,8,.16); }
.avis .rond { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.avis:hover .rond { transform: rotate(-10deg) scale(1.1); }
.avis:hover .etoiles { animation: scintille .8s ease; }
@keyframes scintille { 0%,100%{opacity:1} 50%{opacity:.55; transform: scale(1.06)} }

/* Bande de confiance : chaque bloc réagit */
.confiance-item { transition: transform .25s ease; padding: 6px; border-radius: 14px; }
.confiance-item:hover { transform: translateY(-4px); }
.confiance-item:hover .gros { text-shadow: 0 0 18px rgba(255,177,19,.5); }

/* Bouton CTA du bandeau final : vrai bouton avec relief + survol */
.btn-blanc {
  background: #fff; color: var(--braise); box-shadow: 0 14px 30px rgba(0,0,0,.18);
}
.btn-blanc:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 20px 42px rgba(0,0,0,.26); }

/* ============================================================
   20. Carrousel de plats (« Ça sort du feu »)
   ============================================================ */
.carrousel-wrap { position: relative; overflow: hidden; margin-top: 38px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.carrousel-piste { display: flex; gap: 22px; width: max-content; animation: defile 34s linear infinite; }
.carrousel-wrap:hover .carrousel-piste { animation-play-state: paused; }
.carrousel-piste .plat-carte { width: 260px; flex-shrink: 0; }
.carrousel-piste .plat-carte img { transition: transform .5s ease; }
.carrousel-piste .plat-carte:hover img { transform: scale(1.08); }
@keyframes defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .carrousel-piste { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

/* ============================================================
   21. Bannière de couverture (pages internes)
   ============================================================ */
.couverture {
  position: relative; min-height: 300px; display: grid; place-items: center; text-align: center;
  background-size: cover; background-position: center; color: #fff; overflow: hidden;
}
.couverture::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43,21,8,.35), rgba(168,43,8,.55)); }
.couverture .dedans { position: relative; z-index: 2; padding: 40px 20px; }
.couverture h1 { color: #fff; font-size: clamp(2rem, 5vw, 3rem); text-shadow: 0 3px 20px rgba(0,0,0,.35); }
.couverture .fil { color: rgba(255,255,255,.9); font-weight: 700; }

/* ============================================================
   22. Bandeau confidentialité (1re visite)
   ============================================================ */
.consentement {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; max-width: 720px; margin: 0 auto;
  background: #fff; border: 1px solid var(--sable); border-radius: 20px; padding: 18px 22px;
  box-shadow: 0 20px 50px rgba(43,21,8,.22); display: none;
}
.consentement.visible { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.consentement p { margin: 0; flex: 1 1 320px; font-weight: 600; font-size: .94rem; color: var(--cacao); }
.consentement p a { text-decoration: underline; }
.consentement .actions { display: flex; gap: 10px; }

/* ============================================================
   23. Chatbot (widget WhatsApp + réponses rapides)
   ============================================================ */
.chatbot-bulle {
  position: fixed; right: 18px; bottom: 18px; z-index: 80; width: 60px; height: 60px; border-radius: 50%;
  background: var(--wa); color: #fff; border: none; cursor: pointer; font-size: 1.7rem;
  box-shadow: 0 14px 30px rgba(37,211,102,.45); transition: transform .2s;
  display: grid; place-items: center;
}
.chatbot-bulle:hover { transform: scale(1.08); }
.chatbot-fenetre {
  position: fixed; right: 18px; bottom: 88px; z-index: 81; width: min(340px, calc(100vw - 36px));
  background: #fff; border-radius: 22px; box-shadow: 0 24px 60px rgba(43,21,8,.28); overflow: hidden;
  display: none; flex-direction: column; border: 1px solid var(--sable);
}
.chatbot-fenetre.ouvert { display: flex; animation: monte .25s ease; }
@keyframes monte { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.chatbot-tete { background: linear-gradient(135deg, var(--braise), var(--braise-dark)); color: #fff; padding: 16px 18px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.chatbot-tete img { height: 30px; background: #fff; border-radius: 8px; padding: 3px; }
.chatbot-corps { padding: 16px; display: flex; flex-direction: column; gap: 10px; max-height: 340px; overflow-y: auto; }
.chatbot-msg { background: var(--creme-deep); padding: 11px 14px; border-radius: 14px; font-size: .92rem; font-weight: 600; }
.chatbot-q {
  text-align: left; background: #fff; border: 1px solid var(--sable); border-radius: 12px; padding: 10px 14px;
  font-weight: 700; font-size: .9rem; cursor: pointer; color: var(--braise); transition: background .15s;
}
.chatbot-q:hover { background: var(--creme-deep); }
.chatbot-pied { padding: 14px 16px; border-top: 1px solid var(--sable); }
.chatbot-wa { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--wa); color: #fff; padding: 12px; border-radius: 12px; font-weight: 800; width: 100%; }
@media (max-width: 900px) { .chatbot-bulle { bottom: 84px; } .chatbot-fenetre { bottom: 150px; } }

/* ============================================================
   24. ICÔNES VECTORIELLES (remplacent les emoji)
   ============================================================ */
.ico-svg { display: block; }
.ico-vect {
  width: 76px; height: 76px; display: grid; place-items: center; margin-bottom: 14px;
  background: var(--creme-deep); border-radius: 26px 8px 26px 8px;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), border-radius .4s ease, background .3s;
}
.carte:hover .ico-vect { border-radius: 8px 26px 8px 26px; background: var(--creme); transform: rotate(-6deg) scale(1.08); }
.reassurance .rond-ico { width: 58px; height: 58px; background: var(--creme-deep); border-radius: 20px 6px 20px 6px; }
.reassurance .item:hover .rond-ico { background: var(--creme); }

/* ============================================================
   25. FORMES ORGANIQUES — vagues entre sections, blobs
   ============================================================ */
.vague { display: block; width: 100%; height: auto; line-height: 0; margin: 0; }
.vague svg { display: block; width: 100%; height: clamp(40px, 5vw, 72px); }
.sect-creme { background: var(--creme); }
.sect-creme-deep { background: var(--creme-deep); }
.sect-cacao { background: var(--cacao); color: #fff; }

/* Taches organiques décoratives en fond de section */
.blob { position: absolute; border-radius: 46% 54% 38% 62% / 55% 40% 60% 45%; filter: blur(2px); opacity: .35; pointer-events: none; z-index: 0; }
.blob-1 { width: 240px; height: 240px; background: radial-gradient(circle at 35% 35%, var(--safran), transparent 72%); top: -60px; left: -70px; }
.blob-2 { width: 300px; height: 300px; background: radial-gradient(circle at 60% 40%, var(--flamme), transparent 72%); bottom: -90px; right: -80px; opacity: .22; }
.section > .enveloppe { position: relative; z-index: 1; }

/* Photos en forme organique (« ticket » comme dans l'app) */
.photo-organique { border-radius: 46% 54% 40% 60% / 52% 44% 56% 48%; overflow: hidden; box-shadow: var(--ombre-chaude); }
.photo-organique img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-ticket { border-radius: 34px 10px 34px 10px; overflow: hidden; box-shadow: var(--ombre-carte); }
.photo-ticket img { display: block; width: 100%; object-fit: cover; }

/* Bloc image + texte alterné (pages internes : plus jamais 100 % texte) */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; margin: 34px 0; }
.duo.inverse .duo-media { order: 2; }
.duo-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
@media (max-width: 780px) { .duo { grid-template-columns: 1fr; } .duo.inverse .duo-media { order: 0; } }

/* Encadré d'appel à l'action réutilisable */
.encart-cta {
  background: linear-gradient(135deg, var(--creme-deep), #fff);
  border: 2px dashed var(--braise); border-radius: 30px 10px 30px 10px;
  padding: 24px 26px; margin: 30px 0; text-align: center;
}
.encart-cta h3 { margin-bottom: 6px; }
.encart-cta p { color: var(--cacao-doux); font-weight: 600; margin: 0 0 14px; }

/* Emplacement de capture d'écran à fournir (guide d'upload) */
.emplacement-capture {
  border: 2px dashed var(--sable); border-radius: 24px; background: var(--creme-deep);
  padding: 26px; text-align: center; margin: 18px 0;
}
.emplacement-capture .etiq {
  display: inline-block; background: var(--braise); color: #fff; font-weight: 800; font-size: .76rem;
  padding: 5px 14px; border-radius: 999px; margin-bottom: 10px; letter-spacing: .04em;
}
.emplacement-capture p { margin: 0; color: var(--cacao-doux); font-weight: 600; font-size: .94rem; }

/* ============================================================
   26. Pied de page : copyright sur UNE ligne
   ============================================================ */
.pied-bas {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  white-space: nowrap; text-align: center;
}
.pied-bas a { display: inline; padding: 0; }

/* ============================================================
   27. CHATBOT refondu — forme organique, couleurs Braise, saisie libre
   ============================================================ */
.chatbot-bulle {
  position: fixed; right: 18px; bottom: 18px; z-index: 80; width: 62px; height: 62px;
  border-radius: 50% 50% 12px 50%;                      /* forme « bulle de parole » */
  background: linear-gradient(135deg, var(--flamme), var(--braise) 70%, var(--braise-dark));
  color: #fff; border: none; cursor: pointer;
  box-shadow: 0 14px 32px rgba(214,58,14,.45); transition: transform .22s, border-radius .3s;
  display: grid; place-items: center;
}
.chatbot-bulle:hover { transform: scale(1.09) rotate(-6deg); border-radius: 50% 12px 50% 50%; }
.chatbot-bulle svg { width: 30px; height: 30px; }

.chatbot-fenetre {
  position: fixed; right: 18px; bottom: 92px; z-index: 81; width: min(350px, calc(100vw - 36px));
  background: var(--creme); border-radius: 30px 30px 10px 30px; overflow: hidden;
  box-shadow: 0 26px 64px rgba(43,21,8,.30); border: 1px solid var(--sable);
  display: none; flex-direction: column;
}
.chatbot-fenetre.ouvert { display: flex; animation: monte .25s ease; }
@keyframes monte { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.chatbot-tete {
  background: linear-gradient(135deg, var(--braise), var(--braise-dark)); color: #fff;
  padding: 15px 18px; font-weight: 800; display: flex; align-items: center; gap: 11px;
}
.chatbot-tete img { height: 34px; background: #fff; border-radius: 12px 4px 12px 4px; padding: 3px; }
.chatbot-corps { padding: 15px; display: flex; flex-direction: column; gap: 9px; height: 290px; overflow-y: auto; background: var(--creme); }
.chatbot-msg {
  background: #fff; border: 1px solid var(--sable); padding: 11px 14px;
  border-radius: 18px 18px 18px 5px; font-size: .91rem; font-weight: 600; max-width: 88%;
}
.chatbot-msg.moi {
  align-self: flex-end; background: linear-gradient(135deg, var(--flamme), var(--braise));
  color: #fff; border: none; border-radius: 18px 18px 5px 18px;
}
.chatbot-q {
  text-align: left; background: #fff; border: 1.5px solid var(--braise); border-radius: 999px;
  padding: 9px 15px; font-weight: 700; font-size: .86rem; cursor: pointer; color: var(--braise);
  transition: background .15s, transform .15s;
}
.chatbot-q:hover { background: var(--braise); color: #fff; transform: translateX(3px); }
.chatbot-saisie { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--sable); background: #fff; }
.chatbot-saisie input {
  flex: 1; border: 1.5px solid var(--sable); border-radius: 999px; padding: 11px 16px;
  font-family: inherit; font-size: .9rem; font-weight: 600; outline: none;
}
.chatbot-saisie input:focus { border-color: var(--braise); }
.chatbot-saisie button {
  background: var(--braise); color: #fff; border: none; border-radius: 50%; width: 42px; height: 42px;
  cursor: pointer; font-size: 1.1rem; flex-shrink: 0; transition: transform .15s;
}
.chatbot-saisie button:hover { transform: scale(1.1); }
.chatbot-pied { padding: 0 12px 12px; background: #fff; }
.chatbot-wa {
  display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--wa);
  color: #fff; padding: 11px; border-radius: 999px; font-weight: 800; width: 100%; font-size: .9rem;
}
.chatbot-wa svg { width: 20px; height: 20px; color: #fff; }
@media (max-width: 900px) { .chatbot-bulle { bottom: 84px; } .chatbot-fenetre { bottom: 156px; } }

/* Icône WhatsApp partout : glyphe officiel, teinté selon le fond */
.ico-wa { width: 22px; height: 22px; vertical-align: -5px; }
.reseaux a svg { width: 20px; height: 20px; color: #fff; }

/* ============================================================
   28. Contenu des pages : chapô, listes, images
   ============================================================ */
/* Colonne de contenu élargie (820 -> 1040px) : moins de marges perdues sur PC,
   tout en gardant une longueur de ligne confortable à lire. */
.contenu-page { max-width: 1040px; padding: 40px clamp(16px, 2.5vw, 40px) 56px; }
.chapo {
  font-size: 1.15rem; font-weight: 600; color: var(--cacao-doux);
  border-left: 4px solid var(--braise); padding-left: 18px; margin-bottom: 30px;
}
.contenu-page h2 {
  font-size: 1.7rem; margin-top: 38px; display: flex; align-items: center; gap: 12px;
}
.contenu-page h2::before {
  content: ''; width: 10px; height: 26px; border-radius: 6px 2px 6px 2px;
  background: linear-gradient(180deg, var(--flamme), var(--braise)); flex-shrink: 0;
}
.contenu-page ol { counter-reset: etape; list-style: none; padding-left: 0; }
.contenu-page ol > li {
  counter-increment: etape; position: relative; padding-left: 46px; margin-bottom: 12px; font-weight: 600;
}
.contenu-page ol > li::before {
  content: counter(etape); position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--flamme), var(--braise)); color: #fff;
  border-radius: 12px 4px 12px 4px; font-weight: 800; font-size: .95rem;
}
.contenu-page ul > li { margin-bottom: 8px; }
.contenu-page .duo h2 { margin-top: 0; }
.contenu-page .btn { margin-top: 8px; margin-right: 8px; }

/* ============================================================
   29. ILLUSTRATIONS vectorielles (grandes scènes)
   ============================================================ */
.illu { display: block; width: 100%; max-width: 400px; height: auto; margin: 0 auto; }
.illu-petite { max-width: 260px; }
.bloc-illu {
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center;
  background: var(--creme-deep); border-radius: 40px 12px 40px 12px;
  padding: 26px 30px; margin: 26px 0;
}
.bloc-illu.inverse > *:first-child { order: 2; }
.bloc-illu h3 { margin-bottom: 8px; }
.bloc-illu p { color: var(--cacao-doux); font-weight: 600; margin: 0 0 12px; }
@media (max-width: 780px) { .bloc-illu { grid-template-columns: 1fr; text-align: center; } .bloc-illu.inverse > *:first-child { order: 0; } }

/* Trio d'illustrations */
.trio-illu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 26px 0; }
.trio-illu .carte { text-align: center; padding: 20px; }
.trio-illu .illu { max-width: 200px; margin-bottom: 10px; }
@media (max-width: 780px) { .trio-illu { grid-template-columns: 1fr; } }

/* ============================================================
   30. COUVERTURE : forme esthétique (bas incurvé + vague)
   ============================================================ */
.couverture {
  min-height: 270px;
  border-radius: 0 0 60px 60px;                 /* base arrondie */
  margin-bottom: 0;
}
.couverture .vague-bas {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; line-height: 0;
}
.couverture .vague-bas svg { display: block; width: 100%; height: clamp(34px, 4vw, 56px); }
.couverture h1 { margin-bottom: 4px; }

/* ============================================================
   31. Sous-menu déroulant (pages enfants)
   ============================================================ */
.nav-menu li { position: relative; }
.nav-menu .sub-menu {
  display: none; position: absolute; top: 100%; left: -14px; min-width: 250px;
  background: #fff; border: 1px solid var(--sable); border-radius: 20px 6px 20px 6px;
  box-shadow: 0 18px 40px rgba(43,21,8,.16); padding: 10px; list-style: none; z-index: 60;
}
.nav-menu li:hover > .sub-menu, .nav-menu li:focus-within > .sub-menu { display: block; }
.nav-menu .sub-menu li { white-space: normal; }
.nav-menu .sub-menu a {
  display: block; padding: 10px 14px; border-radius: 12px; font-size: .92rem; color: var(--cacao);
}
.nav-menu .sub-menu a:hover { background: var(--creme-deep); color: var(--braise); }
.menu-item-has-children > a::after { content: ' ▾'; font-size: .8em; opacity: .7; }
@media (max-width: 900px) {
  .nav-menu .sub-menu { display: block; position: static; box-shadow: none; border: none;
    background: transparent; padding: 4px 0 4px 16px; min-width: 0; }
  .nav-menu .sub-menu a { padding: 7px 0; font-size: .88rem; }
}

/* ============================================================
   32. Correctif bouton WhatsApp du pied de page
   ============================================================ */
.pied-contact-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--wa); color: #fff; padding: 12px 20px; border-radius: 999px;
  font-weight: 800; margin-top: 12px; font-size: .92rem; line-height: 1;
  max-width: 100%; white-space: nowrap; box-shadow: 0 10px 24px rgba(37,211,102,.28);
  transition: transform .18s ease;
}
.pied-contact-btn:hover { transform: translateY(-2px); color: #fff; }
.pied-contact-btn svg { width: 19px; height: 19px; flex-shrink: 0; color: #fff; }
.site-pied a.pied-contact-btn { padding: 12px 20px; } /* écrase le padding générique des liens du footer */

/* ============================================================
   33. Marges encore resserrées
   ============================================================ */
.section { padding: clamp(26px, 3.4vw, 46px) 0; }
.contenu-page { padding: 30px clamp(16px, 2.5vw, 40px) 44px; }
.contenu-page h2 { margin-top: 30px; }
.hero { padding: clamp(38px, 6vw, 74px) 0 clamp(42px, 6.5vw, 82px); }
.emplacement-capture { padding: 20px; margin: 14px 0; }
.encart-cta { padding: 20px 24px; margin: 24px 0; }
.bande-confiance .enveloppe { padding: 20px 18px; }

/* Grille de 4 témoignages */
.avis-grille-4 { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.avis-grille-4 .avis { padding: 20px; }
.avis-grille-4 .avis p { font-size: .95rem; }
@media (max-width: 1050px) { .avis-grille-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .avis-grille-4 { grid-template-columns: 1fr; } }

/* ============================================================
   34. PAGE ACTIVE : l'onglet courant se distingue
   ============================================================ */
.nav-menu .current-menu-item > a:not(.btn),
.nav-menu .current_page_item > a:not(.btn),
.nav-menu .current-menu-ancestor > a:not(.btn),
.nav-menu .current-page-ancestor > a:not(.btn) {
  color: var(--braise);
  position: relative;
}
.nav-menu .current-menu-item > a:not(.btn)::after,
.nav-menu .current_page_item > a:not(.btn)::after,
.nav-menu .current-menu-ancestor > a:not(.btn)::after,
.nav-menu .current-page-ancestor > a:not(.btn)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 4px;
  background: linear-gradient(90deg, var(--flamme), var(--braise));
  border-radius: 999px 2px 999px 2px;   /* soulignement organique */
}
/* Sous-menu : l'élément actif prend un fond doux */
.nav-menu .sub-menu .current-menu-item > a {
  background: var(--creme-deep); color: var(--braise);
}
.nav-menu .sub-menu .current-menu-item > a::after { display: none; }

/* ============================================================
   35. Pied de page : bouton WhatsApp repensé (sobre, chaleureux)
   ============================================================ */
.pied-contact-btn {
  background: var(--creme);            /* clair sur le fond cacao : lisible et élégant */
  color: var(--braise);
  border: none; box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.pied-contact-btn:hover { background: #fff; color: var(--braise-dark); transform: translateY(-2px); }
.pied-contact-btn svg { color: var(--wa); }   /* seul le glyphe garde le vert, en petite touche */

/* Réseaux sociaux : pastilles uniformes, teinte au survol seulement */
.reseaux a { background: rgba(255,255,255,.12); color: #fff; transition: background .2s, transform .2s; }
.reseaux a:hover { transform: translateY(-3px); }
.reseaux a:hover svg { color: #fff; }
.reseaux a.rs-wa { background: rgba(255,255,255,.12); }
.reseaux a.rs-wa svg { color: var(--wa); }
.reseaux a.rs-wa:hover { background: var(--wa); }

/* Illustration livreur (image fournie, recolorée) dans les pastilles d'icône */
.ico-img { display: block; max-width: 100%; height: auto; object-fit: contain; }
.ico-vect { padding: 6px; }

/* Correctif de priorité : « .site-pied a » (blanc) écrasait la couleur du
   bouton de contact → texte blanc sur fond crème = invisible. */
.site-pied a.pied-contact-btn {
  background: var(--creme);
  color: var(--braise);
  padding: 12px 20px;
  display: inline-flex;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.site-pied a.pied-contact-btn:hover { background: #fff; color: var(--braise-dark); }
.site-pied a.pied-contact-btn svg { color: var(--wa); }