/* docs.monsiteo.com : mise en page de l'aide (s'ajoute a monsiteo.css). */

body.docs { background: var(--paper); }
:target { scroll-margin-top: 88px; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; border-radius: 6px; }

/* ---------- En-tete ---------- */
.docs-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 251, 244, .92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1.5px solid var(--line); }
.docs-header-inner { max-width: 1480px; margin: 0 auto; height: 66px; padding: 0 clamp(.9rem, 2.5vw, 1.8rem); display: flex; align-items: center; gap: clamp(.6rem, 2vw, 1.6rem); }
.docs-brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.docs-brand:hover { color: var(--ink); }
.docs-brand:hover .logo-mark { transform: rotate(-8deg) scale(1.05); }
.docs-brand .logo-mark { transition: transform .35s var(--ease-bounce); }
.docs-brand-name { font: 800 1.35rem/1 var(--font-title); letter-spacing: -.03em; }
.docs-brand-tag { font: 700 .72rem/1 var(--font-text); text-transform: uppercase; letter-spacing: .08em; color: var(--violet-700); background: var(--violet-100); padding: .4em .65em; border-radius: var(--r-full); }
.docs-brand-light { color: #fff; }
.docs-brand-light:hover { color: #fff; }

.docs-search-trigger { flex: 1; max-width: 440px; display: flex; align-items: center; gap: .6rem; height: 42px; padding: 0 .6rem 0 .9rem; border: 1.5px solid var(--line); border-radius: var(--r-full); background: #fff; color: var(--ink-60); font: 500 .95rem/1 var(--font-text); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.docs-search-trigger:hover { border-color: var(--violet); box-shadow: 0 0 0 4px var(--violet-100); }
.docs-search-label { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docs-kbd { font: 600 .72rem/1 var(--font-mono); padding: .35em .5em; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--paper); color: var(--ink-60); }

.docs-top-links { margin-left: auto; display: flex; align-items: center; gap: 1.2rem; }
.docs-top-links a:not(.btn) { color: var(--ink-80); font-weight: 550; font-size: .95rem; text-decoration: none; }
.docs-top-links a:not(.btn):hover, .docs-top-links a[aria-current] { color: var(--violet); }

.docs-menu-btn { display: none; width: 42px; height: 42px; border: 1.5px solid var(--line); background: #fff; border-radius: 12px; cursor: pointer; place-items: center; flex-shrink: 0; }
.menu-bars { display: grid; gap: 4px; width: 18px; }
.menu-bars span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s var(--ease-out), opacity .2s; }
.docs-menu-btn[aria-expanded="true"] .menu-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.docs-menu-btn[aria-expanded="true"] .menu-bars span:nth-child(2) { opacity: 0; }
.docs-menu-btn[aria-expanded="true"] .menu-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Coquille ---------- */
.docs-shell { max-width: 1480px; margin: 0 auto; }
.docs-shell.has-sidebar { display: grid; grid-template-columns: 290px minmax(0, 1fr); }
.docs-main { min-width: 0; outline: none; }

/* ---------- Barre laterale ---------- */
.docs-sidebar { position: sticky; top: 66px; height: calc(100vh - 66px); height: calc(100dvh - 66px); overflow-y: auto; padding: 1.4rem 1rem 3rem 1.4rem; border-right: 1.5px solid var(--line); scrollbar-width: thin; }
.nav-group { margin-bottom: .25rem; }
.nav-group summary { list-style: none; display: flex; align-items: center; gap: .6rem; cursor: pointer; padding: .55rem .7rem; border-radius: 12px; font: 650 .95rem/1.3 var(--font-text); color: var(--ink); user-select: none; }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--ink-40); border-bottom: 2px solid var(--ink-40); transform: rotate(-45deg); transition: transform .25s var(--ease-out); flex-shrink: 0; }
.nav-group[open] summary::after { transform: rotate(45deg); }
.nav-group summary:hover { background: var(--violet-50); }
.nav-group summary .badge { font-size: .62rem; padding: .35em .5em; }
.nav-dot { width: 10px; height: 10px; border-radius: 4px; flex-shrink: 0; transform: rotate(12deg); }
.dot-violet { background: var(--violet); } .dot-sun { background: var(--sun); } .dot-mint { background: var(--mint); } .dot-coral { background: var(--coral); } .dot-ink { background: var(--ink); }
.nav-group ul { list-style: none; margin: .1rem 0 .7rem; padding: 0 0 0 1.05rem; border-left: 2px solid var(--line); margin-left: 1.05rem; }
.nav-group li a { display: block; padding: .38rem .7rem; font-size: .9rem; line-height: 1.35; color: var(--ink-60); text-decoration: none; border-radius: 9px; transition: color .15s, background .15s, transform .2s var(--ease-bounce); }
.nav-group li a:hover { color: var(--ink); background: rgba(91, 61, 245, .06); transform: translateX(3px); }
.nav-group li a[aria-current="page"] { color: var(--violet-700); background: var(--violet-100); font-weight: 650; position: relative; }
.nav-group li a[aria-current="page"]::before { content: ""; position: absolute; left: calc(-1.05rem - 2px); top: 20%; bottom: 20%; width: 2px; background: var(--violet); border-radius: 2px; }
.nav-extra { margin-top: 1.4rem; padding: 1rem .7rem 0; border-top: 1.5px dashed var(--line); display: grid; gap: .35rem; font-size: .85rem; }
.nav-extra a { color: var(--ink-60); }
.docs-backdrop { display: none; }

/* ---------- Page ---------- */
.docs-page { padding: clamp(1.4rem, 3vw, 2.6rem) clamp(1.1rem, 3.5vw, 3.2rem) 4rem; }
.docs-page.has-toc { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.docs-article { max-width: 780px; min-width: 0; }
.docs-article.wide { max-width: 980px; }

.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 1.2rem; padding: 0; font-size: .86rem; color: var(--ink-60); }
.breadcrumb li + li::before { content: "/"; margin-right: .35rem; color: var(--ink-40); }
.breadcrumb a { color: var(--ink-60); text-decoration: none; }
.breadcrumb a:hover { color: var(--violet); text-decoration: underline; }

.article-head { margin-bottom: 2rem; padding-bottom: 1.6rem; border-bottom: 1.5px solid var(--line); }
.article-head h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); margin-bottom: .35em; }
.article-head .lead { margin: 0; }
.internal-banner { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; font-size: .9rem; background: var(--ink); color: #EDEAF7; padding: .7rem 1rem; border-radius: var(--r-md); margin-bottom: 1.2rem; }
.internal-banner .badge.ink { background: var(--sun); color: var(--ink); }

/* Contenu Markdown */
.docs-prose { font-size: 1.04rem; }
.docs-prose > :first-child { margin-top: 0; }
.docs-prose h2 { font-size: clamp(1.45rem, 2.4vw, 1.85rem); margin: 2.4em 0 .6em; position: relative; }
.docs-prose h3 { font-size: 1.22rem; margin: 1.9em 0 .5em; position: relative; }
.docs-prose h2 code, .docs-prose h3 code { font-size: .85em; }
.anchor { margin-left: .4em; color: var(--ink-40); text-decoration: none; font-weight: 500; opacity: 0; transition: opacity .15s; }
h2:hover .anchor, h3:hover .anchor, .anchor:focus { opacity: 1; }
.docs-prose a { font-weight: 550; }
.docs-prose ol { counter-reset: step; list-style: none; padding-left: 0; }
.docs-prose ol > li { counter-increment: step; position: relative; padding-left: 2.6rem; margin: .7em 0; }
.docs-prose ol > li::before { content: counter(step); position: absolute; left: 0; top: .05em; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--violet-100); color: var(--violet-700); font: 700 .85rem/1.75rem var(--font-text); text-align: center; }
.docs-prose ul > li::marker { color: var(--violet); }
.docs-prose pre { position: relative; margin: 1.3em 0 1.6em; border-radius: var(--r-md); font-size: .86rem; line-height: 1.6; padding: 1.1em 1.2em; box-shadow: var(--shadow-md); }
.docs-prose pre code { font-family: var(--font-mono); white-space: pre; }
.copy-btn { position: absolute; top: .5rem; right: .5rem; font: 600 .72rem/1 var(--font-text); padding: .5em .7em; border-radius: 8px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #E8E5F7; cursor: pointer; opacity: 0; transition: opacity .15s, background .15s; }
pre:hover .copy-btn, .copy-btn:focus-visible, .copy-btn.is-done { opacity: 1; }
.copy-btn:hover { background: rgba(255,255,255,.18); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.4em 0 1.8em; border: 1.5px solid var(--line); border-radius: var(--r-md); background: #fff; }
.docs-prose .table-scroll table { margin: 0; font-size: .92rem; min-width: 520px; }
.docs-prose .table-scroll th, .docs-prose .table-scroll td { border: 0; border-bottom: 1px solid var(--line); padding: .7em .9em; vertical-align: top; }
.docs-prose .table-scroll tr:last-child td { border-bottom: 0; }
.docs-prose .table-scroll th { background: var(--violet-50); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-60); }
.docs-prose td code { white-space: nowrap; }
.docs-prose blockquote { background: var(--violet-50); border-left-color: var(--violet); }
.docs-prose blockquote.callout { border: 1.5px solid; border-left-width: 5px; border-radius: var(--r-md); padding: 1rem 1.2rem; }
.docs-prose blockquote > :last-child { margin-bottom: 0; }
.callout.tip { background: var(--mint-100); border-color: #8FE6C9; }
.callout.warn { background: var(--sun-100); border-color: #FFD66B; }
.callout.info { background: var(--violet-50); border-color: #CFC5FF; }
.callout-title { display: inline-flex; align-items: center; gap: .4em; margin-right: .35em; }
.callout.tip .callout-title::before { content: "\2728"; }
.callout.warn .callout-title::before { content: "\26A0\FE0F"; }
.callout.info .callout-title::before { content: "\1F4A1"; }
.docs-prose hr { border: 0; border-top: 1.5px dashed var(--line); margin: 2.5em 0; }

/* Captures */
.shot { margin: 1.8em 0 2em; }
.shot img { margin: 0; border-radius: var(--r-md); border: 1.5px solid var(--line); box-shadow: var(--shadow-md); background: #fff; width: 100%; height: auto; transition: transform .35s var(--ease-out), box-shadow .35s; }
.shot-zoom { display: block; border-radius: var(--r-md); }
.shot-zoom:hover img { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.shot figcaption, .demo figcaption { font-size: .88rem; color: var(--ink-60); margin-top: .7rem; text-align: center; }
.shot-placeholder { aspect-ratio: 16 / 9; border-radius: var(--r-md); border: 2px dashed #CFC5FF; background: repeating-linear-gradient(-45deg, var(--violet-50), var(--violet-50) 12px, #fff 12px, #fff 24px); display: grid; place-content: center; gap: .4rem; text-align: center; color: var(--violet-700); }
.shot-placeholder span { font: 700 1.05rem/1.2 var(--font-title); }
.shot-placeholder code { font-size: .8rem; background: #fff; padding: .2em .5em; border-radius: 6px; }
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(23, 20, 43, .82); display: grid; place-items: center; padding: 3vw; cursor: zoom-out; border: 0; max-width: none; max-height: none; width: 100%; height: 100%; }
.lightbox::backdrop { background: rgba(23, 20, 43, .82); }
.lightbox img { max-width: 100%; max-height: 90vh; width: auto; border-radius: var(--r-md); box-shadow: var(--shadow-lg); }

/* Retour lecteur, precedent / suivant */
.feedback { margin: 3.5rem 0 2rem; padding: 1.3rem 1.4rem; border-radius: var(--r-lg); background: #fff; border: 1.5px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.feedback-title { margin: 0; font: 700 1.1rem/1.3 var(--font-title); }
.feedback-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.feedback-thanks { margin: 0; flex-basis: 100%; color: #0B5A42; font-weight: 550; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pager-link { display: grid; gap: .25rem; padding: 1rem 1.2rem; border: 1.5px solid var(--line); border-radius: var(--r-md); background: #fff; text-decoration: none; transition: transform .3s var(--ease-bounce), box-shadow .3s, border-color .2s; }
.pager-link span { font-size: .8rem; color: var(--ink-60); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.pager-link strong { color: var(--ink); font: 700 1.02rem/1.3 var(--font-title); }
.pager-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); border-color: var(--ink); }
.pager-link.prev span::before { content: "\2190  "; }
.pager-link.next { text-align: right; grid-column: 2; }
.pager-link.next span::after { content: "  \2192"; }
.updated { margin-top: 1.6rem; font-size: .82rem; color: var(--ink-60); }

/* Sommaire de page */
.docs-toc { position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto; font-size: .87rem; scrollbar-width: thin; }
.toc-title { font: 700 .78rem/1 var(--font-text); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-60); margin-bottom: .8rem; }
.docs-toc ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.docs-toc li a { display: block; padding: .3rem .8rem; color: var(--ink-60); text-decoration: none; line-height: 1.35; margin-left: -2px; border-left: 2px solid transparent; transition: color .15s, border-color .15s; }
.docs-toc li.lvl-3 a { padding-left: 1.6rem; font-size: .84rem; }
.docs-toc li a:hover { color: var(--ink); }
.docs-toc li a.is-active { color: var(--violet-700); border-left-color: var(--violet); font-weight: 600; }
.toc-top { display: inline-block; margin-top: 1rem; font-size: .82rem; color: var(--ink-60); }

/* Rubrique */
.rubrique-icon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 1rem; transition: transform .35s var(--ease-bounce); }
.tone-violet { background: var(--violet-100); color: var(--violet); }
.tone-sun { background: var(--sun-100); color: #9A6700; }
.tone-mint { background: var(--mint-100); color: #0F8A64; }
.tone-coral { background: var(--coral-100); color: #C9372A; }
.tone-ink { background: var(--ink); color: var(--sun); }
.page-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 1rem; }
.page-card { display: flex; gap: 1rem; height: 100%; padding: 1.15rem 1.2rem; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg); text-decoration: none; color: var(--ink); transition: transform .3s var(--ease-bounce), box-shadow .3s, border-color .2s; }
.page-card:hover { color: var(--ink); transform: translateY(-4px) rotate(-.3deg); box-shadow: var(--shadow-pop); border-color: var(--ink); }
.page-card-num { font: 800 1.1rem/1 var(--font-title); color: var(--violet); background: var(--violet-50); border-radius: 12px; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; flex-shrink: 0; }
.page-card-body { display: grid; gap: .3rem; align-content: start; }
.page-card-body strong { font: 700 1.08rem/1.25 var(--font-title); }
.page-card-body span { font-size: .9rem; color: var(--ink-60); line-height: 1.45; }

/* 404 */
.not-found { padding-block: 2rem 4rem; }
.not-found h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.nf-links { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem 1.5rem; }

/* ---------- Accueil ---------- */
.docs-home .docs-main { padding: 0; }
.docs-hero { position: relative; overflow: hidden; padding: clamp(3.5rem, 8vw, 6.5rem) 1.25rem clamp(3rem, 6vw, 5rem); text-align: center; }
.docs-hero-inner { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; }
.docs-hero h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); }
.docs-hero .lead { max-width: 640px; margin: 0 auto 2rem; }
.hero-search { width: min(100%, 640px); display: flex; align-items: center; gap: .8rem; height: 62px; padding: 0 .9rem 0 1.3rem; margin: 0 auto; border: 2px solid var(--ink); border-radius: var(--r-full); background: #fff; box-shadow: var(--shadow-pop); color: var(--ink-60); font: 500 1.05rem/1 var(--font-text); cursor: text; transition: transform .3s var(--ease-bounce), box-shadow .3s; }
.hero-search span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-search svg { color: var(--violet); flex-shrink: 0; }
.hero-search:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: 6px 6px 0 var(--ink); }
.hero-popular { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; padding: 0; margin: 1.6rem 0 0; }
.hero-popular a { display: inline-block; font-size: .88rem; font-weight: 550; padding: .45rem .85rem; border-radius: var(--r-full); background: #fff; border: 1.5px solid var(--line); color: var(--ink-80); text-decoration: none; transition: transform .25s var(--ease-bounce), border-color .2s, color .2s; }
.hero-popular a:hover { transform: translateY(-2px) rotate(-1.5deg); border-color: var(--violet); color: var(--violet); }
.hero-deco .blob { position: absolute; border-radius: 50%; }
.hero-deco .b1 { width: 340px; height: 340px; background: var(--sun-100); top: -120px; left: -90px; }
.hero-deco .b2 { width: 240px; height: 240px; background: var(--mint-100); bottom: -110px; right: 6%; }
.hero-deco .b3 { width: 120px; height: 120px; background: var(--coral-100); top: 18%; right: 12%; animation: float 6s ease-in-out infinite; }

.docs-rubriques { max-width: 1240px; margin: 0 auto; padding: 0 1.25rem 3rem; }
.rubrique-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 1.1rem; }
.rubrique-card { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--ink); padding: 1.5rem; }
.rubrique-card:hover { color: var(--ink); }
.rubrique-card:hover .rubrique-icon { transform: translateY(-4px) rotate(-6deg) scale(1.06); }
.rubrique-card strong { font: 750 1.25rem/1.2 var(--font-title); margin-bottom: .4rem; }
.rubrique-desc { color: var(--ink-60); font-size: .93rem; line-height: 1.5; flex: 1; }
.rubrique-count { margin-top: 1rem; font-size: .8rem; font-weight: 650; color: var(--violet-700); }
.rubrique-card.is-tech { background: var(--ink); border-color: var(--ink); }
.rubrique-card.is-tech strong { color: #fff; }
.rubrique-card.is-tech .rubrique-desc { color: #C9C4E2; }
.rubrique-card.is-tech .rubrique-count { color: var(--sun); }
.rubrique-card.is-tech .tone-ink { background: rgba(255, 255, 255, .1); }

.docs-start { max-width: 1240px; margin: 0 auto; padding: 1rem 1.25rem 5rem; display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.2rem; }
.start-card { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: center; background: var(--sun-100); }
.start-card h2, .help-card h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.start-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: .5rem; }
.start-steps li { counter-increment: s; }
.start-steps a { display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem; border-radius: 12px; background: #fff; border: 1.5px solid var(--ink); font-weight: 600; font-size: .93rem; color: var(--ink); text-decoration: none; transition: transform .25s var(--ease-bounce); }
.start-steps a::before { content: counter(s); width: 1.6rem; height: 1.6rem; flex-shrink: 0; border-radius: 50%; background: var(--violet); color: #fff; display: grid; place-items: center; font-size: .8rem; }
.start-steps a:hover { transform: translateX(4px) rotate(-.5deg); }
.help-card { border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2rem); background: var(--violet); color: #fff; }
.help-card h2 { color: #fff; }
.help-card p { color: #E7E2FF; }
.help-card .link-arrow { color: #fff; }

/* ---------- Pied de page ---------- */
.docs-footer { background: var(--ink); color: #C9C4E2; padding: 2.5rem 1.25rem; }
.docs-footer-inner { max-width: 1480px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; font-size: .9rem; }
.docs-footer nav { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.docs-footer a { color: #fff; text-decoration: none; }
.docs-footer a:hover { color: var(--sun); text-decoration: underline; }
.docs-footer p { margin: 0; flex-basis: 100%; }

/* ---------- Recherche ---------- */
.search-dialog { width: min(680px, calc(100% - 1.5rem)); max-height: min(78vh, 680px); margin: 9vh auto auto; padding: 0; border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: 8px 8px 0 var(--ink); background: #fff; overflow: hidden; }
.search-dialog[open] { display: flex; animation: pop-in .28s var(--ease-bounce); }
.search-dialog::backdrop { background: rgba(23, 20, 43, .45); backdrop-filter: blur(3px); }
.search-box { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.search-field { display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem; border-bottom: 1.5px solid var(--line); color: var(--violet); }
.search-field input { flex: 1; border: 0; outline: none; font: 500 1.1rem/1.4 var(--font-text); color: var(--ink); background: transparent; min-width: 0; }
.search-field input::-webkit-search-cancel-button { display: none; }
.search-close { font: 600 .75rem/1 var(--font-text); padding: .45em .6em; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-60); cursor: pointer; }
.search-results { list-style: none; margin: 0; padding: .5rem; overflow-y: auto; flex: 1; }
.search-results:empty { display: none; }
.search-results a { display: block; padding: .75rem .9rem; border-radius: 12px; text-decoration: none; color: var(--ink); }
.search-results a[aria-selected="true"], .search-results a:hover { background: var(--violet-50); }
.search-results a[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--violet); }
.sr-rub { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--violet-700); margin-bottom: .2rem; }
.sr-title { display: block; font: 700 1.02rem/1.3 var(--font-title); }
.sr-snip { display: block; font-size: .86rem; color: var(--ink-60); margin-top: .2rem; line-height: 1.45; }
.search-results mark { background: var(--sun-100); color: inherit; border-radius: 3px; padding: 0 .1em; }
.search-status { margin: 0; padding: .7rem 1rem; font-size: .82rem; color: var(--ink-60); border-top: 1.5px solid var(--line); background: var(--paper); }
@keyframes pop-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- Demos animees ---------- */
.demo { margin: 1.8em 0 2.2em; }
.demo-stage { border-radius: var(--r-lg); padding: clamp(.8rem, 2.5vw, 1.6rem); background: linear-gradient(135deg, var(--violet-100), var(--sun-100)); border: 1.5px solid var(--line); overflow: hidden; }
.demo-window { position: relative; aspect-ratio: 16 / 10; background: #fff; border-radius: 14px; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); overflow: hidden; display: flex; flex-direction: column; font-family: var(--font-text); color: var(--ink); --t: 7s; }
.demo-bar { height: 26px; flex-shrink: 0; display: flex; align-items: center; gap: 5px; padding: 0 10px; background: var(--paper); border-bottom: 1.5px solid var(--line); }
.demo-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.demo-bar i:nth-child(2) { background: var(--sun); } .demo-bar i:nth-child(3) { background: var(--mint); }
.demo-bar span { margin: 0 auto; font-size: 9px; color: var(--ink-60); background: #fff; padding: 2px 14px; border-radius: 99px; border: 1px solid var(--line); }
.demo figcaption { display: flex; align-items: center; justify-content: center; gap: .7rem; flex-wrap: wrap; }
.demo-toggle { display: inline-flex; align-items: center; gap: .4em; font: 600 .78rem/1 var(--font-text); padding: .5em .8em; border-radius: var(--r-full); border: 1.5px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; }
.demo-toggle svg { fill: currentColor; }
.demo-toggle .i-play, .demo.is-paused .demo-toggle .i-pause { display: none; }
.demo.is-paused .demo-toggle .i-play { display: block; }
.demo.is-paused *, .demo.is-offscreen * { animation-play-state: paused !important; }

/* Briques communes de l'editeur miniature */
.d-app { flex: 1; display: flex; min-height: 0; }
.d-side { width: 30%; background: var(--violet-50); border-right: 1.5px solid var(--line); padding: 8px; display: flex; flex-direction: column; gap: 5px; position: relative; }
.d-side-title { font: 700 8px/1 var(--font-text); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-60); margin: 2px 2px 4px; }
.d-item { height: 22px; border-radius: 7px; background: #fff; border: 1.5px solid var(--line); display: flex; align-items: center; gap: 5px; padding: 0 6px; font-size: 8.5px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.d-item b { width: 10px; height: 10px; border-radius: 3px; background: var(--violet-100); flex-shrink: 0; }
.d-canvas { flex: 1; background: #F3F1F8; padding: 10px; display: flex; justify-content: center; min-width: 0; overflow: hidden; }
.d-page { width: 100%; background: #fff; border-radius: 6px; box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; gap: 0; }
.d-block { padding: 9px 11px; border-bottom: 1px dashed var(--line); display: flex; flex-direction: column; gap: 4px; }
.d-line { height: 5px; border-radius: 3px; background: #E3E0EE; }
.d-title { height: 9px; width: 55%; border-radius: 4px; background: var(--ink); }
.d-btn { height: 12px; width: 52px; border-radius: 99px; background: var(--violet); }
.d-hero { background: var(--violet-50); padding: 16px 11px; }
.d-cards { display: flex; gap: 5px; flex-wrap: wrap; }
.d-cards span { flex: 1 1 28%; min-width: 34px; height: 26px; border-radius: 5px; background: var(--violet-50); border: 1px solid var(--line); }
.d-cursor { position: absolute; z-index: 5; width: 18px; height: 18px; left: 50%; top: 50%; pointer-events: none; filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .25)); }
.d-cursor svg { width: 100%; height: 100%; }
.d-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 8px; font-weight: 700; padding: 3px 7px; border-radius: 99px; }
.d-topbar { height: 28px; flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 0 8px; border-bottom: 1.5px solid var(--line); font-size: 9px; font-weight: 600; }
.d-topbar .d-spacer { flex: 1; }
.d-chip { padding: 3px 7px; border-radius: 6px; border: 1px solid var(--line); font-size: 8px; background: #fff; }
.d-chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.d-publish { padding: 4px 9px; border-radius: 99px; background: var(--violet); color: #fff; font-size: 8.5px; font-weight: 700; }

/* 1. Ajouter une section */
.demo-ajouter-section .d-picker { position: absolute; left: 30%; top: 12%; width: 44%; background: #fff; border: 1.5px solid var(--ink); border-radius: 10px; box-shadow: 4px 4px 0 var(--ink); padding: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; z-index: 3; opacity: 0; transform: scale(.9); animation: dz-picker var(--t) infinite; }
.demo-ajouter-section .d-picker .d-item { height: 26px; }
.demo-ajouter-section .d-picker .pick { animation: dz-pick var(--t) infinite; }
.demo-ajouter-section .d-add { align-self: center; margin: 6px 0; width: 22px; height: 22px; border-radius: 50%; background: var(--violet); color: #fff; font: 700 14px/22px var(--font-text); text-align: center; animation: dz-plus var(--t) infinite; }
.demo-ajouter-section .d-new { max-height: 0; padding-block: 0; overflow: hidden; background: var(--mint-100); animation: dz-new var(--t) infinite; }
.demo-ajouter-section .d-cursor { animation: dz-cursor var(--t) infinite; }
.demo-ajouter-section .d-side .d-item.n { opacity: 0; animation: dz-side var(--t) infinite; border-color: var(--mint); }
@keyframes dz-cursor { 0% { left: 85%; top: 85%; } 15% { left: 64%; top: 57%; } 22% { left: 64%; top: 57%; transform: scale(.85); } 25% { transform: none; } 42% { left: 58%; top: 40%; } 48% { left: 58%; top: 40%; transform: scale(.85); } 52% { transform: none; left: 58%; top: 40%; } 100% { left: 85%; top: 85%; } }
@keyframes dz-plus { 0%, 18% { transform: none; } 22% { transform: scale(.8); } 26%, 100% { transform: none; } }
@keyframes dz-picker { 0%, 24% { opacity: 0; transform: scale(.9); } 30%, 50% { opacity: 1; transform: none; } 55%, 100% { opacity: 0; transform: scale(.9); } }
@keyframes dz-pick { 0%, 44% { background: #fff; } 47%, 55% { background: var(--mint-100); border-color: var(--mint); } 100% { background: #fff; } }
@keyframes dz-new { 0%, 52% { max-height: 0; padding-block: 0; } 62%, 92% { max-height: 80px; padding-block: 9px; } 100% { max-height: 0; padding-block: 0; } }
@keyframes dz-side { 0%, 54% { opacity: 0; } 62%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* 2. Glisser une section */
.demo-glisser-section .d-side { gap: 0; }
.demo-glisser-section .d-side .d-item { position: absolute; left: 8px; right: 8px; height: 22px; transition: none; }
.demo-glisser-section .d-side .s1 { top: 26px; animation: dg-down var(--t) infinite; }
.demo-glisser-section .d-side .s2 { top: 53px; animation: dg-down var(--t) infinite; }
.demo-glisser-section .d-side .s3 { top: 80px; z-index: 2; animation: dg-lift var(--t) infinite; }
.demo-glisser-section .d-side .s4 { top: 107px; }
.demo-glisser-section .d-page { position: relative; }
.demo-glisser-section .d-page .d-block { position: absolute; left: 0; right: 0; height: 25%; }
.demo-glisser-section .d-page .b1 { top: 0; animation: dg-pdown var(--t) infinite; }
.demo-glisser-section .d-page .b2 { top: 25%; animation: dg-pdown var(--t) infinite; }
.demo-glisser-section .d-page .b3 { top: 50%; background: var(--sun-100); animation: dg-pup var(--t) infinite; }
.demo-glisser-section .d-page .b4 { top: 75%; }
.demo-glisser-section .d-cursor { animation: dg-cursor var(--t) infinite; }
@keyframes dg-lift { 0%, 15% { transform: none; box-shadow: none; } 22% { transform: translateY(0) rotate(-2deg) scale(1.04); box-shadow: 3px 3px 0 var(--ink); border-color: var(--ink); } 50% { transform: translateY(-54px) rotate(-2deg) scale(1.04); box-shadow: 3px 3px 0 var(--ink); border-color: var(--ink); } 56%, 88% { transform: translateY(-54px); box-shadow: none; } 100% { transform: none; } }
@keyframes dg-down { 0%, 30% { transform: none; } 48%, 88% { transform: translateY(27px); } 100% { transform: none; } }
@keyframes dg-pup { 0%, 50% { transform: none; } 62%, 88% { transform: translateY(-200%); } 100% { transform: none; } }
@keyframes dg-pdown { 0%, 50% { transform: none; } 62%, 88% { transform: translateY(100%); } 100% { transform: none; } }
@keyframes dg-cursor { 0% { left: 20%; top: 80%; } 15% { left: 18%; top: 34%; } 22% { left: 18%; top: 34%; transform: scale(.85); } 50% { left: 18%; top: 4%; transform: scale(.85); } 56% { transform: none; left: 18%; top: 4%; } 100% { left: 20%; top: 80%; } }

/* 3. Changer la couleur */
.demo-changer-couleur .d-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.demo-changer-couleur .d-swatches span { aspect-ratio: 1; border-radius: 8px; border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--line); }
.demo-changer-couleur .sw1 { background: #5B3DF5; } .demo-changer-couleur .sw2 { background: #FF6B5B; } .demo-changer-couleur .sw3 { background: #0F8A64; }
.demo-changer-couleur .sw4 { background: #FFC93C; } .demo-changer-couleur .sw5 { background: #17142B; } .demo-changer-couleur .sw6 { background: #48B8FF; }
.demo-changer-couleur .sw2 { animation: dc-ring2 var(--t) infinite; }
.demo-changer-couleur .sw3 { animation: dc-ring3 var(--t) infinite; }
.demo-changer-couleur .c-primary { animation: dc-bg var(--t) infinite; }
.demo-changer-couleur .c-soft { animation: dc-soft var(--t) infinite; }
.demo-changer-couleur .d-cursor { animation: dc-cursor var(--t) infinite; }
@keyframes dc-bg { 0%, 24% { background: #5B3DF5; } 30%, 58% { background: #FF6B5B; } 64%, 94% { background: #0F8A64; } 100% { background: #5B3DF5; } }
@keyframes dc-soft { 0%, 24% { background: #F6F4FF; } 30%, 58% { background: #FFE3DF; } 64%, 94% { background: #D5F7EC; } 100% { background: #F6F4FF; } }
@keyframes dc-ring2 { 0%, 24% { box-shadow: 0 0 0 1.5px var(--line); } 28%, 58% { box-shadow: 0 0 0 2.5px var(--ink); } 62%, 100% { box-shadow: 0 0 0 1.5px var(--line); } }
@keyframes dc-ring3 { 0%, 58% { box-shadow: 0 0 0 1.5px var(--line); } 62%, 94% { box-shadow: 0 0 0 2.5px var(--ink); } 100% { box-shadow: 0 0 0 1.5px var(--line); } }
@keyframes dc-cursor { 0% { left: 60%; top: 85%; } 20% { left: 15.5%; top: 25%; } 26% { left: 15.5%; top: 25%; transform: scale(.85); } 30% { transform: none; } 54% { left: 24%; top: 25%; } 60% { left: 24%; top: 25%; transform: scale(.85); } 64% { transform: none; left: 24%; top: 25%; } 100% { left: 60%; top: 85%; } }

/* 4. Changer la police */
.demo-changer-police .d-fonts { display: grid; gap: 5px; position: relative; }
.demo-changer-police .d-fonts .d-item { justify-content: space-between; }
.demo-changer-police .d-fonts .f1 { font-family: var(--font-title); }
.demo-changer-police .d-fonts .f2 { font-family: Georgia, "Times New Roman", serif; font-weight: 700; animation: dp-sel2 var(--t) infinite; }
.demo-changer-police .d-fonts .f3 { font-family: "Brush Script MT", "Segoe Script", cursive; font-weight: 400; font-size: 10.5px; animation: dp-sel3 var(--t) infinite; }
.demo-changer-police .d-tt { position: relative; height: 24px; }
.demo-changer-police .d-tt span { position: absolute; left: 0; top: 0; font-size: 18px; line-height: 1.1; white-space: nowrap; color: var(--ink); }
.demo-changer-police .t1 { font-family: var(--font-title); font-weight: 800; animation: dp-t1 var(--t) infinite; }
.demo-changer-police .t2 { font-family: Georgia, "Times New Roman", serif; font-weight: 700; opacity: 0; animation: dp-t2 var(--t) infinite; }
.demo-changer-police .t3 { font-family: "Brush Script MT", "Segoe Script", cursive; font-size: 21px !important; opacity: 0; animation: dp-t3 var(--t) infinite; }
.demo-changer-police .d-cursor { animation: dp-cursor var(--t) infinite; }
@keyframes dp-t1 { 0%, 25% { opacity: 1; } 29%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes dp-t2 { 0%, 25% { opacity: 0; transform: translateY(4px); } 30%, 58% { opacity: 1; transform: none; } 62%, 100% { opacity: 0; } }
@keyframes dp-t3 { 0%, 58% { opacity: 0; transform: translateY(4px); } 64%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes dp-sel2 { 0%, 25% { background: #fff; } 28%, 58% { background: var(--violet-100); border-color: var(--violet); } 62%, 100% { background: #fff; } }
@keyframes dp-sel3 { 0%, 58% { background: #fff; } 62%, 94% { background: var(--violet-100); border-color: var(--violet); } 100% { background: #fff; } }
@keyframes dp-cursor { 0% { left: 60%; top: 85%; } 20% { left: 20%; top: 40%; } 26% { left: 20%; top: 40%; transform: scale(.85); } 30% { transform: none; } 54% { left: 20%; top: 52%; } 60% { left: 20%; top: 52%; transform: scale(.85); } 64% { transform: none; left: 20%; top: 52%; } 100% { left: 60%; top: 85%; } }

/* 5. Apercu mobile */
.demo-apercu-mobile .d-canvas { align-items: flex-start; }
.demo-apercu-mobile .d-page { width: 100%; animation: dm-width var(--t) infinite; border: 1.5px solid var(--line); }
.demo-apercu-mobile .d-cards span { flex-basis: 28%; }
.demo-apercu-mobile .dev-desk { animation: dm-desk var(--t) infinite; }
.demo-apercu-mobile .dev-tab { animation: dm-tab var(--t) infinite; }
.demo-apercu-mobile .dev-mob { animation: dm-mob var(--t) infinite; }
.demo-apercu-mobile .d-cursor { animation: dm-cursor var(--t) infinite; }
@keyframes dm-width { 0%, 18% { width: 100%; } 26%, 44% { width: 64%; border-radius: 10px; } 52%, 82% { width: 30%; border-radius: 14px; } 90%, 100% { width: 100%; } }
@keyframes dm-desk { 0%, 18% { background: var(--ink); color: #fff; } 20%, 86% { background: #fff; color: var(--ink); } 90%, 100% { background: var(--ink); color: #fff; } }
@keyframes dm-tab { 0%, 18% { background: #fff; color: var(--ink); } 20%, 44% { background: var(--ink); color: #fff; } 46%, 100% { background: #fff; color: var(--ink); } }
@keyframes dm-mob { 0%, 44% { background: #fff; color: var(--ink); } 46%, 84% { background: var(--ink); color: #fff; } 86%, 100% { background: #fff; color: var(--ink); } }
@keyframes dm-cursor { 0% { left: 30%; top: 70%; } 14% { left: 73%; top: 9%; } 18% { left: 73%; top: 9%; transform: scale(.85); } 22% { transform: none; } 40% { left: 81%; top: 9%; } 44% { left: 81%; top: 9%; transform: scale(.85); } 48% { transform: none; left: 81%; top: 9%; } 80% { left: 64%; top: 9%; } 84% { left: 64%; top: 9%; transform: scale(.85); } 88% { transform: none; } 100% { left: 30%; top: 70%; } }

/* 6. Publier */
.demo-publier .d-status { position: relative; width: 112px; height: 16px; }
.demo-publier .d-status .d-pill { position: absolute; left: 0; top: 0; }
.demo-publier .st-draft { background: var(--sun-100); color: #8A5D00; animation: du-draft var(--t) infinite; }
.demo-publier .st-live { background: var(--mint-100); color: #0B6B4E; opacity: 0; animation: du-live var(--t) infinite; }
.demo-publier .d-publish { position: relative; animation: du-btn var(--t) infinite; }
.demo-publier .d-toast { position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 40px); opacity: 0; background: var(--ink); color: #fff; font-size: 9px; font-weight: 600; padding: 7px 12px; border-radius: 10px; white-space: nowrap; animation: du-toast var(--t) infinite; z-index: 4; }
.demo-publier .d-toast em { color: var(--sun); font-style: normal; }
.demo-publier .d-cursor { animation: du-cursor var(--t) infinite; }
@keyframes du-btn { 0%, 24% { background: var(--violet); transform: none; } 27% { transform: scale(.9); } 30%, 46% { background: var(--violet-600); transform: none; opacity: .7; } 50%, 90% { background: var(--mint); color: var(--ink); opacity: 1; } 100% { background: var(--violet); } }
@keyframes du-draft { 0%, 46% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes du-live { 0%, 46% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes du-toast { 0%, 50% { opacity: 0; transform: translate(-50%, 40px); } 56%, 86% { opacity: 1; transform: translate(-50%, 0); } 92%, 100% { opacity: 0; transform: translate(-50%, 40px); } }
@keyframes du-cursor { 0% { left: 50%; top: 70%; } 20% { left: 90%; top: 9%; } 25% { left: 90%; top: 9%; transform: scale(.85); } 29% { transform: none; left: 90%; top: 9%; } 60% { left: 90%; top: 9%; } 100% { left: 50%; top: 70%; } }

/* 7. Assistant IA */
.demo-assistant-ia .d-wizard { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; background: var(--paper); position: relative; }
.demo-assistant-ia .d-form { background: #fff; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.demo-assistant-ia .d-label { font-size: 7.5px; font-weight: 700; color: var(--ink-60); text-transform: uppercase; letter-spacing: .06em; }
.demo-assistant-ia .d-input { height: 18px; border: 1.5px solid var(--line); border-radius: 6px; font-size: 9px; padding: 0 6px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; }
.demo-assistant-ia .d-type { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; border-right: 1.5px solid var(--violet); }
.demo-assistant-ia .ty1 { animation: di-type1 var(--t) infinite steps(18); }
.demo-assistant-ia .ty2 { animation: di-type2 var(--t) infinite steps(8); }
.demo-assistant-ia .ty3 { animation: di-type3 var(--t) infinite steps(6); }
.demo-assistant-ia .d-gen { margin-top: auto; align-self: flex-start; padding: 5px 10px; border-radius: 99px; background: var(--violet); color: #fff; font-size: 8.5px; font-weight: 700; animation: di-gen var(--t) infinite; }
.demo-assistant-ia .d-result { background: #fff; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; position: relative; }
.demo-assistant-ia .d-result .d-block { opacity: 0; transform: translateY(8px); }
.demo-assistant-ia .d-result .r1 { animation: di-r1 var(--t) infinite; }
.demo-assistant-ia .d-result .r2 { animation: di-r2 var(--t) infinite; }
.demo-assistant-ia .d-result .r3 { animation: di-r3 var(--t) infinite; }
.demo-assistant-ia .d-spark { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; opacity: 0; animation: di-spark var(--t) infinite; }
@keyframes di-type1 { 0%, 4% { width: 0; } 22%, 96% { width: 100%; border-color: transparent; } 100% { width: 0; } }
@keyframes di-type2 { 0%, 24% { width: 0; } 34%, 96% { width: 100%; border-color: transparent; } 100% { width: 0; } }
@keyframes di-type3 { 0%, 36% { width: 0; } 44%, 96% { width: 100%; border-color: transparent; } 100% { width: 0; } }
@keyframes di-gen { 0%, 46% { transform: none; } 49% { transform: scale(.9); } 52%, 96% { transform: none; background: var(--mint); color: var(--ink); } 100% { background: var(--violet); } }
@keyframes di-spark { 0%, 50% { opacity: 0; transform: scale(.6); } 54% { opacity: 1; transform: scale(1.1) rotate(10deg); } 60%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes di-r1 { 0%, 58% { opacity: 0; transform: translateY(8px); } 64%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes di-r2 { 0%, 64% { opacity: 0; transform: translateY(8px); } 70%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes di-r3 { 0%, 70% { opacity: 0; transform: translateY(8px); } 76%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 8. Verification du domaine */
.demo-domaine-verification .d-dns { flex: 1; justify-content: center; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; background: var(--paper); }
.demo-domaine-verification .d-host { display: flex; align-items: center; justify-content: space-between; font: 700 12px/1 var(--font-title); }
.demo-domaine-verification .d-row { display: grid; grid-template-columns: 44px 70px 1fr 18px; gap: 6px; align-items: center; background: #fff; border: 1.5px solid var(--line); border-radius: 8px; padding: 6px 8px; font-size: 8.5px; }
.demo-domaine-verification .d-row code { font-family: var(--font-mono); font-size: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-domaine-verification .d-type { font-weight: 800; color: var(--violet-700); }
.demo-domaine-verification .d-state { width: 16px; height: 16px; border-radius: 50%; position: relative; background: var(--sun-100); }
.demo-domaine-verification .d-state::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 2px solid #C08A00; border-top-color: transparent; animation: spin 1s linear infinite; }
.demo-domaine-verification .ok { position: absolute; inset: 0; border-radius: 50%; background: var(--mint); opacity: 0; display: grid; place-items: center; color: var(--ink); font: 800 9px/1 var(--font-text); }
.demo-domaine-verification .k1 { animation: dd-ok1 var(--t) infinite; }
.demo-domaine-verification .k2 { animation: dd-ok2 var(--t) infinite; }
.demo-domaine-verification .k3 { animation: dd-ok3 var(--t) infinite; }
.demo-domaine-verification .d-ssl { align-self: flex-start; margin-top: 4px; opacity: 0; transform: scale(.8); background: var(--mint-100); color: #0B6B4E; animation: dd-ssl var(--t) infinite; }
.demo-domaine-verification .d-wait { color: #8A5D00; background: var(--sun-100); animation: dd-wait var(--t) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes dd-ok1 { 0%, 22% { opacity: 0; transform: scale(.4); } 27%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes dd-ok2 { 0%, 38% { opacity: 0; transform: scale(.4); } 43%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes dd-ok3 { 0%, 54% { opacity: 0; transform: scale(.4); } 59%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes dd-ssl { 0%, 66% { opacity: 0; transform: scale(.8); } 72%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes dd-wait { 0%, 60% { opacity: 1; } 66%, 94% { opacity: 0; } 100% { opacity: 1; } }

/* Mouvement reduit : etat final statique, sans curseur ni bouton pause */
@media (prefers-reduced-motion: reduce) {
  .demo-stage *, .demo-stage *::after { animation: none !important; }
  .d-cursor, .demo-toggle { display: none !important; }
  .demo-ajouter-section .d-new { max-height: 80px; padding-block: 9px; }
  .demo-ajouter-section .d-side .d-item.n { opacity: 1; }
  .demo-glisser-section .d-side .s3 { transform: translateY(-54px); }
  .demo-glisser-section .d-side .s1, .demo-glisser-section .d-side .s2 { transform: translateY(27px); }
  .demo-glisser-section .d-page .b3 { transform: translateY(-200%); }
  .demo-glisser-section .d-page .b1, .demo-glisser-section .d-page .b2 { transform: translateY(100%); }
  .demo-changer-couleur .c-primary { background: #FF6B5B; } .demo-changer-couleur .c-soft { background: #FFE3DF; }
  .demo-changer-police .t1 { opacity: 0; } .demo-changer-police .t2 { opacity: 1; }
  .demo-apercu-mobile .d-page { width: 30%; }
  .demo-publier .st-draft { opacity: 0; } .demo-publier .st-live { opacity: 1; } .demo-publier .d-publish { background: var(--mint); color: var(--ink); }
  .demo-publier .d-toast { opacity: 1; transform: translate(-50%, 0); }
  .demo-assistant-ia .d-type { width: 100%; border: 0; } .demo-assistant-ia .d-result .d-block { opacity: 1; transform: none; }
  .demo-domaine-verification .ok, .demo-domaine-verification .d-ssl { opacity: 1; transform: none; } .demo-domaine-verification .d-wait { opacity: 0; }
  .hero-deco .b3 { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1240px) {
  .docs-page.has-toc { grid-template-columns: minmax(0, 1fr); }
  .docs-toc { display: none; }
}
@media (max-width: 1024px) {
  .docs-shell.has-sidebar { grid-template-columns: minmax(0, 1fr); }
  .docs-menu-btn { display: grid; }
  .docs-sidebar { position: fixed; z-index: 60; top: 66px; left: 0; bottom: 0; height: auto; width: min(340px, 88vw); background: var(--paper); transform: translateX(-102%); transition: transform .35s var(--ease-out); box-shadow: var(--shadow-lg); visibility: hidden; }
  .docs-sidebar.is-open { transform: none; visibility: visible; }
  .menu-open .docs-backdrop { display: block; position: fixed; inset: 66px 0 0; z-index: 55; background: rgba(23, 20, 43, .35); }
  .docs-start { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .docs-top-links a:not(.btn) { display: none; }
  .docs-kbd { display: none; }
  .start-card { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .docs-header-inner { gap: .5rem; }
  .docs-brand-name { display: none; }
  .docs-search-trigger { height: 40px; }
  .docs-search-label { font-size: .88rem; }
  .docs-top-links .btn { padding: .65em .85em; font-size: .82rem; }
  .pager { grid-template-columns: 1fr; }
  .pager-link.next { grid-column: 1; }
  .feedback { flex-direction: column; align-items: flex-start; }
  .docs-prose ol > li { padding-left: 2.2rem; }
  .demo-window { aspect-ratio: 4 / 3.4; }
  .hero-search { height: 54px; font-size: .95rem; }
  .search-dialog { margin-top: 2vh; max-height: 90vh; }
}
@media (max-width: 420px) {
  .docs-top-links .btn { display: none; }
}
@media (max-width: 600px) { .hide-sm { display: none; } }
.shot-tall { max-width: 340px; margin-inline: auto; }
.docs-prose :not(pre) > code { overflow-wrap: anywhere; } .docs-prose td code { white-space: normal; }