/* =====================================================================
   HAPPYFRESH — Design system (couche thème)
   Chargé APRÈS styles.css et les styles de page : il surcharge les
   composants historiques sans toucher au contenu HTML.
   Sommaire :
     01. Polices auto-hébergées      07. Cartes & micro-interactions
     02. Tokens (couleurs, ombres)   08. Étapes 01-02-03 / timeline
     03. Base & typographie          09. Vagues & formes organiques
     04. Logo                        10. Sections clés & footer
     05. Header & navigation         11. Utilitaires animés (scroll, parallaxe)
     06. Boutons, tags, badges       12. Responsive & accessibilité
   ===================================================================== */

/* ---------- 01. Polices (auto-hébergées : perf + RGPD) ---------- */
@font-face{font-family:'Shantell Sans';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/shantell-sans-700.woff2) format('woff2')}
@font-face{font-family:'Shantell Sans';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/shantell-sans-800.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/montserrat-400.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/montserrat-500.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/montserrat-600.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/montserrat-700.woff2) format('woff2')}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/baloo2-800.woff2) format('woff2')}

/* ---------- 02. Tokens ---------- */
:root{
  /* Charte HappyFresh */
  --hf-forest:#1E4D2B;      /* Vert forêt / bouteille — fond sombre */
  --hf-forest-deep:#153A20;
  --hf-green:#2F7A3B;       /* Vert intermédiaire — textes d'accent */
  --hf-leaf:#6BC04B;        /* Vert feuille — accents & CTA secondaires */
  --hf-leaf-light:#9BE07A;
  --hf-sun:#F6C324;         /* Jaune soleil — CTA, badges */
  --hf-sun-deep:#D9A400;
  --hf-cream:#FBF4E2;       /* Crème — fond clair */
  --hf-paper:#FFFDF7;
  /* Alias historiques (le code existant utilise ces noms) */
  --cream:var(--hf-cream);
  --green-dark:var(--hf-forest);
  --green:var(--hf-green);
  --green-bright:var(--hf-leaf);
  --lime:var(--hf-sun);
  --white:#FFFFFF;
  --radius:28px;
  --shadow:0 14px 40px -12px rgba(30,77,43,.22),0 2px 6px rgba(30,77,43,.06);
  --shadow-pop:0 22px 50px -14px rgba(30,77,43,.35);
  --font-display:'Shantell Sans','Baloo 2',system-ui,sans-serif;
  --font-body:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --wave-h:52px;
}

/* ---------- 03. Base & typographie ---------- */
html{scroll-padding-top:96px}
body{font-family:var(--font-body);background-color:var(--hf-cream);color:var(--hf-forest);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,.section-title{font-family:var(--font-display);letter-spacing:-.005em}
h1{line-height:1.02}
::selection{background:var(--hf-sun);color:var(--hf-forest)}
:focus-visible{outline:3px solid var(--hf-sun);outline-offset:3px;border-radius:8px}
a{transition:color .25s}
/* Soulignement "feutre" jaune sous les mots en <em> des titres */
.section-title em,.page-hero h1 em,.hero h1 em,.legal-hero h1 em,.concept-photo h1 em{
  font-style:normal;padding-bottom:.08em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9c30-6 60-7 95-4s70 4 99-2' fill='none' stroke='%23F6C324' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") left bottom/100% .32em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.section-title{text-wrap:balance}
.section-sub,.page-hero p{text-wrap:pretty}

/* ---------- 04. Logo ---------- */
.hf-logo{display:inline-flex!important;align-items:center;gap:10px;line-height:1;text-decoration:none}
.hf-mark{width:46px;height:42px;flex-shrink:0;transition:transform .5s var(--ease-bounce);--hf-mark-stroke:var(--hf-cream)}
.hf-logo:hover .hf-mark{transform:rotate(-8deg) scale(1.06)}
.hf-word{font-family:'Baloo 2',var(--font-display);font-weight:800;font-size:1.7rem;letter-spacing:-.02em;white-space:nowrap}
header .hf-logo .hf-word .hf-happy,.footer-logo.hf-logo .hf-word .hf-happy{color:var(--hf-cream)}
header .hf-logo .hf-word .hf-fresh,.footer-logo.hf-logo .hf-word .hf-fresh{color:var(--hf-leaf)}
header.scrolled .hf-logo .hf-word .hf-happy{color:var(--hf-forest)}
header.scrolled .hf-logo .hf-word .hf-fresh{color:var(--hf-green)}
header.scrolled .hf-mark{--hf-mark-stroke:var(--hf-forest)}
.account-logo.hf-logo{justify-content:center;width:100%}
.account-logo.hf-logo .hf-mark{--hf-mark-stroke:var(--hf-forest)}
.account-logo.hf-logo .hf-word .hf-happy{color:var(--hf-forest)}
.account-logo.hf-logo .hf-word .hf-fresh{color:var(--hf-leaf)}
.footer-logo.hf-logo{margin-bottom:16px}
.footer-logo.hf-logo .hf-mark{width:58px;height:52px}
.footer-logo.hf-logo .hf-word{font-size:2rem}

/* ---------- 05. Header & navigation ---------- */
header{padding:14px 24px;transition:background .35s,box-shadow .35s,padding .35s}
header.scrolled{background:rgba(251,244,226,.9);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 6px 30px -10px rgba(30,77,43,.25);padding:8px 24px}
.nav-link-btn,.nav-links a{font-family:var(--font-body);font-weight:600;white-space:nowrap}
.nav-links .dropdown-item{white-space:normal}
.nav-link-btn::after{height:4px;border-radius:4px;background:var(--hf-sun)}
.dropdown-panel{border-radius:22px;padding:12px;background:var(--hf-paper);box-shadow:0 30px 60px -18px rgba(30,77,43,.4);border:1px solid rgba(30,77,43,.06)}
.dropdown-item{border-radius:14px;transition:background .2s,transform .25s var(--ease-out)}
.dropdown-item:hover{background:var(--hf-cream);transform:translateX(4px)}
.dropdown-item strong{font-family:var(--font-display);letter-spacing:.01em}
.dd-icon{width:38px;height:38px;border-radius:12px 16px 12px 16px;background:rgba(107,192,75,.16);color:var(--hf-green);display:inline-flex;align-items:center;justify-content:center;font-size:1rem;transition:transform .35s var(--ease-bounce),background .25s}
.dd-icon .hf-ico{width:22px;height:22px}
.dropdown-item:hover .dd-icon{transform:rotate(-8deg) scale(1.08);background:var(--hf-sun);color:var(--hf-forest)}
.nav-pill{font-family:var(--font-display)!important;border-color:rgba(251,244,226,.55);letter-spacing:.02em}
.nav-pill .pill-icon{display:inline-flex}
.nav-pill .pill-icon .hf-ico{width:17px;height:17px}
.nav-pill:hover{background:var(--hf-leaf);border-color:var(--hf-leaf)}
.nav-links a.nav-pill[href$="devenir-franchise.html"]{background:var(--hf-sun);border-color:var(--hf-sun);color:var(--hf-forest)!important;box-shadow:0 4px 0 var(--hf-sun-deep)}
.nav-links a.nav-pill[href$="devenir-franchise.html"]:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--hf-sun-deep)}
header.scrolled .nav-pill{border-color:var(--hf-green)}
.burger{width:46px;height:46px;border-radius:14px;align-items:center;justify-content:center;background:rgba(251,244,226,.12)!important;transition:background .3s}
header.scrolled .burger{background:rgba(30,77,43,.08)!important}
.burger span{transition:transform .35s var(--ease-out),opacity .25s}
body.hf-menu-open .burger span{background:var(--hf-cream)!important}
body.hf-menu-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.hf-menu-open .burger span:nth-child(2){opacity:0}
body.hf-menu-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
body.hf-menu-open{overflow:hidden}

/* ---------- 06. Boutons, tags, badges ---------- */
.btn{font-family:var(--font-display);font-weight:800;letter-spacing:.03em;position:relative;overflow:hidden;isolation:isolate;transition:transform .3s var(--ease-bounce),box-shadow .3s,background .3s,color .3s}
.btn .hf-ico{width:20px;height:20px;transition:transform .3s var(--ease-out)}
.btn:hover .hf-ico{transform:translateX(4px)}
.btn-lime{background:var(--hf-sun);color:var(--hf-forest);box-shadow:0 5px 0 var(--hf-sun-deep),0 14px 30px -10px rgba(217,164,0,.6)}
.btn-lime:hover{transform:translateY(-3px);box-shadow:0 8px 0 var(--hf-sun-deep),0 20px 36px -12px rgba(217,164,0,.7)}
.btn-lime:active{transform:translateY(3px);box-shadow:0 2px 0 var(--hf-sun-deep)}
.btn-primary{background:var(--hf-forest);color:var(--hf-cream);box-shadow:0 5px 0 var(--hf-forest-deep)}
.btn-primary:hover{background:var(--hf-green);transform:translateY(-3px);box-shadow:0 8px 0 var(--hf-forest-deep)}
.btn-primary:active{transform:translateY(3px);box-shadow:0 2px 0 var(--hf-forest-deep)}
.btn-outline{border:2px solid var(--hf-cream);color:var(--hf-cream)}
.btn-outline:hover{background:var(--hf-cream);color:var(--hf-forest);transform:translateY(-3px)}
.hf-ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.45);pointer-events:none;animation:hf-ripple .65s ease-out forwards;z-index:-1}
@keyframes hf-ripple{to{transform:scale(4);opacity:0}}
.tag{font-family:var(--font-body);font-weight:700;background:var(--hf-sun);color:var(--hf-forest);border-radius:12px 18px 12px 18px;box-shadow:0 3px 0 var(--hf-sun-deep);transform:rotate(-1.5deg)}
.hero-badge{background:rgba(246,195,36,.16);border-color:var(--hf-sun);color:var(--hf-sun);font-weight:700}
.hero-points span{border-color:rgba(246,195,36,.5);color:var(--hf-sun);font-weight:600;border-radius:12px 18px 12px 18px;transition:transform .3s var(--ease-bounce),background .3s}
.hero-points span:hover{transform:translateY(-3px) rotate(-1deg);background:rgba(246,195,36,.14)}
.salade-tags span{background:rgba(107,192,75,.16);color:var(--hf-green);font-weight:700}
.cluster-link{border-radius:14px 20px 14px 20px;transition:background .2s,border-color .2s,transform .3s var(--ease-bounce)}
.cluster-link:hover{transform:translateY(-3px) rotate(-1deg);background:var(--hf-sun);border-color:var(--hf-sun)}

/* ---------- 07. Cartes & micro-interactions ---------- */
.hf-ico{width:1em;height:1em;display:inline-block;vertical-align:middle}
.emoji,.emoji-big,.circle,.bubble-icon{line-height:1}
.emoji:has(.hf-ico),.step-card .emoji:has(.hf-ico){display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;font-size:34px;color:var(--hf-forest);background:var(--hf-sun);border-radius:42% 58% 55% 45%/48% 42% 58% 52%;box-shadow:0 4px 0 var(--hf-sun-deep);transition:transform .45s var(--ease-bounce),border-radius .6s}
.emoji-big:has(.hf-ico){display:inline-flex;align-items:center;justify-content:center;width:84px;height:84px;font-size:44px;color:var(--hf-forest);background:var(--hf-sun);border-radius:42% 58% 55% 45%/48% 42% 58% 52%;box-shadow:0 5px 0 var(--hf-sun-deep);animation:hf-float 5s ease-in-out infinite}
.circle:has(.hf-ico){font-size:38px;color:var(--hf-forest)!important;background:var(--hf-sun)!important;border-radius:42% 58% 55% 45%/48% 42% 58% 52%!important;box-shadow:0 5px 0 var(--hf-sun-deep)!important}
.bubble-icon:has(.hf-ico){font-size:34px;color:var(--hf-green)}
.benefit .emoji:has(.hf-ico){background:rgba(246,195,36,.16);box-shadow:none;color:var(--hf-sun)}
:is(.pain,.benefit,.step-card,.partner-card,.salade-card,.related-card,.article-card,.kiosk,.arg,.included,.eng):hover .emoji{transform:rotate(-8deg) scale(1.08);border-radius:55% 45% 40% 60%/52% 58% 42% 48%}
.pain,.benefit,.step-card,.partner-card,.salade-card,.related-card,.article-card,.faq-item,.kiosk,.arg,.bubble,.result-card,.featured-article{border-radius:var(--radius)}
.pain{background:var(--hf-paper);border-top:0;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform .45s var(--ease-out),box-shadow .45s}
.pain::after{content:'';position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--hf-sun),var(--hf-leaf))}
.pain:hover{box-shadow:var(--shadow-pop)}
.benefit{background:rgba(251,244,226,.06);border:1px solid rgba(251,244,226,.14);transition:transform .45s var(--ease-out),background .3s,border-color .3s}
.benefit:hover{background:rgba(246,195,36,.1);border-color:rgba(246,195,36,.5);transform:translateY(-6px)}
.benefit h3,.arg h3{color:var(--hf-sun)}
.step-card,.partner-card,.salade-card,.related-card,.article-card{background:var(--hf-paper);box-shadow:var(--shadow);transition:transform .5s var(--ease-out),box-shadow .5s}
.step-card:hover,.partner-card:hover,.salade-card:hover,.related-card:hover,.article-card:hover{box-shadow:var(--shadow-pop)}
.hf-tilt{transform-style:preserve-3d;will-change:transform}
.salade-card{position:relative}
.salade-img{background:linear-gradient(135deg,#E9F4DC,#FFF3C4)}
.salade-img::after{content:'';position:absolute;left:-2px;right:-2px;bottom:-1px;height:22px;background:var(--hf-paper);-webkit-mask:var(--hf-wave-mask) center/100% 100% no-repeat;mask:var(--hf-wave-mask) center/100% 100% no-repeat}
.salade-body h3{color:var(--hf-forest)}
.salade-body .baseline{font-family:var(--font-display);color:var(--hf-green)}
.salade-card.soon{background:linear-gradient(145deg,var(--hf-forest),var(--hf-green))}
.salade-card.soon h3{color:var(--hf-sun)}
.partner-card .discover{border-bottom:3px solid var(--hf-sun);font-family:var(--font-display)}
.faq-item{box-shadow:var(--shadow);background:var(--hf-paper);transition:box-shadow .3s,transform .3s}
.faq-item:hover{transform:translateY(-2px)}
.faq-item.open{box-shadow:var(--shadow-pop)}
.faq-q{font-family:var(--font-display)}
.faq-q .icon{width:34px;height:34px;border-radius:50%;background:var(--hf-sun);color:var(--hf-forest);display:inline-flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:800;transition:transform .35s var(--ease-bounce),background .3s}
.faq-item.open .faq-q .icon{background:var(--hf-leaf);color:#fff}
.faq-item.open .faq-a{max-height:900px}
form{border-radius:var(--radius);box-shadow:var(--shadow-pop);background:var(--hf-paper)}
.field input,.field select,.field textarea{border-radius:14px;border-color:#E8DFC6;background:var(--hf-cream);font-family:var(--font-body);transition:border-color .25s,box-shadow .25s,background .25s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--hf-leaf);box-shadow:0 0 0 4px rgba(107,192,75,.18);background:#fff}
.convert-info li::before{background:var(--hf-sun);color:var(--hf-forest)}
.kiosk:hover,.kiosk.active{border-color:var(--hf-leaf)}
.socials a{transition:transform .35s var(--ease-bounce),background .3s,color .3s}
.socials a:hover{transform:translateY(-4px) rotate(-6deg);background:var(--hf-sun);color:var(--hf-forest)}
.bubble{border-color:var(--hf-sun);background:var(--hf-paper)}

/* ---------- 08. Étapes 01-02-03 / timeline ---------- */
.step-num,.tl-dot{font-family:var(--font-display)!important;font-weight:800}
.step-num{width:58px!important;height:58px!important;top:-26px!important;font-size:1.25rem!important;background:var(--hf-forest)!important;color:var(--hf-sun)!important;border-radius:42% 58% 55% 45%/48% 42% 58% 52%!important;box-shadow:0 5px 0 var(--hf-forest-deep);transition:transform .45s var(--ease-bounce)}
.step-num::after{content:'';position:absolute;left:16px;right:16px;bottom:13px;height:3px;border-radius:3px;background:currentColor;opacity:.8}
.step-card:hover .step-num{transform:rotate(-10deg) scale(1.08)}
.tl-dot{width:40px!important;height:40px!important;border-radius:42% 58% 55% 45%/48% 42% 58% 52%!important;font-size:.9rem;box-shadow:0 4px 0 rgba(0,0,0,.15)}
.timeline::before{width:4px;background:repeating-linear-gradient(180deg,var(--hf-leaf) 0 10px,transparent 10px 18px)!important;opacity:.7}
#franchise .timeline::before{background:repeating-linear-gradient(180deg,var(--hf-sun) 0 10px,transparent 10px 18px)!important}

/* ---------- 09. Vagues & formes organiques ---------- */
:root{
  --hf-wave-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 58C150 18 290 8 430 30s250 62 410 58 300-70 450-72c70-1 120 10 150 20v104H0z'/%3E%3C/svg%3E");
  --hf-wave-mask-2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 40c110 30 230 52 380 40S640 12 800 16s260 60 400 62 190-28 240-40v62H0z'/%3E%3C/svg%3E");
  --hf-wave-mask-3:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 70c90-40 200-62 330-50s200 58 340 58 230-64 380-66 270 40 390 30v58H0z'/%3E%3C/svg%3E");
}
/* Vague posée par happyfresh.js en haut de chaque bloc dont la couleur change */
.hf-wave-top{position:relative;overflow-x:clip!important;overflow-y:visible!important}
.hf-wave-top::before{content:'';position:absolute;left:0;right:0;top:calc(var(--wave-h) * -1 + 1px);height:var(--wave-h);background:var(--wave-color,var(--hf-cream));-webkit-mask:var(--wave-shape,var(--hf-wave-mask)) center bottom/100% 100% no-repeat;mask:var(--wave-shape,var(--hf-wave-mask)) center bottom/100% 100% no-repeat;z-index:3;pointer-events:none}
.hf-wave-top.hf-wave-2{--wave-shape:var(--hf-wave-mask-2)}
.hf-wave-top.hf-wave-3{--wave-shape:var(--hf-wave-mask-3)}
.hf-wave-top.hf-flip::before{transform:scaleX(-1)}
.scroll-hint{z-index:4!important}
/* Blobs organiques (injectés dans les héros) */
.hero,.page-hero,.legal-hero,.concept-photo,.merci-hero,.blog-hero{position:relative;overflow:hidden;isolation:isolate}
.hf-blob{position:absolute;pointer-events:none;z-index:0;border-radius:42% 58% 63% 37%/41% 44% 56% 59%;animation:hf-morph 14s ease-in-out infinite;will-change:transform,border-radius}
.hf-blob--sun{width:min(46vw,520px);aspect-ratio:1;right:-12%;top:-18%;background:radial-gradient(circle at 35% 35%,rgba(246,195,36,.42),rgba(246,195,36,.08) 70%)}
.hf-blob--leaf{width:min(34vw,380px);aspect-ratio:1;left:-10%;bottom:-16%;background:radial-gradient(circle at 60% 40%,rgba(107,192,75,.45),rgba(107,192,75,.06) 70%);animation-duration:18s;animation-direction:reverse}
.hf-blob--ring{width:140px;aspect-ratio:1;right:12%;bottom:14%;border:3px dashed rgba(246,195,36,.45);background:none;animation:hf-spin 40s linear infinite}
.hero .hf-blob{z-index:1}
.page-hero::before{display:none}
.page-hero .container,.legal-hero>*,.merci-hero>*{position:relative;z-index:2}
.hf-leaf-float{position:absolute;z-index:1;pointer-events:none;color:var(--hf-leaf);opacity:.55;width:44px;height:44px;animation:hf-float 7s ease-in-out infinite}
.hf-leaf-float.l2{color:var(--hf-sun);width:30px;height:30px;animation-delay:-2s;animation-duration:9s}
.hf-leaf-float.l3{width:26px;height:26px;animation-delay:-4s;opacity:.4}
@keyframes hf-morph{0%,100%{border-radius:42% 58% 63% 37%/41% 44% 56% 59%}33%{border-radius:58% 42% 38% 62%/55% 61% 39% 45%}66%{border-radius:38% 62% 51% 49%/62% 38% 62% 38%}}
@keyframes hf-spin{to{rotate:360deg}}
@keyframes hf-float{0%,100%{translate:0 0}50%{translate:0 -12px}}
/* Texture papier (léger grain sur fonds sombres, comme le flyer) */
.benefits,.convert,footer,#franchise,#salades,.legal-hero,.marquee{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='hfnoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23hfnoise)'/%3E%3C/svg%3E")}

/* ---------- 10. Sections clés & footer ---------- */
.hero::after{background:linear-gradient(180deg,rgba(30,77,43,.62),rgba(21,58,32,.82))!important}
.hero h1{font-size:clamp(2.5rem,6.6vw,5rem);text-shadow:0 4px 30px rgba(0,0,0,.18)}
.hero h1 em,.page-hero h1 em,.legal-hero h1 em{color:var(--hf-sun)}
.page-hero h1{text-shadow:0 4px 30px rgba(0,0,0,.15)}
.marquee{background-color:var(--hf-sun);padding:18px 0}
.marquee span{color:var(--hf-forest);font-family:var(--font-display)}
.marquee span.lime{color:var(--hf-green)}
.steps-band{background-color:var(--hf-sun)}
.steps-band .step-card{background:var(--hf-paper)}
#partenaires{background-color:var(--hf-sun)}
#partenaires .partner-card{background:var(--hf-paper)}
.breadcrumb-bar{background:rgba(21,58,32,.92)!important}
.breadcrumb-bar a{color:var(--hf-sun)!important}
footer{background-color:var(--hf-forest-deep)}
footer h4,.footer-grid h4{color:var(--hf-sun);font-family:var(--font-display)}
.footer-grid li a{transition:color .25s,padding .25s}
.footer-grid li a:hover{color:var(--hf-sun);padding-left:4px}
.footer-bottom span:last-child{font-family:var(--font-display);color:var(--hf-sun);opacity:1}
.legal-hero{background-color:var(--hf-forest)}
.histoire-body h2{border-bottom-color:var(--hf-sun)}
.histoire-quote{border-radius:28px 40px 28px 40px}
.founder-photo{border-color:var(--hf-sun)}
.sticky-cta .btn{box-shadow:0 5px 0 var(--hf-sun-deep),0 18px 40px -10px rgba(21,58,32,.5)}

/* Barre de progression + retour en haut */
.hf-progress{position:fixed;top:0;left:0;height:4px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--hf-leaf),var(--hf-sun));z-index:1300;pointer-events:none}
.hf-top{position:fixed;right:18px;bottom:18px;width:50px;height:50px;border:0;border-radius:42% 58% 55% 45%/48% 42% 58% 52%;background:var(--hf-forest);color:var(--hf-sun);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:950;box-shadow:0 5px 0 var(--hf-forest-deep);opacity:0;transform:translateY(20px) scale(.8);transition:opacity .35s,transform .45s var(--ease-bounce)}
.hf-top.show{opacity:1;transform:none}
.hf-top:hover{transform:translateY(-3px) rotate(-8deg)}
.hf-top .hf-ico{width:24px;height:24px}

/* ---------- 11. Animations au scroll ---------- */
.hf-rv{opacity:0;transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:var(--d,0s)}
.hf-rv.hf-up{transform:translateY(38px)}
.hf-rv.hf-zoom{transform:scale(.92) translateY(20px)}
.hf-rv.hf-left{transform:translateX(-40px)}
.hf-rv.hf-right{transform:translateX(40px)}
.hf-rv.hf-in{opacity:1;transform:none}
.reveal{transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.hero-content>*{animation:hf-hero-in 1s var(--ease-out) both}
.hero-content>*:nth-child(2){animation-delay:.12s}
.hero-content>*:nth-child(3){animation-delay:.24s}
.hero-content>*:nth-child(4){animation-delay:.36s}
.page-hero .container>*,.legal-hero>*,.concept-photo .container>*{animation:hf-hero-in .9s var(--ease-out) both}
.page-hero .container>*:nth-child(2),.concept-photo .container>*:nth-child(2){animation-delay:.1s}
.page-hero .container>*:nth-child(3),.concept-photo .container>*:nth-child(3){animation-delay:.2s}
.page-hero .container>*:nth-child(4){animation-delay:.3s}
.page-hero .container>*:nth-child(5){animation-delay:.4s}
@keyframes hf-hero-in{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
[data-hf-parallax]{will-change:transform}

/* ---------- 12. Responsive & accessibilité ---------- */
@media (max-width:768px){
  :root{--wave-h:30px;--radius:22px}
  header,header.scrolled{padding:10px 16px}
  .hf-word{font-size:1.4rem}
  .hf-mark{width:38px;height:35px}
  .nav-links{background:var(--hf-forest)!important;background-image:radial-gradient(circle at 90% 10%,rgba(246,195,36,.22),transparent 40%),radial-gradient(circle at 0% 100%,rgba(107,192,75,.25),transparent 45%)!important;padding-top:96px!important}
  .nav-links.open>li{animation:hf-hero-in .5s var(--ease-out) both}
  .nav-links.open>li:nth-child(2){animation-delay:.05s}.nav-links.open>li:nth-child(3){animation-delay:.1s}.nav-links.open>li:nth-child(4){animation-delay:.15s}.nav-links.open>li:nth-child(5){animation-delay:.2s}.nav-links.open>li:nth-child(6){animation-delay:.25s}
  .nav-link-btn{font-family:var(--font-display)!important}
  .dd-icon{background:rgba(246,195,36,.15);color:var(--hf-sun)}
  .nav-links a.nav-pill[href$="devenir-franchise.html"]{color:var(--hf-forest)!important;border-color:var(--hf-sun)!important}
  .hf-blob--ring,.hf-leaf-float.l3{display:none}
  .hf-top{bottom:84px;right:14px;width:44px;height:44px}
  .emoji-big:has(.hf-ico){width:70px;height:70px;font-size:36px}
  .footer-logo.hf-logo{justify-content:flex-start}
}
@media (max-width:640px){
  .hero h1{font-size:clamp(2.1rem,10vw,2.8rem)}
  .tag{transform:none}
}
@media (max-width:380px){
  .hf-word{font-size:1.22rem}
  .hf-mark{width:34px;height:31px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .hf-rv{opacity:1;transform:none}
}
@media print{header,.sticky-cta,.hf-top,.hf-progress,.hf-blob,.hf-leaf-float{display:none!important}.hf-wave-top::before{display:none}}

/* ---------- Navigation compacte (tablette / petit laptop) ---------- */
@media (min-width:769px) and (max-width:1380px){
  .nav{gap:10px}.nav-links{gap:2px}
  .nav-link-btn{font-size:.84rem;padding:10px 7px;gap:4px}
  .nav-pill{padding:9px 12px!important;font-size:.68rem!important;gap:5px}
  .nav-pill .pill-icon{display:none}
  .hf-word{font-size:1.35rem}.hf-mark{width:36px;height:33px}
}
@media (min-width:769px) and (max-width:1060px){
  .nav-links li:has(a[href$="mon-compte.html"]){display:none}
  .nav-link-btn{font-size:.8rem;padding:10px 5px}
  .hf-word{font-size:1.2rem}
}
@media (max-width:768px){
  .dropdown-panel{background:rgba(255,255,255,.06)!important;border:0!important;padding:0!important}
  .nav-item.open .dropdown-panel{padding:8px!important}
  .dropdown-item:hover{background:rgba(255,255,255,.08)!important}
}