/* R23 — um painel branco amplo, quatro composições do mesmo conteúdo. */
.context-detail{--context-ink:#24443e;box-sizing:border-box;position:fixed;inset:0;width:min(1240px,calc(100vw - 64px));max-width:none;height:min(900px,calc(100dvh - 64px));max-height:none;margin:auto;padding:0;border:1px solid #24443e24;border-radius:28px;background:#fff;color:var(--context-ink);box-shadow:0 32px 120px #102b2240;overflow:auto;overscroll-behavior:contain;font-family:Manrope,Arial,sans-serif;line-height:1.6}
.context-detail:not([open]){display:none}.context-detail[open]{animation:context-enter .32s cubic-bezier(.2,.75,.25,1) both}.context-detail::backdrop{background:#102b226b;backdrop-filter:blur(7px)}
.context-detail *{box-sizing:border-box}.context-detail .context-close{position:sticky;float:right;top:18px;right:18px;z-index:5;display:grid;place-items:center;width:44px;height:44px;margin:18px 18px -62px 0;border:1px solid #24443e2e;border-radius:50%;background:#ffffffed;color:#24443e;box-shadow:0 3px 14px #102b2212;cursor:pointer}.context-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.context-detail .context-article{display:grid;grid-template-columns:41% 59%;grid-template-areas:'image intro' 'image body';min-height:100%}.context-image{grid-area:image;margin:0;overflow:hidden;background:#e8eee7;position:sticky;top:0;height:calc(100dvh - 66px);max-height:898px}.context-image img{width:100%;height:100%;object-fit:cover;object-position:var(--image-position,62% 50%);display:block}.context-intro{grid-area:intro;padding:58px 54px 24px;position:static;background:none;pointer-events:auto;display:block}.context-category{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;margin-bottom:24px;color:#557060}.context-detail .context-intro h2{font-weight:600;font-size:clamp(32px,3.1vw,46px);line-height:1.13;letter-spacing:-.045em;color:#24443e;margin:0 0 22px}.context-detail .context-intro p{color:#405e50;font-size:17px;line-height:1.7;margin:0;max-width:640px}.context-body{grid-area:body;padding:6px 54px 48px}.context-detail h3{font-size:18px;font-weight:600;line-height:1.35;letter-spacing:-.025em;color:#24443e;margin:0}.context-detail .points-title{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:#557060;margin:10px 0 12px}.context-point{position:relative;padding:20px 0 20px 38px;border-top:1px solid #24443e21}.point-index{font-size:11px;color:#557060;position:absolute;left:0;top:23px;font-weight:600}.context-detail .context-point p{font-size:15px;line-height:1.7;color:#405e50;margin:8px 0 0}.context-bottom{margin-top:18px;padding-top:24px;border-top:1px solid #24443e35}.context-detail .context-bottom p{font-size:15px;line-height:1.7;color:#405e50;margin:10px 0 20px}.context-detail button:focus-visible,.context-point summary:focus-visible{outline:3px solid #4c8769;outline-offset:4px}
/* 02 — panorama et trois colonnes. */
.context-detail[data-layout='2'] .context-article{grid-template-columns:1fr;grid-template-areas:'image' 'intro' 'body'}
.context-detail[data-layout='2'] .context-image{position:relative;height:240px;max-height:30dvh}.context-detail[data-layout='2'] .context-image img{object-position:50% 40%}.context-detail[data-layout='2'] .context-intro{padding:36px 60px 22px}.context-detail[data-layout='2'] .context-intro h2{max-width:800px}.context-detail[data-layout='2'] .context-body{padding:0 60px 44px}.context-detail[data-layout='2'] .context-points{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.context-detail[data-layout='2'] .context-point{padding:48px 0 8px}.context-detail[data-layout='2'] .point-index{top:18px}.context-detail[data-layout='2'] .context-bottom{display:grid;grid-template-columns:1fr auto;gap:10px 30px}.context-detail[data-layout='2'] .context-bottom h3{grid-column:1}.context-detail[data-layout='2'] .context-bottom p{margin:0;grid-column:1;max-width:700px}
/* 03 — une page éditoriale, photographie sous le titre. */
.context-detail[data-layout='3'] .context-article{padding:58px 7% 48px;grid-template-columns:1fr;grid-template-areas:'intro' 'image' 'body';gap:28px}.context-detail[data-layout='3'] .context-intro{padding:0;max-width:850px}.context-detail[data-layout='3'] .context-intro h2{font-size:clamp(36px,4.5vw,62px)}.context-detail[data-layout='3'] .context-image{position:relative;height:290px;border-radius:14px}.context-detail[data-layout='3'] .context-image img{object-position:center 45%}.context-detail[data-layout='3'] .context-body{padding:0}.context-detail[data-layout='3'] .context-point{padding:24px 0 24px 65px;display:grid;grid-template-columns:36% 1fr;gap:24px}.context-detail[data-layout='3'] .point-index{font-size:22px;top:22px}.context-detail[data-layout='3'] .context-point p{margin:0}.context-detail[data-layout='3'] .context-bottom{max-width:760px}
/* 04 — exploration par thèmes, photographie à droite. */
.context-detail[data-layout='4'] .context-article{grid-template-columns:60% 40%;grid-template-areas:'intro image' 'body image'}.context-detail[data-layout='4'] .context-image{margin:24px 24px 24px 0;border-radius:20px;height:calc(100dvh - 114px);max-height:850px;top:24px}.context-detail[data-layout='4'] .context-point{padding:0}.context-point summary{position:relative;display:flex;align-items:center;gap:14px;cursor:pointer;list-style:none;padding:22px 32px 22px 35px}.context-point summary::-webkit-details-marker{display:none}.context-point summary .point-index{top:26px}.point-toggle{position:absolute;right:2px;width:12px;height:12px;top:27px}.point-toggle:before,.point-toggle:after{content:'';position:absolute;background:#24443e}.point-toggle:before{width:12px;height:1px;top:5px}.point-toggle:after{height:12px;width:1px;left:5px;transition:transform .2s}.context-point[open] .point-toggle:after{transform:rotate(90deg)}.context-detail[data-layout='4'] .context-point p{padding:0 26px 22px 35px;margin:0}
@keyframes context-enter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:850px){.context-detail{width:calc(100vw - 24px);height:calc(100dvh - 24px);border-radius:22px}.context-detail .context-article{grid-template-columns:1fr;grid-template-areas:'image' 'intro' 'body'}.context-detail .context-image{position:relative;height:230px;max-height:30dvh}.context-intro{padding:30px 28px 22px}.context-body{padding:0 28px 32px}.context-detail .context-intro h2{font-size:34px}.context-detail .context-intro p{font-size:16px}.context-category{margin-bottom:18px}.context-detail[data-layout='2'] .context-intro{padding:30px 28px 22px}.context-detail[data-layout='2'] .context-body{padding:0 28px 32px}.context-detail[data-layout='2'] .context-points{grid-template-columns:1fr;gap:0}.context-detail[data-layout='2'] .context-point{padding:20px 0 20px 38px}.context-detail[data-layout='2'] .point-index{top:23px}.context-detail[data-layout='2'] .context-bottom{display:block}.context-detail[data-layout='3'] .context-article{padding:60px 28px 32px;gap:24px}.context-detail[data-layout='3'] .context-intro h2{font-size:39px}.context-detail[data-layout='3'] .context-image{height:210px}.context-detail[data-layout='3'] .context-point{display:block;padding:22px 0 22px 42px}.context-detail[data-layout='3'] .context-point p{margin-top:10px}.context-detail[data-layout='3'] .point-index{font-size:17px}.context-detail[data-layout='4'] .context-article{grid-template-columns:1fr;grid-template-areas:'intro' 'image' 'body'}.context-detail[data-layout='4'] .context-intro{padding-top:64px}.context-detail[data-layout='4'] .context-image{margin:0 28px 28px;height:180px;top:auto;border-radius:14px}.context-detail[data-layout='4'] .context-point summary h3{font-size:17px}}
@media(prefers-reduced-motion:reduce){.context-detail[open]{animation:none}.point-toggle:after{transition:none}}

/* R25 — transition discrète de la photo panoramique vers le panneau blanc. */
.context-detail[data-layout="2"] .context-image::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:54px;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.3) 48%,#fff);pointer-events:none}
.context-detail[data-layout="2"] .context-bottom{display:block;max-width:850px}.context-detail[data-layout="2"] .context-bottom p{margin:10px 0 0}
@media(max-width:850px){.context-detail[data-layout="2"] .context-image::after{height:40px}}