/* editorial.css — home, copie conforme FR. Typo pilotee par les tokens (Noto Serif titres / Avenir Next corps). */

.kj-section{width:100%}
.kj-section__inner{max-width:var(--page-width);margin:0 auto;padding:64px var(--page-margin-mobile)}
.kj-section--narrow .kj-section__inner{max-width:900px}

/* Eyebrow : 14px, pas d'interlettrage exagere, majuscules (comme le FR) */
.eyebrow{font-family:var(--font-body--family);font-size:.875rem;letter-spacing:normal;text-transform:uppercase;opacity:.65;margin:0 0 14px}

/* ---- HERO : image pleine largeur, texte (dark) pose sur le fond gris de l'image ---- */
.kj-hero{position:relative;height:min(72vw,720px);min-height:440px;overflow:hidden}
.kj-hero__media{position:absolute;inset:0}
.kj-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 82%}
.kj-hero__text{position:absolute;left:0;right:0;top:38%;transform:translateY(-50%);text-align:center;padding:0 var(--page-margin-mobile);color:var(--color-foreground)}
.kj-hero__text h1{margin:0 0 12px;text-wrap:balance}
.kj-hero__text p{margin:0;font-size:1rem;opacity:.9}

/* ---- Phrase manifeste : Avenir Next (corps), centre, taille moderee ---- */
.kj-statement{max-width:900px;margin:0 auto;text-align:center}
.kj-statement p{font-family:var(--font-body--family);font-weight:400;font-size:1.375rem;line-height:1.5;margin:0;text-wrap:balance}

/* ---- Intro de section centree ---- */
.kj-intro{text-align:center}
.kj-intro h2{margin:0 auto 14px;max-width:24ch;text-wrap:balance}
.kj-intro .kj-intro__sub,.kj-intro p{margin:0 auto;max-width:62ch;line-height:1.6;font-size:1rem;opacity:.8}

/* ---- Notre histoire : image gauche / texte droite + bouton ---- */
.kj-story{max-width:var(--page-width);margin:0 auto;padding:60px var(--page-margin-mobile);display:grid;grid-template-columns:0.92fr 1fr;gap:56px;align-items:center}
.kj-story__media img{width:100%;height:auto;object-fit:cover;display:block;aspect-ratio:2/3}
.kj-story__body h2{margin:0 0 18px;max-width:14ch}
.kj-story__body p{margin:0 0 16px;line-height:1.7;opacity:.85}
.kj-story__body .button{margin-top:12px}
@media (max-width:820px){.kj-story{grid-template-columns:1fr;gap:26px;padding:40px var(--page-margin-mobile)}.kj-story__media img{aspect-ratio:3/2}}

/* ---- 4 grandes tuiles cuisine (pleine largeur, sans marge) ---- */
.kj-tiles{display:grid;grid-template-columns:1fr 1fr;gap:0}
.kj-tile{position:relative;aspect-ratio:16/10;display:flex;flex-direction:column;justify-content:flex-end;padding:38px;overflow:hidden;color:#fff;text-decoration:none}
.kj-tile__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--animation-easing,ease)}
.kj-tile:hover .kj-tile__img{transform:scale(1.03)}
.kj-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.5));z-index:1}
.kj-tile__body{position:relative;z-index:2;max-width:38ch}
.kj-tile__body h3{color:#fff;font-family:var(--font-subheading--family);font-weight:500;font-size:1.5rem;line-height:1.4;margin:0 0 8px}
.kj-tile__body p{color:#fff;opacity:.92;line-height:1.55;font-size:1rem;margin:0 0 18px}
.kj-tile .button{background:transparent;border:1px solid rgba(255,255,255,.75);color:#fff}
.kj-tile .button:hover{background:#fff;color:var(--color-foreground)}
@media (max-width:820px){.kj-tiles{grid-template-columns:1fr}.kj-tile{aspect-ratio:4/3;padding:28px}}

/* ---- Ce qui fait la recette : 3 colonnes image + texte ---- */
.kj-cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:38px}
.kj-col__img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;margin-bottom:22px}
.kj-col h3{font-family:var(--font-subheading--family);font-weight:500;font-size:1.25rem;line-height:1.5;margin:0 0 12px}
.kj-col p{margin:0;line-height:1.65;opacity:.82;font-size:1rem}
@media (max-width:820px){.kj-cols3{grid-template-columns:1fr;gap:32px}.kj-col__img{aspect-ratio:3/2}}

/* ---- Journal : 3 cartes article ---- */
.kj-journal{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:38px}
.kj-article{text-decoration:none;color:inherit;display:block}
.kj-article__img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;margin-bottom:16px}
.kj-article__cat{font-family:var(--font-body--family);font-size:.875rem;letter-spacing:normal;text-transform:uppercase;opacity:.55}
.kj-article h3{font-family:var(--font-subheading--family);font-weight:500;font-size:1.25rem;line-height:1.5;margin:8px 0 10px}
.kj-article p{margin:0 0 14px;line-height:1.6;opacity:.82;font-size:1rem}
.kj-article__link{display:inline-flex;align-items:center;gap:6px;font-size:.9rem;opacity:.9}
.kj-article__link .icon{font-size:16px!important}
.kj-article:hover h3{text-decoration:underline}
@media (max-width:820px){.kj-journal{grid-template-columns:1fr;gap:30px}}

/* ---- FAQ ---- */
.kj-faq{max-width:760px;margin:0 auto}
.kj-faq details{border-top:1px solid var(--color-border)}
.kj-faq details:last-child{border-bottom:1px solid var(--color-border)}
.kj-faq summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:var(--font-body--family);font-weight:500;font-size:1rem}
.kj-faq summary::-webkit-details-marker{display:none}
.kj-faq summary .icon{font-size:22px!important;transition:transform .2s;opacity:.6}
.kj-faq details[open] summary .icon{transform:rotate(45deg)}
.kj-faq p{margin:0 0 20px;line-height:1.6;opacity:.88;max-width:62ch;font-size:1rem}

/* ---- Newsletter ---- */
.kj-newsletter{text-align:center}
.kj-newsletter h2{margin:0 0 12px}
.kj-newsletter p{margin:0 auto 24px;max-width:52ch;opacity:.85;line-height:1.6;font-size:1rem}
.kj-newsletter__form{display:flex;gap:10px;max-width:460px;margin:0 auto}
.kj-newsletter__form .kj-input{flex:1}
@media (max-width:520px){.kj-newsletter__form{flex-direction:column}}