.key-page--rgaa { --key-accent:#ef69aa; --key-ink:#a52360; --key-rgb:239,105,170; }
.key-page--eco { --key-accent:#60c982; --key-ink:#237a40; --key-rgb:96,201,130; }
.key-page--rgpd { --key-accent:#f2d34f; --key-ink:#826600; --key-rgb:242,211,79; }
.key-page--seo { --key-accent:#f56b67; --key-ink:#b52d29; --key-rgb:245,107,103; }
.key-page .studio-kicker { color:var(--key-accent); }
.key-page .studio-outline { -webkit-text-stroke-color:var(--key-accent); }
.key-page .studio-button { background:var(--key-accent); border-color:var(--key-accent); }
.key-page .studio-button:hover { background:#fff; }
.key-page :is(a,button,summary):focus-visible { outline-color:var(--key-accent); }
.key-page .key-definition .studio-kicker,.key-page .key-actions .studio-kicker { color:var(--key-ink); }
.key-page .key-definition h2 > span { color:var(--key-ink); }
.key-page .key-actions .studio-outline { -webkit-text-stroke-color:var(--key-ink); }
.key-page .key-actions :is(a,summary):focus-visible,.key-page .key-definition a:focus-visible { outline-color:var(--key-ink); }
.key-page .key-questions .studio-kicker,.key-page .key-questions h2 > span { color:#111; }
.key-page .key-questions .studio-button { background:#111; border-color:#111; color:#fff; }
.key-page .key-questions .studio-button:hover { background:#fff; color:#111; }
.key-page .key-questions :is(a,summary):focus-visible { outline-color:#111; }
/* Les points clés : même grille, contenus et pictogrammes propres à chaque sujet. */
.key-hero { padding:165px 0 95px; background:radial-gradient(ellipse at 85% 40%,rgba(var(--key-rgb),.13),transparent 55%),#080808; }
.key-hero-grid { display:grid; grid-template-columns:1.45fr 1fr; gap:65px; align-items:center; }
.key-page h1 { font-size:clamp(3.6rem,6.7vw,7.2rem); }
.key-hero .studio-button { margin-top:22px; }
.key-emblem { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; aspect-ratio:1; isolation:isolate; }
.key-emblem-ring { position:absolute; inset:0; border:1px solid rgba(var(--key-rgb),.35); border-radius:50%; }
.key-emblem-ring::after { content:''; position:absolute; inset:20px; border:1px dashed #ffffff20; border-radius:50%; }
.key-emblem > svg { width:110px; height:110px; color:var(--key-accent); margin-bottom:25px; }
.key-emblem > span { font-size:clamp(3rem,5vw,5.5rem); font-weight:1000; line-height:1; letter-spacing:-.055em; }
.key-emblem small { text-align:center; font-size:.72rem; line-height:1.65; color:#aaa; margin-top:20px; }
.key-page section[id] { scroll-margin-top:115px; }
.key-definition { background:#fff; color:#111; }
.key-questions { background:#ff4b1b; color:#111; }
.key-definition-grid { display:grid; grid-template-columns:1fr 1fr; gap:75px; align-items:start; }
.key-definition-lead { font-size:1.1rem; margin-top:0; }
.key-page .key-source { display:inline-block; font-size:.72rem; font-weight:650; text-decoration:underline; text-underline-offset:4px; padding:6px 0; line-height:1.7; }
.key-scope { padding-top:24px; margin-top:26px; border-top:1px solid #ccc; font-size:.88rem; color:#555; }
.key-stakes-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:60px; }
.key-stakes article { padding:30px 0 0; border-top:1px solid #555; }
.key-stakes article > svg { width:38px; height:38px; color:#ff4b1b; }
.key-stakes h3 { font-size:1.5rem; letter-spacing:-.04em; margin:30px 0 18px; }
.key-stakes article p { font-size:.92rem; color:#bbb; }
.key-stakes .key-source { color:#ddd; }
.key-actions { background:#fff; color:#111; }
.key-actions .studio-kicker { color:#111; }
.key-actions .studio-outline { -webkit-text-stroke-color:#111; }
.key-actions-grid { display:grid; grid-template-columns:1fr 1fr; gap:75px; align-items:start; }
.key-example { border-left:2px solid #111; padding-left:22px; margin-top:40px; max-width:440px; }
.key-example p { font-size:.87rem; }
.key-example p > span { display:block; text-transform:uppercase; letter-spacing:.07em; font-size:.64rem; font-weight:850; margin-bottom:6px; }
.key-example > div { font-size:25px; }
.key-checklist details { border-top:1px solid #1115; }
.key-checklist details:last-of-type { border-bottom:1px solid #1115; }
.key-checklist summary { list-style:none; display:flex; align-items:center; gap:18px; padding:24px 15px; font-size:1.25rem; line-height:1.3; font-weight:750; cursor:pointer; letter-spacing:-.025em; }
.key-checklist summary::-webkit-details-marker { display:none; }
.key-checklist summary > span { font-size:.7rem; font-weight:600; }
.key-checklist summary > b { font-size:1.4rem; margin-left:auto; flex-shrink:0; }
.key-checklist summary:hover,.key-checklist summary:focus-visible { background:#111; color:#fff; }
.key-checklist details[open] summary > b { transform:rotate(45deg); }
.key-checklist details p { margin:0; padding:0 15px 25px; font-size:.91rem; }
.key-actions .key-checklist > .key-source { margin-top:22px; }
.key-discuss { margin-top:65px!important; padding-top:35px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.key-discuss p { max-width:650px; font-size:1.05rem; }
.key-discuss .studio-button { flex-shrink:0; }
@media(max-width:1000px) { .key-hero-grid { gap:30px; } .key-emblem > svg { width:80px; height:80px; } .key-definition-grid,.key-actions-grid { gap:40px; } }
@media(max-width:760px) {
 .key-hero { padding:125px 0 60px; }
 .key-hero-grid,.key-definition-grid,.key-actions-grid,.key-stakes-grid { grid-template-columns:1fr; gap:35px; }
 .key-page h1 { font-size:clamp(3.3rem,12vw,5rem); }
 .key-emblem { width:min(310px,90%); margin:20px auto 0; }
 .key-checklist summary { font-size:1.05rem; padding:22px 12px; }
 .key-discuss { flex-direction:column; align-items:start; gap:15px; }
}
/* Nouvelle proposition : composition éditoriale et exemple concret dès l’ouverture. */
.key-page .key-hero { padding:155px 0 90px; background:#080808; }
.key-page .key-hero-grid { grid-template-columns:1.4fr 1fr; gap:70px; }
.key-page .key-hero h1 .studio-outline { -webkit-text-stroke-color:#fff; }
.key-page .key-hero .studio-kicker { color:var(--key-accent); }
.key-practical { background:#fff; color:#111; border-top:5px solid var(--key-accent); box-shadow:18px 18px 0 rgba(var(--key-rgb),.1); }
.key-practical-top { display:flex; align-items:center; gap:15px; padding:24px 28px; border-bottom:1px solid #ddd; }
.key-practical-top svg { width:35px; height:35px; color:var(--key-ink); }
.key-practical-top > span { font-size:.68rem; font-weight:800; letter-spacing:.1em; }
.key-practical-before,.key-practical-after { padding:30px; }
.key-practical-before > span,.key-practical-after > span { font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; font-weight:800; color:#666; }
.key-practical-before p { color:#777; font-size:1.02rem; margin:16px 0 0; }
.key-practical-after { position:relative; background:rgba(var(--key-rgb),.1); padding-bottom:55px; }
.key-practical-after p { font-size:1.3rem; font-weight:700; letter-spacing:-.025em; line-height:1.5; margin:16px 0 0; }
.key-practical-after > b { position:absolute; bottom:15px; right:25px; color:var(--key-ink); font-size:30px; }
.key-page .key-definition-grid { grid-template-columns:.9fr 1.1fr; gap:90px; }
.key-page .key-definition h2 > span { color:#111; }
.key-page .key-definition-lead { font-size:1.25rem; }
.key-page .key-stakes { background:#f3f3f1; color:#111; }
.key-page .key-stakes > .wrap { display:grid; grid-template-columns:.9fr 1.1fr; column-gap:90px; }
.key-stakes > .wrap > .studio-kicker { grid-column:1/-1; color:var(--key-ink); }
/*.key-page .key-stakes h2 { position:sticky; top:130px; align-self:start; }*/
.key-page .key-stakes .studio-outline { -webkit-text-stroke-color:#111; }
.key-page .key-stakes-grid { display:block; margin:0; }
.key-page .key-stakes article { position:relative; padding:25px 0 25px 70px; border-top:1px solid #ccc; }
.key-page .key-stakes article > svg { position:absolute; left:0; top:26px; color:var(--key-ink); width:32px; height:32px; }
.key-page .key-stakes h3 { margin:0 0 15px; font-size:1.6rem; }
.key-page .key-stakes article p { color:#555; margin:0; }
.key-page .key-stakes .key-source { color:#111; margin-top:12px; }
.key-page .key-actions-grid { grid-template-columns:1fr; gap:30px; }
.key-page .key-actions h2 br { display:none; }
.key-page .key-actions h2 .studio-outline { margin-left:.15em; -webkit-text-stroke-color:#111; }
.key-page .key-actions .key-checklist { display:grid; grid-template-columns:1fr 1fr; gap:0 50px; }
.key-page .key-actions .key-checklist details:last-of-type { border-bottom:0; }
.key-page .key-actions .key-checklist > .key-source { grid-column:1/-1; justify-self:start; }
.key-page .key-actions summary > span { color:var(--key-ink); }
.key-page .key-actions summary:hover > span { color:var(--key-accent); }
.key-page .key-questions { padding-block:75px; }
.key-page .key-discuss { margin-top:35px!important; }
@media(max-width:1000px) { .key-page .key-hero-grid,.key-page .key-definition-grid,.key-page .key-stakes > .wrap { gap:40px; } }
@media(max-width:760px) {
 .key-page .key-hero { padding:125px 0 65px; }
 .key-page .key-hero-grid,.key-page .key-definition-grid,.key-page .key-stakes > .wrap,.key-page .key-actions .key-checklist { grid-template-columns:1fr; gap:25px; }
 .key-practical { margin-right:12px; box-shadow:12px 12px 0 rgba(var(--key-rgb),.1); }
 .key-page .key-stakes h2 { position:static; }
 .key-page .key-definition-lead { font-size:1.08rem; }
 .key-page .key-actions h2 br { display:block; }
 .key-page .key-actions h2 .studio-outline { margin-left:0; }
 .key-practical-before,.key-practical-after { padding:25px; }
 .key-practical-after { padding-bottom:55px; }
}
.key-topic-image { display:block; width:100%; height:auto; }
.key-page .key-practical-before,.key-page .key-practical-after { padding:22px 28px; }
.key-page .key-practical-after { padding-bottom:42px; }
.key-page .key-practical-before p { font-size:.88rem; margin-top:10px; }
.key-page .key-practical-after p { font-size:1.05rem; margin-top:10px; }
.key-page .key-practical-top { padding:15px 25px; }
.key-page .key-practical-top > svg { width:26px; height:26px; }
.key-page .key-action-icon { display:grid; place-items:center; width:42px; height:42px; background:rgba(var(--key-rgb),.1); border-radius:8px; flex-shrink:0; }
.key-action-icon svg { width:25px; height:25px; }
.key-page .key-actions summary:hover .key-action-icon { color:var(--key-accent); }
@media(max-width:760px) { .key-page .key-action-icon { width:34px; height:34px; } .key-action-icon svg { width:22px; height:22px; } }

/* Couleurs du sujet, y compris les composants communs. */
.key-page .ag-breadcrumbs { color:var(--key-accent); }
html[data-theme="light"] .key-page .ag-breadcrumbs { color:var(--key-ink); }
.key-page .studio-button { border-color:var(--key-accent) !important; }
.key-page .key-questions { background:var(--key-accent); }
html[data-theme="dark"] body .key-page .key-questions { background:radial-gradient(ellipse at 0 0,rgba(var(--key-rgb),.13),transparent 65%),#000; }
html[data-theme="light"] .key-page .key-questions { background:var(--key-accent); }