/* ============ Argana Foods — feuille de style globale ============ */
:root{
  --bleu:#2438A6;
  --bleu-vif:#3D52D5;
  --bleu-nuit:#141D52;
  --safran:#E8A020;
  --safran-clair:#F5C462;
  --olive:#6B7A3A;
  --papier:#FAF7EF;
  --papier-fonce:#F1EBDD;
  --encre:#181B2E;
  --blanc:#FFFFFF;
  --radius:14px;
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  font-family:'Instrument Sans',system-ui,sans-serif;
  background:var(--papier);
  color:var(--encre);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display{font-family:'Bricolage Grotesque',sans-serif}
.mono{font-family:'Spline Sans Mono',monospace}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
:focus-visible{outline:3px solid var(--safran);outline-offset:3px;border-radius:4px}

/* ---------- top bar ---------- */
.topbar{background:var(--bleu-nuit);color:#C9D0F5;font-size:.82rem;padding:7px 0}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.topbar a{color:var(--safran-clair);font-weight:600}

/* ---------- nav ---------- */
header.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(250,247,239,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid #E4DCC8;
}
.nav .wrap{display:flex;align-items:center;gap:28px;height:72px}
.logo{display:flex;align-items:center;gap:10px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.3rem;letter-spacing:-.02em}
.logo .mark{width:34px;height:34px;flex:none}
.logo span em{font-style:normal;color:var(--bleu)}
nav.main{display:flex;gap:24px;margin-left:auto;font-weight:500;font-size:.95rem}
nav.main a{position:relative;padding:6px 0}
nav.main a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--safran);transition:width .25s}
nav.main a:hover::after,nav.main a.active::after{width:100%}
nav.main a.active{color:var(--bleu);font-weight:600}
.nav-cta{
  background:var(--bleu);color:#fff;font-weight:600;font-size:.9rem;
  padding:10px 20px;border-radius:999px;transition:background .2s;white-space:nowrap;
}
.nav-cta:hover{background:var(--bleu-vif)}
.burger{display:none;background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--encre);line-height:1}

/* mobile drawer */
.drawer{
  display:none;position:fixed;inset:0;z-index:60;background:rgba(20,29,82,.45);
}
.drawer.open{display:block}
.drawer .sheet{
  position:absolute;top:0;right:0;height:100%;width:min(320px,85%);
  background:var(--papier);padding:24px;display:flex;flex-direction:column;gap:6px;
  box-shadow:-16px 0 40px rgba(0,0,0,.25);
}
.drawer .sheet a{padding:13px 10px;border-radius:10px;font-weight:600;font-size:1.05rem}
.drawer .sheet a:hover,.drawer .sheet a.active{background:#EDE7D6;color:var(--bleu)}
.drawer .close{align-self:flex-end;background:none;border:none;font-size:1.5rem;cursor:pointer;margin-bottom:8px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:1rem;
  padding:15px 28px;border-radius:999px;transition:transform .15s,background .2s,box-shadow .2s;
  border:none;cursor:pointer;font-family:inherit;
}
.btn:hover{transform:translateY(-2px)}
.btn-safran{background:var(--safran);color:var(--bleu-nuit);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.btn-safran:hover{background:var(--safran-clair)}
.btn-ghost{border:1.5px solid rgba(255,255,255,.45);color:#fff}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-bleu{background:var(--bleu);color:#fff}
.btn-bleu:hover{background:var(--bleu-vif)}

/* ---------- hero (accueil) ---------- */
.hero{background:var(--bleu);color:#fff;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%233D52D5' stroke-width='1.4'%3E%3Cpath d='M60 12 L74 46 L108 60 L74 74 L60 108 L46 74 L12 60 L46 46 Z'/%3E%3Cpath d='M60 12 L108 60 L60 108 L12 60 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:120px 120px;opacity:.55;
}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;padding-top:88px;padding-bottom:96px;align-items:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Spline Sans Mono',monospace;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--safran-clair);margin-bottom:22px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--safran)}
.hero h1{font-size:clamp(2.4rem,5vw,3.9rem);font-weight:800;line-height:1.04;letter-spacing:-.025em;margin-bottom:22px}
.hero h1 .sun{color:var(--safran-clair)}
.hero p.lede{font-size:1.12rem;color:#D6DBFA;max-width:34rem;margin-bottom:34px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats{display:flex;gap:36px;margin-top:48px;flex-wrap:wrap}
.hero-stats .stat b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:1.7rem;font-weight:700;color:#fff}
.hero-stats .stat span{font-size:.85rem;color:#AFB8EE}
.hero-visual{position:relative;display:flex;justify-content:center}
.star-card{width:min(380px,100%);aspect-ratio:1;position:relative}
.star-card svg{width:100%;height:100%;display:block;filter:drop-shadow(0 24px 48px rgba(10,15,60,.45))}
.star-badge{
  position:absolute;bottom:-14px;right:2px;background:var(--papier);color:var(--encre);
  border-radius:12px;padding:12px 18px;box-shadow:0 12px 30px rgba(10,15,60,.35);
  font-size:.85rem;line-height:1.35;
}
.star-badge b{font-family:'Bricolage Grotesque',sans-serif;color:var(--bleu)}

/* ---------- page hero (pages intérieures) ---------- */
.page-hero{background:var(--bleu);color:#fff;position:relative;overflow:hidden;padding:58px 0 54px}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%233D52D5' stroke-width='1.4'%3E%3Cpath d='M60 12 L74 46 L108 60 L74 74 L60 108 L46 74 L12 60 L46 46 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:120px 120px;opacity:.5;
}
.page-hero .wrap{position:relative}
.page-hero h1{font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-.02em;margin-top:8px}
.page-hero p{color:#D6DBFA;max-width:38rem;margin-top:10px;font-size:1.05rem}
.crumb{font-size:.82rem;color:#AFB8EE}
.crumb a:hover{color:#fff;text-decoration:underline}

/* ---------- brand strip ---------- */
.brands{background:var(--papier-fonce);border-bottom:1px solid #E4DCC8;padding:20px 0}
.brands .wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between}
.brands .label{font-family:'Spline Sans Mono',monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#8A8264}
.brands ul{display:flex;gap:28px;list-style:none;flex-wrap:wrap;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.05rem;color:#5B5540}
.brands li{opacity:.75;transition:opacity .2s,color .2s}
.brands li:hover{opacity:1;color:var(--bleu)}

/* ---------- sections ---------- */
section{padding:84px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:44px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.sec-head p{color:#5E5A4C;max-width:32rem;margin-top:8px}
.sec-link{font-weight:600;color:var(--bleu);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.sec-link:hover{text-decoration:underline}

/* ---------- categories ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cat{
  position:relative;border-radius:var(--radius);padding:26px 22px 22px;min-height:170px;
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
  color:#fff;transition:transform .2s,box-shadow .2s;
}
.cat:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(24,27,46,.18)}
.cat .ico{font-size:1.9rem;position:absolute;top:20px;left:22px}
.cat::after{
  content:"";position:absolute;top:-28px;right:-28px;width:110px;height:110px;opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 6 L76 44 L114 60 L76 76 L60 114 L44 76 L6 60 L44 44 Z' fill='white'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;transition:transform .35s;
}
.cat:hover::after{transform:rotate(22deg) scale(1.08)}
.cat h3{font-size:1.15rem;font-weight:700;margin-bottom:4px}
.cat span{font-size:.85rem;opacity:.85}
.c-bleu{background:linear-gradient(150deg,var(--bleu-vif),var(--bleu))}
.c-olive{background:linear-gradient(150deg,#7E8F48,var(--olive))}
.c-safran{background:linear-gradient(150deg,#F0B23F,#CE8A12);color:var(--bleu-nuit)}
.c-safran::after{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 6 L76 44 L114 60 L76 76 L60 114 L44 76 L6 60 L44 44 Z' fill='%23141D52'/%3E%3C/svg%3E")}
.c-nuit{background:linear-gradient(150deg,#26307A,var(--bleu-nuit))}
.c-terre{background:linear-gradient(150deg,#A0522D,#7C3B1D)}
.c-mer{background:linear-gradient(150deg,#2E7D8C,#1C5560)}
.c-rose{background:linear-gradient(150deg,#B85C6E,#8E3A4C)}
.c-menthe{background:linear-gradient(150deg,#3E8E63,#265E42)}

/* ---------- products ---------- */
.prod-section{background:#fff;border-top:1px solid #EAE3D2;border-bottom:1px solid #EAE3D2}
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.prod{
  background:var(--papier);border:1px solid #EAE3D2;border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;
}
.prod:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(24,27,46,.12)}
.prod .ph{
  aspect-ratio:1/0.85;display:flex;align-items:center;justify-content:center;
  font-size:3.2rem;position:relative;background:#fff;
}
.prod .ph.bleu{background:linear-gradient(160deg,#EEF1FF,#DCE2FB)}
.prod .ph.vert{background:linear-gradient(160deg,#EFF4E4,#DFE8CB)}
.prod .ph.or{background:linear-gradient(160deg,#FBF2DD,#F4E3BC)}
.prod .ph.mer{background:linear-gradient(160deg,#E4F2F5,#CBE4EA)}
.prod .ph.rose{background:linear-gradient(160deg,#F7E7EA,#EDD2D8)}
.prod .tag{
  position:absolute;top:12px;left:12px;background:var(--bleu);color:#fff;
  font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;
}
.prod .tag.new{background:var(--olive)}
.prod .body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.prod .cat-label{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#8A8264;font-weight:600}
.prod h3{font-size:1rem;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.prod .pack{
  margin-top:auto;display:inline-flex;align-self:flex-start;
  font-family:'Spline Sans Mono',monospace;font-size:.78rem;color:var(--bleu);
  background:#E8ECFC;border:1px solid #CAD3F7;padding:4px 10px;border-radius:6px;
}

/* filtres produits */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px}
.filters button{
  font-family:inherit;font-weight:600;font-size:.88rem;cursor:pointer;
  padding:9px 18px;border-radius:999px;border:1.5px solid #D8D0BC;background:#fff;color:#5E5A4C;
  transition:all .2s;
}
.filters button:hover{border-color:var(--bleu);color:var(--bleu)}
.filters button.active{background:var(--bleu);border-color:var(--bleu);color:#fff}
.prod.hidden{display:none}
.empty-note{display:none;text-align:center;color:#8A8264;padding:40px 0}

/* ---------- distribution band ---------- */
.dist{background:var(--bleu-nuit);color:#fff;position:relative;overflow:hidden}
.dist::before{
  content:"";position:absolute;inset:0;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2326307A' stroke-width='1.4'%3E%3Cpath d='M60 12 L74 46 L108 60 L74 74 L60 108 L46 74 L12 60 L46 46 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:120px 120px;
}
.dist .wrap{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.dist h2{font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:800;letter-spacing:-.02em;margin-bottom:18px;line-height:1.12}
.dist p{color:#C3CAF2;margin-bottom:26px;max-width:30rem}
.dist ul{list-style:none;display:grid;gap:16px}
.dist li{display:flex;gap:14px;align-items:flex-start}
.dist li .dot{
  flex:none;width:38px;height:38px;border-radius:10px;background:var(--safran);color:var(--bleu-nuit);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
}
.dist li b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:1.02rem}
.dist li span{font-size:.9rem;color:#AFB8EE}

/* ---------- split panels ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.panel{
  border-radius:var(--radius);padding:40px 36px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-height:230px;justify-content:center;
}
.panel h3{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.panel p{max-width:26rem}
.p-safran{background:linear-gradient(140deg,#F5C462,#E8A020);color:var(--bleu-nuit)}
.p-olive{background:linear-gradient(140deg,#7E8F48,#57652C);color:#fff}
.panel .btn{padding:11px 22px;font-size:.92rem}
.p-safran .btn{background:var(--bleu-nuit);color:#fff}
.p-olive .btn{background:#fff;color:#3C4520}

/* ---------- à propos ---------- */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.about-grid h2{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:800;letter-spacing:-.02em;margin-bottom:16px}
.about-grid p{color:#4B4738;margin-bottom:14px}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
.value{
  background:#fff;border:1px solid #EAE3D2;border-radius:var(--radius);padding:26px 24px;
}
.value .ico{font-size:1.7rem;margin-bottom:12px;display:block}
.value h3{font-size:1.05rem;font-weight:700;margin-bottom:6px}
.value p{font-size:.92rem;color:#5E5A4C}
.timeline{list-style:none;display:grid;gap:0;margin-top:20px}
.timeline li{display:grid;grid-template-columns:86px 1fr;gap:18px;padding:16px 0;border-bottom:1px dashed #D8D0BC}
.timeline li:last-child{border-bottom:none}
.timeline .yr{font-family:'Spline Sans Mono',monospace;font-weight:500;color:var(--bleu)}
.timeline b{font-family:'Bricolage Grotesque',sans-serif}
.timeline p{font-size:.92rem;color:#5E5A4C;margin:0}

/* ---------- recettes ---------- */
.recipe-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.recipe{
  background:#fff;border:1px solid #EAE3D2;border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;
}
.recipe:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(24,27,46,.12)}
.recipe .ph{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;font-size:3.4rem}
.recipe .ph.bleu{background:linear-gradient(160deg,#DCE2FB,#C4CDF7)}
.recipe .ph.or{background:linear-gradient(160deg,#F4E3BC,#EBCE90)}
.recipe .ph.vert{background:linear-gradient(160deg,#DFE8CB,#CBD9AB)}
.recipe .body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.recipe .meta{display:flex;gap:14px;font-family:'Spline Sans Mono',monospace;font-size:.75rem;color:#8A8264}
.recipe h3{font-size:1.15rem;font-weight:700}
.recipe p{font-size:.92rem;color:#5E5A4C}
.recipe .link{margin-top:auto;font-weight:600;color:var(--bleu);font-size:.92rem}
.recipe-detail{background:#fff;border:1px solid #EAE3D2;border-radius:var(--radius);padding:36px;margin-top:24px}
.recipe-detail h3{font-size:1.4rem;margin-bottom:6px}
.recipe-detail .meta{display:flex;gap:16px;font-family:'Spline Sans Mono',monospace;font-size:.78rem;color:#8A8264;margin-bottom:20px}
.recipe-detail .cols{display:grid;grid-template-columns:1fr 1.4fr;gap:36px}
.recipe-detail h4{margin-bottom:10px;color:var(--bleu)}
.recipe-detail ul,.recipe-detail ol{padding-left:20px;display:grid;gap:8px;font-size:.95rem;color:#3E3A2E}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:start}
.contact-card{background:#fff;border:1px solid #EAE3D2;border-radius:var(--radius);padding:32px}
.contact-card h3{font-size:1.2rem;margin-bottom:16px}
.contact-card ul{list-style:none;display:grid;gap:14px}
.contact-card li{display:flex;gap:12px;align-items:flex-start}
.contact-card li .dot{
  flex:none;width:36px;height:36px;border-radius:10px;background:#E8ECFC;color:var(--bleu);
  display:flex;align-items:center;justify-content:center;
}
.contact-card li b{display:block;font-size:.92rem}
.contact-card li span{font-size:.88rem;color:#5E5A4C}
form.contact{display:grid;gap:16px;background:#fff;border:1px solid #EAE3D2;border-radius:var(--radius);padding:32px}
form.contact .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
form.contact label{font-weight:600;font-size:.88rem;display:grid;gap:6px}
form.contact input,form.contact select,form.contact textarea{
  font-family:inherit;font-size:.95rem;padding:12px 14px;border:1.5px solid #D8D0BC;border-radius:10px;
  background:var(--papier);color:var(--encre);width:100%;
}
form.contact input:focus,form.contact select:focus,form.contact textarea:focus{outline:none;border-color:var(--bleu)}
form.contact textarea{min-height:130px;resize:vertical}
.form-note{font-size:.8rem;color:#8A8264}

/* ---------- footer ---------- */
footer{background:var(--encre);color:#B9B7C5;padding:64px 0 32px;font-size:.92rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;margin-bottom:44px}
footer h4{color:#fff;font-family:'Bricolage Grotesque',sans-serif;font-size:1rem;margin-bottom:14px}
footer ul{list-style:none;display:grid;gap:9px}
footer a:hover{color:var(--safran-clair)}
.foot-logo{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.4rem;color:#fff;display:flex;align-items:center;gap:10px;margin-bottom:14px}
.foot-bottom{border-top:1px solid #2E2C3E;padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;color:#807E90}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .hero .wrap{grid-template-columns:1fr;padding-top:64px;padding-bottom:72px}
  .hero-visual{order:-1}
  .star-card{width:min(260px,70%)}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .dist .wrap{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .values{grid-template-columns:1fr 1fr}
  .recipe-grid{grid-template-columns:1fr 1fr}
  .recipe-detail .cols{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  nav.main{display:none}
  .burger{display:block;margin-left:auto}
}
@media(max-width:560px){
  .prod-grid{grid-template-columns:1fr}
  .recipe-grid{grid-template-columns:1fr}
  .values{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  form.contact .row{grid-template-columns:1fr}
  section{padding:60px 0}
}