/* ============================================================================
   Les Agités du local — « Food truck éco-local, soleil levant, frais & joyeux »
   Archétype : food truck / traiteur bio, jeune, bienveillant, hand-crafted.
   Palette : Vert forêt #1F6E4E + Jaune-beurre #F0CE82 + crème #FBF6EA
            (les couleurs RÉELLES du logo + du camion).
   Fonts : Lilita One (display chunky playful) / Overpass (body).
   Signature : SOLEIL LEVANT à rayons (motif du logo) + rondeur généreuse.
   Bootstrap = squelette ; ce fichier = toute la peau. Aucune classe custom.
   ========================================================================== */

:root {
  --vert: #1F6E4E;
  --vert-800: #175539;
  --vert-900: #103C29;
  --vert-050: #E4F0E9;
  --beurre: #F0CE82;
  --beurre-2: #F7E1AE;
  --creme: #FBF6EA;
  --creme-2: #F4EAD3;
  --paper: #FFFDF6;
  --tinta: #253028;
  --muted: #62705F;
  --line: #E7DBC2;

  --bs-primary: #1F6E4E;
  --bs-primary-rgb: 31, 110, 78;
  --bs-secondary: #F0CE82;
  --bs-secondary-rgb: 240, 206, 130;
  --bs-body-color: #253028;
  --bs-body-bg: #FBF6EA;
  --bs-body-font-family: 'Overpass', system-ui, -apple-system, sans-serif;
  --bs-border-color: #E7DBC2;
  --bs-link-color: #1F6E4E;
  --bs-link-hover-color: #175539;

  /* SOLEIL LEVANT (signature) en data-URI */
  --sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 26'%3E%3Cg fill='none' stroke='%231F6E4E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 24 A14 14 0 0 1 34 24'/%3E%3Cpath d='M20 3 L20 8'/%3E%3Cpath d='M9.5 8 L12.5 12'/%3E%3Cpath d='M30.5 8 L27.5 12'/%3E%3Cpath d='M3 16 L8 18'/%3E%3Cpath d='M37 16 L32 18'/%3E%3C/g%3E%3Cline x1='4' y1='24' x2='36' y2='24' stroke='%231F6E4E' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --sun-beurre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 26'%3E%3Cg fill='none' stroke='%23F0CE82' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 24 A14 14 0 0 1 34 24'/%3E%3Cpath d='M20 3 L20 8'/%3E%3Cpath d='M9.5 8 L12.5 12'/%3E%3Cpath d='M30.5 8 L27.5 12'/%3E%3Cpath d='M3 16 L8 18'/%3E%3Cpath d='M37 16 L32 18'/%3E%3C/g%3E%3Cline x1='4' y1='24' x2='36' y2='24' stroke='%23F0CE82' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");

  --shadow-soft: 0 3px 8px rgba(37, 48, 40, .06), 0 22px 46px -28px rgba(37, 48, 40, .3);
  --shadow-lift: 0 8px 18px rgba(37, 48, 40, .12), 0 34px 62px -30px rgba(31, 110, 78, .4);
  --r: 24px;
}

/* ------------------------------------------------------------------ base */
body {
  background-color: var(--creme);
  background-image:
    radial-gradient(1000px 440px at 88% -6%, rgba(240, 206, 130, .3), transparent 60%),
    radial-gradient(820px 400px at -6% 100%, rgba(31, 110, 78, .08), transparent 60%);
  color: var(--tinta);
}
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
  font-family: 'Lilita One', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: .4px;
  color: var(--vert);
  line-height: 1.12;
}
p { line-height: 1.75; }
a { text-decoration: none; }
::selection { background: rgba(240, 206, 130, .6); }
.container { max-width: 1160px; }

/* soleil levant réutilisable */
#sun-mark { display: inline-block; width: 30px; height: 20px; background: var(--sun) center/contain no-repeat; flex-shrink: 0; }

/* kicker */
#section-kicker, #hero-eyebrow {
  font-family: 'Overpass', sans-serif;
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--vert);
  align-items: center;
}

/* ------------------------------------------------------------------ bandeau d'annonce */
#banner { background: var(--vert); color: var(--beurre-2); font-weight: 600; }
#banner-text { font-family: 'Overpass', sans-serif; letter-spacing: .3px; }

/* ------------------------------------------------------------------ navbar */
.navbar {
  background: rgba(251, 246, 234, .92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
#brand-sun { width: 42px; height: 28px; background: var(--sun) center/contain no-repeat; }
#brand-word { font-family: 'Lilita One', sans-serif; font-size: 1.3rem; color: var(--vert); letter-spacing: .5px; }
.navbar .nav-link {
  font-family: 'Overpass', sans-serif;
  font-weight: 700;
  color: var(--tinta);
  border-radius: 100px;
  padding: .45rem .9rem;
  transition: color .2s, background-color .2s;
}
.navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--vert); background: rgba(240, 206, 130, .4); }
#nav-social { width: 38px; height: 38px; border-radius: 50%; background: var(--vert-050); color: var(--vert); font-size: 1rem; transition: background-color .2s, color .2s, transform .2s; }
#nav-social:hover { background: var(--vert); color: #fff; transform: translateY(-2px); }

/* ------------------------------------------------------------------ boutons */
.btn { font-family: 'Overpass', sans-serif; font-weight: 800; border-radius: 100px; transition: transform .2s ease, box-shadow .2s ease, background-color .2s; }
.btn-lg { padding: .8rem 1.7rem; }
.btn-primary {
  --bs-btn-bg: var(--vert);
  --bs-btn-border-color: var(--vert);
  --bs-btn-hover-bg: var(--vert-800);
  --bs-btn-hover-border-color: var(--vert-800);
  --bs-btn-active-bg: var(--vert-800);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
  box-shadow: 0 10px 22px -12px rgba(16, 60, 41, .85);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(16, 60, 41, .9); }
.btn-outline-primary {
  --bs-btn-color: var(--vert);
  --bs-btn-border-color: var(--vert);
  --bs-btn-hover-bg: var(--vert);
  --bs-btn-hover-border-color: var(--vert);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--vert-800);
  background: transparent;
  border-width: 2px;
}
.btn-outline-primary:hover { transform: translateY(-2px); }

/* ------------------------------------------------------------------ hero */
#top { position: relative; }
#top::before {
  content: '';
  position: absolute; top: -30px; right: -20px;
  width: 300px; height: 200px;
  background: var(--sun) center/contain no-repeat;
  opacity: .06;
  pointer-events: none;
}
#hero-title { font-size: clamp(2.4rem, 5.2vw, 4.2rem); color: var(--vert); }
#hero-lead { font-size: 1.22rem; color: var(--tinta); font-weight: 500; }
#bio-badge {
  background: var(--vert);
  color: var(--beurre-2);
  border-radius: 100px;
  padding: .6rem 1.2rem;
  font-weight: 700;
  font-size: .95rem;
}
#bio-badge i { color: var(--beurre); margin-top: .1rem; }
#hero-figure {
  border-radius: 30px;
  overflow: hidden;
  border: 8px solid #fff;
  box-shadow: var(--shadow-lift);
  transform: rotate(-1.5deg);
}
#hero-figure img { display: block; width: 100%; object-fit: cover; aspect-ratio: 1 / 1; }

/* ------------------------------------------------------------------ features */
#ou-nous-trouver { background: linear-gradient(180deg, rgba(244, 234, 211, .55), transparent 45%); }
#features-title { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
#feature-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform .22s ease, box-shadow .22s ease;
}
#feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
#feature-thumb { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--creme-2); }
#feature-thumb img { transition: transform .5s ease; }
#feature-card:hover #feature-thumb img { transform: scale(1.06); }
#feature-title { font-size: 1.3rem; color: var(--vert); }
#feature-text { color: var(--muted); }
#feature-btn { font-size: .82rem; border-radius: 100px; }

/* ------------------------------------------------------------------ confiance */
#confiance-block {
  background: var(--vert);
  color: var(--beurre-2);
  border-radius: 30px;
  box-shadow: var(--shadow-lift);
  position: relative;
  overflow: hidden;
}
#confiance-block::before { content: ''; position: absolute; inset: 0; background-image: var(--sun-beurre); background-size: 140px; opacity: .06; pointer-events: none; }
#confiance-block > * { position: relative; }
#confiance-title { color: var(--beurre); font-size: 1.5rem; }
#confiance-logos { }
#partenaire-logo { background: #fff; border-radius: 14px; padding: .6rem 1rem; box-shadow: var(--shadow-soft); height: auto; max-height: 84px; width: auto; object-fit: contain; }

/* ------------------------------------------------------------------ page offre pro */
#page-head { background: var(--vert); color: var(--beurre-2); position: relative; overflow: hidden; }
#page-head::before { content: ''; position: absolute; inset: 0; background-image: var(--sun-beurre); background-size: 150px; opacity: .06; pointer-events: none; }
#page-head .container { position: relative; }
#page-head #hero-eyebrow { color: var(--beurre); justify-content: center; }
#page-head #sun-mark { background-image: var(--sun-beurre); }
#page-head #hero-title { color: var(--beurre); font-size: clamp(2rem, 4.4vw, 3.2rem); }
#pro-quote { font-family: 'Overpass', sans-serif; font-style: italic; font-size: 1.18rem; color: #F3EAD4; line-height: 1.7; }

#pro-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
  border-left: 6px solid var(--beurre);
}
#pro-title { font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--vert); }
#pro-accroche { color: var(--vert-800); font-family: 'Overpass', sans-serif; font-size: 1.1rem; }
#pro-text { color: var(--tinta); }
#pro-btn { border-radius: 100px; }

/* ------------------------------------------------------------------ carte traiteur */
#carte-card {
  background: var(--vert);
  color: #F3EAD4;
  border-radius: var(--r);
  box-shadow: var(--shadow-lift);
  position: relative;
  overflow: hidden;
}
#carte-card::before { content: ''; position: absolute; inset: 0; background-image: var(--sun-beurre); background-size: 130px; opacity: .05; pointer-events: none; }
#carte-card > * { position: relative; }
#carte-card #section-kicker { color: var(--beurre); justify-content: center; }
#carte-card #sun-mark { background-image: var(--sun-beurre); }
#carte-title { color: var(--beurre); }
#carte-intro { color: #F3EAD4; }
#carte-allergenes { color: rgba(243, 234, 212, .75); }
#carte-list { border-top: 1px dashed rgba(240, 206, 130, .35); }
#carte-item { border-bottom: 1px dashed rgba(240, 206, 130, .3); color: #F6F0E1; }
#carte-note { color: rgba(243, 234, 212, .85); font-style: italic; }
#carte-card .btn-primary { background: var(--beurre); border-color: var(--beurre); color: var(--vert-900); }
#carte-card .btn-primary:hover { background: #F6DFA1; color: var(--vert-900); }

/* ------------------------------------------------------------------ seo */
#seo h2 { color: var(--vert); }
#seo p { color: var(--muted); }

/* ------------------------------------------------------------------ footer */
#colophon {
  background: var(--vert-900);
  color: #D7E0DA;
  position: relative;
  border-top: 5px solid var(--beurre);
}
#colophon::before { content: ''; position: absolute; inset: 0; background-image: var(--sun-beurre); background-size: 90px; opacity: .05; pointer-events: none; }
#colophon .container { position: relative; }
#footer-name { font-family: 'Lilita One', sans-serif; color: var(--beurre); }
#footer-baseline { color: #EBDDBB; font-weight: 700; }
#footer-head { color: var(--beurre) !important; letter-spacing: 1px; }
#footer-link { color: rgba(215, 224, 218, .85); }
#footer-link:hover { color: var(--beurre); }
#footer-social {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  font-size: 1.1rem;
  transition: background-color .2s, transform .2s;
}
#footer-social:hover { background: var(--beurre); color: var(--vert-900); transform: translateY(-2px); }
#footer-rule { border-color: rgba(255, 255, 255, .14); }
#copyright { color: rgba(215, 224, 218, .82); }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 575px) {
  #hero-figure { transform: none; }
  #brand-word { font-size: 1.05rem; }
  #brand-sun { width: 34px; }
}

/* focus visibles (WCAG) */
a:focus-visible, .btn:focus-visible, .nav-link:focus-visible {
  outline: 3px solid var(--vert);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .btn:hover, #feature-card:hover { transform: none; }
}