/* =========================================================
   LE POIS CHICHE — feuille de style (v2)
   Objectifs de cette version :
   · rendre la palette imposée franchement visible
   · fiabiliser le responsive mobile
   Palette imposée :
   #72fa93 menthe · #9ac1f0 ciel · #a0e548 cosse
   #ffd179 graine · #e45f2b torréfié
   ========================================================= */

:root{
  /* fonds */
  --cream:        #FBF4E4;
  --cream-deep:   #F1E4C4;
  --cream-line:   #E1CD9E;

  /* encre */
  --ink:          #33230F;
  --ink-soft:     #63502F;
  --ink-faint:    #93805C;

  /* palette imposée */
  --mint:         #72fa93;
  --sky:          #9ac1f0;
  --lime:         #a0e548;
  --gold:         #ffd179;
  --terracotta:   #e45f2b;

  /* dérivés lisibles (texte sur clair) */
  --mint-ink:       #157a3a;
  --sky-ink:        #2b62a8;
  --lime-ink:       #567f14;
  --gold-ink:       #a5751a;
  --terracotta-ink: #b8451c;

  /* typo */
  --font-display: "Unbounded", system-ui, sans-serif;
  --font-body:    "Work Sans", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* forme */
  --radius-pod:   999px;
  --radius-card:  26px;
  --radius-sm:    14px;

  --shadow-card: 0 2px 0 rgba(51,35,15,.04), 0 18px 34px -20px rgba(51,35,15,.28);
  --shadow-pod:  0 10px 24px -12px rgba(51,35,15,.35);

  --wrap: 1140px;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
svg{ display:block; }
::selection{ background:var(--lime); color:var(--ink); }

:focus-visible{
  outline:3px solid var(--terracotta);
  outline-offset:3px;
  border-radius:6px;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.08;
  margin:0 0 .5em;
  letter-spacing:-.015em;
}
h1{ font-size:clamp(2.3rem, 6vw, 4.4rem); font-weight:800; }
h2{ font-size:clamp(1.65rem, 4.4vw, 2.5rem); }
h3{ font-size:1.22rem; }

p{ margin:0 0 1em; color:var(--ink-soft); max-width:64ch; }
.lede{ font-size:clamp(1.02rem, 2.4vw, 1.18rem); color:var(--ink-soft); }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }
@media (max-width:520px){ .wrap{ padding-inline:18px; } }

/* puce signature : le "bec" du pois chiche */
.beak-list{ list-style:none; margin:0; padding:0; }
.beak-list li{ position:relative; padding-left:1.7em; margin-bottom:.6em; color:var(--ink-soft); }
.beak-list li::before{
  content:""; position:absolute; left:0; top:.4em;
  width:.9em; height:.9em; background:var(--terracotta);
  border-radius:72% 28% 62% 38% / 62% 38% 62% 38%;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font-mono); font-size:.78rem;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--terracotta-ink); font-weight:500; margin-bottom:.9em;
}
.eyebrow::before{
  content:""; width:9px; height:9px;
  border-radius:72% 28% 62% 38% / 62% 38% 62% 38%;
  background:var(--terracotta); display:inline-block;
}
.eyebrow.mint{ color:var(--mint-ink); } .eyebrow.mint::before{ background:var(--mint); }
.eyebrow.sky{ color:var(--sky-ink); }   .eyebrow.sky::before{ background:var(--sky); }
.eyebrow.lime{ color:var(--lime-ink); } .eyebrow.lime::before{ background:var(--lime); }
.eyebrow.gold{ color:var(--gold-ink); } .eyebrow.gold::before{ background:var(--gold); }

/* =========================================================
   NAVIGATION
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:50; padding:14px 0;
  background:linear-gradient(var(--cream) 76%, transparent);
}
.podnav{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--cream-deep); border:2px solid var(--ink);
  border-radius:var(--radius-pod); padding:8px 10px 8px 20px;
  box-shadow:var(--shadow-pod);
}
.brand{
  display:flex; align-items:center; gap:11px;
  font-family:var(--font-display); font-weight:700; font-size:1.02rem;
  text-decoration:none; color:var(--ink); white-space:nowrap;
}
.brand svg{ width:34px; height:34px; flex:none; }

.tabs{ display:flex; gap:5px; background:var(--cream); border-radius:var(--radius-pod); padding:5px; }
.tabs a{
  display:inline-flex; align-items:center; gap:.5em;
  text-decoration:none; font-family:var(--font-display); font-weight:600;
  font-size:.86rem; color:var(--ink-soft);
  padding:11px 18px; border-radius:var(--radius-pod);
  transition:background .18s ease, color .18s ease; min-height:44px;
}
.tabs a .dot{ width:9px; height:9px; border-radius:50%; }
.tabs a:nth-child(1) .dot{ background:var(--lime); }
.tabs a:nth-child(2) .dot{ background:var(--sky); }
.tabs a:nth-child(3) .dot{ background:var(--terracotta); }
.tabs a:hover{ color:var(--ink); background:var(--cream-deep); }
.tabs a[aria-current="page"]{ background:var(--ink); color:var(--cream); }
.tabs a[aria-current="page"] .dot{ box-shadow:0 0 0 3px rgba(251,244,228,.25); }

@media (max-width: 760px){
  .podnav{ flex-direction:column; align-items:stretch; gap:12px; border-radius:24px; padding:14px; }
  .brand{ justify-content:center; }
  .tabs{ width:100%; }
  .tabs a{ flex:1; justify-content:center; padding:12px 6px; font-size:.8rem; }
  .tabs a .dot{ width:8px; height:8px; }
}
@media (max-width: 380px){
  .tabs a{ flex-direction:column; gap:4px; padding:10px 4px; font-size:.72rem; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{ padding:52px 0 36px; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
@media (max-width: 900px){
  .hero-grid{ grid-template-columns:1fr; gap:28px; }
  .hero-art{ order:-1; max-width:400px; margin-inline:auto; }
}
.hero h1 em{ font-style:normal; color:var(--terracotta); }
.hero-art svg{ width:100%; height:auto; }

.hero-facts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.fact-pill{
  font-family:var(--font-mono); font-size:.8rem; color:var(--ink);
  background:var(--cream); border:1.5px solid var(--cream-line);
  border-radius:var(--radius-pod); padding:9px 15px;
}
.fact-pill b{ color:var(--terracotta-ink); font-weight:600; }
.fact-pill.mint{ border-color:var(--mint); background:color-mix(in srgb,var(--mint) 20%,var(--cream)); }
.fact-pill.sky{  border-color:var(--sky);  background:color-mix(in srgb,var(--sky) 22%,var(--cream)); }
.fact-pill.lime{ border-color:var(--lime); background:color-mix(in srgb,var(--lime) 20%,var(--cream)); }
.fact-pill.gold{ border-color:var(--gold); background:color-mix(in srgb,var(--gold) 30%,var(--cream)); }

/* =========================================================
   SECTIONS — teintées par couleur pour rendre la palette visible
   ========================================================= */
section{ padding:56px 0; }
@media (max-width:640px){ section{ padding:40px 0; } }

.sec-sky{  background:color-mix(in srgb, var(--sky) 24%, var(--cream));  border-block:2px solid color-mix(in srgb,var(--sky) 55%,var(--cream)); }
.sec-lime{ background:color-mix(in srgb, var(--lime) 20%, var(--cream)); border-block:2px solid color-mix(in srgb,var(--lime) 55%,var(--cream)); }
.sec-gold{ background:color-mix(in srgb, var(--gold) 28%, var(--cream)); border-block:2px solid color-mix(in srgb,var(--gold) 60%,var(--cream)); }

.section-head{ max-width:660px; margin-bottom:34px; }

.card{
  background:var(--cream); border:2px solid var(--cream-line);
  border-radius:var(--radius-card); padding:26px; box-shadow:var(--shadow-card);
}
/* liseré de couleur en haut de carte */
.card.tab-mint{ border-top:8px solid var(--mint); }
.card.tab-sky{  border-top:8px solid var(--sky); }
.card.tab-lime{ border-top:8px solid var(--lime); }
.card.tab-gold{ border-top:8px solid var(--gold); }
.card.tab-terracotta{ border-top:8px solid var(--terracotta); }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
@media (max-width: 920px){ .grid-3{ grid-template-columns:1fr; } .grid-2{ grid-template-columns:1fr; } }

/* recettes */
.recipe-card{ display:flex; flex-direction:column; gap:13px; }
.recipe-card .icon{ width:76px; height:76px; }
.recipe-card h3{ margin-bottom:0; }
.recipe-tag{
  font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.07em; color:var(--ink-faint);
}
.recipe-card details{ margin-top:4px; }
.recipe-card summary{
  cursor:pointer; font-family:var(--font-display); font-weight:600; font-size:.86rem;
  color:var(--terracotta-ink); list-style:none; display:flex; align-items:center; gap:8px;
  min-height:40px;
}
.recipe-card summary::-webkit-details-marker{ display:none; }
.recipe-card summary::after{
  content:"+"; margin-left:auto; font-family:var(--font-mono);
  border:2px solid var(--cream-line); width:26px; height:26px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; transition:transform .2s ease;
}
.recipe-card details[open] summary::after{ content:"–"; transform:rotate(180deg); border-color:var(--terracotta); }
.recipe-body h4{
  font-family:var(--font-mono); font-size:.74rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-faint); margin:14px 0 8px;
}
.recipe-body ul, .recipe-body ol{ margin:0; padding-left:1.2em; color:var(--ink-soft); font-size:.94rem; }
.recipe-body li{ margin-bottom:5px; }

/* production — barres colorées */
.stat-row{
  display:grid; grid-template-columns:minmax(96px,auto) 1fr auto;
  align-items:center; gap:12px; padding:11px 0;
  border-bottom:1px dashed var(--cream-line); font-size:.94rem;
}
.stat-row:last-child{ border-bottom:none; }
.stat-row .country{ font-weight:600; color:var(--ink); }
.stat-row .bar-wrap{ height:12px; background:var(--cream-deep); border-radius:var(--radius-pod); overflow:hidden; }
.stat-row .bar{ height:100%; border-radius:var(--radius-pod); }
.stat-row .val{ font-family:var(--font-mono); color:var(--ink-soft); font-size:.82rem; white-space:nowrap; }
@media (max-width:460px){
  .stat-row{ grid-template-columns:1fr auto; }
  .stat-row .bar-wrap{ grid-column:1 / -1; order:3; }
}

/* chips */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:.78rem; padding:7px 13px;
  border-radius:var(--radius-pod); font-weight:600;
}
.chip.mint{ background:var(--mint); color:#0f4d25; }
.chip.sky{  background:var(--sky);  color:#173a63; }
.chip.lime{ background:var(--lime); color:#31480d; }
.chip.gold{ background:var(--gold); color:#5c400b; }
.chip.terracotta{ background:var(--terracotta); color:#fff3ea; }

/* boutons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:600; font-size:.92rem;
  padding:14px 26px; border-radius:var(--radius-pod); text-decoration:none;
  border:2px solid transparent; transition:transform .15s ease, box-shadow .15s ease;
  min-height:48px;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--terracotta); color:#fff8ef; box-shadow:0 12px 22px -12px rgba(228,95,43,.7); }
.btn-ghost{ background:transparent; border-color:var(--ink); color:var(--ink); }

/* palette — bandeau identitaire bien visible */
.palette-showcase{
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  border-radius:var(--radius-card); overflow:hidden;
  border:2px solid var(--ink); margin-top:8px;
}
.palette-showcase div{
  aspect-ratio:3/2; display:flex; align-items:flex-end; padding:12px;
  font-family:var(--font-mono); font-size:.68rem; font-weight:600;
}
@media (max-width:560px){ .palette-showcase div{ font-size:.58rem; padding:8px; } }

/* =========================================================
   NUTRITION
   ========================================================= */
.nutri-toggle{
  display:inline-flex; background:var(--cream-deep); border:2px solid var(--ink);
  border-radius:var(--radius-pod); padding:5px; margin-bottom:24px; max-width:100%;
}
.nutri-toggle button{
  font-family:var(--font-display); font-weight:600; font-size:.85rem;
  border:none; background:transparent; color:var(--ink-soft);
  padding:11px 20px; border-radius:var(--radius-pod); cursor:pointer; min-height:44px;
}
.nutri-toggle button[aria-selected="true"]{ background:var(--terracotta); color:#fff8ef; }
@media (max-width:420px){
  .nutri-toggle{ width:100%; }
  .nutri-toggle button{ flex:1; padding:11px 8px; font-size:.78rem; }
}

.nutri-stats{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:38px; }
@media (max-width: 940px){ .nutri-stats{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 440px){ .nutri-stats{ grid-template-columns:1fr; } }

.nutri-stat{ border:2px solid var(--ink); border-radius:var(--radius-card); padding:18px; }
.nutri-stat.c-lime{ background:color-mix(in srgb,var(--lime) 34%,var(--cream)); }
.nutri-stat.c-gold{ background:color-mix(in srgb,var(--gold) 44%,var(--cream)); }
.nutri-stat.c-mint{ background:color-mix(in srgb,var(--mint) 32%,var(--cream)); }
.nutri-stat.c-terracotta{ background:color-mix(in srgb,var(--terracotta) 24%,var(--cream)); }
.nutri-stat.c-sky{ background:color-mix(in srgb,var(--sky) 34%,var(--cream)); }
.nutri-stat .num{ font-family:var(--font-mono); font-size:1.9rem; font-weight:600; color:var(--ink); display:block; }
.nutri-stat .unit{ font-size:1rem; color:var(--ink-soft); }
.nutri-stat .label{ font-size:.82rem; color:var(--ink-soft); margin-top:4px; }

.nutri-layout{ display:grid; grid-template-columns:1.2fr .8fr; gap:26px; align-items:start; }
@media (max-width: 860px){ .nutri-layout{ grid-template-columns:1fr; } }

.donut-card{ border:2px solid var(--cream-line); border-radius:var(--radius-card); background:var(--cream); padding:24px; box-shadow:var(--shadow-card); text-align:center; }
.donut-card svg{ width:100%; max-width:260px; height:auto; margin:0 auto 12px; }
.donut-legend{ display:flex; flex-direction:column; gap:8px; text-align:left; }
.donut-legend .row{ display:flex; align-items:center; gap:10px; font-size:.9rem; color:var(--ink-soft); }
.donut-legend .key{ width:16px; height:16px; border-radius:5px; flex:none; }
.donut-legend b{ margin-left:auto; font-family:var(--font-mono); color:var(--ink); }

.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius-card); }
table.data-table{
  width:100%; border-collapse:collapse; font-size:.92rem; background:var(--cream);
  border:2px solid var(--cream-line); border-radius:var(--radius-card); overflow:hidden; min-width:340px;
}
table.data-table caption{
  text-align:left; font-family:var(--font-mono); font-size:.76rem;
  color:var(--ink-faint); padding:14px 20px 0; caption-side:top;
}
table.data-table th, table.data-table td{ padding:11px 20px; text-align:left; border-bottom:1px solid var(--cream-line); }
table.data-table thead th{
  font-family:var(--font-display); font-size:.76rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-faint); background:var(--cream-deep);
}
table.data-table td.num, table.data-table th.num{ font-family:var(--font-mono); text-align:right; }
table.data-table tbody tr:last-child td{ border-bottom:none; }
table.data-table tbody tr:hover{ background:var(--cream-deep); }
table.data-table tr.group td{
  font-family:var(--font-display); font-weight:600; font-size:.76rem;
  text-transform:uppercase; letter-spacing:.05em; color:var(--ink);
}
table.data-table tr.g-gold td{ background:color-mix(in srgb,var(--gold) 40%,var(--cream)); }
table.data-table tr.g-sky td{  background:color-mix(in srgb,var(--sky) 38%,var(--cream)); }
table.data-table tr.g-lime td{ background:color-mix(in srgb,var(--lime) 34%,var(--cream)); }

.nutri-panel[hidden]{ display:none; }

.callout{
  border-radius:var(--radius-card); border:2px solid color-mix(in srgb,var(--sky) 60%,var(--cream));
  padding:24px 28px; background:color-mix(in srgb, var(--sky) 26%, var(--cream));
}
.callout h3{ margin-bottom:.4em; }

.sources{ margin-top:44px; padding-top:22px; border-top:2px solid var(--cream-line); font-size:.85rem; color:var(--ink-faint); }
.sources a{ color:var(--terracotta-ink); text-decoration:underline; text-underline-offset:3px; }
.sources ul{ margin:.6em 0 0; padding-left:1.2em; }

/* =========================================================
   SPONSOR
   ========================================================= */
.sponsor-card{
  background:var(--ink); color:var(--cream); border-radius:30px; padding:44px;
  position:relative; overflow:hidden;
}
@media (max-width:600px){ .sponsor-card{ padding:28px; } }
.sponsor-card::after{
  content:""; position:absolute; right:-70px; top:-70px; width:220px; height:220px;
  background:radial-gradient(circle at 30% 30%, var(--gold), var(--terracotta) 70%);
  border-radius:50%; opacity:.22;
}
.sponsor-card p{ color:#E9DCBE; position:relative; }
.sponsor-wordmark{
  font-family:var(--font-display); font-weight:800; font-size:clamp(1.6rem,5vw,2.4rem);
  letter-spacing:-.015em; margin-bottom:.15em; position:relative;
}
.sponsor-tagline{ font-family:var(--font-mono); color:var(--gold); font-size:.92rem; margin-bottom:1.5em; display:block; position:relative; }
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:26px 0; position:relative; }
@media (max-width: 800px){ .pillars{ grid-template-columns:1fr; } }
.pillar{ border-radius:18px; padding:20px; border:2px solid transparent; }
.pillar.p-mint{ background:color-mix(in srgb,var(--mint) 20%,transparent); border-color:var(--mint); }
.pillar.p-sky{  background:color-mix(in srgb,var(--sky) 20%,transparent);  border-color:var(--sky); }
.pillar.p-gold{ background:color-mix(in srgb,var(--gold) 20%,transparent); border-color:var(--gold); }
.pillar .icon{ width:36px; height:36px; margin-bottom:11px; }
.pillar h4{ font-family:var(--font-display); font-size:.98rem; color:var(--cream); margin:0 0 6px; }
.pillar p{ font-size:.86rem; margin:0; color:#D8C9A6; }
.sponsor-card .btn-primary{ background:var(--lime); color:#25360c; box-shadow:0 12px 22px -12px rgba(160,229,72,.6); }

/* =========================================================
   FOOTER
   ========================================================= */
footer.site-footer{ padding:46px 0 60px; border-top:2px solid var(--cream-line); margin-top:20px; }
.footer-grid{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; }
.palette-strip{ display:flex; gap:6px; }
.palette-strip span{
  width:24px; height:24px; display:inline-block;
  border-radius:62% 38% 55% 45% / 55% 45% 60% 40%;
  border:2px solid var(--ink);
}
.footer-note{ font-size:.82rem; color:var(--ink-faint); max-width:48ch; }