@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=Caveat:wght@500;600&family=Work+Sans:wght@400;500;600&display=swap');
:root {
  --ardoise: #17271F;
  --cahier: #FBF8EF;
  --quadrillage: #C7D3E3;
  --marge: #A83A2C;
  --or: #E8A33D;
  --craie: #F6F3E7;
  --ink: #17271F;
  --paper: #FBF8EF;
  --shadow: 0 18px 45px rgba(23, 39, 31, .12), 8px 10px 0 rgba(23, 39, 31, .06);
  --radius: 14px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cahier); font-family: 'Work Sans', sans-serif; line-height: 1.6; }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--or); outline-offset: 4px; }
.container { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; }
.site-header { background: rgba(23,39,31,.94); color: var(--craie); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(246,243,231,.12); transition: transform .35s cubic-bezier(.22,1,.36,1), background .35s, box-shadow .35s; }.site-header.is-scrolled { background: rgba(23,39,31,.82); backdrop-filter: blur(16px); box-shadow: 0 10px 30px rgba(23,39,31,.14); }.site-header.is-hidden { transform: translateY(-100%); }
.nav { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; width: 238px; height: 54px; text-decoration: none; }
.brand img { width: 238px; height: auto; max-height: 54px; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: 1.3rem; font-size: .92rem; }
.nav-links a { text-decoration: none; opacity: .84; }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--or); opacity: 1; }
.menu-toggle { display: none; border: 1px solid rgba(246,243,231,.35); background: transparent; color: var(--craie); padding: .55rem; border-radius: 7px; font-size: 1.25rem; cursor: pointer; }.reading-progress { position: fixed; inset: 0 0 auto; height: 4px; transform: scaleX(0); transform-origin: left; background: var(--or); z-index: 100; }
.hero { background: var(--ardoise); color: var(--craie); padding: clamp(4rem, 10vw, 8rem) 0 5rem; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 4rem; align-items: center; }
.eyebrow, .kicker { color: var(--or); font: 600 1rem 'Caveat', cursive; letter-spacing: .03em; }
h1, h2, h3 { font-family: 'Bricolage Grotesque', sans-serif; line-height: 1.03; margin: 0 0 1rem; }
h1 { font-size: clamp(2.7rem, 7vw, 5.7rem); max-width: 780px; }
h2 { font-size: clamp(2.1rem, 5vw, 4rem); }
h3 { font-size: 1.45rem; }
p { margin: 0 0 1.2rem; }
.hero p { max-width: 590px; font-size: 1.1rem; color: rgba(246,243,231,.8); }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.15rem; border-radius: 8px; border: 2px solid transparent; text-decoration: none; font-weight: 600; overflow: hidden; cursor: pointer; transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, background .25s; }.button::before { content: ''; position: absolute; inset: 0; transform: translateX(-120%) skewX(-18deg); background: rgba(246,243,231,.28); transition: transform .45s cubic-bezier(.22,1,.36,1); }.button:hover::before { transform: translateX(120%) skewX(-18deg); }.button:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(23,39,31,.15); }.button:active { transform: scale(.98); }
.button-primary { background: var(--or); color: var(--ardoise); }
.button-secondary { border-color: var(--marge); color: var(--craie); }
.hero-note { border: 2px solid var(--or); padding: 2rem; transform: rotate(2deg); background: rgba(246,243,231,.05); box-shadow: var(--shadow); }
.hero-note strong { display: block; color: var(--or); font: 600 2rem 'Caveat', cursive; }
.phone-stage { position: relative; width: 100%; min-width: 0; min-height: 420px; display: grid; place-items: center; }.phone { width: min(250px, 70vw); aspect-ratio: 9 / 18; padding: 10px; border: 4px solid var(--craie); border-radius: 32px; background: var(--ardoise); box-shadow: 18px 24px 0 rgba(232,163,61,.2), 0 28px 65px rgba(0,0,0,.25); transform: rotate(4deg); animation: phone-float 6s ease-in-out infinite; }.phone-screen { height: 100%; padding: 1rem .8rem; border-radius: 22px; background: var(--cahier); color: var(--ink); }.phone-screen small { color: var(--marge); font-weight: 600; }.phone-screen h3 { font-size: 1.2rem; margin-top: 1rem; }.phone-row { padding: .75rem; margin-top: .6rem; border: 1px solid var(--quadrillage); border-radius: 8px; background: var(--paper); font-size: .78rem; }.phone-row strong { display: block; color: var(--marge); }.floating-badge { position: absolute; padding: .55rem .7rem; border: 1px solid var(--or); border-radius: 8px; background: var(--craie); color: var(--ardoise); font-size: .75rem; font-weight: 600; box-shadow: var(--shadow); }.floating-badge.one { top: 14%; left: 0; }.floating-badge.two { right: 0; bottom: 18%; }.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 1.25rem 0; }.fact { padding: 1rem 1.2rem; border-left: 3px solid var(--or); }.fact strong { display: block; font: 600 1.3rem 'Bricolage Grotesque', sans-serif; }.fact span { color: var(--soft-ink); font-size: .9rem; }
.section { padding: clamp(4rem, 8vw, 7rem) 0; position: relative; }
.notebook { background-color: var(--cahier); background-image: repeating-linear-gradient(0deg, transparent 0, transparent 31px, rgba(199,211,227,.55) 32px), repeating-linear-gradient(90deg, transparent 0, transparent 31px, rgba(199,211,227,.22) 32px); }
.notebook::before { content: ''; position: absolute; left: max(calc((100vw - 1120px) / 2 - 1.2rem), 1rem); top: 0; bottom: 0; border-left: 2px solid var(--marge); opacity: .8; }
.section-heading { max-width: 720px; margin-bottom: 2.5rem; padding-left: 1.2rem; }
.section-heading p { max-width: 620px; }
.chalk { position: relative; display: inline-block; }
.chalk::after { content: ''; position: absolute; height: 9px; left: 0; right: -8px; bottom: -7px; border-bottom: 3px solid var(--or); border-radius: 48% 62% 45% 58%; transform: rotate(-2deg) skewX(-10deg); box-shadow: 3px 1px 0 -1px var(--or); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.card { position: relative; isolation: isolate; overflow: hidden; background: var(--paper); border: 1px solid rgba(23,39,31,.15); border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow); transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s; }
.card::before { content: ''; position: absolute; z-index: -1; width: 14rem; height: 14rem; left: var(--spot-x, 50%); top: var(--spot-y, 0); transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(232,163,61,.22), transparent 65%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.card:nth-child(2) { transform: rotate(-1deg); }.card:nth-child(3) { transform: rotate(1deg); }
.card:hover { transform: rotate(0) translateY(-8px); box-shadow: 0 26px 60px rgba(23,39,31,.18), 0 8px 0 rgba(168,58,44,.16); }.card:hover::before { opacity: 1; }.card-icon { color: var(--marge); margin-bottom: 1rem; }
.icon { width: 2rem; height: 2rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.steps { position: relative; display: grid; gap: 0; max-width: 820px; border-top: 2px solid var(--ardoise); }
.steps::before { content: ''; position: absolute; left: 0; top: -2px; width: 2px; height: var(--progress, 0%); background: var(--marge); transition: height .2s linear; }
.step { display: grid; grid-template-columns: 110px 1fr; gap: 1.2rem; padding: 1.3rem 0; border-bottom: 1px solid rgba(23,39,31,.22); opacity: .45; transform: translateX(-10px); transition: opacity .5s, transform .5s cubic-bezier(.22,1,.36,1); }
.step.is-visible { opacity: 1; transform: translateX(0); }
.step-time { color: var(--marge); font: 600 1.2rem 'Caveat', cursive; }.step h3 { margin-bottom: .35rem; }
.band { background: var(--or); color: var(--ardoise); padding: 3rem 0; }.band-inner { display: flex; justify-content: space-between; align-items: center; gap: 2rem; }.band h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
.page-hero { padding: 5rem 0 4rem; background: var(--ardoise); color: var(--craie); }.page-hero p { max-width: 660px; color: rgba(246,243,231,.8); font-size: 1.1rem; }
.split { display: grid; grid-template-columns: .8fr 1.2fr; gap: 4rem; align-items: start; }.manifesto { font: 600 2.3rem/1.1 'Caveat', cursive; color: var(--marge); }.download-box { background: var(--ardoise); color: var(--craie); padding: 2rem; border-radius: var(--radius); box-shadow: var(--shadow); }.download-box h2 { color: var(--or); font-size: 2.2rem; }
.download-card { width: 100%; margin: 1rem 0 .5rem; }
.download-meta { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin-top: 1rem; color: rgba(246,243,231,.78); font-size: .8rem; line-height: 1.5; }
.download-meta span { display: inline-block; }
form { max-width: 720px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }label { display: grid; gap: .35rem; font-weight: 600; }input, textarea { width: 100%; border: 1px solid rgba(23,39,31,.35); background: var(--paper); border-radius: 7px; padding: .8rem; font: inherit; color: var(--ink); }textarea { min-height: 160px; resize: vertical; }.full { grid-column: 1/-1; }
.contact-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 2rem; align-items: start; }.contact-panel { background: var(--paper); border: 1px solid rgba(23,39,31,.15); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); }.contact-item { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 0; border-bottom: 1px solid rgba(23,39,31,.16); }.contact-item:last-child { border-bottom: 0; }.contact-item .icon { color: var(--marge); flex: 0 0 auto; }.contact-item h3 { font-size: 1rem; margin-bottom: .25rem; }.contact-item p { color: rgba(23,39,31,.72); margin: 0; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1); }.reveal.is-visible { opacity: 1; transform: translateY(0); }.reveal-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: .08s; }.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: .16s; }.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: .24s; }.status-message { min-height: 1.5rem; margin-top: .8rem; color: var(--marge); }
.site-footer { background: var(--ardoise); color: var(--craie); padding: 3rem 0 1.5rem; }.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2rem; }.site-footer h3 { color: var(--or); font-size: 1.1rem; }.site-footer a { text-decoration: none; opacity: .8; }.site-footer a:hover { color: var(--or); opacity: 1; }.footer-bottom { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid rgba(246,243,231,.15); font-size: .85rem; opacity: .7; }
.demo-section { background: var(--cahier); }.demo-phase { --demo-duration: 3600ms; margin-top: 4rem; padding: clamp(1.2rem, 4vw, 2.4rem); border: 1px solid rgba(23,39,31,.14); border-radius: var(--radius); background: rgba(246,243,231,.5); box-shadow: var(--shadow); }.demo-phase-heading { max-width: 620px; margin-bottom: 2rem; }.demo-phase-heading h3 { font-size: clamp(1.7rem, 3vw, 2.6rem); }.demo-phase-heading p:last-child { color: var(--soft-ink); }.demo-layout { display: grid; grid-template-columns: minmax(250px, 330px) 1fr; align-items: center; justify-content: center; gap: clamp(2rem, 7vw, 7rem); max-width: 850px; margin: 0 auto; }.demo-phone-shell { position: relative; width: min(284px, 100%); aspect-ratio: 9 / 18.5; padding: 11px; justify-self: center; border: 4px solid var(--craie); border-radius: 38px; background: var(--ardoise); box-shadow: 18px 26px 0 rgba(232,163,61,.18), 0 28px 60px rgba(23,39,31,.23), inset 0 0 0 1px rgba(246,243,231,.35); perspective: 900px; transform-style: preserve-3d; transition: transform .35s var(--ease); }.demo-phone-shell::after { content: ''; position: absolute; inset: 8px; border-radius: 29px; pointer-events: none; background: linear-gradient(115deg, rgba(246,243,231,.25), transparent 25%, transparent 76%, rgba(246,243,231,.08)); }.demo-phone-speaker { position: absolute; z-index: 3; top: 8px; left: 50%; width: 74px; height: 14px; transform: translateX(-50%); border-radius: 0 0 12px 12px; background: var(--ardoise); }.demo-phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 26px; background: var(--cahier); color: var(--ink); }.demo-screen-track { display: flex; height: 100%; transition: transform .65s var(--ease); will-change: transform; }.demo-screen { position: relative; flex: 0 0 100%; min-width: 100%; height: 100%; padding: 2.1rem 1rem 1rem; opacity: .38; transform: scale(.93); transform-origin: center; transition: opacity .55s var(--ease), transform .65s var(--ease); }.demo-screen.is-active { opacity: 1; transform: scale(1); }.demo-screen h4 { margin: .65rem 0 .55rem; font: 700 1.25rem/1.05 'Bricolage Grotesque', sans-serif; }.demo-screen p { font-size: .75rem; color: var(--soft-ink); }.demo-screen-label { color: var(--marge); font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }.demo-app-mark { display: grid; place-items: center; width: 4rem; height: 4rem; margin: 3.6rem auto 1.2rem; border-radius: 16px; color: var(--craie); background: linear-gradient(135deg, var(--marge), var(--or)); box-shadow: 0 12px 20px rgba(168,58,44,.24); font: 800 2rem 'Bricolage Grotesque', sans-serif; }.demo-screen:first-child h4, .demo-screen:first-child p { text-align: center; }.demo-screen-button { display: block; margin-top: 1rem; padding: .65rem .8rem; border-radius: 8px; background: var(--or); color: var(--ardoise); text-align: center; font-size: .72rem; font-weight: 600; }.demo-field, .demo-course-row, .demo-subject-row, .demo-profile-row, .demo-setting, .demo-answer { margin-top: .55rem; padding: .62rem .7rem; border: 1px solid rgba(199,211,227,.9); border-radius: 8px; background: var(--paper); font-size: .7rem; }.demo-course-row b, .demo-subject-row b, .demo-profile-row b { display: flex; justify-content: space-between; }.demo-course-row small { display: block; margin-top: .2rem; color: var(--marge); font-size: .6rem; }.demo-otp { display: flex; gap: .35rem; margin-top: 1rem; }.demo-otp i { display: grid; place-items: center; width: 2.2rem; height: 2.4rem; border: 1px solid var(--quadrillage); border-radius: 7px; background: var(--paper); font-style: normal; font-weight: 600; }.demo-avatar { width: 3.5rem; height: 3.5rem; margin: .4rem 0 .8rem; border: 4px solid var(--or); border-radius: 50%; background: var(--quadrillage); }.demo-mini-header, .demo-pdf-top { display: flex; align-items: center; justify-content: space-between; color: var(--marge); font-size: .7rem; font-weight: 600; }.demo-pdf-lines { display: grid; gap: .42rem; margin: 1rem 0; }.demo-pdf-lines i { display: block; height: .35rem; border-radius: 99px; background: var(--quadrillage); }.demo-pdf-lines i:nth-child(1), .demo-pdf-lines i:nth-child(4) { width: 78%; }.demo-pdf-highlight, .demo-correction { padding: .7rem; border-left: 3px solid var(--or); background: rgba(232,163,61,.12); font-size: .68rem; }.demo-timer { float: right; padding: .35rem .45rem; border-radius: 6px; color: var(--craie); background: var(--marge); font: 600 .75rem 'Work Sans', sans-serif; }.demo-answer-selected { border-color: var(--marge); background: rgba(168,58,44,.08); }.demo-score { margin: 1.4rem 0; color: var(--marge); font: 800 3.3rem 'Bricolage Grotesque', sans-serif; text-align: center; }.demo-score span { color: var(--soft-ink); font-size: 1rem; }.demo-correction b, .demo-correction small { display: block; }.demo-correction small { margin-top: .3rem; }.demo-profile-head { display: flex; gap: .7rem; align-items: center; margin: 1rem 0; }.demo-profile-head .demo-avatar { margin: 0; width: 3rem; height: 3rem; }.demo-profile-head h4 { margin: 0; }.demo-profile-head small { color: var(--soft-ink); font-size: .65rem; }.demo-profile-row, .demo-setting { display: flex; justify-content: space-between; }.demo-switch { width: 1.8rem; height: 1rem; border-radius: 99px; background: var(--quadrillage); }.demo-switch::after { content: ''; display: block; width: .8rem; height: .8rem; margin: .1rem; border-radius: 50%; background: var(--craie); transition: transform .25s; }.demo-switch.is-on { background: var(--marge); }.demo-switch.is-on::after { transform: translateX(.8rem); }.demo-side { min-width: 0; }.demo-tooltip { position: relative; min-height: 4.6rem; margin: 0 0 1.4rem; padding: 1rem 1.1rem; border: 1px solid var(--or); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); font-size: .9rem; }.demo-tooltip::before { content: ''; position: absolute; left: -9px; top: 1.2rem; width: 16px; height: 16px; border-left: 1px solid var(--or); border-bottom: 1px solid var(--or); background: var(--paper); transform: rotate(45deg); }.demo-stories { display: flex; gap: .35rem; width: 100%; margin-bottom: 1.1rem; }.demo-story { position: relative; flex: 1; height: 5px; overflow: hidden; border: 0; border-radius: 99px; background: rgba(23,39,31,.18); cursor: pointer; }.demo-story-fill { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: var(--marge); }.demo-story.is-complete .demo-story-fill { transform: scaleX(1); }.demo-story.is-active { outline: 2px solid rgba(232,163,61,.55); outline-offset: 3px; }.demo-controls { display: flex; gap: .6rem; }.demo-control { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0; border: 1px solid var(--marge); border-radius: 50%; background: transparent; color: var(--marge); cursor: pointer; font-weight: 600; }.demo-control:hover { background: var(--marge); color: var(--craie); }.demo-play { background: var(--marge); color: var(--craie); }
@media (max-width: 760px) { .brand { width: 190px; height: 48px; }.brand img { width: 190px; }.menu-toggle { display: block; }.nav-links { display: none; position: fixed; inset: 76px 0 0; background: var(--ardoise); padding: 2rem 1rem; flex-direction: column; align-items: stretch; gap: .3rem; }.nav-links.is-open { display: flex; animation: menu-in .35s cubic-bezier(.22,1,.36,1) both; }.nav-links a { padding: .7rem .55rem; font-size: 1.1rem; }.hero-grid, .split, .footer-grid, .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; }.cards { grid-template-columns: 1fr; }.card:nth-child(n) { transform: none; }.step { grid-template-columns: 85px 1fr; }.band-inner { align-items: flex-start; flex-direction: column; }.form-grid { grid-template-columns: 1fr; }.full { grid-column: auto; } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes phone-float { 0%, 100% { transform: rotate(4deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-10px); } }
@media (max-width: 760px) { .facts { grid-template-columns: 1fr; }.phone-stage { min-height: 390px; }.floating-badge.one { left: 2%; }.floating-badge.two { right: 2%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }.reveal, .reveal-stagger > *, .step { opacity: 1; transform: none; } }
@media (max-width: 760px) { .demo-phase { padding: 1.2rem; }.demo-layout { grid-template-columns: 1fr; gap: 2rem; }.demo-phone-shell { width: min(270px, 78vw); }.demo-side { width: min(100%, 420px); margin: 0 auto; }.demo-tooltip::before { left: 50%; top: -9px; border-left: 0; border-bottom: 1px solid var(--or); border-top: 1px solid var(--or); transform: rotate(45deg); } }
@media (prefers-reduced-motion: reduce) { .demo-phone-shell { transform: none !important; }.demo-screen-track { transition: opacity .01ms !important; }.demo-screen { transition: opacity .01ms !important; }.demo-story-fill { transition: none !important; } }
@keyframes demo-phone-float { 0%, 100% { --demo-lift: 0px; } 50% { --demo-lift: -8px; } }
.demo-phone-shell { transform: perspective(900px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) translateY(var(--demo-lift, 0px)); animation: demo-phone-float 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .demo-phone-shell { animation: none !important; } }
.demo-app-icon-card { display: grid; grid-template-columns: 1fr 250px; align-items: center; gap: 3rem; padding: clamp(1.5rem, 5vw, 3rem); border: 1px solid rgba(23,39,31,.14); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }.demo-home-screen { position: relative; min-height: 260px; padding: 1.2rem; overflow: hidden; border: 5px solid var(--ardoise); border-radius: 28px; background: linear-gradient(145deg, var(--marge), var(--or)); box-shadow: 0 18px 35px rgba(23,39,31,.2); }.demo-home-status { display: flex; justify-content: space-between; color: var(--craie); font-size: .65rem; font-weight: 600; }.demo-signal { display: inline-flex; gap: 3px; align-items: end; }.demo-signal i { display: block; width: 3px; height: 7px; border-radius: 2px; background: var(--craie); }.demo-signal i + i { height: 11px; }.demo-home-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem .65rem; margin-top: 2.2rem; }.demo-home-icons > i { width: 2rem; height: 2rem; justify-self: center; border-radius: 9px; background: rgba(246,243,231,.5); filter: blur(1px); opacity: 0; transform: translateY(8px) scale(.8); }.demo-home-app { position: relative; display: grid; justify-items: center; gap: .2rem; color: var(--craie); text-align: center; font-size: .55rem; font-weight: 600; opacity: 0; transform: translateY(-18px) scale(.75); }.demo-home-app img { grid-area: 1 / 1; width: 2.2rem; height: 2.2rem; border-radius: 9px; object-fit: cover; }.demo-home-app b { grid-column: 1; margin-top: 2.4rem; font-weight: 600; }.demo-home-app::after { content: ''; position: absolute; width: 5rem; height: 5rem; border-radius: 50%; background: rgba(246,243,231,.28); filter: blur(16px); opacity: 0; transform: scale(.8); pointer-events: none; }.demo-home-screen.is-visible .demo-home-app { animation: app-icon-land .8s cubic-bezier(.22,1.35,.36,1) .24s both; }.demo-home-screen.is-visible .demo-home-app::after { animation: app-icon-halo 1.1s ease-out .72s both; }.demo-home-screen.is-visible .demo-home-icons > i { animation: app-icon-stagger .5s cubic-bezier(.22,1.1,.36,1) both; }.demo-home-screen.is-visible .demo-home-icons > i:nth-child(1) { animation-delay: .05s; }.demo-home-screen.is-visible .demo-home-icons > i:nth-child(2) { animation-delay: .1s; }.demo-home-screen.is-visible .demo-home-icons > i:nth-child(3) { animation-delay: .15s; }.demo-home-screen.is-visible .demo-home-icons > i:nth-child(4) { animation-delay: .2s; }.demo-home-screen.is-visible .demo-home-icons > i:nth-child(6) { animation-delay: .36s; }.demo-home-screen.is-visible .demo-home-icons > i:nth-child(7) { animation-delay: .41s; }.demo-home-screen.is-visible .demo-home-icons > i:nth-child(8) { animation-delay: .46s; }.demo-home-screen.is-visible .demo-home-icons > i:nth-child(9) { animation-delay: .51s; }.demo-app-icon-card > div:first-child { position: relative; z-index: 1; }.demo-app-icon-card h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
@keyframes app-icon-land { from { opacity: 0; transform: translateY(-18px) scale(.75); } 70% { opacity: 1; transform: translateY(2px) scale(1.04); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes app-icon-stagger { from { opacity: 0; transform: translateY(8px) scale(.8); } to { opacity: .65; transform: translateY(0) scale(1); } } @keyframes app-icon-halo { 0% { opacity: 0; transform: scale(.75); } 45% { opacity: .7; transform: scale(1.12); } 100% { opacity: 0; transform: scale(1.25); } }
@media (max-width: 760px) { .demo-app-icon-card { grid-template-columns: 1fr; gap: 2rem; }.demo-home-screen { width: min(250px, 100%); justify-self: center; } }
@media (prefers-reduced-motion: reduce) { .demo-home-screen.is-visible .demo-home-app { animation: app-icon-fade .45s ease-out both; }.demo-home-screen.is-visible .demo-home-app::after { animation: none; }.demo-home-screen.is-visible .demo-home-icons > i { animation: app-icon-fade .3s ease-out both; } }
@keyframes app-icon-fade { from { opacity: 0; } to { opacity: 1; } }
.reveal { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 1; transform: none; }

.demo-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(4.5rem, 10vw, 8rem) 0 clamp(3.5rem, 8vw, 6rem); background: var(--ardoise); color: var(--craie); }
.demo-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: center; gap: 3rem; }
.demo-hero-copy { max-width: 760px; }
.demo-hero-copy > p:last-child { max-width: 620px; margin-bottom: 0; color: rgba(246,243,231,.8); font-size: 1.1rem; }
.demo-hero-title { max-width: 760px; margin-bottom: 1.4rem; font-size: clamp(2.7rem, 7vw, 5.7rem); }
.demo-hero-title span { display: block; opacity: 0; transform: translateY(22px); transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1); }
.demo-hero-copy.is-visible .demo-hero-title span { opacity: 1; transform: translateY(0); }
.demo-hero-copy.is-visible .demo-hero-title span:nth-child(2) { transition-delay: .1s; }.demo-hero-copy.is-visible .demo-hero-title span:nth-child(3) { transition-delay: .2s; }
.demo-hero-mark { position: relative; display: grid; place-items: center; width: 190px; aspect-ratio: 1; justify-self: center; border: 1px solid rgba(232,163,61,.55); border-radius: 38% 62% 54% 46%; background: rgba(246,243,231,.06); box-shadow: 18px 18px 0 rgba(232,163,61,.12); transform: rotate(8deg); animation: demo-mark-float 7s ease-in-out infinite; }
.demo-hero-mark::before, .demo-hero-mark::after { content: ''; position: absolute; border: 1px solid rgba(199,211,227,.35); border-radius: 50%; }.demo-hero-mark::before { inset: 22px; }.demo-hero-mark::after { inset: 42px; border-color: rgba(168,58,44,.45); }
.demo-hero-mark span { position: relative; z-index: 1; color: var(--or); font: 800 5rem 'Bricolage Grotesque', sans-serif; transform: rotate(-8deg); }.demo-hero-mark i { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--marge); }.demo-hero-mark i:first-of-type { top: 12%; right: 8%; }.demo-hero-mark i:last-of-type { bottom: 14%; left: 10%; background: var(--or); }
.demo-hero-shape { position: absolute; z-index: 0; border: 1px solid rgba(199,211,227,.15); border-radius: 44% 56% 60% 40%; pointer-events: none; }.demo-hero-shape-one { width: 32rem; height: 20rem; right: -10rem; top: -6rem; transform: rotate(-16deg); background: rgba(168,58,44,.12); animation: demo-shape-float 11s ease-in-out infinite; }.demo-hero-shape-two { width: 18rem; height: 18rem; left: -9rem; bottom: -9rem; background: rgba(232,163,61,.1); animation: demo-shape-float 9s ease-in-out 1s infinite reverse; }
.demo-section { padding-top: clamp(3rem, 6vw, 5rem); }.demo-index { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; padding: .6rem .8rem; border: 1px solid rgba(23,39,31,.15); border-radius: 10px; background: rgba(251,248,239,.9); }.demo-index-label { color: var(--marge); font: 600 1rem 'Caveat', cursive; }.demo-index ol { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; }.demo-index a { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .5rem; border-radius: 6px; color: rgba(23,39,31,.62); font-size: .76rem; text-decoration: none; white-space: nowrap; }.demo-index a:hover, .demo-index a.is-active { background: rgba(232,163,61,.2); color: var(--marge); }.demo-index a.is-active { font-weight: 600; }.demo-index a:focus-visible { outline-offset: 2px; }
.demo-phase { scroll-margin-top: 1rem; }.demo-phase.reveal { opacity: 0; transform: translateY(28px); }.demo-phase.reveal.is-visible { opacity: 1; transform: translateY(0); }.demo-phase + .demo-phase { margin-top: clamp(4rem, 9vw, 7rem); }
.demo-final-cta { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: clamp(4rem, 9vw, 7rem); padding: clamp(1.6rem, 4vw, 2.8rem); border-radius: var(--radius); background: var(--ardoise); color: var(--craie); box-shadow: var(--shadow); }.demo-final-cta h2 { margin-bottom: .65rem; color: var(--or); font-size: clamp(1.8rem, 4vw, 3rem); }.demo-final-cta p:last-child { max-width: 600px; margin-bottom: 0; color: rgba(246,243,231,.78); }.demo-cta-button { flex: 0 0 auto; box-shadow: 0 0 0 rgba(232,163,61,0); }.demo-cta-button:hover { box-shadow: 0 12px 28px rgba(232,163,61,.28); }
@keyframes demo-mark-float { 0%, 100% { transform: rotate(8deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-8px); } }.demo-hero-shape-one { animation-name: demo-shape-float; }.demo-hero-shape-two { animation-name: demo-shape-float-reverse; } @keyframes demo-shape-float { 0%, 100% { translate: 0 0; } 50% { translate: 12px 10px; } } @keyframes demo-shape-float-reverse { 0%, 100% { translate: 0 0; } 50% { translate: -10px -8px; } }
@media (max-width: 760px) { .demo-hero-grid { grid-template-columns: 1fr; gap: 2rem; }.demo-hero-mark { width: 130px; justify-self: start; }.demo-hero-mark span { font-size: 3.6rem; }.demo-index { align-items: flex-start; flex-direction: column; }.demo-index ol { width: 100%; flex-wrap: wrap; gap: .25rem .35rem; }.demo-index a { padding-inline: .25rem; font-size: .7rem; }.demo-final-cta { align-items: flex-start; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .demo-hero-mark, .demo-hero-shape-one, .demo-hero-shape-two { animation: none; }.demo-hero-title span, .demo-phase.reveal { opacity: 1; transform: none; transition: opacity .01ms; }.demo-hero-copy.is-visible .demo-hero-title span { transition-delay: 0s; } }
.demo-screen:first-child { opacity: 1; transform: scale(1); }
.demo-mail-mark { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin: 1.4rem auto; border: 2px solid var(--marge); border-radius: 50%; color: var(--marge); font: 700 1.7rem 'Bricolage Grotesque', sans-serif; }.demo-lesson-card { display: grid; gap: .5rem; margin-top: .9rem; padding: .8rem; border-radius: 9px; background: rgba(199,211,227,.32); }.demo-lesson-card b { padding: .45rem .55rem; border-radius: 6px; background: var(--paper); font-size: .68rem; }.demo-time-row, .demo-confidence-row, .demo-correction-row { display: flex; justify-content: space-between; align-items: center; }.demo-time-row b, .demo-confidence-row b, .demo-correction-row b { color: var(--marge); }.demo-correction-row { border-left: 3px solid var(--or); }.demo-correction-row:nth-child(3) { border-left-color: var(--marge); }
.demo-row-arrow { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.demo-choice-pills { display: flex; gap: .45rem; flex-wrap: wrap; margin: 1rem 0; }
.demo-choice-pills span, .demo-inline-action { padding: .4rem .55rem; border: 1px solid var(--quadrillage); border-radius: 99px; background: var(--paper); color: var(--soft-ink); font-size: .62rem; }
.demo-inline-action { margin-top: .6rem; text-align: center; }
.demo-secondary-button { margin-top: .55rem; padding: .55rem .7rem; border: 1px solid var(--marge); border-radius: 8px; color: var(--marge); text-align: center; font-size: .7rem; font-weight: 600; }
.demo-time-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-top: .9rem; }
.demo-time-grid span { position: relative; padding: .55rem .25rem; border: 1px solid var(--quadrillage); border-radius: 8px; background: var(--paper); text-align: center; font-size: .62rem; }
.demo-time-grid span.is-selected { border: 2px solid var(--marge); color: var(--marge); }
.demo-time-grid b { position: absolute; top: .15rem; right: .2rem; font-size: .55rem; }
.demo-confidence-block { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .9rem; }
.demo-confidence-block span { padding: .45rem .55rem; border: 1px solid var(--quadrillage); border-radius: 8px; background: var(--paper); font-size: .62rem; }
.demo-confidence-block span:nth-child(1), .demo-confidence-block span:nth-child(4) { border-color: var(--marge); background: rgba(168,58,44,.08); }
.demo-bottom-nav { position: absolute; right: 1rem; bottom: .55rem; left: 1rem; display: flex; justify-content: space-around; padding-top: .45rem; border-top: 1px solid rgba(23,39,31,.12); color: var(--soft-ink); font-size: .85rem; }
.demo-bottom-nav .is-active { color: var(--marge); font-weight: 700; }
.demo-screen:has(.demo-bottom-nav) { padding-bottom: 2.5rem; }
.demo-auth-screen { padding: 1.55rem .85rem .9rem; background: var(--cahier); color: var(--ink); }
.demo-auth-screen h4 { margin: .55rem 0 .35rem; font-size: 1.14rem; }
.demo-auth-screen > p { margin-bottom: .85rem; font-size: .66rem; line-height: 1.45; }
.demo-auth-icon { width: 1rem; height: 1rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.demo-auth-logo { display: inline-flex; align-items: center; gap: .42rem; color: var(--craie); font: 700 1rem 'Work Sans', sans-serif; letter-spacing: .03em; }
.demo-auth-logo strong { display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: 8px; background: var(--or); color: var(--ardoise); font: 800 1.15rem 'Bricolage Grotesque', sans-serif; }
.demo-auth-splash { display: grid; place-items: center; background: #16241f; color: var(--craie); }
.demo-auth-splash .demo-auth-logo { transform: translateY(-1rem) scale(1.15); }
.demo-auth-loader { position: absolute; right: 0; bottom: 1.5rem; left: 0; display: flex; justify-content: center; gap: .4rem; }
.demo-auth-loader i { display: block; width: .75rem; height: .75rem; border-radius: 50%; background: var(--or); }
.demo-auth-loader i:nth-child(2) { background: #d97757; }.demo-auth-loader i:nth-child(3) { background: var(--craie); }.demo-auth-loader i:nth-child(4) { background: #3fa06e; }
.demo-auth-welcome { display: flex; flex-direction: column; padding: 0; background: var(--cahier); }
.demo-auth-welcome-head { padding: 1.25rem .85rem 1rem; background: linear-gradient(180deg, #1c352d, var(--ardoise)); color: var(--craie); }
.demo-auth-welcome-head .demo-auth-logo { display: flex; justify-content: center; margin-bottom: 1.1rem; }
.demo-auth-welcome-head h4 { color: var(--craie); font-size: 1.25rem; }.demo-auth-welcome-head p { color: rgba(246,243,231,.82); }
.demo-auth-pills { display: flex; gap: .3rem; overflow: hidden; padding: .75rem .65rem; }
.demo-auth-pills span { display: inline-flex; align-items: center; gap: .25rem; min-width: max-content; padding: .35rem .42rem; border: 1px solid var(--quadrillage); border-radius: 99px; background: var(--paper); font-size: .55rem; font-weight: 600; }
.demo-auth-pills i { display: grid; place-items: center; width: 1rem; height: 1rem; border-radius: 50%; background: var(--or); font-style: normal; }
.demo-auth-actions { margin-top: auto; padding: .5rem .85rem; }.demo-auth-legal { padding: .25rem .6rem .75rem; color: rgba(23,39,31,.58); text-align: center; font-size: .48rem; }
.demo-auth-back { display: flex; align-items: center; gap: .25rem; min-height: 1.2rem; color: rgba(23,39,31,.68); font-size: .62rem; }.demo-auth-back .demo-auth-icon { width: .85rem; }
.demo-auth-form { display: grid; gap: .42rem; margin: .75rem 0; }.demo-auth-field { display: flex; align-items: center; gap: .45rem; min-height: 2.35rem; padding: .42rem .48rem; border: 1px solid rgba(23,39,31,.16); border-radius: 7px; background: var(--paper); color: rgba(23,39,31,.68); }
.demo-auth-field > span { display: grid; min-width: 0; }.demo-auth-field b { color: var(--ink); font-size: .59rem; line-height: 1.1; }.demo-auth-field small { overflow: hidden; color: rgba(23,39,31,.46); font-size: .49rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }.demo-auth-field .demo-auth-icon { color: var(--marge); }
.demo-auth-screen > .demo-screen-button, .demo-auth-actions .demo-screen-button { margin-top: .5rem; padding: .55rem .6rem; font-size: .63rem; }.demo-auth-link { display: block; margin-top: .55rem; color: var(--ink); text-align: center; font-size: .56rem; text-decoration: underline; }.demo-auth-link-strong { margin-top: .8rem; color: rgba(23,39,31,.7); text-decoration: none; }.demo-auth-link-strong b, .demo-auth-login-prompt b { color: var(--marge); }
.demo-auth-title-row { display: flex; align-items: center; gap: .5rem; margin-top: .7rem; }.demo-auth-title-row h4 { margin: 0; }.demo-auth-badge, .demo-auth-mail-badge { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 10px; background: rgba(232,163,61,.2); color: var(--marge); }.demo-auth-badge .demo-auth-icon, .demo-auth-mail-badge .demo-auth-icon { width: 1.25rem; height: 1.25rem; }.demo-auth-card { margin-top: .8rem; padding: .65rem; border: 1px solid rgba(23,39,31,.14); border-radius: 10px; background: var(--paper); box-shadow: 0 6px 14px rgba(23,39,31,.08); }.demo-auth-card .demo-auth-field { margin-bottom: .6rem; }.demo-auth-card .demo-secondary-button { margin-top: .55rem; }
.demo-auth-mail-badge { margin: .9rem auto .55rem; width: 3rem; height: 3rem; border-radius: 50%; }.demo-auth-mail-badge + h4, .demo-auth-mail-badge + h4 + p { text-align: center; }.demo-auth-email-card { display: grid; gap: .25rem; margin: .8rem 0; padding: .65rem; border-left: 3px solid var(--or); background: rgba(232,163,61,.12); font-size: .55rem; }.demo-auth-email-card span { color: rgba(23,39,31,.62); }.demo-auth-email-card + .demo-secondary-button { font-size: .6rem; }
.demo-auth-code-preview, .demo-auth-otp { display: flex; justify-content: center; gap: .25rem; margin: .85rem 0; }.demo-auth-code-preview i, .demo-auth-otp i { display: grid; place-items: center; width: 1.55rem; height: 1.8rem; border: 1px solid var(--quadrillage); border-radius: 5px; background: var(--paper); font-style: normal; font-size: .72rem; font-weight: 600; }.demo-auth-otp i { width: 1.7rem; height: 2rem; color: rgba(23,39,31,.4); }.demo-auth-center { margin-top: .2rem; }.demo-auth-resend { margin-top: .8rem; color: rgba(23,39,31,.5); text-align: center; font-size: .53rem; }
.demo-auth-check { display: flex; gap: .3rem; align-items: flex-start; margin: .4rem 0 .25rem; color: rgba(23,39,31,.68); }.demo-auth-check > span { color: var(--marge); font-size: 1rem; line-height: 1; }.demo-auth-check small { font-size: .52rem; line-height: 1.35; }.demo-auth-check u { color: var(--marge); text-decoration-color: var(--marge); }.demo-auth-disabled { opacity: .48; }.demo-auth-login-prompt { margin-top: .55rem; color: rgba(23,39,31,.62); text-align: center; font-size: .56rem; }
.demo-auth-profile-card { display: grid; gap: .38rem; max-height: 14.5rem; overflow: hidden; font-size: .56rem; }.demo-auth-profile-card > strong { margin-top: .12rem; color: rgba(23,39,31,.68); font-size: .58rem; }.demo-auth-two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }.demo-auth-two-fields span, .demo-auth-select { padding: .42rem; border: 1px solid rgba(23,39,31,.16); border-radius: 6px; background: var(--paper); color: rgba(23,39,31,.58); }.demo-auth-select { display: flex; justify-content: space-between; }.demo-auth-select b { color: var(--marge); }.demo-auth-inline { min-height: 1.9rem; margin: 0; }.demo-auth-profile-card .demo-screen-button { margin-top: .25rem; }
@media (max-width: 760px) { .demo-auth-profile-card { max-height: none; }.demo-auth-welcome-head { padding-top: 1rem; } }
.demo-course-screen { padding: 0; background: var(--cahier); color: var(--ink); }
.demo-course-icon { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.demo-course-app-header { display: grid; grid-template-columns: 1fr auto; gap: .2rem .45rem; padding: .8rem .75rem 1rem; color: var(--craie); background: linear-gradient(135deg, #123023, #1a4632); border-radius: 0 0 14px 14px; }.demo-course-brand { font: 700 1rem 'Bricolage Grotesque', sans-serif; }.demo-course-app-header > span { padding: .25rem .35rem; border: 1px solid rgba(232,163,61,.4); border-radius: 99px; color: var(--or); font-size: .43rem; }.demo-course-app-header strong { grid-column: 1 / -1; margin-top: .45rem; font-size: .8rem; }.demo-course-app-header small { grid-column: 1 / -1; color: rgba(246,243,231,.7); font-size: .5rem; }
.demo-course-search { display: flex; align-items: center; gap: .35rem; margin: .7rem .65rem .6rem; padding: .5rem .55rem; border: 1px solid rgba(23,39,31,.14); border-radius: 8px; background: var(--paper); color: rgba(23,39,31,.48); font-size: .49rem; }.demo-course-search .demo-course-icon { color: var(--marge); width: .8rem; }.demo-course-search b { margin-left: auto; font-size: .85rem; font-weight: 400; }
.demo-course-heading { display: flex; align-items: center; gap: .4rem; padding: 0 .7rem; }.demo-course-heading h4 { margin: .2rem 0; font-size: 1rem; }.demo-course-heading em { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; color: var(--marge); background: rgba(232,163,61,.2); font-size: .55rem; font-style: normal; font-weight: 700; }.demo-course-screen > p { padding: 0 .7rem; margin: .1rem 0 .55rem; color: rgba(23,39,31,.62); font-size: .52rem; }
.demo-course-subjects { display: grid; gap: .42rem; padding: 0 .65rem 2rem; }.demo-course-subject, .demo-course-lesson { display: flex; align-items: center; gap: .45rem; padding: .55rem; border: 1px solid #e6e2e0; border-radius: 10px; background: linear-gradient(135deg, #faf8f7, #fff); box-shadow: 0 5px 12px rgba(23,39,31,.07); }.demo-course-subject-icon { display: grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 auto; border-radius: 8px; color: var(--marge); background: rgba(168,58,44,.1); }.demo-course-subject:nth-child(2) .demo-course-subject-icon { color: #557a69; background: rgba(85,122,105,.12); }.demo-course-subject:nth-child(3) .demo-course-subject-icon { color: #3fa06e; background: rgba(63,160,110,.12); }.demo-course-subject:nth-child(4) .demo-course-subject-icon { color: #658b9e; background: rgba(101,139,158,.14); }.demo-course-subject-copy, .demo-course-lesson-copy { display: grid; min-width: 0; flex: 1; }.demo-course-subject-copy b, .demo-course-lesson-copy b { overflow: hidden; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }.demo-course-subject-copy small { display: flex; align-items: center; gap: .25rem; margin-top: .18rem; color: #5e6473; font-size: .45rem; }.demo-course-subject-copy small i { width: .35rem; height: .35rem; border-radius: 50%; background: #8a919b; }.demo-course-chevron { display: grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 5px; color: rgba(23,39,31,.45); background: #f3f5f7; }.demo-course-chevron .demo-course-icon { width: .7rem; }
.demo-course-bottom { position: absolute; right: .65rem; bottom: .35rem; left: .65rem; display: flex; justify-content: space-around; padding-top: .35rem; border-top: 1px solid rgba(23,39,31,.12); color: rgba(23,39,31,.45); font-size: .75rem; }.demo-course-bottom .is-active { color: var(--marge); font-weight: 700; }
.demo-course-back { display: flex; align-items: center; gap: .25rem; padding: .75rem .7rem .35rem; color: rgba(23,39,31,.65); font-size: .57rem; }.demo-course-back .demo-course-icon { width: .8rem; }.demo-course-banner { margin: .35rem .65rem .65rem; padding: .75rem; border: 1px solid #eedad7; border-radius: 11px; background: linear-gradient(135deg, #fff8f5, #fff); box-shadow: 0 6px 14px rgba(168,58,44,.08); }.demo-course-banner small { display: inline-block; padding: .25rem .4rem; border-radius: 99px; color: var(--marge); background: rgba(168,58,44,.08); font-size: .45rem; font-weight: 800; letter-spacing: .03em; }.demo-course-banner h4 { margin: .45rem 0 0; font-size: 1.05rem; }.demo-course-detail-banner p { margin: .35rem 0 0; color: rgba(23,39,31,.62); font-size: .52rem; line-height: 1.45; }.demo-course-lesson-list { display: grid; gap: .45rem; padding: 0 .65rem; }.demo-course-lesson { padding: .55rem; }.demo-course-number { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; flex: 0 0 auto; border-radius: 8px; color: var(--ardoise); background: rgba(168,58,44,.12); font-size: .7rem; font-weight: 800; }.demo-course-lesson-copy small { overflow: hidden; margin-top: .16rem; color: rgba(23,39,31,.55); font-size: .43rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.demo-course-preview { display: grid; place-items: center; gap: .35rem; margin: 0 .65rem .55rem; padding: 1rem .5rem; border: 1px solid #e9d3cf; border-radius: 9px; background: linear-gradient(135deg, #fff5f3, #fff); }.demo-course-preview span { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 9px; color: var(--marge); background: #fff0ed; }.demo-course-preview .demo-course-icon { width: 1.3rem; height: 1.3rem; }.demo-course-preview b { color: rgba(23,39,31,.65); font-size: .55rem; }.demo-course-action { display: flex; align-items: center; gap: .45rem; margin: 0 .65rem; padding: .6rem; border: 1px solid rgba(168,58,44,.18); border-radius: 9px; background: linear-gradient(90deg, rgba(232,163,61,.18), rgba(168,58,44,.08)); font-size: .58rem; }.demo-course-action .demo-course-icon:first-child { color: var(--or); }.demo-course-action .demo-course-icon:last-child { margin-left: auto; color: rgba(23,39,31,.45); width: .75rem; }
.demo-course-pdf { background: #f8f8f5; }.demo-course-pdf-toolbar { display: grid; grid-template-columns: 1.1rem 1.1rem 1fr auto; align-items: center; gap: .25rem; padding: .55rem .5rem; border-bottom: 1px solid rgba(23,39,31,.12); background: var(--paper); color: rgba(23,39,31,.65); }.demo-course-pdf-toolbar > span { display: grid; place-items: center; width: 1rem; height: 1rem; }.demo-course-pdf-toolbar > span:first-child .demo-course-icon { transform: rotate(180deg); }.demo-course-pdf-toolbar label { justify-self: center; padding: .25rem .35rem; border: 1px solid rgba(23,39,31,.14); border-radius: 4px; background: #fff; font-size: .53rem; }.demo-course-pdf-toolbar label small { color: rgba(23,39,31,.5); }.demo-course-pdf-toolbar b { font-size: .52rem; }.demo-course-progress { display: grid; grid-template-columns: 1fr auto; gap: .25rem .35rem; padding: .45rem .55rem; font-size: .45rem; }.demo-course-progress span { display: block; align-self: center; height: .3rem; border-radius: 99px; background: linear-gradient(90deg, var(--or) 8%, #e8e9e5 8%); }.demo-course-progress b { font-size: .45rem; font-weight: 500; }.demo-course-progress small { grid-column: 1 / -1; color: rgba(23,39,31,.5); }.demo-course-paper { margin: .15rem .55rem; padding: .75rem .6rem; min-height: 11rem; border: 1px solid #e0dfd7; background: #fff; box-shadow: 0 5px 12px rgba(23,39,31,.08); }.demo-course-paper-title { padding-bottom: .45rem; border-bottom: 2px solid var(--marge); color: var(--marge); font: 700 .72rem 'Bricolage Grotesque', sans-serif; }.demo-course-lines { display: grid; gap: .45rem; margin-top: .75rem; }.demo-course-lines i { display: block; height: .3rem; border-radius: 2px; background: #d9dde0; }.demo-course-lines i:nth-child(1), .demo-course-lines i:nth-child(3), .demo-course-lines i:nth-child(5) { width: 82%; }.demo-course-lines strong { margin: .25rem 0; color: var(--ink); font-size: .53rem; }
@media (max-width: 760px) { .demo-course-app-header { padding-top: .65rem; }.demo-course-paper { min-height: 12rem; } }
.demo-exercise-screen { padding: .7rem .65rem; background: var(--cahier); color: var(--ink); }
.demo-exercise-icon { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.demo-exercise-subjects { display: grid; gap: .42rem; padding: 0 .65rem 2rem; }.demo-exercise-subject { display: flex; align-items: center; gap: .45rem; padding: .55rem; border: 1px solid #e6e2e0; border-radius: 10px; background: linear-gradient(135deg, #faf8f7, #fff); box-shadow: 0 5px 12px rgba(23,39,31,.07); }.demo-exercise-subject-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px; color: var(--marge); background: rgba(168,58,44,.1); }.demo-exercise-subject:nth-child(2) .demo-exercise-subject-icon { color: var(--or); background: rgba(232,163,61,.16); }.demo-exercise-subject:nth-child(3) .demo-exercise-subject-icon { color: #557a69; background: rgba(85,122,105,.12); }.demo-exercise-subject:nth-child(4) .demo-exercise-subject-icon { color: #3fa06e; background: rgba(63,160,110,.12); }.demo-exercise-subject > span:nth-child(2) { display: grid; min-width: 0; flex: 1; }.demo-exercise-subject b { font-size: .58rem; }.demo-exercise-subject small { display: flex; align-items: center; gap: .25rem; margin-top: .18rem; color: #5e6473; font-size: .45rem; }.demo-exercise-subject small i { width: .35rem; height: .35rem; border-radius: 50%; background: #8a919b; }.demo-exercise-arrow { display: grid; place-items: center; color: rgba(23,39,31,.45); }.demo-exercise-arrow .demo-exercise-icon { width: .7rem; }
.demo-exercise-back { display: flex; align-items: center; gap: .25rem; color: rgba(23,39,31,.65); font-size: .57rem; }.demo-exercise-back .demo-exercise-icon { width: .8rem; }.demo-exercise-subject-label { margin-top: .8rem; color: rgba(23,39,31,.52); font-size: .53rem; letter-spacing: .04em; }.demo-exercise-list { display: grid; gap: .45rem; margin-top: .75rem; }.demo-exercise-card { display: flex; align-items: center; gap: .5rem; padding: .65rem; border-radius: 10px; background: var(--paper); box-shadow: 0 5px 12px rgba(23,39,31,.07); font-size: .62rem; }.demo-exercise-card > .demo-exercise-icon:first-child { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; padding: .35rem; border-radius: 8px; color: var(--marge); background: rgba(232,163,61,.2); }.demo-exercise-card > .demo-exercise-icon:last-child { margin-left: auto; color: rgba(23,39,31,.45); width: .75rem; }
.demo-exercise-screen h4 { margin: .55rem 0 .25rem; font-size: 1rem; }.demo-exercise-screen > p { margin: 0 0 .7rem; color: rgba(23,39,31,.62); font-size: .55rem; line-height: 1.4; }.demo-exercise-name { font-size: .8rem !important; font-weight: 500 !important; }.demo-exercise-time-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin-top: .75rem; }.demo-exercise-time-chip { position: relative; display: grid; place-items: center; gap: .22rem; min-height: 3.1rem; padding: .35rem .15rem; border: 1px solid rgba(23,39,31,.14); border-radius: 8px; background: var(--paper); color: rgba(23,39,31,.72); }.demo-exercise-time-chip.is-selected { border: 2px solid var(--or); color: var(--marge); background: rgba(232,163,61,.12); }.demo-exercise-time-chip .demo-exercise-icon { width: .85rem; color: inherit; }.demo-exercise-time-chip b { font-size: .5rem; }.demo-exercise-time-chip > i { position: absolute; top: .18rem; right: .2rem; color: var(--marge); font-size: .55rem; font-style: normal; }.demo-exercise-custom { display: flex; align-items: center; gap: .4rem; margin-top: .45rem; padding: .55rem; border: 1px solid rgba(23,39,31,.14); border-radius: 8px; background: var(--paper); font-size: .58rem; }.demo-exercise-custom .demo-exercise-icon { color: rgba(23,39,31,.62); }.demo-exercise-screen > .demo-screen-button { margin-top: .75rem; padding: .55rem; font-size: .62rem; }
.demo-exercise-exam-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: .55rem; }.demo-exercise-exam-head b { overflow: hidden; max-width: 65%; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }.demo-exercise-exam-head span { padding: .4rem .5rem; border: 1px solid #e8d39f; border-radius: 8px; color: var(--marge); background: #fff4d6; font-size: .65rem; font-weight: 800; }.demo-exercise-document { display: grid; align-content: center; min-height: 10.8rem; padding: .75rem; border: 1px solid rgba(23,39,31,.14); border-radius: 9px; background: var(--paper); text-align: center; }.demo-exercise-document-title { margin-bottom: .7rem; font: 700 .78rem 'Bricolage Grotesque', sans-serif; }.demo-exercise-lines { display: grid; gap: .42rem; text-align: left; }.demo-exercise-lines i { display: block; height: .3rem; border-radius: 2px; background: #d9dde0; }.demo-exercise-lines i:nth-child(1), .demo-exercise-lines i:nth-child(3) { width: 80%; }.demo-exercise-lines strong { margin: .15rem 0; font-size: .52rem; }.demo-exercise-document small { margin-top: .75rem; color: rgba(23,39,31,.5); font-size: .47rem; }
.demo-exercise-question { margin-top: .55rem; padding: .55rem; border-radius: 8px; background: var(--paper); }.demo-exercise-question b { display: block; font-size: .56rem; }.demo-exercise-question > div { display: flex; gap: .3rem; margin-top: .45rem; }.demo-exercise-question span { display: grid; place-items: center; min-width: 1.65rem; height: 1.45rem; padding: 0 .28rem; border: 1px solid rgba(23,39,31,.14); border-radius: 99px; color: rgba(23,39,31,.65); background: #fff; font-size: .52rem; }.demo-exercise-reflection { margin-top: .65rem; padding: .55rem; border-radius: 8px; background: var(--paper); }.demo-exercise-reflection > span { display: block; height: .28rem; border-radius: 99px; background: #e1e4df; }.demo-exercise-reflection small { display: block; margin-top: .3rem; color: rgba(23,39,31,.58); font-size: .52rem; }.demo-exercise-disabled { opacity: .55; background: #bdc3c5; color: #fff; }
.demo-exercise-correction { padding-top: .55rem; }.demo-exercise-correction h4 { margin-bottom: .55rem; }.demo-exercise-pdf-toolbar { display: grid; grid-template-columns: 1rem 1rem 1fr auto; align-items: center; gap: .25rem; padding: .45rem; border-bottom: 1px solid rgba(23,39,31,.12); background: var(--paper); }.demo-exercise-pdf-toolbar > span { display: grid; place-items: center; }.demo-exercise-pdf-toolbar label { justify-self: center; padding: .2rem .3rem; border: 1px solid rgba(23,39,31,.14); border-radius: 4px; font-size: .48rem; }.demo-exercise-pdf-toolbar label small { color: rgba(23,39,31,.5); }.demo-exercise-pdf-toolbar b { font-size: .48rem; }.demo-exercise-pdf-page { min-height: 12rem; margin: .45rem; padding: .7rem .55rem; border: 1px solid #e0dfd7; background: #fff; box-shadow: 0 4px 10px rgba(23,39,31,.08); }.demo-exercise-pdf-page > strong { display: block; padding-bottom: .4rem; border-bottom: 2px solid var(--marge); color: var(--marge); font-size: .7rem; }.demo-exercise-pdf-page .demo-exercise-lines { margin-top: .7rem; }
@media (max-width: 760px) { .demo-exercise-time-chip { min-height: 2.8rem; }.demo-exercise-document { min-height: 11rem; } }
.demo-profile-screen { padding: .7rem .65rem; background: var(--cahier); color: var(--ink); overflow: hidden; }.demo-profile-screen h4 { margin: 0; font-size: 1rem; }.demo-profile-icon { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }.demo-profile-header { display: flex; align-items: center; gap: .55rem; margin: -.7rem -.65rem .75rem; padding: .8rem .7rem; color: var(--craie); background: linear-gradient(135deg, #123023, #1a4632); border-radius: 0 0 14px 14px; }.demo-profile-avatar { position: relative; display: grid; place-items: center; width: 3rem; height: 3rem; border: 2px solid var(--or); border-radius: 50%; color: var(--ardoise); background: var(--or); font: 700 .8rem 'Bricolage Grotesque', sans-serif; }.demo-profile-avatar span { position: absolute; right: -.25rem; bottom: -.2rem; display: grid; place-items: center; width: 1rem; height: 1rem; border: 2px solid var(--ardoise); border-radius: 50%; color: var(--ardoise); background: var(--or); }.demo-profile-avatar .demo-profile-icon { width: .55rem; }.demo-profile-header h4 { color: var(--craie); font-size: .95rem; }.demo-profile-header small { display: inline-block; margin-top: .2rem; padding: .18rem .35rem; border: 1px solid rgba(232,163,61,.55); border-radius: 99px; color: var(--craie); font-size: .45rem; }.demo-profile-content { padding: 0 .1rem 1.7rem; }.demo-profile-content h5 { margin: .55rem 0 .3rem; color: rgba(23,39,31,.55); font-size: .48rem; letter-spacing: .08em; text-transform: uppercase; }.demo-profile-group { overflow: hidden; border-radius: 9px; background: var(--paper); box-shadow: 0 4px 12px rgba(23,39,31,.07); }.demo-profile-row { display: flex; align-items: center; gap: .4rem; min-height: 2.25rem; padding: .38rem .45rem; border-bottom: 1px solid rgba(23,39,31,.1); }.demo-profile-row:last-child { border-bottom: 0; }.demo-profile-row-icon { display: grid; place-items: center; width: 1.55rem; height: 1.55rem; flex: 0 0 auto; border-radius: 6px; color: var(--marge); background: rgba(168,58,44,.11); }.demo-profile-row:nth-child(2) .demo-profile-row-icon { color: var(--ardoise); background: rgba(23,39,31,.09); }.demo-profile-row:nth-child(3) .demo-profile-row-icon { color: #3fa06e; background: rgba(63,160,110,.12); }.demo-profile-row b { flex: 1; font-size: .53rem; }.demo-profile-row em { display: grid; place-items: center; width: .9rem; height: .9rem; border-radius: 50%; color: var(--ardoise); background: var(--or); font-size: .45rem; font-style: normal; }.demo-profile-chevron { color: rgba(23,39,31,.42); font-size: .8rem; }.demo-profile-logout { display: flex; align-items: center; justify-content: center; gap: .3rem; margin-top: .7rem; padding: .45rem; border: 1px solid rgba(168,58,44,.5); border-radius: 7px; color: var(--marge); font-size: .55rem; }.demo-profile-logout .demo-profile-icon { width: .8rem; }.demo-profile-bottom { position: absolute; right: .65rem; bottom: .25rem; left: .65rem; display: flex; justify-content: space-around; padding-top: .3rem; border-top: 1px solid rgba(23,39,31,.12); color: rgba(23,39,31,.42); font-size: .75rem; }.demo-profile-bottom .is-active { color: var(--marge); }
.demo-profile-back { display: flex; align-items: center; gap: .25rem; margin-bottom: .7rem; color: rgba(23,39,31,.65); font-size: .62rem; }.demo-profile-page-title { display: flex; align-items: center; gap: .45rem; margin-bottom: .8rem; }.demo-profile-page-title > span { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 8px; color: var(--ardoise); background: rgba(232,163,61,.22); }.demo-profile-page-title .demo-profile-icon { width: 1.15rem; }.demo-profile-card { overflow: hidden; border-radius: 9px; background: var(--paper); box-shadow: 0 5px 14px rgba(23,39,31,.08); }.demo-profile-info-row { display: flex; align-items: center; gap: .4rem; min-height: 2.3rem; padding: .4rem .5rem; border-bottom: 1px solid rgba(23,39,31,.1); }.demo-profile-info-row:last-child { border-bottom: 0; }.demo-profile-info-icon { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; color: var(--marge); }.demo-profile-info-icon .demo-profile-icon { width: .85rem; }.demo-profile-info-row b { color: rgba(23,39,31,.6); font-size: .53rem; }.demo-profile-info-row strong { overflow: hidden; margin-left: auto; max-width: 52%; color: var(--ink); font-size: .52rem; text-align: right; text-overflow: ellipsis; white-space: nowrap; }.demo-profile-note { display: flex; align-items: flex-start; gap: .45rem; margin-top: .7rem; padding: .65rem; border: 1px solid rgba(232,163,61,.35); border-radius: 8px; color: rgba(23,39,31,.68); background: rgba(232,163,61,.13); font-size: .53rem; line-height: 1.35; }.demo-profile-note > .demo-profile-icon { flex: 0 0 auto; color: var(--or); }.demo-profile-note > div { display: grid; gap: .25rem; }.demo-profile-note b { color: var(--ink); font-size: .58rem; }.demo-profile-note span { display: block; }.demo-profile-note a { color: var(--marge); font-size: .5rem; }
.demo-profile-dialog { display: grid; place-items: center; gap: .45rem; margin: 1rem .35rem 0; padding: .8rem .5rem; border: 1px solid rgba(23,39,31,.14); border-radius: 9px; background: var(--paper); text-align: center; font-size: .55rem; }.demo-profile-spinner { width: 1.15rem; height: 1.15rem; border: 2px solid rgba(168,58,44,.2); border-top-color: var(--marge); border-radius: 50%; }.demo-profile-updated { gap: .3rem; margin-top: .55rem; }.demo-profile-updated > span { color: #3fa06e; }.demo-profile-updated h5 { margin: 0; font-size: .7rem; }.demo-profile-updated p { margin: 0; color: rgba(23,39,31,.62); font-size: .5rem; line-height: 1.35; }.demo-profile-updated small { color: rgba(23,39,31,.55); font-size: .46rem; }.demo-profile-updated button, .demo-profile-danger { border: 0; border-radius: 6px; padding: .42rem .7rem; color: var(--craie); background: var(--marge); font: 600 .53rem 'Work Sans', sans-serif; }.demo-profile-updated + * { display: none; }
.demo-profile-storage { padding-bottom: 2.4rem; }.demo-profile-storage > h4 { margin: .15rem 0 .75rem; font-size: .85rem; }.demo-profile-toggle { display: flex; align-items: center; justify-content: space-between; padding: .65rem .55rem; border-radius: 8px; background: var(--paper); font-size: .55rem; }.demo-profile-toggle i { position: relative; display: block; width: 1.8rem; height: 1rem; border-radius: 99px; background: var(--quadrillage); }.demo-profile-toggle i::after { content: ''; position: absolute; top: .1rem; left: .1rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--craie); }.demo-profile-storage .demo-profile-card { margin-top: .55rem; }.demo-profile-danger { display: block; width: 100%; margin-top: .75rem; background: var(--marge); }
.demo-profile-security-card { display: grid; gap: .4rem; padding: .7rem; border-radius: 9px; background: var(--paper); box-shadow: 0 5px 14px rgba(23,39,31,.08); }.demo-profile-security-card > b { display: flex; align-items: center; gap: .3rem; font-size: .6rem; }.demo-profile-security-card > b .demo-profile-icon { width: .8rem; color: var(--marge); }.demo-profile-security-card strong { font-size: .58rem; }.demo-profile-security-card button { display: flex; align-items: center; justify-content: center; gap: .3rem; margin-top: .4rem; padding: .48rem; border: 0; border-radius: 6px; color: var(--craie); background: var(--marge); font: 600 .52rem 'Work Sans', sans-serif; }.demo-profile-security-card button .demo-profile-icon { width: .75rem; }.demo-profile-security-row { display: flex; align-items: center; gap: .4rem; margin-top: .55rem; padding: .65rem .55rem; border-radius: 8px; background: var(--paper); font-size: .58rem; }.demo-profile-security-row > .demo-profile-icon { color: var(--marge); }.demo-profile-security-row span { margin-left: auto; color: rgba(23,39,31,.45); font-size: .85rem; }
.demo-support-screen { padding: 0 .65rem .65rem; }.demo-support-appbar { display: flex; align-items: center; gap: .45rem; margin: -.7rem -.65rem .75rem; padding: .65rem; border-bottom: 1px solid rgba(23,39,31,.1); background: var(--paper); }.demo-support-appbar span { font-size: .8rem; }.demo-support-appbar h4 { flex: 1; font-size: .85rem; }.demo-support-appbar b { color: var(--marge); font-size: 1rem; }.demo-support-new { display: flex; align-items: center; justify-content: center; gap: .3rem; width: 100%; padding: .48rem; border: 1px solid var(--marge); border-radius: 6px; color: var(--marge); background: transparent; font: 600 .55rem 'Work Sans', sans-serif; }.demo-support-new .demo-profile-icon { width: .75rem; }.demo-support-faq { display: flex; align-items: center; gap: .35rem; margin-top: .65rem; padding: .65rem .5rem; border-radius: 8px; background: var(--paper); font-size: .56rem; }.demo-support-faq .demo-profile-icon { color: var(--or); }.demo-support-faq span { margin-left: auto; }.demo-support-segment { display: grid; grid-template-columns: repeat(3, 1fr); gap: .2rem; margin-top: .65rem; padding: .2rem; border-radius: 7px; background: rgba(23,39,31,.08); }.demo-support-segment b { padding: .4rem .1rem; border-radius: 5px; color: rgba(23,39,31,.55); text-align: center; font-size: .48rem; }.demo-support-segment b:first-child { color: var(--ink); background: var(--paper); }.demo-support-empty { display: grid; place-items: center; gap: .45rem; margin-top: 1.2rem; color: rgba(23,39,31,.62); text-align: center; }.demo-support-empty .demo-profile-icon { width: 2rem; height: 2rem; color: var(--or); }.demo-support-empty b { font-size: .58rem; }.demo-support-empty button { border: 0; border-radius: 6px; padding: .45rem .6rem; color: var(--ardoise); background: var(--or); font: 600 .52rem 'Work Sans', sans-serif; }
.demo-new-request { padding: .65rem; }.demo-new-request h3 { margin: .8rem 0 .25rem; font-size: 1rem; }.demo-new-request > p { margin: 0 0 .7rem; color: rgba(23,39,31,.62); font-size: .55rem; line-height: 1.4; }.demo-support-categories { display: flex; flex-wrap: wrap; gap: .25rem; }.demo-support-categories span { padding: .38rem .45rem; border: 1px solid rgba(23,39,31,.16); border-radius: 99px; background: var(--paper); color: rgba(23,39,31,.62); font-size: .46rem; }.demo-support-categories span.is-selected { border-color: var(--marge); color: var(--marge); background: rgba(168,58,44,.08); }.demo-support-input { display: grid; gap: .3rem; margin-top: .65rem; padding: .55rem; border: 1px solid rgba(23,39,31,.2); border-radius: 6px; background: var(--paper); }.demo-support-input b { font-size: .5rem; }.demo-support-input small { color: rgba(23,39,31,.42); font-size: .48rem; }.demo-support-textarea { min-height: 3.3rem; }.demo-support-photos { display: flex; align-items: center; gap: .35rem; margin-top: .55rem; font-size: .52rem; }.demo-support-photos span { margin-left: auto; color: rgba(23,39,31,.55); }.demo-support-photos i { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 6px; color: var(--marge); background: rgba(168,58,44,.1); font-style: normal; }.demo-support-photos .demo-profile-icon { width: .85rem; }.demo-support-send { display: flex; align-items: center; justify-content: center; gap: .3rem; width: 100%; margin-top: .7rem; padding: .55rem; border: 0; border-radius: 6px; color: var(--craie); background: var(--marge); font: 700 .57rem 'Work Sans', sans-serif; }.demo-support-send .demo-profile-icon { width: .8rem; }
@media (max-width: 760px) { .demo-profile-header { margin-top: -.7rem; }.demo-profile-content { padding-bottom: 2rem; }.demo-profile-info-row strong { max-width: 48%; } }

/* Page 404 : feuilles de cours en mouvement */
.error-header .nav { min-height: 68px; }.error-header-link { color: var(--craie); font-size: .9rem; text-decoration: none; opacity: .8; }.error-header-link:hover { color: var(--or); opacity: 1; }
.error-hero { min-height: calc(100svh - 122px); display: grid; place-items: center; overflow: hidden; background: var(--ardoise); color: var(--craie); }
.error-layout { display: grid; grid-template-columns: 1fr; gap: .5rem; align-items: center; width: min(760px, 100%); padding: clamp(2rem, 4vw, 3rem) 0; text-align: center; }
.error-copy { max-width: 720px; margin: 0 auto; }.error-copy h1 { max-width: 720px; margin-right: auto; margin-left: auto; font-size: clamp(2.8rem, 6vw, 5.2rem); }.error-copy > p { max-width: 560px; margin-right: auto; margin-left: auto; color: rgba(246,243,231,.8); font-size: 1.1rem; }
.error-copy .actions { justify-content: center; }
.error-scene { position: relative; min-height: clamp(220px, 28vh, 300px); display: grid; place-items: center; isolation: isolate; order: -1; }.error-number { display: flex; position: relative; z-index: 2; color: var(--or); font: 800 clamp(8rem, 19vw, 15rem)/.75 'Bricolage Grotesque', sans-serif; letter-spacing: 0; text-shadow: 9px 12px 0 rgba(246,243,231,.08); transform: rotate(-4deg); }.error-number span:nth-child(2) { color: var(--craie); transform: translateY(-.08em); }
.error-sheet { position: absolute; z-index: 1; width: clamp(92px, 13vw, 145px); aspect-ratio: .76; display: grid; align-content: center; gap: .55rem; padding: 1rem; border: 1px solid var(--quadrillage); border-radius: 5px; background: var(--paper); box-shadow: 10px 12px 0 rgba(232,163,61,.18), 0 20px 35px rgba(0,0,0,.16); }.error-sheet i { display: block; height: 5px; border-radius: 2px; background: var(--quadrillage); }.error-sheet i:nth-child(2) { width: 76%; background: var(--marge); }.error-sheet i:nth-child(3) { width: 88%; }.error-sheet-one { top: 12%; left: 8%; transform: rotate(-16deg); animation: error-sheet-one 6s ease-in-out infinite; }.error-sheet-two { right: 4%; bottom: 14%; transform: rotate(12deg); animation: error-sheet-two 7s ease-in-out infinite; }.error-sheet-three { top: 7%; right: 14%; transform: rotate(28deg) scale(.72); opacity: .72; animation: error-sheet-three 8s ease-in-out infinite; }
.error-note { position: absolute; right: 10%; bottom: 9%; z-index: 3; display: flex; align-items: center; gap: .5rem; padding: .65rem .8rem; border: 1px solid var(--or); border-radius: 8px; background: var(--craie); color: var(--ardoise); box-shadow: var(--shadow); font: 600 1rem 'Caveat', cursive; transform: rotate(3deg); }.error-note .icon { width: 1.35rem; height: 1.35rem; color: var(--marge); animation: error-compass 5s ease-in-out infinite; }
@keyframes error-sheet-one { 0%, 100% { transform: rotate(-16deg) translate(0, 0); } 50% { transform: rotate(-10deg) translate(8px, -14px); } } @keyframes error-sheet-two { 0%, 100% { transform: rotate(12deg) translate(0, 0); } 50% { transform: rotate(7deg) translate(-10px, -12px); } } @keyframes error-sheet-three { 0%, 100% { transform: rotate(28deg) scale(.72) translate(0, 0); } 50% { transform: rotate(34deg) scale(.72) translate(8px, -10px); } } @keyframes error-compass { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(12deg); } }
.error-footer { display: grid; min-height: 54px; place-items: center; padding: 1rem; background: var(--ardoise); color: var(--craie); border-top: 1px solid rgba(246,243,231,.12); font-size: .8rem; text-align: center; opacity: .8; }.error-footer > span { display: block; }
@media (max-width: 760px) { .error-layout { gap: 1rem; padding: 2.5rem 0 3rem; }.error-scene { min-height: 260px; }.error-number { font-size: clamp(7rem, 30vw, 10rem); }.error-sheet { width: 86px; }.error-sheet-one { left: 5%; }.error-sheet-two { right: 0; }.error-note { right: 4%; bottom: 2%; } }
@media (prefers-reduced-motion: reduce) { .error-sheet, .error-note .icon { animation: none !important; }.error-number { transform: none; } }

.contact-page .site-header.is-hidden { transform: translateY(0); }
.contact-hero { overflow: hidden; }
.contact-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 7vw, 6rem); align-items: center; }
.contact-hero-grid > .reveal { min-width: 0; }
.contact-hero-art { position: relative; min-height: 290px; display: grid; place-items: center; isolation: isolate; animation: contact-art-in .8s cubic-bezier(.22,1,.36,1) both; }
.contact-art-orbit { position: absolute; width: 15rem; height: 15rem; border: 1px solid rgba(232,163,61,.45); border-radius: 50%; transform: rotate(-18deg) skewX(-12deg); }
.contact-art-orbit::before, .contact-art-orbit::after { content: ''; position: absolute; width: .7rem; height: .7rem; border-radius: 50%; background: var(--or); box-shadow: 0 0 0 .35rem rgba(232,163,61,.18); }
.contact-art-orbit::before { top: 1.5rem; right: 1.8rem; }.contact-art-orbit::after { bottom: 2rem; left: 1rem; background: var(--marge); box-shadow: 0 0 0 .35rem rgba(168,58,44,.16); }
.contact-art-envelope { position: relative; z-index: 2; width: min(250px, 72%); aspect-ratio: 1.55; border: 2px solid var(--or); border-radius: 12px; background: var(--paper); box-shadow: var(--shadow), 16px 18px 0 rgba(232,163,61,.2); transform: rotate(-7deg); animation: contact-art-float 6s ease-in-out infinite; }
.contact-art-envelope::before, .contact-art-envelope::after { content: ''; position: absolute; top: 20%; width: 64%; height: 2px; background: var(--marge); }
.contact-art-envelope::before { left: -8%; transform: rotate(32deg); }.contact-art-envelope::after { right: -8%; transform: rotate(-32deg); }
.contact-art-envelope i, .contact-art-envelope b { position: absolute; bottom: 18%; width: 42%; height: 2px; background: var(--quadrillage); }.contact-art-envelope i { left: 10%; }.contact-art-envelope b { right: 10%; width: 28%; background: var(--or); }
.contact-art-bubble { position: absolute; z-index: 3; top: 8%; right: 8%; display: flex; gap: .25rem; align-items: center; padding: .7rem .8rem; border: 1px solid var(--marge); border-radius: 18px 18px 4px 18px; background: var(--craie); box-shadow: var(--shadow); animation: contact-bubble-float 5s ease-in-out .4s infinite; }
.contact-art-bubble span { width: .35rem; height: .35rem; border-radius: 50%; background: var(--marge); }.contact-art-bubble span:nth-child(2) { background: var(--or); }.contact-art-bubble span:nth-child(3) { background: var(--marge); }
.contact-art-note { position: absolute; z-index: 4; bottom: 8%; left: 7%; padding: .5rem .75rem; border: 1px solid var(--or); background: var(--craie); color: var(--ardoise); box-shadow: var(--shadow); font: 600 1.1rem 'Caveat', cursive; transform: rotate(4deg); }
.contact-section { background: var(--cahier); background-image: repeating-linear-gradient(0deg, transparent 0, transparent 31px, rgba(199,211,227,.28) 32px); }
.contact-panel { transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s; }.contact-panel:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(23,39,31,.18), 0 8px 0 rgba(168,58,44,.14); }
.contact-item-icon { display: grid; place-items: center; width: 2.45rem; height: 2.45rem; flex: 0 0 auto; border: 1px solid rgba(168,58,44,.28); border-radius: 9px; color: var(--marge); background: rgba(168,58,44,.07); transition: transform .3s cubic-bezier(.22,1,.36,1), background .3s; }.contact-item:hover .contact-item-icon { transform: translateY(-4px) rotate(-5deg); background: rgba(232,163,61,.2); }.contact-item-icon .icon { width: 1.35rem; height: 1.35rem; }
.contact-field { position: relative; display: flex; align-items: center; }.contact-field input, .contact-field textarea { border: 1px solid rgba(23,39,31,.25); padding: 1.25rem .85rem .55rem; transition: border-color .25s, box-shadow .25s, background .25s; }.contact-field textarea { min-height: 160px; padding-top: 1.35rem; }.contact-field label { position: absolute; z-index: 1; top: .9rem; left: .85rem; display: block; color: rgba(23,39,31,.58); font-size: .92rem; pointer-events: none; transform-origin: left top; transition: color .2s, transform .2s, top .2s; }.contact-field input:focus, .contact-field textarea:focus { border-color: var(--or); box-shadow: 0 0 0 3px rgba(232,163,61,.18); }.contact-field input:focus + label, .contact-field textarea:focus + label, .contact-field input:not(:placeholder-shown) + label, .contact-field textarea:not(:placeholder-shown) + label { top: .42rem; color: var(--marge); font-size: .68rem; transform: scale(.96); }.contact-field.is-valid input, .contact-field.is-valid textarea { border-color: var(--marge); background: rgba(168,58,44,.035); }.contact-field.is-invalid input, .contact-field.is-invalid textarea { border-color: var(--marge); box-shadow: 0 0 0 3px rgba(168,58,44,.1); }.character-count { position: absolute; right: .7rem; bottom: .55rem; color: rgba(23,39,31,.58); font-size: .72rem; transition: color .25s, transform .25s; }.character-count.is-near-limit { color: var(--marge); transform: translateY(-2px); }
.contact-submit { min-width: 205px; }.contact-submit i { font-style: normal; transition: transform .3s cubic-bezier(.22,1,.36,1); }.contact-submit:hover i { transform: translateX(5px); }.contact-form-note { margin-top: 1.2rem; padding: .8rem 1rem; border-left: 3px solid var(--or); background: rgba(232,163,61,.1); color: rgba(23,39,31,.72); font-size: .84rem; }.status-message { display: flex; align-items: center; gap: .45rem; }.status-message.is-success { color: var(--marge); animation: contact-success .55s cubic-bezier(.22,1,.36,1) both; }.status-message.is-success::before { content: '✓'; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--or); color: var(--ardoise); font-weight: 700; }
@keyframes contact-art-in { from { opacity: 0; transform: translateY(22px) rotate(2deg); } to { opacity: 1; transform: translateY(0) rotate(0); } } @keyframes contact-art-float { 0%, 100% { transform: rotate(-7deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-10px); } } @keyframes contact-bubble-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes contact-success { 0% { opacity: 0; transform: translateY(7px) scale(.92); } 70% { transform: translateY(-2px) scale(1.02); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 760px) { .contact-hero-grid { grid-template-columns: 1fr; gap: 1rem; }.contact-hero-art { min-height: 230px; }.contact-art-orbit { width: 12rem; height: 12rem; }.contact-art-note { bottom: 3%; }.contact-layout { gap: 1.5rem; }.contact-panel { padding: 1.25rem; }.contact-submit { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .contact-hero-art, .contact-art-envelope, .contact-art-bubble { animation: none; }.contact-hero-art { opacity: 1; transform: none; }.contact-panel, .contact-item-icon, .contact-submit i { transition: none; } }
.features-hero { position: relative; overflow: hidden; }.features-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 7vw, 6rem); align-items: center; }.features-hero-copy { min-width: 0; }.features-hero-art { position: relative; min-height: 290px; display: grid; place-items: center; isolation: isolate; animation: features-art-in .8s cubic-bezier(.22,1,.36,1) both; }.features-art-ring { position: absolute; width: 16rem; height: 16rem; border: 1px solid rgba(232,163,61,.5); border-radius: 50%; transform: rotate(24deg) skewX(-12deg); }.features-art-ring::before, .features-art-ring::after { content: ''; position: absolute; width: .7rem; height: .7rem; border-radius: 50%; background: var(--or); box-shadow: 0 0 0 .35rem rgba(232,163,61,.18); }.features-art-ring::before { top: 1.3rem; left: 2rem; }.features-art-ring::after { right: 1rem; bottom: 2.2rem; background: var(--marge); box-shadow: 0 0 0 .35rem rgba(168,58,44,.16); }.features-art-sheet { position: relative; z-index: 2; display: grid; align-content: center; gap: .7rem; width: min(225px, 68%); aspect-ratio: .78; padding: 2rem 1.35rem; border: 2px solid var(--quadrillage); border-radius: 8px; background: linear-gradient(145deg, var(--paper), var(--craie)); box-shadow: var(--shadow), 18px 20px 0 rgba(168,58,44,.12); transform: rotate(-7deg); animation: features-art-float 6s ease-in-out infinite; }.features-art-sheet::before { content: ''; position: absolute; top: 0; right: 1.2rem; width: 2.2rem; height: 2.2rem; border-right: 2px solid var(--quadrillage); border-bottom: 2px solid var(--quadrillage); background: var(--cahier); transform: skewY(45deg); transform-origin: top right; }.features-art-sheet span { display: block; width: 3.3rem; height: 3.3rem; border-radius: 10px; background: var(--or); box-shadow: 7px 8px 0 rgba(232,163,61,.2); }.features-art-sheet b, .features-art-sheet i { display: block; height: .45rem; border-radius: 4px; background: var(--marge); }.features-art-sheet b { width: 74%; }.features-art-sheet i { width: 92%; background: var(--quadrillage); }.features-art-sheet i:last-child { width: 58%; background: var(--or); }.features-art-tab { position: absolute; z-index: 3; top: 9%; right: 4%; padding: .55rem .8rem; border: 1px solid var(--marge); border-radius: 8px 8px 3px 8px; background: var(--craie); color: var(--ardoise); box-shadow: var(--shadow); font: 600 1rem 'Caveat', cursive; transform: rotate(8deg); animation: features-tab-float 5s ease-in-out .3s infinite; }.features-art-mark { position: absolute; z-index: 3; bottom: 10%; left: 5%; display: grid; place-items: center; width: 3rem; height: 3rem; border: 2px solid var(--or); border-radius: 50%; background: var(--ardoise); color: var(--or); font: 800 1.4rem 'Bricolage Grotesque', sans-serif; box-shadow: 8px 8px 0 rgba(232,163,61,.18); }.features-page .notebook .card { transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s, background .3s; }.features-page .notebook .card:hover { transform: translateY(-9px) rotate(0); }.features-page .notebook .card-icon { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border: 1px solid rgba(168,58,44,.24); border-radius: 10px; background: rgba(168,58,44,.07); transition: transform .35s cubic-bezier(.22,1,.36,1), background .35s; }.features-page .notebook .card-icon .icon { transition: transform .35s cubic-bezier(.22,1,.36,1), stroke-width .35s; }.features-page .notebook .card:hover .card-icon { transform: translateY(-4px) rotate(-4deg); background: rgba(232,163,61,.2); }.features-page .notebook .card:hover .card-icon .icon { transform: rotate(8deg) scale(1.1); stroke-width: 2.2; }.features-page .notebook .reveal-stagger.is-visible > .card { animation: features-card-in .65s cubic-bezier(.22,1,.36,1) both; }.features-page .notebook .reveal-stagger.is-visible > .card:nth-child(2) { animation-delay: .08s; }.features-page .notebook .reveal-stagger.is-visible > .card:nth-child(3) { animation-delay: .16s; }.features-page .notebook .reveal-stagger.is-visible > .card:nth-child(4) { animation-delay: .24s; }.features-page .notebook .reveal-stagger.is-visible > .card:nth-child(5) { animation-delay: .32s; }.features-page .notebook .reveal-stagger.is-visible > .card:nth-child(6) { animation-delay: .4s; }.features-comparison { background: var(--paper); }.features-comparison-cards .card { border-top: 4px solid var(--quadrillage); transition: transform .5s cubic-bezier(.22,1,.36,1), border-color .35s, box-shadow .35s; }.features-comparison-cards .card:last-child { border-top-color: var(--or); }.features-comparison-cards .card:hover { transform: translateY(-8px); }.features-comparison-cards .card:last-child:hover { box-shadow: 0 26px 60px rgba(23,39,31,.18), 0 8px 0 rgba(232,163,61,.18); }.features-page .band .button { box-shadow: 0 0 0 0 rgba(232,163,61,.35); animation: features-cta-pulse 3.2s ease-in-out infinite; }.features-page .band .button:hover { animation-play-state: paused; }
@keyframes features-art-in { from { opacity: 0; transform: translateY(24px) rotate(3deg); } to { opacity: 1; transform: translateY(0) rotate(0); } } @keyframes features-art-float { 0%, 100% { transform: rotate(-7deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-10px); } } @keyframes features-tab-float { 0%, 100% { transform: rotate(8deg) translateY(0); } 50% { transform: rotate(5deg) translateY(-7px); } } @keyframes features-card-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @keyframes features-cta-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,163,61,.28); } 50% { box-shadow: 0 0 0 9px rgba(232,163,61,0); } }
@media (max-width: 760px) { .features-hero-grid { grid-template-columns: 1fr; gap: 1rem; }.features-hero-art { min-height: 230px; }.features-art-ring { width: 12rem; height: 12rem; }.features-art-tab { right: 7%; }.features-art-mark { left: 8%; }.features-comparison-cards { gap: 1rem; } }
@media (prefers-reduced-motion: reduce) { .features-hero-art, .features-art-sheet, .features-art-tab, .features-page .band .button { animation: none; }.features-hero-art { opacity: 1; transform: none; }.features-page .notebook .reveal-stagger.is-visible > .card { animation: features-card-in .01ms both; }.features-page .notebook .card, .features-comparison-cards .card, .features-page .notebook .card-icon, .features-page .notebook .card-icon .icon { transition: none; } }

/* Téléchargement : parcours mobile, relief de carte et installation guidée. */
.download-hero { overflow: hidden; }
.download-hero-grid { display: grid; grid-template-columns: 1fr .9fr; gap: clamp(2rem, 7vw, 6rem); align-items: center; }
.download-hero-copy { min-width: 0; }
.download-hero-art { position: relative; min-height: 350px; display: grid; place-items: center; isolation: isolate; animation: download-art-in .8s cubic-bezier(.22,1,.36,1) .12s both; }
.download-art-orbit { position: absolute; width: 18rem; height: 18rem; border: 1px solid rgba(232,163,61,.45); border-radius: 50%; transform: rotate(-18deg) skewX(-12deg); }
.download-art-orbit::before, .download-art-orbit::after { content: ''; position: absolute; width: .65rem; height: .65rem; border-radius: 50%; background: var(--or); box-shadow: 0 0 0 .35rem rgba(232,163,61,.16); }
.download-art-orbit::before { top: 1.5rem; right: 2rem; }.download-art-orbit::after { bottom: 2rem; left: 1.2rem; background: var(--marge); box-shadow: 0 0 0 .35rem rgba(168,58,44,.14); }
.download-phone { position: relative; z-index: 2; width: min(220px, 66%); aspect-ratio: 9 / 18; padding: 9px; border: 4px solid var(--craie); border-radius: 30px; background: var(--ardoise); box-shadow: 15px 20px 0 rgba(232,163,61,.2), 0 28px 60px rgba(0,0,0,.24); transform: rotate(5deg); animation: download-phone-float 6s ease-in-out infinite; }
.download-phone-speaker { position: absolute; z-index: 2; top: 7px; left: 50%; width: 58px; height: 11px; transform: translateX(-50%); border-radius: 0 0 10px 10px; background: var(--ardoise); }
.download-phone-screen { display: grid; align-content: start; justify-items: center; height: 100%; overflow: hidden; padding: 1.25rem .8rem; border-radius: 21px; background: var(--cahier); color: var(--ink); text-align: center; }
.download-phone-status { align-self: start; color: var(--marge); font-size: .62rem; font-weight: 600; }.download-phone-logo { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; margin: 2.2rem 0 1.1rem; border-radius: 11px; color: var(--ardoise); background: var(--or); font: 800 2rem 'Bricolage Grotesque', sans-serif; box-shadow: 0 8px 18px rgba(232,163,61,.28); }.download-phone-screen strong { font: 700 1rem/1.1 'Bricolage Grotesque', sans-serif; }.download-phone-screen small { color: rgba(23,39,31,.6); font-size: .62rem; }.download-progress { width: 80%; height: .45rem; margin: 1rem 0 .4rem; overflow: hidden; border-radius: 99px; background: rgba(199,211,227,.7); }.download-progress i { display: block; width: 58%; height: 100%; border-radius: inherit; background: var(--marge); animation: download-progress 2.8s ease-in-out infinite; }.download-arrow { width: 1.7rem; height: 1.7rem; margin-top: 1.1rem; fill: none; stroke: var(--marge); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; animation: download-arrow 2.2s ease-in-out infinite; }
.download-art-chip { position: absolute; z-index: 3; padding: .5rem .65rem; border: 1px solid var(--or); border-radius: 8px; background: var(--craie); color: var(--ardoise); box-shadow: var(--shadow); font-size: .72rem; font-weight: 600; }.download-art-chip-one { top: 16%; left: 0; transform: rotate(-5deg); }.download-art-chip-two { right: 0; bottom: 16%; transform: rotate(4deg); }
.download-card-premium { position: relative; isolation: isolate; overflow: hidden; transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s; }.download-card-premium::before { content: ''; position: absolute; z-index: -1; width: 18rem; height: 18rem; top: var(--spot-y, 0); left: var(--spot-x, 50%); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(232,163,61,.25), transparent 65%); opacity: 0; transition: opacity .3s; pointer-events: none; }.download-card-premium:hover { transform: translateY(-8px); box-shadow: 0 28px 60px rgba(23,39,31,.24), 0 8px 0 rgba(168,58,44,.16); }.download-card-premium:hover::before { opacity: 1; }.download-card-head { display: flex; align-items: center; gap: .75rem; }.download-card-head .eyebrow { margin: 0; }.android-mark { position: relative; display: block; width: 2rem; height: 1.5rem; border-radius: 9px 9px 4px 4px; background: var(--or); }.android-mark::before { content: ''; position: absolute; top: -.3rem; left: .28rem; width: 1.45rem; height: .65rem; border-radius: 10px 10px 0 0; border-top: 2px solid var(--or); }.android-mark::after { content: ''; position: absolute; bottom: -.35rem; left: .2rem; width: .3rem; height: .55rem; border-radius: 0 0 4px 4px; background: var(--or); box-shadow: 1.3rem 0 var(--or); }.android-mark i, .android-mark b { position: absolute; z-index: 1; top: .45rem; width: .2rem; height: .2rem; border-radius: 50%; background: var(--ardoise); }.android-mark i { left: .52rem; }.android-mark b { right: .52rem; }.download-button-icon { width: 1.25rem; height: 1.25rem; animation: download-button-bounce 1.8s ease-in-out infinite; }.download-card { justify-content: space-between; }
.download-steps { position: relative; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }.download-steps::before { content: ''; position: absolute; top: 3.2rem; right: 16%; left: 16%; height: 2px; background: linear-gradient(90deg, var(--marge) var(--progress, 0%), rgba(168,58,44,.18) var(--progress, 0%)); transition: background .2s linear; }.download-step { z-index: 1; padding-top: 1.8rem; }.download-step .card-icon { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; margin-bottom: 1.2rem; border: 2px solid var(--marge); border-radius: 50%; background: var(--paper); }.download-step h3 { font-size: 1.25rem; }
.download-faq { display: grid; gap: .8rem; max-width: 820px; }.download-faq-item { border: 1px solid rgba(23,39,31,.15); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s; }.download-faq-item:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(23,39,31,.16); }.download-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; cursor: pointer; list-style: none; font: 700 1.25rem 'Bricolage Grotesque', sans-serif; }.download-faq-item summary::-webkit-details-marker { display: none; }.download-faq-item summary span { color: var(--marge); font: 500 1.8rem 'Work Sans', sans-serif; transition: transform .3s; }.download-faq-item[open] summary span { transform: rotate(45deg); }.download-faq-item p { margin: 0; padding: 0 1.5rem 1.35rem; color: rgba(23,39,31,.72); }
@keyframes download-art-in { from { opacity: 0; transform: translateY(24px) rotate(2deg); } to { opacity: 1; transform: translateY(0) rotate(0); } } @keyframes download-phone-float { 0%, 100% { transform: rotate(5deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-9px); } } @keyframes download-progress { 0%, 100% { transform: translateX(-20%); } 50% { transform: translateX(55%); } } @keyframes download-arrow { 0%, 100% { transform: translateY(0); opacity: .65; } 50% { transform: translateY(5px); opacity: 1; } } @keyframes download-button-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (max-width: 760px) { .download-hero-grid { grid-template-columns: 1fr; gap: .5rem; }.download-hero-art { min-height: 300px; }.download-art-chip-one { left: 2%; }.download-art-chip-two { right: 2%; }.download-phone { width: min(195px, 58%); }.download-steps { grid-template-columns: 1fr; gap: 1rem; }.download-steps::before { top: 1.2rem; bottom: 1.2rem; left: 1.4rem; width: 2px; height: auto; background: linear-gradient(180deg, var(--marge) var(--progress, 0%), rgba(168,58,44,.18) var(--progress, 0%)); }.download-step { padding: 1.3rem 1.3rem 1.4rem 4.8rem; }.download-step .card-icon { position: absolute; top: 1.25rem; left: 1.25rem; }.download-card-premium { margin-top: .5rem; } }
.download-page .reveal:not(.is-visible) { opacity: 0; transform: translateY(22px); }
.download-page .reveal-stagger:not(.is-visible) > * { opacity: 0; transform: translateY(18px); }
@media (prefers-reduced-motion: reduce) { .download-page .reveal:not(.is-visible), .download-page .reveal-stagger:not(.is-visible) > * { opacity: 1; transform: none; }.download-hero-art, .download-phone, .download-progress i, .download-arrow, .download-button-icon { animation: none !important; }.download-hero-art { opacity: 1; transform: none; }.download-phone { transform: rotate(5deg); }.download-card-premium, .download-faq-item { transition: none; } }

/* À propos : repères visuels et citation en mouvement. */
.about-page .site-header.is-hidden { transform: translateY(0); }
.about-hero { overflow: hidden; }
.about-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 7vw, 6rem); align-items: center; }
.about-hero-grid > .reveal { min-width: 0; }
.about-hero-art { position: relative; min-height: 300px; display: grid; place-items: center; isolation: isolate; animation: about-art-in .8s cubic-bezier(.22,1,.36,1) both; }
.about-art-orbit { position: absolute; width: 16rem; height: 16rem; border: 1px solid rgba(232,163,61,.45); border-radius: 50%; transform: rotate(-20deg) skewX(-12deg); }
.about-art-orbit::before { content: ''; position: absolute; top: 1.2rem; right: 1.6rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--or); box-shadow: 0 0 0 .35rem rgba(232,163,61,.18); }
.about-art-sheet { position: relative; z-index: 2; width: min(220px, 68%); aspect-ratio: .76; display: grid; align-content: center; gap: .8rem; padding: 2rem; border: 1px solid var(--quadrillage); border-radius: 7px; background: var(--paper); box-shadow: var(--shadow), 15px 18px 0 rgba(232,163,61,.18); transform: rotate(5deg); animation: about-art-float 6s ease-in-out infinite; }
.about-art-sheet i, .about-art-sheet b { display: block; height: 5px; border-radius: 2px; background: var(--quadrillage); }.about-art-sheet i:nth-child(2) { width: 72%; background: var(--marge); }.about-art-sheet i:nth-child(3) { width: 88%; }.about-art-sheet b { width: 48%; background: var(--or); }
.about-art-spark { position: absolute; z-index: 3; width: .8rem; height: .8rem; border: 2px solid var(--or); transform: rotate(45deg); animation: about-spark 4.5s ease-in-out infinite; }.about-art-spark-one { top: 15%; left: 13%; }.about-art-spark-two { right: 12%; bottom: 16%; border-color: var(--marge); animation-delay: .6s; }
.quote-reveal .manifesto { max-width: 25rem; }.quote-reveal .manifesto > span { display: inline-block; opacity: 0; transform: translateY(.45em); transition: opacity .45s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1); }.quote-reveal.is-visible .manifesto > span { opacity: 1; transform: translateY(0); }.quote-reveal.is-visible .manifesto > span:nth-child(2) { transition-delay: .04s; }.quote-reveal.is-visible .manifesto > span:nth-child(3) { transition-delay: .08s; }.quote-reveal.is-visible .manifesto > span:nth-child(4) { transition-delay: .12s; }.quote-reveal.is-visible .manifesto > span:nth-child(5) { transition-delay: .16s; }.quote-reveal.is-visible .manifesto > span:nth-child(6) { transition-delay: .2s; }.quote-reveal.is-visible .manifesto > span:nth-child(7) { transition-delay: .24s; }.quote-reveal.is-visible .manifesto > span:nth-child(8) { transition-delay: .28s; }.quote-reveal.is-visible .manifesto > span:nth-child(9) { transition-delay: .32s; }.quote-reveal.is-visible .manifesto > span:nth-child(10) { transition-delay: .36s; }.quote-reveal.is-visible .manifesto > span:nth-child(11) { transition-delay: .4s; }.quote-reveal.is-visible .manifesto > span:nth-child(12) { transition-delay: .44s; }.quote-reveal.is-visible .manifesto > span:nth-child(13) { transition-delay: .48s; }.quote-reveal.is-visible .manifesto > span:nth-child(14) { transition-delay: .52s; }.quote-reveal.is-visible .manifesto > span:nth-child(15) { transition-delay: .56s; }.quote-reveal.is-visible .manifesto > span:nth-child(16) { transition-delay: .6s; }.quote-reveal.is-visible .manifesto > span:nth-child(17) { transition-delay: .64s; }.quote-reveal.is-visible .manifesto > span:nth-child(18) { transition-delay: .68s; }.quote-reveal.is-visible .manifesto > span:nth-child(19) { transition-delay: .72s; }
.about-page .card { transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, border-color .35s; }.about-page .card:hover { border-color: rgba(168,58,44,.35); }
.about-cta { background: var(--ardoise); color: var(--craie); }.about-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }.about-cta h2 { margin-bottom: 0; color: var(--craie); font-size: clamp(2rem, 5vw, 3.5rem); }.about-cta .actions { margin-top: 0; }
@keyframes about-art-in { from { opacity: 0; transform: translateY(24px) rotate(2deg); } to { opacity: 1; transform: translateY(0) rotate(0); } } @keyframes about-art-float { 0%, 100% { transform: rotate(5deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-9px); } } @keyframes about-spark { 0%, 100% { opacity: .55; transform: rotate(45deg) scale(.8); } 50% { opacity: 1; transform: rotate(135deg) scale(1); } }
@media (max-width: 760px) { .about-hero-grid { grid-template-columns: 1fr; gap: .5rem; }.about-hero-art { min-height: 245px; }.about-art-orbit { width: 13rem; height: 13rem; }.about-art-sheet { width: min(180px, 58%); }.about-cta-inner { align-items: flex-start; flex-direction: column; gap: 1rem; }.about-cta .actions { width: 100%; }.about-cta .button { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .about-hero-art, .about-art-sheet, .about-art-spark { animation: none !important; }.about-hero-art { opacity: 1; transform: none; }.quote-reveal .manifesto > span { opacity: 1; transform: none; transition: none; }.about-page .card { transition: none; } }