:root{--brand:#075b47;--brand-2:#0b7b5e;--brand-dark:#053f35;--accent:#d5a928;--bg:#f5f7f9;--card:#fff;--text:#102033;--muted:#667085;--danger:#e5484d;--warning:#e9a23b;--success:#159a67;--info:#3377d5;--border:#e4e7ec;--shadow:0 12px 32px rgba(16,32,51,.08);--radius:18px} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.container{width:min(1180px,92%);margin:auto}.hidden{display:none!important}.muted{color:var(--muted)}.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;font-size:12px;font-weight:700}.badge.success{background:#e8f8f0;color:#087a4e}.badge.warn{background:#fff3dc;color:#a96600}.badge.danger{background:#ffe8e8;color:#b42318}.badge.info{background:#eaf2ff;color:#245aa8}.badge.reserved{background:#f3e8fd;color:#6b21a8}.breadcrumb-trail{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--muted);margin-bottom:12px}.breadcrumb-trail a{color:var(--brand-2);font-weight:600}.breadcrumb-trail a:hover{text-decoration:underline}.breadcrumb-trail .breadcrumb-current{color:var(--text);font-weight:700}.breadcrumb-trail .breadcrumb-sep{opacity:.5}.badge.neutral,.badge:not(.success):not(.warn):not(.danger):not(.info):not(.reserved){background:#eef1f4;color:#55606b}.filter-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}.cms-slider{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;-webkit-overflow-scrolling:touch}.cms-slide{flex:0 0 min(460px,86%);scroll-snap-align:center;margin:0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.cms-slide img{width:100%;height:260px;object-fit:cover;display:block}.cms-slide figcaption{padding:12px 14px;font-size:13.5px;color:var(--muted)}.btn{border:0;border-radius:11px;padding:11px 16px;cursor:pointer;font-weight:750;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.18s}.btn:hover{transform:translateY(-1px)}.btn-primary{background:var(--brand);color:white}.btn-secondary{background:white;color:var(--brand);border:1px solid #a9c9c0}.btn-accent{background:var(--accent);color:#1b2b24}.btn-ghost{background:#eef3f2;color:var(--brand-dark)}.btn-danger{background:#fff0f0;color:#b42318;border:1px solid #ffcaca}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.card-pad{padding:20px}.grid{display:grid;gap:16px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-6{grid-template-columns:repeat(6,minmax(0,1fr))}.iconbox{width:42px;height:42px;border-radius:12px;background:#e8f6f1;color:var(--brand);display:grid;place-items:center;font-size:21px;font-weight:900}.section-title{font-size:30px;line-height:1.1;margin:0 0 10px}.section-sub{margin:0;color:var(--muted);line-height:1.6}.kpi{padding:18px}.kpi .label{font-size:13px;color:var(--muted)}.kpi .value{font-size:25px;font-weight:850;margin:7px 0}.kpi .trend{font-size:12px;font-weight:700;color:var(--success)} /* brand */ .brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:-.4px}.brand-logo{width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,var(--brand),var(--accent));display:grid;place-items:center;color:white;font-size:24px}.brand-name{font-size:23px}.brand-name em{font-style:normal;color:var(--accent)} /* public */ .public-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}.public-nav{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}.nav-links{display:flex;gap:22px;font-size:14px;font-weight:650}.nav-actions{display:flex;gap:10px}.hero{min-height:620px;background:linear-gradient(100deg,rgba(255,255,255,.99) 0%,rgba(255,255,255,.92) 50%,rgba(255,255,255,.38) 100%),url('../images/reference-pwa.webp') center/cover;padding:78px 0 64px;display:flex;align-items:center}.hero-copy{max-width:660px}.eyebrow{text-transform:uppercase;letter-spacing:1.6px;color:#ac8411;font-size:12px;font-weight:900}.hero h1{font-size:56px;line-height:1.02;letter-spacing:-2px;margin:14px 0 18px}.hero h1 span{color:var(--brand)}.hero p{font-size:19px;line-height:1.55;color:#3b4a5a}.hero-actions{display:flex;gap:12px;margin:26px 0}.checkline{display:flex;flex-wrap:wrap;gap:20px;font-size:13px;font-weight:700;color:#354352}.public-stats{background:white;border-bottom:1px solid var(--border);padding:26px 0}.statrow{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.stat{text-align:center}.stat b{font-size:24px;color:var(--brand-dark);display:block}.feature-section{padding:74px 0}.feature-cards{margin-top:28px;grid-template-columns:repeat(4,minmax(0,1fr))}.feature{padding:20px}.feature h3{margin:14px 0 7px}.split-banner{display:grid;grid-template-columns:1.1fr .9fr;overflow:hidden}.split-copy{padding:42px;background:var(--brand-dark);color:white}.split-copy p{color:#d8e7e2}.split-image{min-height:360px;background:url('../images/reference-pwa.webp') center/cover}.pricing{padding:74px 0;background:#fff}.pricecards{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:30px}.plan{padding:24px;position:relative}.plan.popular{outline:2px solid var(--accent)}.plan .price{font-size:31px;font-weight:900;margin:16px 0}.plan ul{padding-left:18px;color:#45556a;line-height:1.9}.footer{background:#052f29;color:#dce8e5;padding:38px 0}.footer-inner{display:flex;justify-content:space-between;gap:20px;align-items:center} /* auth */ .auth-page{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.auth-visual{background:linear-gradient(rgba(5,63,53,.52),rgba(5,63,53,.75)),url('../images/reference-pwa.webp') center/cover;display:flex;align-items:flex-end;padding:50px;color:white}.auth-panel{display:grid;place-items:center;background:white;padding:40px}.auth-box{width:min(460px,100%)}.auth-box h1{font-size:34px;margin:24px 0 8px}.field{display:grid;gap:7px;margin:15px 0}.field label{font-size:13px;font-weight:750}.field input,.field select,.field textarea{width:100%;border:1px solid #d0d5dd;border-radius:10px;padding:12px;background:white}.role-demo{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px}.role-demo a{font-size:12px;text-align:center;padding:10px;border-radius:9px;background:#eef4f2;color:var(--brand);font-weight:750} /* app layout */ .app-shell{min-height:100vh;display:grid;grid-template-columns:var(--side-w,252px) minmax(0,1fr)}.sidebar{background:linear-gradient(180deg,var(--brand-dark),#042c27);color:white;position:sticky;top:0;height:100vh;padding:18px 14px;display:flex;flex-direction:column}.sidebar .brand{padding:6px 8px 22px}.sidebar .brand-name{font-size:21px}.side-menu{display:grid;gap:5px;overflow:auto}.side-menu a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:10px;color:#e6f0ed;font-size:14px}.side-menu a:hover,.side-menu a.active{background:rgba(30,160,120,.25);color:white}.side-menu .ico{width:20px;text-align:center}.side-bottom{margin-top:auto;padding-top:14px}.pwa-card{border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:14px;background:rgba(255,255,255,.06);font-size:12px}.app-main{min-width:0}.topbar{height:70px;background:white;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:16px;padding:0 22px;position:sticky;top:0;z-index:10}.search{flex:1;min-width:0;max-width:620px}.search input{min-width:0}.search input{width:100%;border:1px solid var(--border);border-radius:11px;padding:11px 14px;background:#f8fafb}.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.avatar{width:37px;height:37px;border-radius:50%;display:grid;place-items:center;background:#e9efed;font-weight:800}/* Gouttiere du bas : le bouton flottant « Assistance » occupe les 65 px inferieurs droits de la fenetre (45 px de haut, pose a 20 px du bas). Mesure a 1440x900, descendu en bas de page : le PIED DE PAGE passait 33 px SOUS le bord haut du bouton, sur les trois ecrans essayes : le bouton PARTAGEAIT LA LIGNE du pied, et couvrait son bout droit. Le texte du pied etant aligne a gauche, rien n etait cache -- mais rien ne pouvait non plus etre pose a droite de cette derniere ligne, et aucun defilement ne degageait la zone, puisque c etait deja le bas. Avec la reserve : 23 px de degagement. La regle mobile (<=820 px) reservait deja 80 px ; celle-ci etait restee a zero. Les deux sont maintenant symetriques. */ .page{padding:24px 24px 80px}.page-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:20px}.page-header h1{margin:0 0 7px;font-size:29px}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.7fr);gap:16px}.main-stack,.right-stack{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}.chart-card{padding:20px;min-height:300px}.chart-bars{height:190px;display:flex;align-items:end;gap:10px;border-bottom:1px solid var(--border);padding:10px}.bar{flex:1;background:linear-gradient(180deg,var(--brand-2),var(--brand));border-radius:7px 7px 0 0;min-height:20px}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;font-size:13px}.table th{background:#f7f9fa;color:#596579;text-align:left;padding:11px;border-bottom:2px solid var(--brand)}.table td{padding:12px 11px;border-bottom:1px solid #eef0f2;white-space:nowrap}.quick-grid{grid-template-columns:repeat(4,1fr)}.quick{padding:16px;display:flex;gap:12px;align-items:center}.notice{padding:14px;border-radius:12px;background:#fff7e8;border:1px solid #f5dfad}.notice.red{background:#fff1f1;border-color:#ffd6d6}.notice.info{background:#eef5fc;border-color:#c9dff2}.notice.success{background:#eaf8f1;border-color:#bfe6d3}.banner-photo{min-height:185px;border-radius:var(--radius);background:linear-gradient(rgba(0,0,0,.12),rgba(0,0,0,.45)),url('../images/reference-landing.webp') center/cover;color:white;padding:24px;display:flex;align-items:flex-end;font-size:22px;font-weight:850}.progress{height:8px;background:#edf0f2;border-radius:999px;overflow:hidden}.progress span{display:block;height:100%;background:var(--brand);border-radius:inherit}.module-section{display:none}.module-section.active{display:block}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.tab{padding:9px 12px;border:1px solid var(--border);background:white;border-radius:9px;cursor:pointer;font-weight:700;font-size:13px}.tab.active{background:var(--brand);color:white}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.totals{background:#f4faf7;border:1px solid #cfe8dd;border-radius:14px;padding:17px}.totals .row{display:flex;justify-content:space-between;padding:7px 0}.totals .row.total{border-top:1px solid #b9d8cc;margin-top:7px;padding-top:13px;font-size:19px;font-weight:900}.color-swatch{width:28px;height:28px;border-radius:8px;background:var(--brand);border:1px solid #ddd}.mobile-bottom{display:none}.menu-toggle{display:none;border:1px solid var(--border);background:white;color:var(--brand-dark);border-radius:11px;padding:9px 12px;font-size:19px;line-height:1;cursor:pointer;align-items:center}.sidebar-scrim{display:none}.side-identite{display:none}.side-langue{display:none}.search-compact{display:none;border:1px solid var(--border);border-radius:11px;padding:9px 11px;font-size:16px;line-height:1;align-items:center}.chart-scroll{overflow:visible} /* modal */ .modal{position:fixed;inset:0;background:rgba(10,22,31,.55);display:none;place-items:center;z-index:60;padding:20px}.modal.open{display:grid}.modal-card{width:min(650px,100%);max-height:90vh;overflow:auto;background:white;border-radius:18px;padding:24px;box-shadow:0 30px 90px rgba(0,0,0,.25)}.modal-head{display:flex;justify-content:space-between;align-items:center}.close{border:0;background:#eef1f2;border-radius:50%;width:34px;height:34px;cursor:pointer} /* responsive */ @media(max-width:1100px){.grid-5{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-6{grid-template-columns:repeat(3,minmax(0,1fr))}.feature-cards,.pricecards{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-grid{grid-template-columns:minmax(0,1fr)}.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.statrow{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:820px){.nav-links{display:none}.hero{min-height:auto;padding:52px 0;background-position:70% center;background-image:linear-gradient(rgba(255,255,255,.94),rgba(255,255,255,.9)),url('../images/reference-pwa.webp')}.hero h1{font-size:43px}.grid-5,.grid-4,.grid-3,.grid-2,.grid-6,.feature-cards,.pricecards,.form-grid{grid-template-columns:minmax(0,1fr)}.split-banner{grid-template-columns:minmax(0,1fr)}.statrow{grid-template-columns:repeat(2,minmax(0,1fr))}.auth-page{grid-template-columns:minmax(0,1fr)}.auth-visual{display:none}.app-shell{grid-template-columns:minmax(0,1fr)}.sidebar{display:flex;position:fixed;left:0;top:0;bottom:0;width:min(84vw,300px);height:100dvh;z-index:60;transform:translateX(-102%);transition:transform .22s ease;box-shadow:0 0 44px rgba(0,0,0,.4);padding:16px 12px}.sidebar.est-ouvert{transform:none}.sidebar .side-identite{display:block;margin:0 4px 12px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}.sidebar .side-identite b{display:block;font-size:13.5px;color:#fff;line-height:1.3}.sidebar .side-identite span{display:block;font-size:11.5px;color:rgba(230,240,237,.72);margin-top:2px}.sidebar .side-langue{display:block;margin:0 4px 10px}.sidebar .side-langue select{width:100%;border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:9px 10px;font-size:13px;background:rgba(255,255,255,.08);color:#fff}.sidebar .side-langue option{color:#102033}.sidebar .side-bottom{padding-top:10px}.sidebar .pwa-card{padding:10px;font-size:11px}.sidebar .pwa-card p{margin:4px 0 0}.sidebar-scrim{display:block;position:fixed;inset:0;background:rgba(5,32,27,.55);z-index:55;opacity:0;pointer-events:none;transition:opacity .22s}.sidebar-scrim.est-ouvert{opacity:1;pointer-events:auto}.menu-toggle{display:inline-flex}body.menu-ouvert{overflow:hidden}body.menu-ouvert .support-widget-btn,body.menu-ouvert .help-toggle{display:none}.topbar{padding:0 10px;gap:8px}.page{padding:16px 14px 80px}.top-actions .hide-mobile{display:none}.top-actions{gap:6px}.quick-grid{grid-template-columns:minmax(0,1fr)}.page-header{flex-wrap:wrap}.page-header>div:last-child{flex-wrap:wrap}.filter-tabs{flex-wrap:wrap}.page form[style*="display:flex"],.page div[style*="display:flex"]{flex-wrap:wrap}.chart-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}.chart-scroll .chart-bars,.chart-scroll .chart-legend{min-width:460px}.mobile-bottom{position:fixed;bottom:0;left:0;right:0;background:white;border-top:1px solid var(--border);display:flex;justify-content:space-around;padding:8px;z-index:40}.mobile-bottom a{font-size:11px;font-weight:750;color:#4d5c6d;text-align:center}.mobile-bottom span{display:block;font-size:19px}.footer-inner{flex-direction:column;align-items:flex-start}} /* v0.2 - themes, CMS, marketing and workflow */ :root{--surface:#ffffff;--surface-2:#f5f7f9;--sidebar:#053f35;--sidebar-2:#042c27;--hero-overlay:rgba(255,255,255,.94)} body{background:var(--surface-2)}.card,.public-header,.topbar{background:var(--surface)}.sidebar{background:linear-gradient(180deg,var(--sidebar),var(--sidebar-2))} .announcement-bar{background:var(--brand-dark);color:#fff;padding:9px 0;font-size:13px}.announcement-inner{display:flex;justify-content:center;align-items:center;gap:12px;text-align:center}.announcement-inner a{text-decoration:underline;font-weight:800} .hero-v2{position:relative;min-height:680px;overflow:hidden;background:var(--surface)}.hero-v2 h1{font-size:56px;line-height:1.02;letter-spacing:-2.2px;max-width:780px;margin:14px 0 18px}.hero-v2 .hero-copy>p{font-size:20px;line-height:1.6;max-width:720px;color:#415163}.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .55s ease;background-position:center;background-size:cover}.hero-slide.active{opacity:1}.hero-slide:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--hero-overlay) 0%,rgba(255,255,255,.9) 50%,rgba(255,255,255,.22) 100%)}.hero-v2 .container{position:relative;z-index:3;min-height:680px;display:flex;align-items:center}.hero-dots{position:absolute;z-index:5;bottom:26px;left:50%;transform:translateX(-50%);display:flex;gap:7px}.hero-dot{width:9px;height:9px;border-radius:50%;border:0;background:#cbd5d1;cursor:pointer}.hero-dot.active{width:28px;border-radius:999px;background:var(--brand)} .section{padding:76px 0}.section.alt{background:var(--surface)}.section.soft{background:linear-gradient(180deg,var(--surface),var(--surface-2))}.center{text-align:center}.section-heading{max-width:760px;margin:0 auto 30px}.section-heading h2{font-size:38px;letter-spacing:-1px;margin:0 0 10px}.section-heading p{color:var(--muted);line-height:1.65} .process{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.process-step{padding:22px}.process-num{width:36px;height:36px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:900;margin-bottom:14px} .showcase{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}.showcase-image{min-height:420px;border-radius:24px;background-position:center;background-size:cover;box-shadow:var(--shadow)}.bullet-list{display:grid;gap:12px;margin:22px 0}.bullet{display:flex;gap:12px;align-items:flex-start}.bullet i{font-style:normal;width:26px;height:26px;border-radius:50%;background:#e6f7ef;color:var(--brand);display:grid;place-items:center;font-weight:900;flex:none} .logo-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.logo-pill{border:1px solid var(--border);border-radius:14px;padding:16px;text-align:center;background:var(--surface);font-weight:800;color:#46556b} .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.blog-card{overflow:hidden}.blog-thumb{height:170px;background-size:cover;background-position:center}.blog-body{padding:18px}.blog-meta{font-size:12px;color:var(--muted);margin-bottom:8px}.blog-body h3{margin:0 0 8px}.faq{max-width:900px;margin:auto}.faq details{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;margin:10px 0}.faq summary{cursor:pointer;font-weight:800}.cta-band{background:linear-gradient(115deg,var(--brand-dark),var(--brand));color:#fff;border-radius:26px;padding:42px;display:flex;justify-content:space-between;gap:25px;align-items:center}.cta-band h2{margin:0 0 8px;font-size:34px}.cta-band p{margin:0;color:#d9ebe5} .theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.theme-card{padding:18px;cursor:pointer;transition:.18s}.theme-card:hover{transform:translateY(-2px)}.theme-card.selected{outline:3px solid var(--accent)}.theme-palette{display:flex;gap:6px;margin:12px 0}.theme-palette span{height:34px;flex:1;border-radius:8px;border:1px solid rgba(0,0,0,.08)}.theme-preview{border:1px solid var(--border);border-radius:18px;overflow:hidden}.theme-preview-top{height:40px;background:var(--surface);border-bottom:1px solid var(--border)}.theme-preview-body{display:grid;grid-template-columns:80px 1fr;height:220px}.theme-preview-side{background:var(--sidebar)}.theme-preview-main{padding:16px;background:var(--surface-2)}.theme-preview-card{height:60px;background:var(--surface);border-radius:12px;border:1px solid var(--border);margin-bottom:10px} .cms-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px}.cms-panel{padding:18px}.cms-nav{display:grid;gap:6px}.cms-nav button{text-align:left;border:0;background:transparent;border-radius:9px;padding:10px;cursor:pointer}.cms-nav button.active{background:#edf6f3;color:var(--brand);font-weight:800}.cms-builder{display:grid;gap:14px}.builder-row{border:1px dashed #cbd5d1;border-radius:14px;padding:14px;background:#fbfcfc}.drag{cursor:grab;color:#98a2b3;font-weight:900;margin-right:8px}.media-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.media-item{height:100px;border-radius:12px;background-size:cover;background-position:center;border:1px solid var(--border);position:relative}.media-item span{position:absolute;bottom:5px;left:5px;background:rgba(0,0,0,.6);color:#fff;font-size:10px;padding:3px 5px;border-radius:5px} .social-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.social-card{padding:16px}.social-icon{font-size:24px}.schedule-row{display:grid;grid-template-columns:1.2fr .7fr .6fr auto;gap:10px;align-items:center;border-bottom:1px solid var(--border);padding:10px 0} .switch{position:relative;width:48px;height:26px;display:inline-block}.switch input{display:none}.slider{position:absolute;inset:0;background:#cfd5d3;border-radius:999px;cursor:pointer}.slider:before{content:'';position:absolute;width:20px;height:20px;left:3px;top:3px;background:white;border-radius:50%;transition:.2s;box-shadow:0 1px 4px rgba(0,0,0,.25)}.switch input:checked+.slider{background:var(--brand)}.switch input:checked+.slider:before{transform:translateX(22px)} .workflow-box{display:flex;justify-content:space-between;align-items:center;gap:20px;border:1px solid var(--border);border-radius:14px;padding:16px;margin:12px 0}.workflow-box h4{margin:0 0 5px}.workflow-box p{margin:0}.owner-action-card{border-left:4px solid var(--info)}.owner-info-only .owner-approval-actions{display:none}.owner-info-only .approval-label:after{content:'Information uniquement';}.owner-approval-required .approval-label:after{content:'Validation requise';} .plan-editor{display:grid;grid-template-columns:350px minmax(0,1fr);gap:18px}.plan-list{display:grid;gap:8px}.plan-list button{border:1px solid var(--border);background:var(--surface);padding:12px;border-radius:10px;text-align:left;cursor:pointer}.plan-list button.active{border-color:var(--brand);background:#edf7f3}.feature-checks{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.check-card{border:1px solid var(--border);border-radius:10px;padding:10px;display:flex;gap:8px;align-items:center}.plan-preview{border:1px solid var(--border);border-radius:16px;padding:18px;background:linear-gradient(160deg,var(--surface),#f8fbfa)} .deploy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.deploy-card{padding:20px}.deploy-card.recommended{outline:3px solid var(--brand)}.architecture-line{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:20px 0}.arch-node{padding:10px 13px;border-radius:10px;background:var(--surface);border:1px solid var(--border);font-weight:750}.arch-arrow{color:var(--muted)} .small-note{font-size:12px;color:var(--muted)}.pill-tabs{display:flex;flex-wrap:wrap;gap:7px}.pill-tabs a,.pill-tabs button{border:1px solid var(--border);background:var(--surface);padding:8px 11px;border-radius:999px;font-size:12px;cursor:pointer}.pill-tabs .active{background:var(--brand);color:#fff} @media(max-width:1100px){.process{grid-template-columns:repeat(2,minmax(0,1fr))}.theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.social-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.deploy-grid{grid-template-columns:minmax(0,1fr)}.plan-editor,.cms-layout{grid-template-columns:minmax(0,1fr)}.media-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:760px){.hero-v2,.hero-v2 .container{min-height:620px}.hero-v2 h1{font-size:39px;letter-spacing:-1.3px}.hero-v2 .hero-copy>p{font-size:17px}.hero-slide:after{background:rgba(255,255,255,.88)}.section-heading h2{font-size:30px}.showcase{grid-template-columns:minmax(0,1fr)}.process,.theme-grid,.blog-grid,.social-grid{grid-template-columns:minmax(0,1fr)}.logo-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.cta-band{display:block}.cta-band .btn{margin-top:20px}.schedule-row{grid-template-columns:minmax(0,1fr)}.feature-checks{grid-template-columns:minmax(0,1fr)}.media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} /* v0.3 - reprise d'anteriorite */ .opening-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}.opening-summary>div{padding:14px;border:1px solid var(--border);border-radius:12px;background:#f8fafb;display:grid;gap:5px}.opening-summary strong{font-size:16px}.optional-upload{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--border)}.timeline{display:grid;gap:0;margin:16px 0}.timeline-item{position:relative;display:grid;grid-template-columns:22px 1fr;gap:10px;padding:0 0 22px}.timeline-item:before{content:"";position:absolute;left:6px;top:15px;bottom:0;width:2px;background:var(--border)}.timeline-item:last-child:before{display:none}.timeline-dot{width:14px;height:14px;border-radius:50%;background:var(--brand);margin-top:3px;z-index:1}.modal-wide{width:min(980px,94vw)}.profile-tabs{display:flex;gap:8px;overflow:auto;border-bottom:1px solid var(--border);padding:12px 0;margin-bottom:16px}.profile-tabs button{border:0;background:transparent;padding:9px 12px;font-weight:750;color:var(--muted);white-space:nowrap}.profile-tabs button.active{color:var(--brand);border-bottom:2px solid var(--brand)}.check-option{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:11px;background:#f7faf9;border:1px solid var(--border)}.text-danger{color:var(--danger)} @media(max-width:760px){.opening-summary{grid-template-columns:minmax(0,1fr)}.optional-upload{align-items:flex-start;flex-direction:column}} /* Laravel app — compléments non présents dans le prototype statique */ .stat-line{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--border)}.stat-line:last-child{border-bottom:0} .hint{font-size:12px;color:var(--muted)} .flash{background:#e8f8f0;color:#087a4e;border:1px solid #b7e4cd;border-radius:12px;padding:12px 16px;margin-bottom:16px;font-weight:700} /* Un refus ne se lit pas en vert. La classe `.flash.error` etait ecrite dans trente vues et definie nulle part : toutes prenaient la couleur de la reussite. Memes teintes que `.error-box`, pour que les deux formes d'erreur se reconnaissent. (v0.168.1) */ .flash.error{background:#ffe8e8;color:#b42318;border-color:#ffcaca} /* Ni une reussite ni une erreur : le paiement en cours de traitement. */ .flash.info{background:#eef4fb;color:#1f4f8f;border-color:#c5d9f0} /* Un avertissement n'est pas une reussite : il s'affichait pourtant en vert, faute d'exister. (v0.168.1) */ .flash.warn{background:#fff3dc;color:#a96600;border-color:#f0d9a8} /* Ecrite dans seize vues et definie nulle part. Elle ne mentait pas -- `.flash` est deja vert -- mais une classe qui ne fait rien finit par etre recopiee la ou elle devrait faire quelque chose. */ .flash.success{background:#e8f8f0;color:#087a4e;border-color:#b7e4cd} /* Un bouton qui doit se lire comme un lien : il ouvre une fenetre, il ne soumet rien. Ecrire la classe sans la definir, c'est le defaut que `.flash.error` nous a coute. (v0.168.1) */ .btn-lien{background:none;border:0;padding:0;font:inherit;color:var(--brand,#0b5d49);text-decoration:underline;cursor:pointer} .btn-lien:hover{color:var(--brand-2,#0b7b5e)} .error-box{background:#ffe8e8;color:#b42318;border:1px solid #ffcaca;border-radius:12px;padding:12px 16px;margin-bottom:16px}.error-box ul{margin:6px 0 0;padding-left:18px} .footer-note{font-size:12px;color:var(--muted);margin-top:14px} .side-menu a.active{background:rgba(30,160,120,.25);color:#fff} /* Portées depuis le prototype v1.2.1 — raffinements génériques de mise en page */ .page-header h1{font-size:26px;letter-spacing:-.65px;line-height:1.15;font-weight:850} .page-header>div>p.muted{font-size:13px;line-height:1.55;max-width:780px} .app-main .page{max-width:1680px;margin:0 auto} .page-header.pro-title{padding:4px 0 2px;border-bottom:1px solid var(--border);padding-bottom:18px} .page-kicker{display:block;font-size:11px;font-weight:900;letter-spacing:1.7px;color:var(--brand-2);margin-bottom:7px} .page-header.pro-title h1{font-size:27px;letter-spacing:-.7px} .property-showcase .property-card{overflow:hidden} .property-card>img{width:100%;height:150px;object-fit:cover;display:block} .btn-ghost[type=submit],form .btn-ghost{white-space:nowrap} .search-dropdown{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);max-height:420px;overflow:auto;z-index:40} .search-item{display:flex;align-items:center;gap:9px;padding:10px 14px;border-bottom:1px solid var(--border);color:inherit} .search-item:last-child{border-bottom:0} .undo-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:70;background:var(--brand-dark);color:#fff;border-radius:999px;padding:10px 10px 10px 18px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow);font-size:13px;font-weight:700}.undo-toast .btn{padding:7px 14px;font-size:12.5px;background:rgba(255,255,255,.14);color:#fff}.undo-toast .btn:hover{background:rgba(255,255,255,.24)} .contract-info-card{margin-bottom:18px;background:linear-gradient(160deg,#f4faf7,var(--card));border-color:#cfe8dd}.contract-info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 24px}.contract-info-label{display:block;font-size:11px;font-weight:800;letter-spacing:.4px;color:var(--muted);text-transform:uppercase;margin-bottom:4px}.contract-info-grid b{font-size:15px} .contract-doc{font-family:Georgia,'Times New Roman',serif;color:#26312d;max-height:600px;overflow:auto;background:#fdfdfb;border:1px solid var(--border);padding:8px 28px 28px}.contract-title{font-size:19px;letter-spacing:.5px;text-align:center;margin:18px 0 26px;color:var(--brand-dark)}.contract-doc p{font-size:13.5px;line-height:1.75;margin:0 0 14px}.contract-article{border-top:2px solid #dfe9e4;margin-top:22px;padding-top:14px}.contract-article:first-of-type{border-top:0;margin-top:0}.contract-article h3{margin:0 0 8px;font-size:14.5px;color:var(--brand-dark)}.contract-article-num{display:inline-block;background:var(--brand);color:#fff;border-radius:7px;padding:2px 9px;font-size:11.5px;font-weight:800;margin-right:10px;letter-spacing:.3px}.contract-article p{font-size:13.5px;line-height:1.75;margin:0;color:#3a453f} @media(max-width:820px){.contract-info-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.contract-doc{padding:8px 16px 20px}} .search-item:hover{background:var(--bg)} .search-item-title{font-weight:700;font-size:13px} .search-item-sub{color:var(--muted);font-size:12px;margin-left:auto} .search-empty{padding:14px;color:var(--muted);font-size:13px;text-align:center} .property-showcase{grid-template-columns:repeat(4,minmax(0,1fr))} .property-card{cursor:pointer;transition:box-shadow .15s,transform .15s} .property-card:hover{box-shadow:0 16px 36px rgba(16,32,51,.12);transform:translateY(-1px)} .property-card>img{height:110px} .grid-compact.property-showcase{grid-template-columns:repeat(7,minmax(0,1fr));gap:10px} .grid-compact .property-card>img{height:64px} .grid-compact .property-card>div{padding:7px} .grid-compact .property-card b{font-size:12px} .grid-compact .property-card .small-note{font-size:10px} .grid-compact .property-card .badge{font-size:9px;padding:3px 6px} .detail-panel{border-top:2px solid var(--brand);padding-top:16px;margin-top:4px} .grid-2-detail{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start} .units-mini-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px} .tile-mini{cursor:pointer;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--card);transition:box-shadow .15s} .tile-mini:hover{box-shadow:0 10px 24px rgba(16,32,51,.1)} .tile-mini>img{width:100%;height:64px;object-fit:cover;display:block} .tile-mini-info{padding:7px;display:flex;flex-direction:column;gap:3px} .tile-mini-info b{font-size:11px} .tile-mini-info span{font-size:10px;color:var(--muted)} .property-card .avatar-emoji{width:100%;height:110px;display:flex;align-items:center;justify-content:center;font-size:46px;background:linear-gradient(135deg,var(--bg),var(--border))} .grid-compact .property-card .avatar-emoji{height:64px;font-size:26px} .tile-mini .avatar-emoji{width:100%;height:64px;display:flex;align-items:center;justify-content:center;font-size:26px;background:linear-gradient(135deg,var(--bg),var(--border))} @media (max-width:900px){.grid-2-detail{grid-template-columns:minmax(0,1fr)}.property-showcase{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-compact.property-showcase{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:820px){.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}} @media(max-width:820px){.public-nav{flex-wrap:wrap;height:auto;padding:12px 0;gap:10px;justify-content:flex-start}.public-nav .brand{min-width:0;flex:1 1 auto}.nav-actions{flex-wrap:wrap;gap:7px;margin-left:auto}.nav-actions .btn{padding:9px 12px;font-size:13px}} @media(max-width:420px){.nav-actions{width:100%;margin-left:0}.nav-actions .btn{flex:1 1 auto;padding:9px 8px;font-size:12px}} @media (max-width:400px){.topbar .avatar{display:none}.topbar{padding:0 8px}} @media (max-width:560px){.topbar .search{display:none}.search-compact{display:inline-flex}.topbar form .btn-ghost{padding:8px 10px;font-size:12px}.topbar{gap:6px}} @media (max-width:480px){.property-showcase{grid-template-columns:minmax(0,1fr)}.grid-compact.property-showcase{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.property-card>img,.property-card .avatar-emoji{height:120px}.grid-compact .property-card>img,.grid-compact .property-card .avatar-emoji{height:72px}.pill-tabs{flex-wrap:wrap}.pill-tabs button{padding:9px 12px;font-size:12.5px}.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.table-wrap table{min-width:560px}} .table-compact th{padding:6px 9px;font-size:11.5px} .table-compact td{padding:6px 9px;font-size:12px;white-space:normal} .table-compact .badge{font-size:10px;padding:3px 6px} .list-row{cursor:pointer} .list-row:hover{background:var(--bg)} .quick-links{display:flex;align-items:center;gap:8px;padding:10px 22px;background:var(--card);border-bottom:1px solid var(--border);flex-wrap:wrap} .quick-link{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--bg);color:var(--text);font-size:12.5px;font-weight:700;border:1px solid var(--border)} .quick-link:hover,.quick-link.active{background:var(--brand);color:white;border-color:var(--brand)} .quick-link-edit{margin-left:auto;padding:6px 10px} .camera-capture-btn{margin-left:8px;margin-top:6px} #notif-bell-btn.bell-pulse{animation:bell-shake .5s ease-in-out} @keyframes bell-shake{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(11deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(5deg)}} [data-live-thread].thread-flash{animation:thread-flash-bg 1.5s ease-out} @keyframes thread-flash-bg{0%{background:var(--brand-soft,#e8f6f1)}100%{background:transparent}} .side-menu-soon{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:10px;color:rgba(230,240,237,.45);font-size:14px;cursor:default}.side-menu-soon em{margin-left:auto;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:rgba(255,255,255,.1);padding:2px 7px;border-radius:999px} .rich-text-content p{margin:0 0 8px}.rich-text-content p:last-child{margin-bottom:0}.rich-text-content ul,.rich-text-content ol{margin:0 0 8px;padding-left:20px}.rich-text-content h4{margin:10px 0 4px;font-size:14px} .voice-input-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;margin-top:6px;border:1px solid var(--border);background:var(--card);border-radius:50%;cursor:pointer;font-size:14px;line-height:1;transition:.15s} .voice-input-btn:hover{border-color:var(--brand-2)} .voice-input-btn.listening{background:var(--danger);border-color:var(--danger);animation:voice-pulse 1.1s ease-in-out infinite} @keyframes voice-pulse{0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.45)}50%{box-shadow:0 0 0 7px rgba(229,72,77,0)}} .camera-modal-overlay{position:fixed;inset:0;background:rgba(5,20,17,.72);display:flex;align-items:center;justify-content:center;z-index:200;padding:16px} .camera-modal{background:var(--card);border-radius:var(--radius);padding:16px;width:min(520px,100%);display:grid;gap:12px;/* Sans ces deux lignes, un formulaire plus haut que l'ecran deborde et ses BOUTONS sont inatteignables, sans aucun moyen de defiler (signale le 20/09/2026 sur la fenetre Assistance). */max-height:calc(100vh - 32px);overflow-y:auto} .camera-modal video,.camera-modal .camera-preview{width:100%;border-radius:12px;background:#000;max-height:60vh;object-fit:contain} .camera-modal-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end} /* Fenetre Assistance (20/09/2026) : borner la hauteur ne suffisait pas. Le formulaire fait deux ecrans de haut ; ses boutons Annuler/Envoyer restaient sous la ligne de flottaison, et l'utilisateur ne les voyait toujours pas en ouvrant la fenetre. Ils sont donc sortis de la zone defilante et epingles en bas : seuls les champs defilent. */ .camera-modal.support-modal{display:flex;flex-direction:column;overflow:hidden} .support-modal form{display:flex;flex-direction:column;flex:1;min-height:0} .support-modal-body{flex:1;min-height:0;overflow-y:auto;padding-right:6px} .support-modal-actions{flex-shrink:0;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);background:var(--card)} .voice-memo-wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px} .support-widget-btn{position:fixed;right:20px;bottom:20px;z-index:150;background:var(--brand);color:#fff;border:0;border-radius:999px;padding:12px 18px;font-weight:750;box-shadow:0 8px 24px rgba(0,0,0,.18);cursor:pointer} .support-widget-btn:hover{transform:translateY(-1px)} /* En-tete public entre 820 et 1100 px : 7 entrees de menu plus 3 boutons dans une barre a hauteur fixe, sans retour a la ligne. Deja etroit avant l ajout du lien « Accueil » (v0.70.0) ; on resserre les espacements sur cette seule plage plutot que de masquer des entrees, qui est justement le defaut corrige. En dessous de 820 px, la regle existante masque tout le menu. */ @media(min-width:821px) and (max-width:1160px){.public-nav{height:auto;flex-wrap:wrap;justify-content:flex-start;padding:12px 0;gap:10px 16px}.nav-links{gap:15px;font-size:13px;order:3;width:100%}.nav-actions{margin-left:auto;gap:8px}.nav-actions .btn{padding:8px 12px;font-size:13px}} /* LE MENU PUBLIC NE SE CASSE PLUS MOT PAR MOT (audit du 06/10/2026, F-05). Au-dela de 1160 px, la marque, huit liens et trois boutons tenaient sur UNE ligne d'un conteneur borne a 1180 px : il en faut pres de 1 450. Les elements, compresses, coupaient leur texte — « Comment / ca / marche », « Payer / un / loyer » sur trois lignes, a 1 280 comme a 1 920 px, puisque le conteneur ne s'elargit pas avec l'ecran. A 821 px, a l'inverse, la ligne des liens debordait de 157 px. La disposition de la plage 821-1160 px (marque et boutons en haut, liens dessous) vaut desormais pour toutes les largeurs ou le menu s'affiche ; la ligne des liens passe a la ligne entre deux liens, jamais au milieu d'un lien ; un lien ou un bouton ne se coupe plus. Aucune entree n'est retiree : c'est le contenu que le client a choisi, seule sa mise en page change. */ @media(min-width:1161px){.public-nav{height:auto;flex-wrap:wrap;justify-content:flex-start;padding:12px 0;gap:10px 16px}.nav-links{order:3;width:100%}.nav-actions{margin-left:auto}} @media(min-width:821px){.nav-links{flex-wrap:wrap;row-gap:6px}} .nav-links a,.nav-actions .btn{white-space:nowrap} /* Mesure a 821 px pendant la meme verification : ce n'etait pas le menu mais le PIED de page — onze liens sur une ligne sans retour — qui debordait de 157 px, entre 821 px et environ 980 px. Il passe a la ligne. */ .footer-inner{flex-wrap:wrap} /* ── Vitrine des modules (v0.85.0) ───────────────────────────────────────── Cartes plutot qu'une liste : un catalogue qui grossit devient illisible en liste, et l'icone donne un repere visuel plus rapide qu'un libelle. */ .module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px} .module-card{background:var(--surface,#fff);border:1px solid var(--border,#e3e9e6);border-radius:12px; padding:16px;display:flex;flex-direction:column;gap:10px;transition:border-color .15s,box-shadow .15s} .module-card:hover{border-color:var(--primary,#075b47);box-shadow:0 2px 10px rgba(7,91,71,.07)} .module-card.is-on{border-color:var(--primary,#075b47);background:linear-gradient(180deg,rgba(7,91,71,.04),transparent 60%)} .module-card-head{display:flex;gap:12px;align-items:flex-start} .module-card-head h3{margin:0;font-size:15px;line-height:1.3} .module-ico{flex:0 0 40px;height:40px;display:grid;place-items:center;font-size:19px;border-radius:10px; background:var(--primary,#075b47);color:#fff} .module-card.is-on .module-ico{background:var(--primary,#075b47)} .module-price{margin:3px 0 0;font-size:12.5px;color:var(--muted,#6b7785)} .module-summary{margin:0;font-size:13px;line-height:1.5;color:var(--muted,#6b7785);flex:1} .module-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px; border:1px solid var(--border,#e3e9e6);font-size:12.5px} .module-chip em{font-style:normal;color:var(--muted,#6b7785)} .module-ico-sm{display:grid;place-items:center;width:22px;height:22px;border-radius:6px; background:var(--primary,#075b47);color:#fff;font-size:12px} /* ── Navigation groupee + vue « Tout voir » (v0.89.0) ────────────────────── Trente et une entrees a plat n'etaient plus lisibles : on classe. */ .side-section{display:block;margin-bottom:14px} .side-section-title{display:block;padding:0 14px 6px;font-size:10.5px;letter-spacing:.9px; text-transform:uppercase;opacity:.55;font-weight:700} .side-section + .side-section{border-top:1px solid rgba(255,255,255,.08);padding-top:12px} /* ── Les familles du menu se replient (v0.172.0) ─────────────────────────── Quarante-trois entrees depliees : l'audit du 04/10/2026 a mesure qu'un gerant « ne trouve plus rien ». Tout le mecanisme est dans
; ici il n'y a que l'habillage, et le marqueur par defaut du navigateur (un triangle noir) remplace par un chevron a la couleur de la barre. */ .side-group{display:block;margin-bottom:2px} .side-group>summary{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:10px; font-size:10.5px;letter-spacing:.9px;text-transform:uppercase;font-weight:700; color:rgba(230,240,237,.72);cursor:pointer;list-style:none} .side-group>summary::-webkit-details-marker{display:none} .side-group>summary::marker{content:''} /* Plus / moins dans un cercle : c'est le seul indice qu'il y a quelque chose dessous, et il doit rester visible meme replie. Choisi par le client le 05/10/2026, a la place du chevron qui tournait : « cette fleche-la se repete dans toutes les applications ». Le plus dit « il y a des rubriques a ouvrir », le moins « refermer » -- sans rotation, donc rien a deviner. */ .side-group>summary::before{content:'\2295';font-size:15px;line-height:1;width:20px;flex:0 0 20px; text-align:center;opacity:.9} .side-group[open]>summary::before{content:'\2296'} .side-group>summary:hover{background:rgba(255,255,255,.07);color:#fff} /* Un contour visible au clavier : le resume est le SEUL moyen d'ouvrir une famille sans souris, et le defaut du navigateur disparaissait sur le degrade sombre de la barre. */ .side-group>summary:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:1px} .side-group-nom{flex:1;min-width:0} /* Combien d'entrees derriere l'intitule : replie, le menu ne dirait sinon rien de ce qu'il contient. */ .side-group-compte{flex:0 0 auto;font-size:10px;font-weight:800;letter-spacing:0; background:rgba(255,255,255,.12);border-radius:999px;padding:1px 7px;opacity:.85} .side-group-corps{display:grid;gap:4px;padding:2px 0 8px} .side-group[open]>summary{color:#fff} /* Le solde de l'agence, en tete de la barre du haut (05/10/2026). Une pastille et pas un bouton : c'est d'abord un chiffre a lire, et le lien vers la recharge vient en plus. Elle vit dans la barre des raccourcis, poussee a droite contre l'engrenage : dans la barre du haut, elle coupait le texte du champ de recherche a 1280 px (mesure). */ .solde-pastille{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px; border:1px solid var(--border,#dfe5ea);background:var(--surface-2,#f5f7f9);color:var(--text,#102033); text-decoration:none;font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums} .solde-pastille:hover{border-color:var(--brand,#0b5d49)} .solde-pastille-libelle{color:var(--muted,#5b6b7a)} .solde-pastille-negatif b{color:var(--danger,#d64545)} .quick-links .solde-pastille{margin-left:auto} .quick-links .solde-pastille + .quick-link-edit{margin-left:0} .launcher-section{margin-bottom:26px} .launcher-section h2{font-size:15px;margin:0 0 12px;letter-spacing:.2px} .launcher-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px} .launcher-tile{display:flex;flex-direction:column;gap:6px;padding:15px;border-radius:12px; background:var(--surface,#fff);border:1px solid var(--border,#e3e9e6);text-decoration:none; color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s} .launcher-tile:hover{border-color:var(--primary,#075b47);box-shadow:0 3px 12px rgba(7,91,71,.09);transform:translateY(-1px)} .launcher-tile.is-current{border-color:var(--primary,#075b47); background:linear-gradient(180deg,rgba(7,91,71,.05),transparent 65%)} .launcher-ico{width:38px;height:38px;display:grid;place-items:center;border-radius:10px; background:var(--primary,#075b47);color:#fff;font-size:18px} .launcher-label{font-weight:700;font-size:13.5px;line-height:1.3} .launcher-desc{font-size:12px;line-height:1.45;color:var(--muted,#6b7785)} @media (max-width:600px){.launcher-grid{grid-template-columns:minmax(0,1fr)}} /* ─────────────────────── Aide contextuelle (v0.111.0) ─────────────────── Règle qui gouverne tout ce bloc : l'aide activée ne doit jamais déranger celui qui la garde allumée sans la lire. Le « ? » d'un champ occupe la place d'un caractère, et le texte ne s'ouvre qu'au clic. */ .help-toggle{border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-size:12.5px; display:inline-flex;align-items:center;gap:6px;background:white;color:var(--muted,#6b7785)} .help-toggle.is-on{border-color:var(--primary,#0b5d49);color:var(--primary,#0b5d49);font-weight:600} .help-toggle span[aria-hidden]{display:inline-flex;align-items:center;justify-content:center; width:16px;height:16px;border-radius:50%;border:1.5px solid currentColor;font-size:10px;font-weight:700;line-height:1} /* Le « ? » d'un champ : dans le flux du label, sans le décaler. */ .field-help{display:inline-block;vertical-align:middle;margin-left:6px} .field-help>summary{list-style:none;cursor:help;display:inline-flex;align-items:center;justify-content:center; width:15px;height:15px;border-radius:50%;background:var(--primary,#0b5d49);color:white; font-size:10px;font-weight:700;line-height:1;opacity:.75} .field-help>summary::-webkit-details-marker{display:none} .field-help>summary:hover,.field-help[open]>summary{opacity:1} .field-help-body{position:relative;margin-top:6px;padding:8px 10px;background:#f4faf7; border-left:3px solid var(--primary,#0b5d49);border-radius:0 6px 6px 0; font-size:11.5px;line-height:1.5;color:#445;font-weight:400;max-width:520px;white-space:normal} /* Le panneau de page : visible, mais jamais plus lourd qu'une carte. */ .page-help{margin:0 0 16px;border:1px solid var(--border);border-left:3px solid var(--primary,#0b5d49); border-radius:8px;background:#f8fbfa} .page-help>summary{list-style:none;cursor:pointer;padding:10px 14px;font-size:13px;color:var(--primary,#0b5d49); display:flex;align-items:center;gap:8px} .page-help>summary::-webkit-details-marker{display:none} .page-help>summary::before{content:'?';display:inline-flex;align-items:center;justify-content:center; width:17px;height:17px;border-radius:50%;background:var(--primary,#0b5d49);color:white; font-size:11px;font-weight:700;flex:none} .page-help-body{padding:0 14px 12px 39px;font-size:12.5px;line-height:1.6;color:#445} @media print{.field-help,.page-help,.help-toggle{display:none !important}} /* Champs de chiffres : plus de petits leviers (21/09/2026). Signale : « il ne faudrait pas qu'on ait les petits leviers qui font augmenter en comptant de 1 a 2, de 2 a 3 -- avec la souris ca peut causer des problemes. » Les fleches haut/bas du navigateur sont une cible minuscule collee au bord du champ ; un clic manque devient une somme fausse. Elles disparaissent, la saisie au clavier reste identique, et le clavier numerique du telephone aussi -- c'est bien pour cela que le type `number` est conserve. La molette et les fleches du clavier sont neutralisees par `numeric-guard.js` : le style seul ne suffit pas. */ input[type=number]{-moz-appearance:textfield;appearance:textfield} input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0} /* ── Le panneau des notifications ─────────────────────────────────────── DEFAUT SIGNALE PAR CAPTURE LE 01/10/2026, sur telephone. Le panneau portait `right:0;left:auto` dans un style EN LIGNE. Ce `right:0` s'ancre sur le parent positionne -- ici le minuscule conteneur de la cloche, qui se trouve au MILIEU de la barre sur telephone. Un panneau de 340px ancre a droite sur un bouton situe a x=223 commence donc a x=-117 : il sortait de 117px hors de l'ecran a gauche, et recouvrait le titre de la page. Mesure a 375px avant correction : gauche=-117, droite=223. Sur grand ecran le comportement est juste -- la cloche y est a droite -- donc on ne change que le telephone : le panneau s'y ancre sur l'ECRAN et non sur la cloche. Un style en ligne ne pouvant pas repondre a une media query, la position a d'abord ete sortie du gabarit. */ .notif-panel{width:min(340px,calc(100vw - 24px));left:auto;right:0} @media (max-width:820px){ /* `fixed` et non `absolute` : l'ancrage doit se faire sur l'ecran, pas sur un parent large de 38px. 76px = la barre du haut (70px) + les 6px d'ecart que `.search-dropdown` laisse deja sur grand ecran. */ .notif-panel{position:fixed;top:76px;left:12px;right:12px;width:auto; max-height:calc(100dvh - 96px)} } /* ── Le bareme public, sur telephone ──────────────────────────────────── `.table-wrap table{min-width:560px}` est juste pour les tableaux de gestion -- une dizaine de colonnes qui doivent defiler plutot que de s'ecraser. Mais le bareme de la page d'accueil n'a que DEUX colonnes : ce plancher le faisait defiler horizontalement sur un ecran de 375px, alors qu'il y tient largement. On annule donc le plancher pour ce tableau-la seulement. La specificite (0,2,1) passe devant la regle generale (0,1,1). */ .table-wrap table.price-table{min-width:0;width:100%} @media (max-width:420px){ .price-table th,.price-table td{padding:7px 6px;font-size:13.5px} } /* ── Barre de navigation de l'application installee ──────────────────── Le manifeste declare `display: standalone` : une fois posee sur l'ecran d'accueil, l'application s'ouvre sans la barre du navigateur -- plus de fleche retour, plus de bouton actualiser. Trois boutons les remplacent. MASQUEE PAR DEFAUT, et c'est le point important : dans un navigateur normal ces gestes existent deja juste au-dessus, et la barre volerait 54px de hauteur pour rien. Seul `barre-navigation-installee.js` la revele, en posant `est-installee` sur apres avoir constate le mode autonome. Si le JavaScript ne tourne pas, elle reste invisible. Aucune couleur en dur : `--brand`, `--card`, `--border` et `--muted` sont reecrites par agence (theme personnalisable, v0.62.0). La barre suit donc la charte de l'agence sans rien en inventer. ──────────────────────────────────────────────────────────────────── */ .barre-installee{display:none} html.est-installee{ /* Hauteur publiee en variable : c'est elle qui sert a reserver la place en bas de chaque gabarit et a soulever ce qui y vivait deja. Une valeur recopiee a six endroits aurait derive des le premier reglage. */ --bni-hauteur:54px; --bni-reserve:calc(var(--bni-hauteur) + env(safe-area-inset-bottom,0px)); } html.est-installee .barre-installee{ display:flex;align-items:stretch; position:fixed;left:0;right:0;bottom:0;z-index:45; background:var(--card,#fff); border-top:1px solid var(--border,#e4e7ec); /* La zone sure d'un iPhone : sans ce complement, la barre d'accueil du telephone passe PAR-DESSUS les trois boutons, et le plus a droite devient inatteignable. */ padding-bottom:env(safe-area-inset-bottom,0px); box-shadow:0 -2px 10px rgba(16,32,51,.06); } html.est-installee .barre-installee-bouton{ flex:1;border:0;background:transparent;cursor:pointer; min-height:var(--bni-hauteur); display:flex;align-items:center;justify-content:center; font-size:26px;line-height:1;color:var(--brand,#075b47); /* Pas de `transform` au survol, contrairement a `.btn` : une barre collee au bas de l'ecran qui bouge sous le pouce donne l'impression d'avoir rate la cible. */ transition:background .15s ease,opacity .15s ease; } html.est-installee .barre-installee-bouton:hover:not(:disabled){background:rgba(16,32,51,.05)} html.est-installee .barre-installee-bouton:active:not(:disabled){background:rgba(16,32,51,.1)} /* Eteint : visiblement hors service, et reellement inerte. Un bouton mort qui reagit au doigt est pire qu'un bouton absent -- on appuie trois fois avant de comprendre que rien ne viendra. */ html.est-installee .barre-installee-bouton:disabled{ color:var(--muted,#667085);opacity:.32;cursor:default;pointer-events:none; } html.est-installee .barre-installee-bouton:focus-visible{ outline:2px solid var(--brand,#075b47);outline-offset:-3px; } @media (prefers-reduced-motion:reduce){ html.est-installee .barre-installee-bouton{transition:none} } /* ── Rendre la place, pour ne jamais cacher de contenu ───────────────── `.app-shell` et `.rp-shell` montent a `min-height:100vh` : une simple marge basse sur `body` aurait ajoute une barre de defilement permanente sur chaque page, meme courte. On raccourcit donc l'enveloppe de la hauteur reservee, et on complete le rembourrage des zones de contenu. */ html.est-installee .app-shell, html.est-installee .rp-shell, html.est-installee .auth-page{min-height:calc(100vh - var(--bni-reserve))} html.est-installee .page{padding-bottom:calc(var(--bni-reserve) + 24px)} html.est-installee .rp-body{padding-bottom:calc(var(--bni-reserve) + 16px)} html.est-installee .footer{padding-bottom:calc(var(--bni-reserve) + 38px)} /* ── Ce qui vivait deja en bas de l'ecran ────────────────────────────── Les deux portails portent `.rp-nav` en `position:sticky;bottom:0`, et l'espace agence deux elements flottants. Sans ces trois regles, la nouvelle barre passerait PAR-DESSUS : deux barres superposees, et le menu du locataire inatteignable. La specificite (html + classe) passe devant les definitions d'origine, y compris celles des `