/* Habillage V9.1 — bulles et illustrations, sans superposition du texte sur la scène. */
:root{background:#f5f6fb;color:#172d35;font-family:Inter,ui-sans-serif,system-ui,sans-serif}body{background:radial-gradient(ellipse at 6% 20%,#d5f6e780,transparent 55%),radial-gradient(ellipse at 90% 65%,#e4d8fd70,transparent 50%)}header{background:#ffffffed;border-bottom:1px solid #e0e9e4}header b{letter-spacing:-1px}header button{background:#fff;color:#395c51;border:1px solid #d6e6df;box-shadow:none}main{max-width:1380px;padding:30px 32px}button{font-weight:700;box-shadow:0 4px 0 #04664f,0 7px 16px #064e3b16;transition:transform .16s,box-shadow .16s;background:linear-gradient(135deg,#0aaa81,#008768);border-radius:14px}button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 0 #04664f,0 10px 18px #064e3b22}button:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #04664f}button:focus-visible{outline:3px solid #f3ac36;outline-offset:4px}button:disabled{box-shadow:none}#welcome{padding:65px 20px 80px}#welcome:before{content:'DÉCOUVRIR · COMPRENDRE · ESSAYER';display:inline-block;padding:9px 18px;background:#e9e2fc;color:#6442a0;border-radius:30px;font-size:11px;font-weight:800;letter-spacing:1.6px}#welcome h1{max-width:760px;margin:25px auto 16px;font-size:clamp(32px,4vw,52px);line-height:1.13;letter-spacing:-1.8px}#welcome p{color:#5c716a;margin-bottom:28px}#welcome button{padding:18px 25px;margin:8px}#welcome button[data-path=public]{background:#fff;color:#5f438c;box-shadow:0 4px 0 #d3c6e9;border:1px solid #dcd0ef}nav{padding-bottom:9px;scrollbar-width:thin}nav button{box-shadow:none;border:1px solid #e0e6e2;border-radius:30px;padding:10px 14px}nav button:hover:not(:disabled){box-shadow:none}nav button.active{background:#134d41;color:white;border-color:#134d41}.presentation{grid-template-columns:minmax(0,1fr) 300px;gap:68px;position:relative;isolation:isolate}#screen{background:radial-gradient(ellipse at top left,#fff 0,#e0f4ea 55%,#d4ece6 100%);border:1px solid #fff;border-radius:32px;box-shadow:0 22px 60px #335b4510,inset 0 0 0 7px #ffffff35;padding:32px;min-height:565px;position:relative;min-width:0}aside{background:linear-gradient(150deg,#f2eafd,#e4d4fb);border:1px solid #d2b9f0;border-radius:28px 28px 28px 8px;padding:25px 22px;box-shadow:0 12px 0 #d8c7ef60,0 22px 32px #543a8216;z-index:2}aside:before{content:none}aside:after{content:'✦';position:absolute;right:18px;top:-24px;color:#f7ad3f;font-size:42px;line-height:1;text-shadow:0 2px 0 white}#counter{display:inline-block;background:#ffffffa8;color:#654098;padding:7px 11px;border-radius:30px;font-size:11px;font-weight:800}aside h2{color:#3f275e;font-size:23px;line-height:1.15;letter-spacing:-.5px;margin:18px 0 12px}aside p{color:#554665;font-size:15px;line-height:1.6}.controls{gap:5px;align-items:center;flex-wrap:wrap;margin:20px 0 16px}.controls button{margin:0;padding:10px 12px}#previous,#play{background:#fff;color:#664693;box-shadow:0 3px 0 #cdb9e6}#previous{font-size:19px;min-width:37px}#contact{width:100%;margin:0;padding:12px;border:1px solid #c4aedf;background:#ffffff78;color:#624482;box-shadow:none;font-size:12px}.phone{border-color:#174c40;box-shadow:8px 12px 0 #b7d7c960,0 25px 34px #19443820;border-radius:38px}.phone:before{content:'';display:block;width:54px;height:7px;border-radius:20px;background:#174c40;margin:-11px auto 20px}.browser{border:1px solid #d9e9e1;border-radius:20px;box-shadow:0 14px 35px #1c534518;min-width:0}.target{outline-color:#12ac82;outline-offset:7px;border-radius:12px;background:#f5fffb;box-shadow:0 0 0 10px #0aaa8108}.demo-connector{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}.demo-connector path{fill:none;stroke:#e79922;stroke-width:5;stroke-linecap:round;stroke-dasharray:9 10;animation:demo-flow 1.5s linear infinite;filter:drop-shadow(0 2px 1px #fff)}.demo-connector marker path{fill:#e79922;stroke:none;animation:none;filter:none}.demo-connector circle{fill:#fff;stroke:#e79922;stroke-width:3}@keyframes demo-flow{to{stroke-dashoffset:-38}}.demo-art{display:block;width:100%;max-height:155px}.support-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.support-card{background:#fff;border:1px solid #e1e9e4;border-radius:17px;padding:12px;text-align:center;min-width:0}.support-card:nth-child(even){background:#faf7ff}.support-card b{display:block;color:#244b3f;font-size:15px}.support-card small{display:block;font-size:12px;line-height:1.4;margin-top:5px;color:#6f7873}.support-card.solo{max-width:350px;margin:auto}.illustration-action{text-align:center;margin-top:15px}.office{width:100%;display:grid;grid-template-columns:132px minmax(0,1fr);overflow:hidden;border-radius:17px;background:#f6f8fb;border:1px solid #dce7e1;box-shadow:0 15px 25px #16433113}.office-side{background:#101e32;color:#dfe7f0;padding:20px 11px;font-size:10px}.office-side b{display:block;font-size:13px;margin-bottom:28px;color:#fff}.office-side div{padding:11px 7px;margin:4px 0;border-radius:7px}.office-side .selected{background:#077b63;color:white}.office-main{padding:18px;min-width:0}.office-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.office-heading small{font-size:9px;letter-spacing:1px}.avatar{background:#ddd1f5;color:#644398;border-radius:50%;padding:6px;font-size:10px}.office-hero{background:linear-gradient(120deg,#07523e,#05a378);border-radius:12px;padding:16px;color:#fff;margin-bottom:15px}.office-hero h2{font-size:19px;margin:0 0 5px}.office-hero p{font-size:11px;margin:0;color:#d7f2e8}.office-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:23px}.office-kpis>div{background:white;border:1px solid #e2e9e5;padding:10px 7px;border-radius:9px}.office-kpis b{display:block;font-size:21px;color:#00936c}.office-kpis small{display:block;font-size:9px}.office table{font-size:11px}.office th,.office td{padding:11px 6px}.office .badge{font-size:10px;padding:4px 6px;white-space:nowrap}.badge.pending{background:#fff1d2;color:#997010}.badge.suspended{background:#eee5fb;color:#78549a}.office-caption{margin:8px 0 0;text-align:center}.office .target{background:white}.office-main h2{font-size:21px}.office textarea{min-height:70px}#contactForm{box-shadow:0 20px 60px #244c3b12;border:1px solid #e1e9e4}.fields{gap:14px}.bar{font-size:11px}#screen h2{line-height:1.2}header>small{font-size:11px}
@media(max-width:1000px) and (min-width:761px){main{padding:22px 16px}.presentation{grid-template-columns:minmax(0,1fr) 260px;gap:45px}#screen{padding:22px 16px}aside{padding:22px 18px}.office{grid-template-columns:1fr}.office-side{display:none}.office-main{padding:16px}.office-kpis{grid-template-columns:1fr 1fr}.office .badge{white-space:normal}}
@media(max-width:760px){main{padding:16px 12px}.presentation{grid-template-columns:1fr;gap:52px}#screen{min-height:445px;padding:24px 16px;border-radius:24px}aside{padding:20px 23px;border-radius:8px 25px 25px 25px}aside h2{font-size:22px}.office{grid-template-columns:1fr}.office-side{display:none}.office-main{padding:16px 12px}.office-kpis{gap:4px}.office-kpis small{font-size:9px}.office-hero h2{font-size:19px}.office .badge{white-space:normal}.support-grid{gap:10px}.support-card{padding:8px}.support-card b{font-size:13px}.support-card small{font-size:11px}.demo-art{max-height:120px}nav button{font-size:11px}.phone{width:300px}.browser{padding:17px}.controls{margin:15px 0}.demo-connector path{stroke-width:4}}
@media(min-width:1001px){main{padding-top:18px;padding-bottom:18px}header{padding-top:12px;padding-bottom:12px}#screen:has(.browser),#screen:has(.office){min-height:465px;padding:23px}.browser h2{font-size:22px;margin-top:0}.support-card{padding:8px}.support-card .demo-art{max-height:108px}.browser>.demo-art,.browser .target>.demo-art{max-height:125px}.support-grid{gap:11px}.browser{padding:20px}.browser .bar{margin-bottom:16px}.illustration-action button{font-size:13px;padding:10px 12px}aside h2{font-size:21px}aside p{font-size:14px}}
.intro-heading{display:flex;align-items:center;gap:17px;margin-bottom:22px}.intro-heading h2{margin:0!important}.intro-symbol{display:grid;place-items:center;flex:0 0 65px;height:72px;background:linear-gradient(130deg,#10b989,#047956);color:white;font-size:36px;border-radius:22px 22px 32px 32px;box-shadow:0 8px 18px #067c4e25}.intro-benefits{display:grid;gap:10px}.intro-benefits>div{padding:9px 12px;background:white;border-radius:9px;border-left:4px solid #ac8be0}.intro-benefits b,.intro-benefits small{display:block}.intro-benefits b{color:#355c4f;font-size:14px}.intro-benefits small{font-size:12px;color:#5d756b}.intro-stats{display:grid;grid-template-columns:1fr 1fr;gap:13px}.intro-stats>div{padding:15px 12px;border-radius:12px;background:#fff3dd}.intro-stats>div+div{background:#eee7fa}.intro-stats strong{display:block;font-size:clamp(24px,2.8vw,36px);letter-spacing:-1px;white-space:nowrap;color:#9b5710}.intro-stats>div+div strong{color:#704ba5}.intro-stats b,.intro-stats small{display:block}.intro-stats b{font-size:11px;margin:8px 0;color:#4b4b50}.intro-stats small{font-size:11px;color:#5d6264;line-height:1.5}.intro-sources,.intro-source{font-size:11px;color:#5e526f}.intro-sources summary{cursor:pointer;padding:8px 0}.intro-sources p{font-size:12px}.intro-sources a,.intro-source{color:#5c3d83;text-decoration:underline}@media(max-width:480px){.intro-stats{gap:8px}.intro-stats>div{padding:12px 8px}.intro-stats strong{font-size:25px}.intro-symbol{flex-basis:48px;height:58px;font-size:29px}.intro-heading{gap:10px}.intro-heading h2{font-size:23px}}
.conclusion-slide{width:100%;min-width:0}.conclusion-banner{padding:16px 20px 20px;background:linear-gradient(120deg,#07543f,#099e79);color:white;border-radius:19px;margin-bottom:20px}.conclusion-banner span{color:#c2f3dd;font-size:10px;letter-spacing:2px;font-weight:800}.conclusion-banner h2{margin:8px 0!important;font-size:26px}.conclusion-banner p{font-size:13px;margin:0}.conclusion-slide #contactForm{padding:12px;border:0;box-shadow:none;max-width:none;margin:0;background:white}.conclusion-slide #contactForm h1{font-size:22px;letter-spacing:-.5px;margin:0 0 5px}.conclusion-slide #contactForm>p{font-size:12px;margin:0 0 12px}.conclusion-slide label{font-size:12px;margin:4px 0}.conclusion-slide input:not([type=checkbox]){margin:3px 0 5px;padding:8px}.conclusion-slide .fields{gap:5px 12px}.conclusion-slide form>p{font-size:11px;margin:10px 0}.project-details{margin:10px 0 14px;font-size:13px}.project-details summary{cursor:pointer;color:#5f428a;font-weight:700;padding:8px;background:#f2ecfc;border-radius:9px}.project-details[open] summary{margin-bottom:12px}.submit-project{font-size:15px;padding:14px 20px;width:100%;margin:10px 0}.conclusion-slide #back{background:white;color:#5d6573;box-shadow:none;font-size:12px;padding:4px;margin:0}.conclusion-slide #result{color:#075c47;font-weight:700}#screen:has(.conclusion-slide){padding:22px}
/* V9.7 : textes secondaires noirs, lecture agrandie et espaces resserrés. */
:root{color:#111;font-size:17px;line-height:1.45}
small,.muted,.bar,#welcome p,aside p,.support-card small,.intro-benefits small,.intro-stats b,.intro-stats small,.intro-sources,.office-caption,header>small,.conclusion-slide #back{color:#111}
input,textarea,select{color:#111}input::placeholder,textarea::placeholder{color:#111;opacity:1}
aside p{font-size:16px;line-height:1.45}aside{padding:20px 18px}aside h2{margin:12px 0 10px}.controls{margin:14px 0 12px}
main{padding-top:14px;padding-bottom:14px}nav{margin-bottom:16px}#screen{padding:24px;min-height:510px}
.muted,.bar,header>small,.support-card small,.intro-benefits small,.intro-stats small,.intro-sources,.intro-source,.intro-sources p{font-size:14px;line-height:1.4}
.support-card b,.intro-benefits b{font-size:16px}.intro-stats b{font-size:14px}.intro-heading{margin-bottom:16px}.intro-benefits{gap:8px}
nav button{font-size:13px;padding:8px 12px}#counter{font-size:12px}#contact{font-size:14px}.controls button{font-size:14px}
.office-side{font-size:12px;color:white}.office-heading small,.office-kpis small{font-size:12px}.office-hero p{font-size:14px;color:white}.office table{font-size:13px}.office .badge{font-size:12px}.office th,.office td{padding:8px 5px}.office-kpis{margin-bottom:15px}.office-side div{padding:8px 5px}.office-main{padding:14px}
label{font-size:16px}table{font-size:15px}pre{font-size:14px}.phone{padding:18px}.phone:before{margin-bottom:14px}.browser .bar{margin-bottom:14px;padding-bottom:10px}
.conclusion-banner{padding:12px 16px;margin-bottom:14px}.conclusion-banner span{font-size:12px;color:white}.conclusion-banner p{font-size:15px}.conclusion-banner h2{font-size:25px}
.conclusion-slide #contactForm>p,.conclusion-slide label,.project-details,.conclusion-slide #back{font-size:14px;color:#111}.conclusion-slide form>p{font-size:13px;color:#111}.conclusion-slide input:not([type=checkbox]){font-size:16px;padding:7px;margin-bottom:3px}.conclusion-slide .fields{gap:3px 12px}.project-details{margin:8px 0 10px}.submit-project{font-size:16px;margin:8px 0;padding:12px 16px}#screen:has(.conclusion-slide){padding:18px}
@media(max-width:760px){#screen{padding:20px 14px;min-height:420px}.presentation{gap:40px}.support-card small{font-size:14px}.support-card b{font-size:15px}.office-kpis{grid-template-columns:1fr 1fr}.office-kpis small{font-size:12px}nav button{font-size:13px}.office th,.office td{overflow-wrap:anywhere}.office .badge{white-space:normal}aside{padding:18px}.conclusion-slide #contactForm{padding:8px}}
.controls #previous{font-size:14px;min-height:44px;padding:10px 12px}
#welcome[data-intro]:before{content:attr(data-intro)}
/* Les traductions allemandes sont plus longues : retour à la ligne sans débordement. */
.presentation aside{min-width:0}aside h2,aside p,.support-card b,.support-card small{overflow-wrap:anywhere}
.controls button,#contact{white-space:normal}#screen table{table-layout:fixed}#screen td,#screen th{overflow-wrap:anywhere}
.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.tile{min-width:0;overflow-wrap:anywhere}
/* V10.1 : lecture confortable sur téléphone, sans miniaturiser les maquettes. */
@media(max-width:600px){
 :root{font-size:18px;line-height:1.5}
 main{padding:12px 8px}#screen{padding:18px 10px}.phone{width:100%;padding:16px}.browser{padding:14px}
 #screen p,aside p{font-size:18px;line-height:1.5}
 #screen label,.conclusion-slide label{font-size:17px}
 #screen input:not([type=checkbox]),#screen textarea,#screen select{font-size:18px}
 #screen small,#screen .muted,#screen .bar,#screen .intro-source,#screen .intro-sources,#screen .intro-sources p{font-size:16px;line-height:1.5}
 #screen .support-card b,#screen .intro-benefits b,#screen .intro-stats b{font-size:17px}
 #screen .badge,#counter,nav button{font-size:16px}
 #screen table{font-size:16px}#screen .office table{table-layout:auto}#screen .office td,#screen .office th{padding:9px 4px}
 #screen h2,aside h2{font-size:25px}#screen h3{font-size:21px}
 .controls button,.controls #previous,#contact,#screen button{font-size:17px;min-height:44px}
 .support-grid,.intro-stats,.tiles{grid-template-columns:1fr}
 .support-card .demo-art{max-height:145px}
 .conclusion-slide #contactForm>p,.conclusion-slide form>p,.conclusion-slide #back,.project-details{font-size:16px;line-height:1.5}
 .conclusion-banner span{font-size:15px}.conclusion-slide #contactForm h1{font-size:25px}
 #screen .office-heading small{letter-spacing:0}.office-main{padding:12px 8px}
}
/* Contrôle de lecture visible, démarrage manuel — V10.2 */
.controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.controls button{margin:0;min-width:0}
.controls #play{grid-column:1/-1;grid-row:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 15px;font-size:16px;font-weight:800;border:1px solid #007653;outline:0;background:linear-gradient(120deg,#008966,#006d52);color:#fff;box-shadow:0 4px 12px #005d4424}
.controls #play span{color:#fff}
.controls #play .play-icon{width:20px;height:20px;fill:#fff;flex:0 0 auto}
.controls #play[data-playing="true"]{background:#183c31;border-color:#183c31}
.controls #play:focus-visible{outline:4px solid #7046ad;outline-offset:3px}
.controls #previous,.controls #next{grid-row:2;min-height:44px;background:#e5f7f0;color:#07553e}
aside .play-help{font-size:14px;line-height:1.45;margin:0 0 15px;color:#173c30}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}