/* Le Foodtruckisme — styles partagés */
html,body{margin:0;padding:0;background:#F2E8DC;color:#2F4538;font-family:'Hanken Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
*{box-sizing:border-box}
a{color:#BC7457;text-decoration:none}
a:hover{color:#2F4538}
img{max-width:100%;display:block}
input,textarea{font-family:inherit}
input:focus,textarea:focus{outline:2px solid #BC7457;outline-offset:2px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marquee-slow{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
/* NAV */
.nav{position:sticky;top:0;z-index:50;background:rgba(47,69,56,0.98);backdrop-filter:blur(8px);border-bottom:1px solid rgba(242,232,220,0.08)}
.nav-inner{padding:18px 5%;display:flex;align-items:center;justify-content:space-between;gap:32px}
.nav-brand{display:flex;align-items:center;gap:12px;color:#F2E8DC}
.nav-brand:hover{color:#F2E8DC}
.nav-brand img{height:42px;width:auto}
.nav-brand span{font-family:'Bricolage Grotesque';font-weight:600;font-size:19px;letter-spacing:0.02em;color:#F2E8DC}
.nav-links{display:flex;align-items:center;gap:8px;position:relative}
.nav-link{color:#F2E8DC;font-size:15px;font-weight:500;padding:10px 16px;border-radius:999px;transition:background .15s;display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;cursor:pointer;font-family:inherit}
.nav-link:hover{background:rgba(242,232,220,0.08);color:#F2E8DC}
.nav-link.active{background:rgba(242,232,220,0.1)}
.nav-cta{display:inline-flex;align-items:center;gap:6px;background:#BC7457;color:#F2E8DC;font-size:14px;font-weight:600;padding:11px 18px;border-radius:999px;transition:background .15s,transform .15s;white-space:nowrap}
.nav-cta:hover{background:#a8654a;color:#F2E8DC;transform:translateY(-1px)}
.nav-cta-actions{display:flex;align-items:center;gap:10px}
/* Dropdown */
.dd{position:relative}
.dd-panel{position:absolute;top:calc(100% + 8px);left:0;background:#F2E8DC;border-radius:14px;padding:8px;min-width:240px;box-shadow:0 20px 40px -12px rgba(0,0,0,0.25);animation:fadeUp .18s ease-out;display:none;z-index:60}
.dd.open .dd-panel{display:block}
.dd.open .dd-arrow{transform:rotate(180deg)}
.dd-arrow{transition:transform .2s;opacity:.75}
.dd-item{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:10px;transition:background .15s;color:#2F4538}
.dd-item:hover{background:rgba(47,69,56,0.06);color:#2F4538}
.dd-item strong{font-weight:600;font-size:15px}
.dd-item small{opacity:.6;font-size:13px}
/* Buttons */
.btn-primary{display:inline-flex;align-items:center;gap:10px;background:#BC7457;color:#F2E8DC;font-size:16px;font-weight:600;padding:18px 28px;border-radius:999px;transition:transform .15s,background .2s;border:0;cursor:pointer;font-family:inherit}
.btn-primary:hover{background:#a8654a;color:#F2E8DC;transform:translateY(-2px)}
.btn-secondary{display:inline-flex;align-items:center;gap:10px;color:#F2E8DC;font-size:16px;font-weight:600;padding:18px 26px;border-radius:999px;border:1px solid rgba(242,232,220,0.3);transition:background .15s}
.btn-secondary:hover{background:rgba(242,232,220,0.08);color:#F2E8DC}
.btn-small{padding:14px 24px;font-size:15px}
/* Hero back link */
.hero-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(242,232,220,0.65);font-weight:600;transition:color .15s}
.hero-back:hover{color:#BC7457}
/* Card hover */
.card-hover{transition:transform .2s,box-shadow .2s,border-color .2s}
.card-hover:hover{transform:translateY(-3px);box-shadow:0 20px 34px -20px rgba(47,69,56,0.28);border-color:#BC7457;color:#2F4538}
/* Filter pill button */
.pill{padding:10px 16px;border-radius:999px;background:transparent;color:#2F4538;border:1px solid rgba(47,69,56,0.2);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s}
.pill:hover{border-color:#BC7457;color:#BC7457}
.pill.active{background:#2F4538;color:#F2E8DC;border-color:#2F4538}
/* FAQ */
.faq-item{background:#fff;border:1px solid rgba(47,69,56,0.08);border-radius:16px;overflow:hidden}
.faq-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 28px;background:transparent;border:0;cursor:pointer;font-family:inherit;text-align:left}
.faq-q{font-family:'Bricolage Grotesque';font-weight:600;font-size:18px;letter-spacing:-0.01em;color:#2F4538;line-height:1.3}
.faq-pill{width:32px;height:32px;border-radius:50%;background:rgba(47,69,56,0.06);color:#2F4538;display:flex;align-items:center;justify-content:center;flex:none;font-size:18px;font-weight:600;transition:all .2s}
.faq-item.open .faq-pill{background:#BC7457;color:#F2E8DC}
.faq-a{padding:0 28px 24px;font-size:15px;line-height:1.6;color:rgba(47,69,56,0.75);display:none;animation:fadeUp .2s ease-out}
.faq-item.open .faq-a{display:block}
/* Footer */
.footer{background:#2F4538;color:#F2E8DC;padding:64px 0 32px;border-top:1px solid rgba(242,232,220,0.08)}
.footer-inner{padding:0 5%;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;align-items:start}
.footer-bar{margin:48px 0 0;padding:24px 5% 0;border-top:1px solid rgba(242,232,220,0.1);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:rgba(242,232,220,0.5)}
.footer h4{font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(242,232,220,0.55);font-weight:600;margin:0 0 14px}
.footer a{display:block;font-size:15px;color:#F2E8DC;padding:4px 0}
.footer a:hover{color:#BC7457}
.footer p{font-size:14px;line-height:1.6;color:rgba(242,232,220,0.65);margin:0;max-width:38ch}
.footer-simple{background:#2F4538;color:#F2E8DC;padding:32px 0;border-top:1px solid rgba(242,232,220,0.08)}
.footer-simple .footer-bar{margin:0 auto;border-top:0;padding-top:0}
/* Mobile burger */
.nav-burger{display:none;background:transparent;border:0;cursor:pointer;padding:8px;color:#F2E8DC;border-radius:8px}
.nav-burger:hover{background:rgba(242,232,220,0.08)}
.nav-burger svg{display:block}
.nav-mobile{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:#2F4538;z-index:100;padding:80px 24px 40px;overflow-y:auto}
.nav-mobile.open{display:flex;flex-direction:column;gap:8px}
.nav-mobile a{display:flex;flex-direction:column;padding:16px 20px;border-radius:14px;color:#F2E8DC;font-family:'Bricolage Grotesque';font-weight:600;font-size:20px;background:rgba(242,232,220,0.06);border:1px solid rgba(242,232,220,0.1)}
.nav-mobile a:hover{background:rgba(242,232,220,0.12);color:#F2E8DC}
.nav-mobile a small{font-family:'Hanken Grotesk';font-weight:400;font-size:13px;color:rgba(242,232,220,0.6);margin-top:2px}
.nav-mobile .close{position:absolute;top:20px;right:20px;background:transparent;border:0;color:#F2E8DC;font-size:32px;cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.nav-mobile .close:hover{background:rgba(242,232,220,0.1)}
.nav-mobile .mobile-dd-btn{display:flex;align-items:center;gap:8px;width:100%;padding:16px 20px;border-radius:14px;color:#F2E8DC;font-family:'Bricolage Grotesque';font-weight:600;font-size:20px;background:rgba(242,232,220,0.06);border:1px solid rgba(242,232,220,0.1);cursor:pointer}
.nav-mobile .mobile-dd-btn:hover{background:rgba(242,232,220,0.12)}
.nav-mobile .mobile-dd-panel{flex-direction:column;gap:6px;padding:6px 0 0 16px}
.nav-mobile .mobile-cta{background:#BC7457;border-color:#BC7457;text-align:center;align-items:center;flex-direction:row;justify-content:center;gap:8px}
.nav-mobile .mobile-cta:hover{background:#a8654a}
body.nav-open{overflow:hidden}
/* Wrappers responsive — layout fluide 90% viewport (comme bookmyfoodtruck.fr) */
section > div[style*="margin:0 auto"]{max-width:none !important;padding-left:5% !important;padding-right:5% !important}
/* Journey : le canvas absolu (1500 px) est mis à l'échelle pour tenir sur tous
les écrans desktop ; la version empilée ne sert plus qu'en dessous de 1200 px.
`zoom` agit sur la mise en page — la hauteur de la section suit donc seule, là
où `transform: scale()` aurait laissé un blanc à combler. */
.journey-canvas{display:block}
.journey-fallback{display:none}
/* Le padding de 5% imposé à toutes les sections (l. 100) coûte trop cher ici :
ce canvas est décoratif et pleine largeur. */
.journey-canvas > .journey-scroll{padding-left:20px !important;padding-right:20px !important}
@media (max-width: 1559px){ .journey-stage{zoom:.91} }
@media (max-width: 1439px){ .journey-stage{zoom:.83} }
@media (max-width: 1319px){ .journey-stage{zoom:.76} }
@media (max-width: 1199px){
.journey-canvas{display:none !important}
.journey-fallback{display:block !important}
}
/* FAQ : max-width contraint pour garder les polaroids derrière les questions */
#faq > div[style*="margin:0 auto"]{max-width:1120px !important;padding-left:40px !important;padding-right:40px !important}
/* Polaroids en arrière-plan de la FAQ */
@media (max-width: 900px){
.faq-polaroid{display:none}
}
/* Responsive breakpoints */
@media (max-width: 1080px){
.grid-5{grid-template-columns:repeat(4,1fr) !important}
}
@media (max-width: 960px){
.nav-inner{padding:14px 20px !important;gap:12px;flex-wrap:nowrap}
.nav-links{display:none}
.nav-burger{display:inline-flex}
.footer-inner{grid-template-columns:1fr 1fr !important;gap:32px}
.grid-2, .grid-2-flex{grid-template-columns:1fr !important}
.grid-3{grid-template-columns:repeat(2,1fr) !important}
.grid-4{grid-template-columns:repeat(2,1fr) !important}
.grid-5{grid-template-columns:repeat(3,1fr) !important}
/* Journey grid (accueil) */
#fk-journey-grid{grid-template-columns:1fr !important}
#fk-journey-grid > a{min-height:auto !important;padding:32px !important}
/* Client list rows stack */
#clients-list > a{grid-template-columns:1fr !important;gap:20px !important;padding:20px !important}
#clients-list > a > div:first-child{width:100% !important;height:160px !important}
#clients-list > a > div:last-child{align-items:flex-start !important;text-align:left !important;flex-direction:row !important;justify-content:space-between !important;width:100% !important;gap:12px !important}
#clients-list > a > div:last-child > *{margin-top:0 !important}
/* Fiche client / truck : hero grid — cible tous les grids définis inline */
#app div[style*="grid-template-columns:360px"],
#app div[style*="grid-template-columns:1.3fr"],
#app div[style*="grid-template-columns:1.4fr"]{grid-template-columns:1fr !important;gap:32px !important}
#app div[style*="width:360px"]{width:100% !important;max-width:360px !important;height:220px !important}
#app div[style*="grid-template-columns:1fr 1fr;gap:16px"]{grid-template-columns:1fr 1fr !important}
/* Photo strip fiche truck */
#app div[style*="grid-template-columns:2fr 1fr 1fr"]{grid-template-columns:1fr 1fr !important;height:auto !important}
#app div[style*="grid-template-columns:2fr 1fr 1fr"] > div{height:180px}
/* Hero paddings généraux — remplace paddings généreux */
section[id="top"] > div{padding:72px 24px 80px !important}
}
@media (max-width: 720px){
.nav-inner{padding:12px 14px !important;gap:8px}
.nav-brand img{height:38px}
.nav-brand span{display:none}
.footer-inner{grid-template-columns:1fr !important}
.grid-3, .grid-4{grid-template-columns:1fr !important}
.grid-5{grid-template-columns:repeat(2,1fr) !important}
.hide-sm{display:none !important}
/* Padding horizontal réduit sur mobile */
section > div[style*="margin:0 auto"]{padding-left:20px !important;padding-right:20px !important}
/* Hero verticaux */
section[style*="padding:120px 40px 140px"],
section[id="top"] > div{padding:56px 20px 72px !important}
section[style*="padding:120px 0 140px"],
section[style*="padding:120px 0"]{padding:64px 0 !important}
section[style*="padding:80px 0 100px"]{padding:48px 0 64px !important}
section[style*="padding:64px 0 90px"]{padding:40px 0 56px !important}
section[style*="padding:60px 0 80px"]{padding:40px 0 56px !important}
/* Big blocks (cta gradient) : réduire padding interne */
section > div > div[style*="padding:64px"],
section > div > div[style*="padding:56px"]{padding:28px !important}
section > div > div[style*="padding:48px"],
section > div > div[style*="padding:44px"]{padding:24px !important}
/* Filter sticky bar top offset */
section[style*="position:sticky"][style*="top:74px"]{top:56px !important;padding:20px 0 8px !important}
/* Hero flex/stats */
section[style*="padding:80px 0 100px"] > div,
section[style*="padding:80px 0 100px"] > div > div{padding:0 20px}
/* Concept sections : image d'abord */
section.concept-alt > div > div:first-child{order:2}
/* Truck fiche : dernière colonne stats en 2 cols */
#app div[style*="grid-template-columns:1fr 1fr;gap:16px"] > div{padding:16px !important}
#app div[style*="grid-template-columns:1fr 1fr;gap:16px"] > div > div:first-child{font-size:28px !important}
/* Réduire h1 énormes */
h1[style*="font-size:clamp(48px"]{font-size:clamp(38px,10vw,64px) !important}
h1[style*="font-size:clamp(56px"]{font-size:clamp(40px,11vw,72px) !important}
h2[style*="font-size:clamp(40px"]{font-size:clamp(30px,7vw,48px) !important}
/* Marges des blocs concept (photo → texte) */
#app section:first-child > div > div[style*="align-items:end"]{align-items:flex-start !important}
/* Polaroid strip masqué sur très petits écrans */
#fk-polaroid-strip > div:nth-child(n+5){display:none}
}
@media (max-width: 480px){
.grid-5{grid-template-columns:1fr 1fr !important}
/* Nav CTA plus court */
.nav-cta{padding:9px 12px;font-size:13px;gap:4px}
.nav-cta > span{display:none}
/* Hero stats en flow — moins d'espace */
section > div > div[style*="gap:48px"]{gap:20px !important}
section > div > div[style*="gap:56px"]{gap:20px !important}
section > div > div[style*="gap:32px"]{gap:16px !important}
/* CTA final : items empilés */
section > div > div[style*="justify-content:space-between"]{flex-direction:column;align-items:flex-start !important}
/* Polaroid — masquer plus */
#fk-polaroid-strip > div:nth-child(n+4){display:none}
/* Client list : plus compact */
#clients-list > a > div:last-child{flex-direction:column !important;align-items:flex-start !important;gap:4px !important}
/* Truck fiche menu : 1 col */
#app div[style*="grid-template-columns:repeat(auto-fill,minmax(280px,1fr))"]{grid-template-columns:1fr !important}
/* Formulaire contact */
.choices-grid{padding:0 20px !important}
}