:root{
  --bg:#101112;
  --bg-2:#131516;
  --panel:#151719;
  --line:#2a2d2f;
  --text:#f1eee8;
  --muted:#9b9d98;
  --header:96px;
  --accent:#FF3CAC;
  --accent-soft:rgba(255,60,172,.18);
  --accent-line:rgba(255,60,172,.38);
}
*{box-sizing:border-box}
html{background:var(--bg);color-scheme:dark;scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 72% 28%,#181b1d 0,#111314 42%,#0d0f10 100%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button{font:inherit;color:inherit}

/* Bandeau : une identité simple et lisible */
.topbar{height:var(--header);display:grid;grid-template-columns:124px 1fr 64px;align-items:center;gap:26px;padding:8px 28px;border-bottom:1px solid var(--line);background:rgba(16,17,18,.96);backdrop-filter:blur(14px);position:sticky;top:0;z-index:20;box-shadow:none}
.brand{border:0;background:none;padding:0;cursor:pointer;display:flex;align-items:center}
.brand img{width:76px;height:76px;display:block;filter:drop-shadow(0 0 10px rgba(255,60,172,.16))}
.socrate{margin:0;text-align:center;font:italic clamp(1rem,1.08vw,1.18rem)/1.35 Georgia,"Times New Roman",serif;color:var(--accent);letter-spacing:.005em;text-shadow:0 0 14px rgba(255,60,172,.12)}
.socrate span{display:block;margin-top:5px;font:600 .65rem/1.2 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.2em;color:var(--accent);text-transform:uppercase}
.burger{justify-self:end;width:48px;height:48px;border:1px solid var(--line);background:#151719;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 12px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,60,172,.06)}
.burger span{height:1px;background:var(--accent);width:100%}

/* Accueil : manifeste à gauche, univers visuels à droite */
.home{width:min(1840px,100%);margin:0 auto;display:grid;grid-template-columns:minmax(360px,34%) minmax(0,66%);min-height:calc(100vh - var(--header) - 68px)}
.manifesto{padding:52px clamp(28px,3.8vw,62px) 44px;border-right:1px solid var(--line);display:flex;align-items:flex-start}
.manifesto-inner{width:100%;max-width:610px;margin:0 auto}
.eyebrow{margin:0 0 24px;font-size:.66rem;letter-spacing:.3em;color:#8b8d88;text-transform:uppercase}
.manifesto-copy{columns:1}
.manifesto-copy p{margin:0 0 18px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.04rem,1.08vw,1.16rem);font-weight:400;font-style:normal;line-height:1.62;color:#e8e5de}
.manifesto em{color:inherit;font-style:normal;font-weight:inherit}
.manifesto .section-break{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.manifesto .fable{margin-top:24px!important;margin-bottom:0!important;padding-top:22px;border-top:1px solid var(--line);font-family:Georgia,"Times New Roman",serif!important;font-size:clamp(1.04rem,1.08vw,1.16rem)!important;font-weight:400!important;font-style:normal!important;line-height:1.62!important;color:#e8e5de!important}
.finale{margin-top:0;padding-top:0;border-top:0}
.finale p{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.04rem,1.08vw,1.16rem);font-weight:400;font-style:normal;line-height:1.62;color:#e8e5de}
.finale .after-prompt{margin-top:20px;padding-top:21px;border-top:1px solid var(--line);font-size:clamp(1.04rem,1.08vw,1.16rem);font-weight:400;color:#e8e5de}

.portal-zone{min-width:0;padding:38px clamp(22px,3.2vw,54px) 34px;display:flex;flex-direction:column;justify-content:center;align-items:center}
.portal-grid{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 18px;align-items:center}
.portal{display:grid;grid-template-rows:minmax(0,1fr) 76px;border:0;background:#111315;padding:0;cursor:pointer;border-radius:30px;transition:transform .28s ease,filter .28s ease;overflow:hidden;min-width:0}
.portal-art{display:block;overflow:hidden;min-width:0;background:#111315;aspect-ratio:1/.77}
.portal-art img{width:100%;height:auto;display:block;transform:translateY(0)}
.portal-label{display:flex;align-items:center;justify-content:center;min-height:76px;padding:0 14px;text-align:center;white-space:nowrap;color:#f3eff4;font:400 clamp(1.3rem,2.2vw,2rem)/1.05 Georgia,"Times New Roman",serif;letter-spacing:.01em}
.portal:hover,.portal:focus-visible{transform:translateY(-4px) scale(1.018);filter:brightness(1.07)}
.portal:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
.prompt-line{width:min(930px,96%);margin:20px auto 0;text-align:center;color:#c9c6be;font:italic clamp(.96rem,1vw,1.08rem)/1.55 Georgia,"Times New Roman",serif}

footer{min-height:68px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center;text-align:center;padding:15px 24px;color:var(--accent);font:italic 500 clamp(.95rem,1.04vw,1.08rem)/1.45 Georgia,"Times New Roman",serif;background:#0f1011;text-shadow:0 0 12px rgba(255,60,172,.08)}

/* Menu */
.drawer{position:fixed;inset:0 0 0 auto;width:min(410px,90vw);background:#101112;border-left:1px solid var(--line);z-index:50;transform:translateX(100%);transition:transform .3s ease;padding:34px 34px 50px;display:flex;flex-direction:column;align-items:stretch}
.drawer.open{transform:translateX(0)}
.drawer-close{align-self:flex-end;border:0;background:none;font-size:2rem;cursor:pointer;margin-bottom:30px}
.drawer p{font-size:.62rem;letter-spacing:.25em;color:#ad92a4;margin:0 0 12px}
.drawer>button:not(.drawer-close){text-align:left;border:0;background:none;padding:8px 0;cursor:pointer;font:400 clamp(1.65rem,3vw,2.7rem)/1.1 Georgia,"Times New Roman",serif;color:#d9d6d0}
.drawer>button:not(.drawer-close):hover{color:var(--accent);transform:translateX(3px)}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:40}

/* Les catégories s'ouvrent sans transformer l'accueil en page infinie */
.category-dialog{width:min(1500px,94vw);height:min(900px,91vh);padding:0;border:1px solid #303235;background:#111213;color:var(--text);overflow:hidden}
.category-dialog::backdrop{background:rgba(0,0,0,.88);backdrop-filter:blur(6px)}
.dialog-close{position:absolute;right:18px;top:14px;z-index:4;width:44px;height:44px;border:1px solid #3b3d3f;background:#151617;color:var(--accent);font-size:1.7rem;cursor:pointer}
.dialog-shell{height:100%;overflow:auto;padding:48px clamp(26px,4vw,64px) 54px}
.category-dialog .eyebrow{color:var(--accent)}
.dialog-shell h1{margin:0 0 28px;font:400 clamp(2.6rem,5vw,5.6rem)/.95 Georgia,"Times New Roman",serif;color:#f1eee8}
.placeholder{min-height:55vh;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;text-align:center;padding:36px;color:#8f918d;font:italic clamp(1.1rem,1.4vw,1.45rem)/1.5 Georgia,"Times New Roman",serif;background:#141516}
.cooking-placeholder{flex-direction:column;gap:8px}
.cooking-placeholder strong{font:400 clamp(2rem,4vw,4rem)/1 Georgia,"Times New Roman",serif;color:#eee}
.cooking-placeholder span{color:#8f918d}
.feature-image{margin:0}
.feature-image a{display:block;background:#08090a;border:1px solid #2b2d2f}
.feature-image img{display:block;width:100%;height:auto;max-height:72vh;object-fit:contain;margin:auto}
.panorama-feature img{max-height:64vh}
.feature-image figcaption{margin-top:12px;color:#8e908b;font:italic .88rem/1.4 Georgia,"Times New Roman",serif;text-align:right}
[hidden]{display:none!important}

/* Tablette / portable : le manifeste repasse au-dessus et les boutons en 2 colonnes */
@media(max-width:1180px){
  :root{--header:86px}
  .topbar{grid-template-columns:92px 1fr 54px;padding:6px 18px;gap:14px}
  .brand img{width:68px;height:68px}
  .socrate{font-size:clamp(.9rem,1.6vw,1.05rem)}
  .home{display:block;min-height:0}
  .manifesto{border-right:0;border-bottom:1px solid var(--line);padding:38px 7vw 34px}
  .manifesto-inner{max-width:980px}
  .manifesto-copy{columns:2 360px;column-gap:54px}
  .manifesto-copy>p,.finale{break-inside:avoid}
  .portal-zone{padding:34px 6vw 38px}
  .portal-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:940px}
  .portal-label{font-size:clamp(1.25rem,3vw,1.82rem);min-height:70px}
}

@media(max-width:700px){
  :root{--header:76px}
  .topbar{grid-template-columns:58px 1fr 46px;padding:5px 10px;gap:8px}
  .brand img{width:56px;height:56px}
  .socrate{font-size:.72rem;line-height:1.25}
  .socrate span{font-size:.52rem}
  .burger{width:42px;height:42px;padding:0 9px}
  .manifesto{padding:32px 22px}
  .manifesto-copy{columns:1}
  .portal-zone{padding:24px 10px 28px}
  .portal-grid{grid-template-columns:1fr;gap:12px;max-width:470px}
  .portal-label{font-size:1.45rem;min-height:66px}
  .prompt-line{margin-top:10px;padding:0 10px}
  .category-dialog{width:96vw;height:94vh}
  .dialog-shell{padding:52px 18px 28px}
}

/* Galerie de catégorie : sobre, puis image plein écran au clic */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;align-items:start}
.gallery-thumb{display:block;width:100%;border:0;background:transparent;padding:0;cursor:zoom-in;text-align:left;color:var(--text)}
.gallery-thumb img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:#050606;border:1px solid #2b2d2f;transition:transform .25s ease,filter .25s ease,border-color .25s ease}
.gallery-thumb:hover img,.gallery-thumb:focus-visible img{transform:translateY(-2px);filter:brightness(1.05);border-color:#55595b}
.gallery-thumb:focus-visible{outline:none}
.gallery-thumb span{display:block;margin-top:8px;color:#8f918d;font:italic .84rem/1.4 Georgia,"Times New Roman",serif}

.viewer{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#050606;color:#fff;overflow:hidden}
.viewer::backdrop{background:#050606}
.viewer-stage{margin:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:44px 82px 38px}
.viewer-stage img{display:block;max-width:100%;max-height:calc(100vh - 88px);width:auto;height:auto;object-fit:contain}
.viewer-stage figcaption{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);margin:0;max-width:70vw;color:#9b9d98;text-align:center;font:italic .82rem/1.35 Georgia,"Times New Roman",serif}
.viewer-close{position:absolute;right:18px;top:16px;z-index:5;width:46px;height:46px;border:1px solid #343638;background:rgba(14,15,16,.74);color:#fff;font-size:1.9rem;line-height:1;cursor:pointer}
.viewer-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:52px;height:74px;border:0;background:rgba(10,11,12,.28);color:#dedbd5;font:300 3.4rem/1 Georgia,"Times New Roman",serif;cursor:pointer;opacity:.72;transition:opacity .2s ease,background .2s ease}
.viewer-nav:hover{opacity:1;background:rgba(18,19,20,.72)}
.viewer-prev{left:12px}.viewer-next{right:12px}

@media(max-width:700px){
  .gallery-grid{grid-template-columns:1fr;gap:14px}
  .viewer-stage{padding:56px 18px 42px}
  .viewer-nav{width:42px;height:60px;font-size:2.8rem;background:rgba(10,11,12,.48)}
  .viewer-prev{left:2px}.viewer-next{right:2px}
  .viewer-close{right:10px;top:10px;width:42px;height:42px}
}

/* Still cooking : une image forte, puis la phrase de statut */
.cooking-feature{width:min(1120px,100%);margin:0 auto}
.cooking-feature-image{display:block;width:100%;border:1px solid #303235;background:#090a0a;padding:0;cursor:zoom-in}
.cooking-feature-image img{display:block;width:100%;height:auto;max-height:62vh;object-fit:contain;margin:auto;background:#090a0a}
.cooking-feature-image:hover,.cooking-feature-image:focus-visible{border-color:#55595b}
.cooking-feature-image:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
.cooking-feature-caption{margin:18px 0 0;text-align:center;color:#d4d0c9;font:italic 500 clamp(1.05rem,1.25vw,1.25rem)/1.45 Georgia,"Times New Roman",serif}
