:root{--bg:#fff;--surface:#fff;--surface-2:#f8f8f8;--border:#d8d8d3;--text:#171717;--muted:#5f6368;--accent:#171717;--accent-soft:rgba(23,23,23,.07);--html:#713b3b;--css:#304766;--js:#5e592f;--terminal:#4c3d61;--python:#355c4c;--exercise:#35484b;--sidebar:280px;--radius:14px;--transition:180ms ease}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:2rem}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.65 Inter,system-ui,sans-serif}a{color:inherit;text-decoration:none}.skip-link{position:fixed;left:1rem;top:-5rem;z-index:100;padding:.7rem 1rem;background:var(--accent);color:#fff;border-radius:8px}.skip-link:focus{top:1rem}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);padding:28px 20px;display:flex;flex-direction:column;background:var(--surface);border-right:1px solid var(--border);z-index:20}.brand{display:flex;align-items:center;gap:11px;font-size:17px}.brand-mark{display:grid;place-items:center;width:38px;height:34px;flex:0 0 38px;background:var(--accent);color:#fff;border-radius:10px;font-size:12px;font-weight:800}.brand strong{color:var(--accent)}.search{display:flex;align-items:center;gap:8px;margin:30px 0 24px;padding:9px 12px;background:var(--bg);border:1px solid var(--border);border-radius:9px;color:var(--muted)}.search:focus-within{border-color:var(--accent)}.search input{min-width:0;width:100%;border:0;outline:0;background:none;color:var(--text);font:inherit}.nav-title{margin:22px 10px 7px;color:#727272;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.main-nav a{display:flex;align-items:center;gap:10px;padding:9px 11px;margin:2px 0;border-radius:8px;color:var(--muted);font-weight:500;transition:var(--transition)}.main-nav a:hover{background:var(--surface-2);color:var(--text)}.main-nav a.active{background:var(--accent-soft);color:var(--accent)}.nav-dot{width:7px;height:7px;border-radius:50%}.nav-dot.html{background:var(--html)}.nav-dot.css{background:var(--css)}.nav-dot.js{background:var(--js)}.nav-dot.terminal{background:var(--terminal)}.nav-dot.python{background:var(--python)}.nav-dot.exercise{background:var(--exercise)}.sidebar-note{margin:auto 10px 0;color:#727272;font-size:12px}
.syntax-nav{flex:1;min-height:0;margin-top:10px;overflow-y:auto;border-top:1px solid var(--border)}.syntax-nav nav{padding-bottom:16px}.syntax-nav a{display:block;padding:5px 10px;border-radius:6px;color:var(--muted);font-size:12px;line-height:1.35;transition:var(--transition)}.syntax-nav a:hover{background:var(--surface-2);color:var(--text)}.syntax-nav a[hidden],.topic-card[hidden],.technology-panel[hidden]{display:none}
.main{margin-left:var(--sidebar);display:grid;grid-template-columns:minmax(0,860px);justify-content:center;padding:72px 48px 100px}.doc{min-width:0}.eyebrow{color:var(--accent);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:12px}.html-text{color:var(--html)}.css-text{color:var(--css)}.js-text{color:var(--js)}.terminal-text{color:var(--terminal)}h1{max-width:760px;margin:10px 0 20px;font-size:clamp(2rem,4vw,3.25rem);line-height:1.08;letter-spacing:-.045em}body[data-page="home"] h1{font-size:clamp(2.15rem,4.5vw,3.75rem);line-height:1.08;letter-spacing:-.045em}h2{margin:80px 0 22px;font-size:1.65rem;letter-spacing:-.025em}.lead{max-width:680px;color:var(--muted);font-size:1.12rem}.card-grid{display:grid;gap:13px}.topic-card{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:18px;padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);transition:var(--transition)}.topic-card:hover{transform:translateY(-2px);border-color:#b8b8b3;background:var(--surface-2)}.topic-card h3,.topic-card p{margin:0}.topic-card p{color:var(--muted);font-size:13px}.card-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:11px;font-weight:800}.card-icon.html{color:var(--html);background:rgba(194,65,45,.09)}.card-icon.css{color:var(--css);background:rgba(40,105,177,.09)}.card-icon.js{color:#171717;background:rgba(154,112,0,.18)}.card-icon.terminal{color:var(--terminal);background:rgba(76,61,97,.12);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1rem}.card-icon.exercise{color:var(--exercise);background:rgba(53,72,75,.11)}.review-section{scroll-margin-top:2rem}.review-section > h2{margin:8px 0 20px}.review-box{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}.review-box h3,.review-box p{margin:0}.review-box p{max-width:560px;color:var(--muted);font-size:13px}.review-button{flex:0 0 auto;padding:10px 14px;border:1px solid var(--text);border-radius:8px;background:var(--text);color:#fff;font:600 13px Inter,system-ui,sans-serif;cursor:pointer;transition:var(--transition)}.review-button:hover{background:#333}.review-button:focus-visible{outline:2px solid var(--text);outline-offset:3px}.review-list{display:grid;gap:8px;margin-top:12px}.review-list:empty{display:none}.review-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--border);border-radius:9px;background:#fff;transition:var(--transition)}.review-item:hover{border-color:#b8b8b3;background:var(--surface-2)}.back-to-top{position:fixed;right:24px;bottom:24px;width:42px;height:42px;border:1px solid var(--border);border-radius:50%;background:var(--surface-2);color:var(--text);font-size:18px;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(10px);transition:var(--transition)}.back-to-top.visible{opacity:1;pointer-events:auto;transform:none}.menu-toggle,.scrim{display:none}

/* Lisibilité commune des fiches HTML, CSS et JavaScript. */
body[data-page="html"] .doc > section,body[data-page="css"] #css-sheets > section,body[data-page="javascript"] #javascript-sheets > section,body[data-page="terminal"] #terminal-sheets > section{margin-top:2.5rem}
body[data-page="html"] .doc > section + section,body[data-page="css"] #css-sheets > section + section,body[data-page="javascript"] #javascript-sheets > section + section,body[data-page="terminal"] #terminal-sheets > section + section{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--border)}
body[data-page="html"] .doc > section > h2,body[data-page="css"] #css-sheets > section > h2,body[data-page="javascript"] #javascript-sheets > section > h2,body[data-page="terminal"] #terminal-sheets > section > h2{display:table;margin:0;padding-bottom:.3rem;font-size:1.35rem;font-weight:800}
body[data-page="html"] .doc > section.is-open > h2,body[data-page="css"] #css-sheets > section.is-open > h2,body[data-page="javascript"] #javascript-sheets > section.is-open > h2,body[data-page="terminal"] #terminal-sheets > section.is-open > h2{margin-bottom:1.5rem}
body[data-page="html"] .doc > section > h2{border-bottom:1px solid var(--html)}
body[data-page="css"] #css-sheets > section > h2{border-bottom:1px solid var(--css)}
body[data-page="javascript"] #javascript-sheets > section > h2{border-bottom:1px solid var(--js)}
body[data-page="terminal"] #terminal-sheets > section > h2{border-bottom:1px solid var(--terminal)}
.sheet-toggle{display:flex;align-items:center;gap:.7rem;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;font-weight:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}.sheet-arrow{display:inline-block;color:var(--muted);font-size:1.45rem;line-height:1;transform:rotate(0deg);transition:transform var(--transition)}.is-open .sheet-arrow{transform:rotate(90deg)}.sheet-toggle:hover .sheet-arrow{color:var(--text)}.sheet-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:5px;border-radius:2px}.sheet-content[hidden]{display:none}.sheet-content{padding-top:.1rem}.practice-example{margin:0 0 1.8rem;padding:20px;border:1px solid #c9d2d3;border-left:3px solid var(--exercise);border-radius:10px;background:#f5f8f8}.practice-example .practice-label{margin:0 0 3px;color:var(--exercise);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.practice-example h3{margin:0 0 1.1rem;font-size:1.05rem}.practice-example h4{margin:1rem 0 .2rem;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase}.practice-example p{margin:0;color:var(--muted)}.practice-example pre{overflow-x:auto;margin:.45rem 0 0;padding:14px;border-radius:8px;background:#202424;color:#f5f5f2;line-height:1.55}.practice-example pre code{color:inherit;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.search-status{margin:2rem 0;padding:1rem;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--muted)}.home-search-results{margin-top:2.5rem}.home-search-results[hidden]{display:none}.home-search-results h2{margin:0 0 1rem;font-size:1.15rem}.home-result-list{display:grid;gap:7px}.home-result{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--border);border-radius:9px;background:var(--surface);transition:var(--transition)}.home-result:hover{border-color:#b8b8b3;background:var(--surface-2);transform:translateX(2px)}.home-result small{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.sheet-category{margin:3rem 0 .6rem;padding-bottom:.5rem;border-bottom:1px solid var(--border);color:var(--muted);font-size:.78rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.sheet-category[hidden]{display:none}.sheet-category+section{margin-top:.65rem!important}.combined-note p{margin:.35rem 0}.syntax-group{border-bottom:1px solid var(--border)}.syntax-group[hidden]{display:none}.syntax-group summary{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;color:var(--text);font-size:12px;font-weight:700;cursor:pointer;list-style:none}.syntax-group summary::-webkit-details-marker{display:none}.syntax-group summary::after{content:"›";color:var(--muted);font-size:16px;line-height:1;transition:transform var(--transition)}.syntax-group[open] summary::after{transform:rotate(90deg)}.syntax-group nav{padding:0 0 7px 6px}
body[data-page="home"] .main{grid-template-columns:minmax(0,980px);padding-top:88px}.home-hero{display:flex;min-height:56vh;flex-direction:column;justify-content:center;padding:2rem 0 5rem}.home-hero h1{max-width:780px;margin-bottom:24px}.home-hero .lead{max-width:700px}.home-summary{display:flex;gap:10px;margin-top:32px}.home-summary span{padding:8px 12px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:12px}.home-summary strong{color:var(--text);font-size:14px}.learning-path{padding-top:3rem;border-top:1px solid var(--border)}.section-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,420px);gap:10px 48px;align-items:end;margin-bottom:48px}.section-intro .eyebrow{grid-column:1/-1;margin:0}.section-intro h2{margin:0;font-size:clamp(2rem,4vw,3.2rem);line-height:1.05}.section-intro>p:last-child{margin:0;color:var(--muted)}.technology-flow{display:grid;gap:18px}.technology-panel{--indent:calc(var(--step) * clamp(14px,3.3vw,42px));display:block;width:calc(100% - var(--indent));margin-left:var(--indent);padding:28px 30px;border:1px solid var(--border);border-left:4px solid var(--panel-accent);border-radius:2px;background:var(--surface);transition:transform var(--transition),background var(--transition),border-color var(--transition)}.technology-panel:nth-child(1){--panel-accent:var(--html)}.technology-panel:nth-child(2){--panel-accent:var(--css)}.technology-panel:nth-child(3){--panel-accent:var(--js)}.technology-panel:nth-child(4){--panel-accent:var(--terminal)}.technology-panel:hover{transform:translateY(-3px);border-color:#b8b8b3;background:#fafaf8}.technology-heading{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:18px;align-items:start}.technology-number{padding-top:5px;color:var(--muted);font:600 11px/1 Inter,system-ui,sans-serif;letter-spacing:.1em}.technology-heading h3{margin:0;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1}.technology-heading p{margin:7px 0 0;color:var(--muted)}.technology-count{align-self:center;color:var(--muted);font-size:12px;white-space:nowrap}.technology-count strong{margin-right:3px;color:var(--text);font-size:1.15rem}.technology-categories{display:flex;flex-wrap:wrap;gap:7px;margin:25px 0 22px;padding:0 0 0 60px;list-style:none}.technology-categories li{padding:5px 9px;border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--muted);font-size:11px}.technology-action{display:flex;justify-content:flex-end;gap:8px;color:var(--text);font-size:12px;font-weight:700}.review-section{margin-top:7rem;padding-top:3.5rem;border-top:1px solid var(--border)}
@media(max-width:1050px){.main{grid-template-columns:minmax(0,800px)}}
@media(max-width:760px){.sidebar{transform:translateX(-100%);transition:transform var(--transition)}body.menu-open .sidebar{transform:none}.main{margin-left:0;padding:86px 22px 80px}.menu-toggle{display:flex;position:fixed;top:18px;left:18px;z-index:30;width:42px;height:42px;flex-direction:column;justify-content:center;gap:5px;padding:10px;border:1px solid var(--border);border-radius:9px;background:var(--surface);cursor:pointer}.menu-toggle span{height:2px;width:100%;background:var(--text)}body.menu-open .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:10}.topic-card{grid-template-columns:42px 1fr auto}.home-hero{min-height:auto;padding:3rem 0 4rem}.home-summary{flex-wrap:wrap}.section-intro{grid-template-columns:1fr;margin-bottom:30px}.section-intro .eyebrow{grid-column:auto}.technology-panel{width:100%;margin-left:0;padding:22px 20px}.technology-heading{grid-template-columns:32px minmax(0,1fr)}.technology-count{grid-column:2}.technology-categories{padding-left:50px}.review-box{align-items:flex-start;flex-direction:column}.review-button{width:100%}.review-item{grid-template-columns:minmax(0,1fr) auto}h2{margin-top:60px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Navigation harmonisée : l'élément actif reste sobre et reprend la couleur de sa technologie. */
.main-nav a{position:relative;border:1px solid transparent}
.main-nav a.active{background:#fff;border-color:var(--border);color:var(--text);box-shadow:0 3px 14px rgba(23,23,23,.05)}
.main-nav a.active::after{content:"";position:absolute;right:8px;width:5px;height:5px;border-radius:50%;background:var(--text)}
body[data-page="html"] .main-nav a.active::after{background:var(--html)}
body[data-page="css"] .main-nav a.active::after{background:var(--css)}
body[data-page="javascript"] .main-nav a.active::after{background:var(--js)}
body[data-page="terminal"] .main-nav a.active::after{background:var(--terminal)}
body[data-page="python"] .main-nav a.active::after{background:var(--python)}
.nav-dot{transition:transform var(--transition)}
.main-nav a:hover .nav-dot,.main-nav a.active .nav-dot{transform:scale(1.35)}
.syntax-group[open] summary{margin:5px 0;background:#fff;border-radius:7px;color:var(--text);box-shadow:inset 3px 0 0 var(--text)}
body[data-page="html"] .syntax-group[open] summary{box-shadow:inset 3px 0 0 var(--html)}
body[data-page="css"] .syntax-group[open] summary{box-shadow:inset 3px 0 0 var(--css)}
body[data-page="javascript"] .syntax-group[open] summary{box-shadow:inset 3px 0 0 var(--js)}
body[data-page="terminal"] .syntax-group[open] summary{box-shadow:inset 3px 0 0 var(--terminal)}
body[data-page="python"] .syntax-group[open] summary{box-shadow:inset 3px 0 0 var(--python)}
.syntax-nav a:focus-visible,.syntax-group summary:focus-visible,.main-nav a:focus-visible{outline:2px solid var(--text);outline-offset:2px}

/* Accueil éditorial : navigation horizontale et grandes étapes empilées. */
body[data-page="home"] .sidebar{inset:0 0 auto 0;width:100%;height:84px;padding:16px 34px;flex-direction:row;align-items:center;gap:28px;background:rgba(255,255,255,.93);border-right:0;border-bottom:1px solid var(--border);backdrop-filter:blur(16px)}
body[data-page="home"] .sidebar .brand{flex:0 0 auto}
body[data-page="home"] .sidebar .search{order:3;width:min(240px,20vw);margin:0 0 0 auto;background:var(--surface)}
body[data-page="home"] .sidebar .main-nav{display:flex;align-items:center;gap:3px}
body[data-page="home"] .sidebar .nav-title,body[data-page="home"] .sidebar-note{display:none}
body[data-page="home"] .sidebar .main-nav a{margin:0;padding:8px 10px;font-size:13px}
body[data-page="home"] .sidebar .main-nav a.active{background:var(--text);border-color:var(--text);color:#fff;box-shadow:none}
body[data-page="home"] .sidebar .main-nav a.active::after{display:none}
body[data-page="home"] .main{margin-left:0;grid-template-columns:minmax(0,1180px);padding:84px 42px 120px}
body[data-page="home"] .doc{width:100%}
.home-hero{display:flex;min-height:calc(100svh - 84px);flex-direction:column;justify-content:space-between;padding:clamp(70px,10vh,120px) 0 38px}
.home-hero-copy{display:flex;flex-direction:column;align-items:center;text-align:center}
.home-hero .eyebrow{margin:0 0 25px}
body[data-page="home"] .home-hero h1{max-width:900px;margin:0;font-size:clamp(3.2rem,7vw,6.4rem);font-weight:600;line-height:.92;letter-spacing:-.065em}
.home-hero .lead{max-width:590px;margin:38px auto 0;font-size:clamp(1rem,1.5vw,1.2rem)}
.home-hero-footer{display:flex;align-items:center;justify-content:space-between;padding-top:24px;border-top:1px solid var(--border);color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.home-hero-footer p{margin:0}
.home-hero-footer a{display:flex;align-items:center;gap:10px;color:var(--text)}
.home-hero-footer a span{font-size:18px}
.learning-path{padding-top:clamp(80px,12vw,150px);border-top:1px solid var(--border)}
.section-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,390px);gap:14px 70px;align-items:end;margin-bottom:clamp(70px,10vw,120px)}
.section-intro .eyebrow{grid-column:1/-1;margin:0}
.section-intro h2{margin:0;font-size:clamp(3rem,6vw,5.8rem);font-weight:600;line-height:.95;letter-spacing:-.06em}
.section-intro>p:last-child{max-width:360px;margin:0 0 5px;color:var(--muted);font-size:1rem}
.technology-flow{display:grid;gap:10vh;padding-bottom:12vh}
.technology-panel{--stack-top:calc(102px + var(--step) * 14px);position:sticky;top:var(--stack-top);z-index:calc(2 + var(--step));display:flex;width:100%;min-height:min(72vh,720px);margin:0;flex-direction:column;padding:clamp(30px,5vw,64px);overflow:hidden;border:1px solid #cfcfca;border-top:5px solid var(--panel-accent);border-radius:5px;background:#f4f4f1;box-shadow:0 -10px 35px rgba(23,23,23,.06);transition:transform var(--transition),box-shadow var(--transition)}
.technology-panel:nth-child(1){--panel-accent:var(--html);background:#f2efeb}
.technology-panel:nth-child(2){--panel-accent:var(--css);background:#edf0f3}
.technology-panel:nth-child(3){--panel-accent:var(--js);background:#f2f0e5}
.technology-panel:nth-child(4){--panel-accent:var(--terminal);background:#eeecf1}
.technology-panel:nth-child(5){--panel-accent:var(--python);background:#edf2ef}
.technology-panel:hover{transform:translateY(-5px);border-color:#cfcfca;box-shadow:0 20px 55px rgba(23,23,23,.12)}
.technology-code{position:absolute;right:clamp(24px,5vw,70px);top:clamp(72px,9vw,115px);color:rgba(23,23,23,.07);font:700 clamp(8rem,24vw,18rem)/.8 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:-.1em;white-space:nowrap;pointer-events:none}
.technology-heading{position:relative;display:grid;grid-template-columns:50px minmax(0,1fr);gap:20px;align-items:start}
.technology-number{padding-top:10px;color:var(--panel-accent);font:700 12px/1 Inter,system-ui,sans-serif;letter-spacing:.12em}
.technology-title p{margin:0 0 8px;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.technology-heading h3{margin:0;font-size:clamp(4rem,10vw,8.5rem);font-weight:600;line-height:.83;letter-spacing:-.075em}
.technology-description{position:relative;max-width:540px;margin:auto 0 0 70px;font-size:clamp(1.15rem,2.3vw,1.75rem);line-height:1.35;letter-spacing:-.025em}
.technology-categories{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 34px;padding:0 0 0 70px;list-style:none}
.technology-categories li{padding:7px 11px;border:1px solid rgba(23,23,23,.2);border-radius:999px;background:rgba(255,255,255,.48);color:#424242;font-size:11px;font-weight:600}
.technology-footer{position:relative;display:flex;align-items:center;justify-content:space-between;margin-left:70px;padding-top:12px;border-top:1px solid rgba(23,23,23,.22)}
.technology-count{color:var(--muted);font-size:12px;white-space:nowrap}
.technology-count strong{margin-right:4px;color:var(--text);font-size:1.35rem}
.technology-action{display:flex;align-items:center;gap:12px;color:var(--text);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.technology-action span{font-size:20px;transition:transform var(--transition)}
.technology-panel:hover .technology-action span{transform:translate(3px,-3px)}
body[data-page="home"] .home-search-results{position:relative;z-index:8;width:min(760px,100%);margin:30px auto 0}
body[data-page="home"] .search-status{position:relative;z-index:8;width:min(760px,100%);margin:25px auto 0}
.review-section{margin-top:10rem;padding-top:5rem;border-top:1px solid var(--border)}

@media(max-width:960px) and (min-width:761px){
  body[data-page="home"] .sidebar{gap:15px;padding-inline:22px}
  body[data-page="home"] .sidebar .brand span:last-child{display:none}
  body[data-page="home"] .sidebar .search{width:190px}
  body[data-page="home"] .sidebar .main-nav a{padding-inline:7px}
}

@media(max-width:760px){
  body[data-page="home"] .sidebar{inset:0 auto 0 0;width:min(86vw,310px);height:100%;padding:28px 20px;flex-direction:column;align-items:stretch;gap:0;background:var(--surface);border-right:1px solid var(--border);border-bottom:0;backdrop-filter:none}
  body[data-page="home"] .sidebar .brand{flex:0 0 auto}
  body[data-page="home"] .sidebar .search{order:initial;width:auto;margin:30px 0 24px;background:#fff}
  body[data-page="home"] .sidebar .main-nav{display:block}
  body[data-page="home"] .sidebar .nav-title{display:block}
  body[data-page="home"] .sidebar .main-nav a{margin:2px 0;padding:9px 11px;font-size:15px}
  body[data-page="home"] .sidebar .main-nav a.active{background:#fff;border-color:var(--border);color:var(--text)}
  body[data-page="home"] .sidebar .main-nav a.active::after{display:block}
  body[data-page="home"] .main{padding:70px 18px 80px}
  .home-hero{min-height:calc(100svh - 70px);padding:60px 0 25px}
  body[data-page="home"] .home-hero h1{font-size:clamp(2.8rem,13vw,4.4rem)}
  .home-hero .lead{margin-top:28px}
  .home-hero-footer{align-items:flex-start;gap:15px;flex-direction:column}
  .section-intro{grid-template-columns:1fr;margin-bottom:60px}
  .section-intro .eyebrow{grid-column:auto}
  .section-intro h2{font-size:clamp(2.8rem,13vw,4.5rem)}
  .technology-flow{gap:7vh}
  .technology-panel{--stack-top:calc(76px + var(--step) * 9px);min-height:66vh;padding:28px 22px}
  .technology-code{top:110px;right:18px;font-size:9rem}
  .technology-heading{grid-template-columns:30px minmax(0,1fr);gap:10px}
  .technology-number{padding-top:7px}
  .technology-heading h3{font-size:clamp(3.25rem,17vw,5.2rem)}
  .technology-description{margin:auto 0 0 40px;font-size:1.1rem}
  .technology-categories{margin:22px 0 24px;padding-left:40px}
  .technology-footer{margin-left:40px}
  .technology-action{font-size:11px}
}

/* Les technologies suivent le même rythme éditorial que les grandes sections de l'accueil. */
.technology-flow{display:block;padding-bottom:0}
.technology-panel,
.technology-panel:nth-child(1),
.technology-panel:nth-child(2),
.technology-panel:nth-child(3),
.technology-panel:nth-child(4){
  position:relative;
  top:auto;
  z-index:auto;
  min-height:78vh;
  padding:clamp(80px,11vw,140px) clamp(10px,4vw,48px) clamp(32px,4vw,48px);
  overflow:hidden;
  border:0;
  border-top:1px solid var(--border);
  border-radius:0;
  background:#fff;
  box-shadow:none;
}
.technology-panel:hover{
  transform:none;
  border-color:var(--border);
  background:#fff;
  box-shadow:none;
}
.technology-panel + .technology-panel{margin-top:0}
.technology-panel:first-child .technology-code{font-size:clamp(5rem,15vw,11rem)}
.technology-heading h3{font-size:clamp(3rem,7vw,6.2rem);line-height:.9}
.sidebar{background:#fff}
.syntax-group[open],.syntax-group[open] nav{background:#fff}

@media(max-width:760px){
  .technology-panel,
  .technology-panel:nth-child(1),
  .technology-panel:nth-child(2),
  .technology-panel:nth-child(3),
  .technology-panel:nth-child(4){
    min-height:72vh;
    padding:70px 4px 28px;
  }
  .technology-panel:first-child .technology-code{font-size:clamp(4.5rem,24vw,7rem)}
  .technology-heading h3{font-size:clamp(2.7rem,13vw,4.2rem)}
  body[data-page="home"] .sidebar{background:#fff}
}

/* Exercices : une dernière étape éditoriale, dans la continuité des technologies. */
body[data-page="home"] .review-section{
  position:relative;
  min-height:70vh;
  margin-top:0;
  padding:clamp(80px,11vw,140px) clamp(10px,4vw,48px);
  overflow:hidden;
  border-top:1px solid var(--border);
  background:#fff;
}
body[data-page="home"] .review-section::after{
  content:"?";
  position:absolute;
  top:70px;
  right:clamp(20px,6vw,80px);
  color:rgba(23,23,23,.045);
  font:700 clamp(10rem,26vw,20rem)/.8 Inter,system-ui,sans-serif;
  pointer-events:none;
}
body[data-page="home"] .review-section>.eyebrow,
body[data-page="home"] .review-section>h2,
body[data-page="home"] .review-box,
body[data-page="home"] .review-list{position:relative;z-index:1}
body[data-page="home"] .review-section>h2{
  max-width:720px;
  margin:10px 0 clamp(50px,7vw,90px);
  font-size:clamp(3rem,7vw,6.2rem);
  font-weight:600;
  line-height:.92;
  letter-spacing:-.06em;
}
body[data-page="home"] .review-box{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:40px;
  padding:0 0 30px;
  border:0;
  border-bottom:1px solid var(--border);
  border-radius:0;
  background:transparent;
}
body[data-page="home"] .review-box h3{
  margin-bottom:12px;
  font-size:clamp(1.35rem,2.2vw,2rem);
  letter-spacing:-.03em;
}
body[data-page="home"] .review-box p{
  max-width:580px;
  font-size:14px;
}
body[data-page="home"] .review-button{
  padding:14px 19px;
  border-radius:0;
  text-transform:uppercase;
  letter-spacing:.05em;
}
body[data-page="home"] .review-list{margin-top:20px}
body[data-page="home"] .review-item{
  padding:16px 4px;
  border:0;
  border-bottom:1px solid var(--border);
  border-radius:0;
  background:#fff;
}
body[data-page="home"] .review-item:hover{
  padding-left:10px;
  background:#fff;
}

@media(max-width:760px){
  body[data-page="home"] .review-section{
    min-height:68vh;
    padding:70px 4px;
  }
  body[data-page="home"] .review-section::after{
    top:100px;
    right:4px;
    font-size:10rem;
  }
  body[data-page="home"] .review-section>h2{
    font-size:clamp(2.7rem,13vw,4.2rem);
  }
  body[data-page="home"] .review-box{
    grid-template-columns:1fr;
    align-items:start;
  }
}

/* Le fond blanc reste commun à l'accueil et aux quatre documentations. */
body,
.main,
.doc,
body[data-page="home"] .home-hero,
body[data-page="home"] .learning-path,
body[data-page="home"] .review-section{
  background:#fff;
}
html{background:#fff}

/* Interrupteur coulissant : aucune mention ON/OFF, une bille bleue indique sa position. */
.theme-toggle{
  position:relative;
  width:44px;
  height:24px;
  flex:0 0 44px;
  align-self:flex-end;
  margin:0 0 18px;
  padding:0;
  border:2px solid #171717;
  border-radius:999px;
  background:#fff;
  cursor:pointer;
  transition:background var(--transition),border-color var(--transition);
}
.theme-toggle span{
  position:absolute;
  top:2px;
  left:2px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#2563eb;
  box-shadow:0 1px 4px rgba(0,0,0,.24);
  transform:translateX(0);
  transition:transform 220ms ease,background var(--transition);
}
.theme-toggle[aria-checked="true"] span{transform:translateX(20px)}
.theme-toggle:focus-visible{outline:3px solid rgba(37,99,235,.28);outline-offset:3px}
body[data-page="home"] .theme-toggle{order:4;align-self:center;margin:0 0 0 -14px}

/* Mode nuit commun : les accents des technologies sont conservés sur des surfaces sombres. */
body.theme-dark{
  --bg:#090b0e;
  --surface:#0f1216;
  --surface-2:#171b21;
  --border:#2c323b;
  --text:#f3f5f7;
  --muted:#a8b0ba;
  --accent:#76a9ff;
  --accent-soft:rgba(118,169,255,.12);
  --html:#d98578;
  --css:#7fa5d8;
  --js:#c9bf68;
  --terminal:#a994c4;
  color-scheme:dark;
}
html:has(body.theme-dark),
body.theme-dark,
body.theme-dark .main,
body.theme-dark .doc,
body.theme-dark .sidebar,
body.theme-dark .syntax-group[open],
body.theme-dark .syntax-group[open] nav,
body.theme-dark .technology-panel,
body.theme-dark .technology-panel:nth-child(1),
body.theme-dark .technology-panel:nth-child(2),
body.theme-dark .technology-panel:nth-child(3),
body.theme-dark .technology-panel:nth-child(4),
body.theme-dark .technology-panel:hover,
body.theme-dark .review-section,
body.theme-dark .review-item,
body.theme-dark .review-item:hover,
body.theme-dark .home-result{
  background:#090b0e;
  color:var(--text);
}
body.theme-dark .sidebar{border-color:var(--border)}
body.theme-dark .search,
body.theme-dark .main-nav a.active,
body.theme-dark .topic-card,
body.theme-dark .search-status,
body.theme-dark .home-result:hover{
  background:var(--surface);
  border-color:var(--border);
}
body.theme-dark .main-nav a:hover,
body.theme-dark .syntax-nav a:hover,
body.theme-dark .topic-card:hover{
  background:var(--surface-2);
  color:var(--text);
}
body.theme-dark .syntax-group[open] summary{background:var(--surface)}
body.theme-dark .technology-categories li{
  background:var(--surface);
  border-color:#343b45;
  color:#cbd1d8;
}
body.theme-dark .technology-code{color:rgba(118,169,255,.07)}
body.theme-dark .technology-footer,
body.theme-dark .review-box,
body.theme-dark .review-item{border-color:var(--border)}
body.theme-dark .practice-example{
  background:#10161a;
  border-color:#314047;
}
body.theme-dark pre{background:#050607}
body.theme-dark .review-button{
  border-color:#76a9ff;
  background:#76a9ff;
  color:#07101c;
}
body.theme-dark .review-button:hover{background:#99c0ff}
body.theme-dark .back-to-top,
body.theme-dark .menu-toggle{
  background:var(--surface);
  border-color:var(--border);
  color:var(--text);
}
body.theme-dark .menu-toggle span{background:var(--text)}
body.theme-dark .theme-toggle{
  background:#171b21;
  border-color:#596270;
}
body.theme-dark .theme-toggle span{background:#4d8dff}
body.theme-dark[data-page="home"] .sidebar{background:rgba(9,11,14,.94)}
body.theme-dark[data-page="home"] .sidebar .main-nav a.active{
  background:#76a9ff;
  border-color:#76a9ff;
  color:#07101c;
}
body.theme-dark[data-page="home"] .review-section::after{color:rgba(118,169,255,.055)}

/* Priorité explicite aux deux introductions de l'accueil en mode nuit. */
body[data-page="home"].theme-dark .main,
body[data-page="home"].theme-dark .doc,
body[data-page="home"].theme-dark .home-hero,
body[data-page="home"].theme-dark .home-hero-copy,
body[data-page="home"].theme-dark .home-hero-footer,
body[data-page="home"].theme-dark .learning-path,
body[data-page="home"].theme-dark .section-intro{
  background:#090b0e!important;
  color:#f3f5f7;
}
body[data-page="home"].theme-dark .home-hero-footer,
body[data-page="home"].theme-dark .learning-path{
  border-color:#2c323b;
}
body[data-page="home"].theme-dark .home-hero .lead,
body[data-page="home"].theme-dark .section-intro>p:last-child{
  color:#a8b0ba;
}

@media(max-width:760px){
  body[data-page="home"] .theme-toggle{order:initial;align-self:flex-end;margin:0 0 18px}
  body.theme-dark[data-page="home"] .sidebar{background:#090b0e}
}

/* Position identique sur l'accueil et toutes les pages de technologies. */
.theme-toggle,
body[data-page="home"] .theme-toggle{
  position:fixed;
  top:27px;
  right:24px;
  left:auto;
  z-index:60;
  order:initial;
  align-self:auto;
  margin:0;
}
body[data-page="home"] .sidebar .search{margin-right:55px}

@media(max-width:760px){
  .theme-toggle,
  body[data-page="home"] .theme-toggle{
    top:22px;
    right:18px;
    margin:0;
  }
}

/* Nouvelle lecture pédagogique des fiches. */
.purpose-block>p:first-child{font-size:1.02rem;color:var(--text)}
.purpose-block>p:last-child{
  margin-top:.7rem;
  padding-left:14px;
  border-left:3px solid var(--border);
  color:var(--muted);
}
.example-block{display:grid;gap:.55rem}
.example-block .example-situation{
  margin:0 0 .35rem;
  color:var(--muted);
}
.example-block .example-label{
  margin:10px 0 0;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.example-block pre{margin:.15rem 0 .55rem}
.code-walkthrough{
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  counter-reset:code-step;
  list-style:none;
}
.code-walkthrough li{
  display:grid;
  grid-template-columns:28px minmax(180px,40%) minmax(0,1fr);
  gap:14px;
  align-items:start;
  padding:12px 0;
  border-bottom:1px solid var(--border);
  counter-increment:code-step;
}
.code-walkthrough li::before{
  content:counter(code-step,decimal-leading-zero);
  grid-column:1;
  width:24px;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
}
.code-walkthrough code{
  grid-column:2;
  color:var(--text);
  font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  overflow-wrap:anywhere;
}
.code-walkthrough span{
  grid-column:3;
  color:var(--muted);
  font-size:13px;
}
.result-block{
  padding:18px;
  border:1px solid var(--border);
  background:var(--surface);
}
.result-block>p:first-child{margin:0 0 16px}
.result-block .result-label{
  margin:0 0 6px;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.result-block .result-output{
  position:relative;
  margin:0;
  padding:18px 18px 18px 42px;
  border:1px solid #303640;
  background:#101318;
  color:#e9f1ff;
}
.result-block .result-output::before{
  content:">";
  position:absolute;
  top:17px;
  left:18px;
  color:#76a9ff;
  font:700 13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.correction-block{
  padding:16px 18px;
  border:1px solid var(--border);
  border-left:3px solid var(--exercise);
  background:var(--surface);
}
.correction-block p{margin:.35rem 0}
.correction-block p:nth-child(2){color:var(--text)}
body.theme-dark .purpose-block>p:last-child,
body.theme-dark .code-walkthrough li,
body.theme-dark .correction-block,
body.theme-dark .result-block{border-color:var(--border)}
body.theme-dark .correction-block{background:var(--surface)}
body.theme-dark .result-block{background:var(--surface)}

@media(max-width:620px){
  .code-walkthrough li{grid-template-columns:28px minmax(0,1fr);gap:7px 10px}
  .code-walkthrough code{grid-column:2}
  .code-walkthrough span{grid-column:2}
}

/* Python reprend exactement la structure visuelle des autres documentations. */
.python-text{color:var(--python)}
body[data-page="python"] #python-sheets>section{margin-top:2.5rem}
body[data-page="python"] #python-sheets>section+section{
  margin-top:1.1rem;
  padding-top:1.1rem;
  border-top:1px solid var(--border);
}
body[data-page="python"] #python-sheets>section>h2{
  display:table;
  margin:0;
  padding-bottom:.3rem;
  border-bottom:1px solid var(--python);
  font-size:1.35rem;
  font-weight:800;
}
body[data-page="python"] #python-sheets>section.is-open>h2{margin-bottom:1.5rem}
.technology-panel:nth-child(5){--panel-accent:var(--python);background:#fff}
.technology-panel:nth-child(5) .technology-description{
  margin-top:clamp(36px,5vw,68px);
}
.technology-count{
  display:inline-flex;
  align-items:baseline;
  gap:2px;
  line-height:1;
}
.technology-count strong{margin-right:0}
.code-walkthrough code{white-space:pre-wrap}
body.theme-dark{--python:#78aa95}
body.theme-dark .technology-panel:nth-child(5){background:#090b0e}

@media(max-width:760px){
  .technology-panel:nth-child(5) .technology-description{
    margin:32px 0 0 40px;
  }
}

/* Assistant local sous forme de chat discret, disponible sur toutes les pages. */
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.assistant-widget{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:80;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
  font-family:Inter,system-ui,sans-serif;
}
.assistant-launcher{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:48px;
  padding:7px 16px 7px 7px;
  border:1px solid #171717;
  border-radius:999px;
  background:#171717;
  color:#fff;
  box-shadow:0 9px 30px rgba(0,0,0,.18);
  font:700 12px/1 Inter,system-ui,sans-serif;
  cursor:pointer;
  transition:transform var(--transition),box-shadow var(--transition);
}
.assistant-launcher:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(0,0,0,.24)}
.assistant-launcher:focus-visible{outline:3px solid rgba(37,99,235,.35);outline-offset:3px}
.assistant-launcher-icon{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#2563eb;
  color:#fff;
  font-size:16px;
}
.assistant-widget.is-open .assistant-launcher{display:none}
.assistant-chat{
  width:min(390px,calc(100vw - 32px));
  height:min(590px,calc(100vh - 44px));
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--surface);
  color:var(--text);
  box-shadow:0 22px 70px rgba(0,0,0,.22);
}
.assistant-chat[hidden]{display:none}
.assistant-chat-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  min-height:104px;
  padding:12px 14px 12px 18px;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.assistant-header-content{display:flex;flex:1;flex-direction:column;min-width:0;padding-right:12px}
.assistant-chat-header>.assistant-header-content>strong{font-size:14px}
.assistant-chat-header>[class] span{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:10px}
.assistant-chat-header [data-assistant-status] i{width:6px;height:6px;border-radius:50%;background:#2f855a}
.assistant-usage{
  --assistant-usage-percent:0%;
  --assistant-usage-color:#2563eb;
  width:100%;
  max-width:270px;
  margin-top:9px;
}
.assistant-usage-copy{display:flex;align-items:center;justify-content:space-between;gap:10px}
.assistant-chat-header .assistant-usage-copy span{font-size:8px;font-weight:650}
.assistant-chat-header .assistant-usage-copy strong{color:var(--muted);font-size:8px;font-weight:750}
.assistant-usage-track{
  height:4px;
  margin-top:5px;
  overflow:hidden;
  border-radius:999px;
  background:var(--border);
}
.assistant-usage-track i{
  display:block;
  width:var(--assistant-usage-percent);
  height:100%;
  border-radius:inherit;
  background:var(--assistant-usage-color);
  transition:width .35s ease,background .2s ease;
}
.assistant-usage.is-warning{--assistant-usage-color:#c46a08}
.assistant-usage.is-critical{--assistant-usage-color:#c53030}
.assistant-usage.is-unavailable{opacity:.55}
.assistant-close{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:var(--surface-2);
  color:var(--text);
  font-size:21px;
  line-height:1;
  cursor:pointer;
}
.assistant-close:hover{background:var(--border)}
.assistant-close:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.assistant-messages{
  height:calc(100% - 168px);
  overflow-y:auto;
  padding:18px 14px;
  background:var(--surface-2);
  overscroll-behavior:contain;
}
.assistant-message{
  width:fit-content;
  max-width:88%;
  margin:0 0 12px;
  padding:11px 13px;
  border:1px solid var(--border);
  border-radius:14px;
  font-size:12px;
  line-height:1.5;
}
.assistant-message>p{margin:0}
.assistant-message-bot{
  margin-right:auto;
  border-bottom-left-radius:4px;
  background:var(--surface);
  color:var(--text);
}
.assistant-message-user{
  margin-left:auto;
  border-color:#2563eb;
  border-bottom-right-radius:4px;
  background:#2563eb;
  color:#fff;
}
.assistant-message-loading{color:var(--muted)}
.assistant-message-loading p::after{
  content:"";
  display:inline-block;
  width:1.2em;
  text-align:left;
  animation:assistant-thinking 1.1s steps(4,end) infinite;
}
@keyframes assistant-thinking{
  0%{content:""}
  25%{content:"."}
  50%{content:".."}
  75%,100%{content:"..."}
}
.assistant-quick-prompts{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.assistant-quick-prompts button{
  padding:6px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  font:600 9px/1.25 Inter,system-ui,sans-serif;
  cursor:pointer;
}
.assistant-quick-prompts button:hover{border-color:var(--text);color:var(--text)}
.assistant-response{width:94%;max-width:94%;padding:15px}
.assistant-response-label{
  margin:0 0 5px!important;
  color:var(--exercise);
  font-size:9px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.assistant-response h3{margin:0;font-size:14px;line-height:1.3}
.assistant-response>p:not(.assistant-response-label):not(.assistant-local-note){
  margin:7px 0 0;
  color:var(--muted);
}
.assistant-suggestions{
  display:grid;
  gap:6px;
  margin:13px 0 0;
  padding:0;
  list-style:none;
}
.assistant-suggestions a{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:2px 8px;
  padding:9px 10px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
}
.assistant-suggestions code{
  min-width:0;
  overflow-wrap:anywhere;
  color:var(--text);
  font:700 10px/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.assistant-suggestions span{grid-column:1/-1;color:var(--muted);font-size:10px}
.assistant-suggestions small{
  color:var(--muted);
  font-size:8px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.assistant-suggestions a:hover{border-color:var(--text)}
.assistant-suggestions a:hover code{text-decoration:underline;text-underline-offset:3px}
.assistant-local-note{margin:11px 0 0!important;color:var(--muted);font-size:8px}
.assistant-chat-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) 38px;
  gap:8px;
  height:64px;
  padding:10px 12px;
  border-top:1px solid var(--border);
  background:var(--surface);
}
.assistant-chat-form input{
  min-width:0;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:10px;
  outline:0;
  background:var(--surface);
  color:var(--text);
  font:500 12px/1.4 Inter,system-ui,sans-serif;
}
.assistant-chat-form input:focus{border-color:var(--text)}
.assistant-chat-form button{
  border:0;
  border-radius:10px;
  background:#2563eb;
  color:#fff;
  font-size:17px;
  cursor:pointer;
}
.assistant-chat-form button:hover{background:#1d4ed8}
.assistant-chat-form button:disabled{opacity:.55;cursor:wait}
.assistant-chat-form button:focus-visible{outline:3px solid rgba(37,99,235,.3);outline-offset:2px}
body.theme-dark .assistant-launcher{border-color:#303640;background:#f3f5f7;color:#090b0e}
body.theme-dark .assistant-launcher-icon{color:#fff}
body.theme-dark .assistant-chat,
body.theme-dark .assistant-chat-header,
body.theme-dark .assistant-chat-form,
body.theme-dark .assistant-message-bot{background:var(--surface);border-color:var(--border)}
body.theme-dark .assistant-messages,
body.theme-dark .assistant-suggestions a{background:var(--surface-2)}
body.theme-dark .assistant-response-label{color:#7ca5aa}
.back-to-top{right:175px}

@media(max-width:520px){
  .assistant-widget{right:12px;bottom:12px}
  .assistant-chat{
    width:calc(100vw - 24px);
    height:min(620px,calc(100vh - 24px));
    border-radius:15px;
  }
  .assistant-launcher{min-height:44px}
  .back-to-top{right:158px;bottom:15px}
}