:root{
  --navy:#061a3a;
  --navy-2:#0b2a57;
  --navy-3:#133e73;
  --red:#e3131b;
  --green:#0e9b55;
  --green-soft:#e8f8ef;
  --ink:#101a2e;
  --muted:#5f6d82;
  --line:#e3e8ef;
  --soft:#f7f9fc;
  --shadow:0 12px 30px rgba(6,26,58,.09);
  --radius:22px;
  --container:min(1480px, calc(100% - 72px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#fff}
body{margin:0;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:#fff;line-height:1.45}
body:before{content:"";display:block;height:0}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
svg{display:block;max-width:100%}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.container{width:var(--container);margin:0 auto}
.section{position:relative;min-height:calc(100vh - 108px);padding:42px 0 36px;border-bottom:1px solid #f1f3f6;display:flex;align-items:center}
.section .container{width:var(--container)}
.section-tight{padding-top:30px;padding-bottom:30px}
.section-end{padding-bottom:0;display:block}
.announcement{height:38px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:650;font-size:16px;letter-spacing:.01em}
.announcement svg{width:18px;height:18px;margin-right:9px}
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 12px rgba(6,26,58,.04)}
.header-main{height:88px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{display:flex;align-items:center;gap:14px;min-width:330px}
.brand-mark{width:58px;height:58px;flex:none}
.brand-copy{line-height:1.03}
.brand-title{font-family:Georgia,"Times New Roman",serif;font-size:31px;font-weight:700;color:var(--navy);white-space:nowrap}
.brand-sub{font-size:12px;letter-spacing:.38em;color:#6d788b;text-transform:uppercase;margin-top:8px;position:relative;white-space:nowrap}
.brand-sub:after{content:"";position:absolute;left:0;bottom:-10px;width:104px;height:4px;background:linear-gradient(90deg,var(--navy) 0 28%,transparent 28% 52%,var(--red) 52% 82%,transparent 82%)}
.main-nav{display:flex;align-items:center;gap:48px;font-weight:700;color:#101c34;white-space:nowrap}
.main-nav a{font-size:16px}
.dashboard-btn{display:inline-flex;align-items:center;gap:11px;background:var(--red);color:#fff;padding:14px 20px;border-radius:10px;font-weight:750;box-shadow:0 7px 18px rgba(227,19,27,.18);white-space:nowrap}
.dashboard-btn svg{width:20px;height:20px}
.h1{font-family:Georgia,"Times New Roman",serif;color:var(--navy);font-size:56px;line-height:1.08;margin:0 0 22px;font-weight:700;letter-spacing:-.015em}
.h1 .red{color:var(--red)}
.h2{font-family:Georgia,"Times New Roman",serif;color:var(--navy);font-size:44px;line-height:1.08;margin:0 0 18px;font-weight:700}
.h2 .red{color:var(--red)}
.lead{font-size:20px;color:#1f2f4e;line-height:1.55;margin:0 0 24px;max-width:650px}
.muted{color:var(--muted)}
.red{color:var(--red)}
.green{color:var(--green)}
.bold{font-weight:800}
.serif{font-family:Georgia,"Times New Roman",serif}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.soft-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 22px rgba(6,26,58,.06)}
.icon-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:0 5px 16px rgba(6,26,58,.05)}
.icon-card svg{width:38px;height:38px;flex:none}
.btn{min-height:56px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;gap:13px;padding:14px 26px;font-weight:800;border:1px solid transparent;font-size:17px;line-height:1.25;text-align:center}
.btn-red{background:var(--red);color:#fff;box-shadow:0 7px 18px rgba(227,19,27,.16)}
.btn-outline{background:#fff;color:var(--red);border-color:var(--red)}
.btn-whatsapp{background:#fff;color:#08793f;border:1px solid #2eb86e}
.btn svg{width:22px;height:22px}
.badge-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:26px 0}
.badge{min-height:78px;display:flex;align-items:center;gap:14px;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 6px 18px rgba(6,26,58,.06);font-size:14px;font-weight:700}
.badge svg{width:34px;height:34px;flex:none}
.workflow{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 18px;margin-top:26px;box-shadow:0 5px 18px rgba(6,26,58,.04)}
.workflow-item{display:flex;align-items:center;justify-content:center;gap:14px;min-height:56px;font-weight:750;position:relative}
.workflow-item:not(:last-child):after{content:"›";position:absolute;right:-6px;color:var(--navy);font-size:28px;font-weight:400}
.workflow-item svg{width:42px;height:42px}
.profession-strip{display:grid;grid-template-columns:repeat(10,1fr);gap:10px;margin-top:24px}
.profession-mini{border:1px solid var(--line);border-radius:14px;background:#fff;min-height:84px;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px;text-align:center;font-size:12px;font-weight:750;box-shadow:0 4px 14px rgba(6,26,58,.04)}
.profession-mini svg{width:32px;height:32px;flex:none}
.two-col{display:grid;grid-template-columns:1fr 1.6fr;gap:40px;align-items:center}
.two-col-equal{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px}

/* Devices */
.laptop{position:relative;padding:15px 15px 0;background:linear-gradient(180deg,#151515,#090909);border-radius:28px 28px 12px 12px;box-shadow:0 18px 38px rgba(0,0,0,.18)}
.laptop:after{content:"";position:absolute;left:-7%;right:-7%;height:30px;bottom:-26px;background:linear-gradient(180deg,#a6a8ab,#5c5e61);border-radius:0 0 65% 65% / 0 0 100% 100%;box-shadow:0 7px 8px rgba(0,0,0,.15)}
.screen{background:#fff;border-radius:14px;overflow:hidden;min-height:445px}
.app-shell{display:grid;grid-template-columns:168px 1fr;min-height:445px}
.app-sidebar{background:linear-gradient(180deg,#08295b,#071b3f);color:#fff;padding:17px 14px}
.app-brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:12px;margin-bottom:20px}
.app-brand svg{width:24px;height:24px}
.app-menu{display:grid;gap:6px}
.app-menu div{padding:9px 10px;border-radius:9px;font-size:11px;opacity:.9;display:flex;gap:8px;align-items:center}
.app-menu div.active{background:#174984}
.app-menu svg{width:15px;height:15px}
.app-main{padding:18px;background:#fff}
.app-top{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:14px}
.app-title{font-weight:850;font-size:18px}
.fake-search{height:34px;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;color:#9aa4b2;font-size:10px;padding:0 12px;min-width:270px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.kpi{border:1px solid var(--line);border-radius:9px;padding:11px;background:#fff}
.kpi small{display:block;color:#6a7382;font-size:9px;margin-bottom:5px}
.kpi strong{font-size:17px;color:#152035}
.kpi em{display:block;font-style:normal;color:var(--green);font-size:8px;margin-top:2px}
.activity-list{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.activity-list .row{display:grid;grid-template-columns:34px 1.45fr .65fr .65fr;align-items:center;gap:8px;padding:8px 9px;border-bottom:1px solid #edf0f3;font-size:9px}
.activity-list .row:last-child{border-bottom:0}
.thumb{width:30px;height:30px;border-radius:6px;background:#f1f3f6;display:grid;place-items:center;color:var(--navy)}
.thumb svg{width:26px;height:26px}
.status{font-size:8px;border-radius:8px;padding:4px 7px;text-align:center;background:#eaf8ef;color:#18864e;font-weight:800}
.status.blue{background:#eaf3ff;color:#2c6db9}.status.purple{background:#f0eafe;color:#7953b8}.status.orange{background:#fff1dd;color:#b96b10}
.phone{position:relative;width:178px;padding:9px;background:#0b0c0d;border-radius:34px;box-shadow:0 14px 32px rgba(0,0,0,.23)}
.phone-screen{min-height:366px;border-radius:26px;background:#fff;overflow:hidden;padding:13px}
.phone-notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:62px;height:17px;border-radius:12px;background:#050505}
.phone-header{font-size:9px;padding-top:12px;margin-bottom:11px;color:#222}
.phone-title{font-weight:800;font-size:11px;margin-bottom:8px}
.phone-product{background:#f4f5f7;border-radius:10px;padding:8px;margin-bottom:8px;display:grid;place-items:center}
.phone-product svg{height:100px;width:100px}
.phone-meta{display:grid;grid-template-columns:1fr 1fr;gap:4px;font-size:7px;color:#5d6677}
.phone-meta b{color:#202737;text-align:right}
.phone-btn{margin-top:10px;background:var(--navy);color:#fff;border-radius:7px;padding:8px;text-align:center;font-size:8px;font-weight:800}
.device-wrap{position:relative;padding-right:130px}
.device-wrap .phone{position:absolute;right:5px;bottom:-10px}
.assurance-stack{position:absolute;right:0;top:34px;display:grid;gap:22px;width:150px}
.assurance-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:18px 12px;text-align:center;font-size:14px;font-weight:800;min-height:118px;display:grid;place-items:center;gap:6px}
.assurance-card svg{width:40px;height:40px}

/* section 1 */
.hero1-grid{display:grid;grid-template-columns:.95fr 1.5fr;gap:36px;align-items:center}
.hero-actions{display:flex;gap:16px;align-items:center;margin-top:14px}
.hero-note{font-size:14px;color:#2e3f5d;margin-top:12px}

/* section 2 */
.object-sync{display:grid;grid-template-columns:.8fr 1.05fr 1fr;gap:24px;align-items:start}
.sync-side{display:grid;gap:14px}
.sync-main{border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow);padding:14px 16px}
.sync-main h3{font-family:Georgia,"Times New Roman",serif;font-size:22px;color:var(--navy);margin:0 0 8px}
.object-row{display:grid;grid-template-columns:44px 1fr 78px 90px;align-items:center;gap:8px;padding:7px 4px;border-bottom:1px solid #edf0f3;font-size:9px}.object-row:last-child{border-bottom:0}
.object-row .oimg{width:42px;height:42px;border-radius:7px;background:#f2f4f7;display:grid;place-items:center}.object-row .oimg svg{width:36px;height:36px}
.object-row .green-dot:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:5px}.object-row .orange-dot:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#f49a2d;margin-right:5px}
.sync-box{position:relative;background:#fff;border:1px solid var(--line);border-radius:13px;padding:12px 14px;display:flex;align-items:center;gap:12px;box-shadow:0 5px 15px rgba(6,26,58,.05);font-size:12px;font-weight:750}.sync-box svg{width:32px;height:32px;flex:none}.sync-box small{display:block;color:#718095;font-weight:600;margin-top:2px}
.benefit-row{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:24px}.benefit-card{border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;gap:12px;align-items:center;background:#fff;min-height:82px}.benefit-card svg{width:35px;height:35px}.benefit-card strong{display:block;font-size:13px}.benefit-card small{display:block;color:#6d788c;font-size:10px;margin-top:2px}.benefit-card.dark{background:var(--navy);color:#fff;grid-column:span 1}.benefit-card.dark small{color:#fff;font-size:16px}.benefit-card.dark .red{color:#ff313b}

/* section 3 */
.backoffice-grid{display:grid;grid-template-columns:.85fr 1.45fr;gap:34px;align-items:start}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}.feature-tile{border:1px solid var(--line);border-radius:12px;min-height:76px;padding:11px 8px;display:grid;place-items:center;text-align:center;font-weight:700;font-size:11px;background:#fff}.feature-tile svg{width:31px;height:31px;margin-bottom:5px}
.dashboard-visual .screen{min-height:470px}.dashboard-visual .app-shell{min-height:470px}.dashboard-charts{display:grid;grid-template-columns:1fr 1.5fr;gap:10px}.donut-card,.line-card,.table-card{border:1px solid var(--line);border-radius:10px;padding:10px;background:#fff}.donut{width:118px;height:118px;border-radius:50%;background:conic-gradient(#2572d6 0 28%,#56b78a 28% 50%,#7db9d8 50% 68%,#f39a53 68% 82%,#d77da2 82% 93%,#7158c7 93% 100%);position:relative;margin:6px auto}.donut:after{content:"118 450 €\A Total";white-space:pre;position:absolute;inset:29px;border-radius:50%;background:#fff;display:grid;place-items:center;text-align:center;font-size:10px;font-weight:800}.legend{display:grid;gap:4px;font-size:8px;color:#4f5b6f}.legend span:before{content:"";width:6px;height:6px;border-radius:50%;display:inline-block;background:#2572d6;margin-right:5px}.line-chart{height:122px;position:relative;background:repeating-linear-gradient(to top,#eef2f6 0 1px,transparent 1px 24px),repeating-linear-gradient(to right,#f3f5f8 0 1px,transparent 1px 42px);overflow:hidden}.line-chart svg{width:100%;height:100%}.lower-charts{display:grid;grid-template-columns:1.1fr .75fr .9fr;gap:10px;margin-top:10px}.mini-table{font-size:7.5px;width:100%;border-collapse:collapse}.mini-table td{padding:3px 0;border-bottom:1px solid #eff1f4}.mini-table tr:last-child td{border-bottom:0}.stock-metric strong{font-size:18px}.latest-list{font-size:7.6px;display:grid;gap:6px}
.enytrack{margin-top:26px;border:1px solid var(--line);border-radius:16px;min-height:96px;padding:16px 30px;display:grid;grid-template-columns:220px 70px 1fr 190px;align-items:center;gap:20px;background:#fff}.enytrack-logo{font-weight:900;font-size:26px;letter-spacing:.02em;color:var(--navy)}.enytrack-logo span{color:var(--red)}.enytrack small{display:block;color:#778195;font-size:11px}.enytrack .btn{height:46px;font-size:13px;color:var(--navy);border:1px solid var(--line)}

/* section 4 */
.shop-head{text-align:center;margin-bottom:24px}.shop-head .h1{font-size:48px;margin-bottom:10px}.shop-head p{font-size:18px;color:#31405e;margin:0}.shop-layout{display:grid;grid-template-columns:1fr 1.1fr .58fr;gap:18px}.preview-card{border:1px solid var(--line);border-radius:16px;padding:14px;background:#fff;box-shadow:0 6px 17px rgba(6,26,58,.05)}.preview-title{display:flex;align-items:center;gap:10px;font-family:Georgia,"Times New Roman",serif;font-size:25px;color:var(--navy);font-weight:700;margin-bottom:4px}.preview-title svg{width:38px;height:38px}.preview-sub{font-size:12px;color:#42516d;margin-bottom:12px}.showcase-web{border:1px solid #dcdfe5;border-radius:10px;overflow:hidden;background:#fbf7ef}.mini-site-nav{height:30px;background:#fff;display:flex;justify-content:space-between;align-items:center;padding:0 10px;font-size:7px}.mini-site-body{display:grid;grid-template-columns:.8fr 1.35fr;min-height:276px}.mini-site-copy{padding:14px;font-family:Georgia,"Times New Roman",serif}.mini-site-copy h4{margin:0 0 4px;font-size:20px}.mini-site-copy p{font-family:Inter,system-ui,sans-serif;font-size:8px;line-height:1.6}.storefront{position:relative;background:linear-gradient(#c9c0b2,#eee5d7);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}.storefront:before{content:"MAISON HÉRITAGE";position:absolute;top:24px;left:50%;transform:translateX(-50%);width:78%;background:var(--navy);color:#e0b967;text-align:center;padding:7px 0;font-family:Georgia,serif;font-size:13px}.storefront-door{width:62%;height:67%;background:#0b2d55;border:9px solid #082140;position:relative;box-shadow:0 0 0 3px #6c5a4a}.storefront-door:before,.storefront-door:after{content:"";position:absolute;top:12px;bottom:12px;width:36%;border:3px solid #2f5a81;background:linear-gradient(180deg,rgba(255,208,119,.45),rgba(22,29,38,.15));}.storefront-door:before{left:7%}.storefront-door:after{right:7%}.mini-products{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.product-card{border:1px solid var(--line);border-radius:10px;padding:7px;background:#fff}.product-card .pic{height:80px;background:#f4f4f2;border-radius:7px;display:grid;place-items:center;margin-bottom:5px}.product-card .pic svg{width:75px;height:75px}.product-card strong{font-size:9px}.product-card small{display:block;color:#657087;font-size:7.5px}.feature-list{border:1px solid var(--line);border-radius:15px;padding:6px 16px;background:#fff}.feature-list div{min-height:60px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);font-size:13px;font-weight:700}.feature-list div:last-child{border-bottom:0;color:var(--red)}.feature-list svg{width:30px;height:30px}.shop-choice{margin-top:20px;border:1px solid var(--line);border-radius:15px;display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;min-height:102px;background:#fff}.choice{display:flex;align-items:center;gap:18px;padding:0 32px}.choice .circle{width:58px;height:58px;border-radius:50%;background:#f6f7fa;display:grid;place-items:center}.choice svg{width:38px;height:38px}.choice strong{display:block;font-family:Georgia,serif;font-size:26px;color:var(--navy)}.choice small{font-size:13px}.choice-arrow{margin-left:auto;color:var(--red);font-size:38px}.ou{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-weight:800}

/* section 5 */
.prof-grid-layout{display:grid;grid-template-columns:.68fr 1.55fr;gap:38px;align-items:start}.prof-benefits{display:grid;gap:14px;margin-top:24px}.prof-benefit{display:flex;gap:16px;align-items:flex-start}.prof-benefit .ibox{width:66px;height:66px;border:1px solid var(--line);border-radius:14px;display:grid;place-items:center;box-shadow:0 5px 14px rgba(6,26,58,.05);flex:none}.prof-benefit svg{width:38px;height:38px}.prof-benefit strong{font-size:16px}.prof-benefit p{font-size:12px;color:#53617a;margin:4px 0 0;line-height:1.45}.prof-card-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.prof-card{border:1px solid var(--line);border-radius:13px;background:#fff;overflow:hidden;box-shadow:0 6px 14px rgba(6,26,58,.04)}.prof-card .art{height:174px;background:linear-gradient(135deg,#2b1a11,#50321d);display:grid;place-items:center;overflow:hidden}.prof-card .art svg{width:90%;height:90%}.prof-card .pcopy{text-align:center;padding:10px 7px 13px}.prof-card h4{font-family:Georgia,serif;font-size:17px;color:var(--navy);margin:0}.prof-card p{font-size:11px;color:#51617c;margin:3px 0 0}

/* section 6 */
.smart-head{display:grid;grid-template-columns:1fr .7fr;align-items:end;margin-bottom:22px}.smart-head p{font-size:18px;color:#253755;margin:0 0 10px}.smart-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.smart-card{border:1px solid var(--line);border-radius:16px;background:#fff;min-height:212px;padding:18px 16px;display:grid;grid-template-columns:92px 1fr;gap:10px;align-items:center;box-shadow:0 5px 16px rgba(6,26,58,.04)}.smart-card svg.illus{width:88px;height:120px}.smart-card h4{font-size:17px;margin:0 0 10px;color:var(--navy)}.smart-card ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:12px}.smart-card li:before{content:"•";color:var(--red);font-weight:900;margin-right:10px}.smart-banner{margin-top:22px;border:1px solid var(--line);border-radius:15px;padding:16px 26px;display:flex;align-items:center;justify-content:center;gap:28px;font-family:Georgia,serif;font-size:26px;color:var(--navy)}.smart-banner svg{width:55px;height:55px}

/* section 7 */
.security-grid{display:grid;grid-template-columns:.62fr 1.45fr .48fr;gap:22px;align-items:center}.security-list{display:grid;gap:7px}.security-item{min-height:41px;border:1px solid var(--line);border-radius:9px;display:flex;align-items:center;gap:12px;padding:7px 12px;font-weight:700;font-size:13px;position:relative}.num{width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:11px;margin-left:-36px}.security-item svg{width:24px;height:24px}.control-screen .screen{min-height:430px}.control-table{border:1px solid var(--line);border-radius:9px;overflow:hidden}.control-row{display:grid;grid-template-columns:90px 88px 68px 75px 1fr 75px 90px 54px;gap:7px;padding:7px 8px;border-bottom:1px solid #edf0f4;font-size:7px;align-items:center}.control-row.head{background:#f5f7fa;font-weight:800}.control-row:last-child{border-bottom:0}.verification{border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow);padding:18px 16px;text-align:center}.verification h3{font-size:18px;color:var(--navy);margin:0 0 8px}.qr{width:130px;height:130px;margin:12px auto;background:#fff;border:8px solid #fff;display:grid;grid-template-columns:repeat(13,1fr);grid-template-rows:repeat(13,1fr);gap:1px}.qr i{background:#111}.verify-ok{background:var(--green-soft);color:#137347;border-radius:11px;padding:12px;font-weight:800;margin:10px 0}.security-features{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:18px}.sec-card{border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;gap:12px;align-items:flex-start}.sec-card svg{width:38px;height:38px}.sec-card strong{font-size:13px}.sec-card small{display:block;color:#647188;font-size:9.5px;margin-top:4px}.proof-strip{border:1px solid var(--line);border-radius:14px;margin-top:20px;padding:15px 22px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px}.proof-strip strong{font-size:16px}.proof-strip small{display:block;color:#5f6c82;margin-top:2px}.authority-list{display:flex;gap:22px;align-items:center}.authority{display:flex;gap:8px;align-items:center;font-size:11px}.authority svg{width:30px;height:30px}

/* section 8 */
.support-grid{display:grid;grid-template-columns:.92fr .6fr .85fr;gap:28px;align-items:start}.support-list{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:18px}.support-row{min-height:67px;display:grid;grid-template-columns:48px 1fr 22px;gap:10px;align-items:center;padding:8px 15px;border-bottom:1px solid var(--line)}.support-row:last-child{border-bottom:0}.support-row svg{width:34px;height:34px}.support-row strong{font-size:14px}.support-row small{display:block;color:#5d6b82;font-size:11px;margin-top:2px}.support-card{text-align:center;padding:36px 24px}.support-card .headset{width:82px;height:82px;margin:0 auto 16px;position:relative}.support-card .headset svg{width:100%;height:100%}.support-card h3{font-size:25px;color:var(--navy);margin:0 0 8px}.support-card p{font-size:13px;color:#53617b;margin:0 0 20px}.or{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;margin:12px auto;font-weight:800}.whatsapp-box{border:1px solid #28bb6b;border-radius:12px;padding:10px;color:#08783f}.whatsapp-box strong{font-size:23px}.chat-phone{width:290px;margin:0 auto;padding:11px;background:#090a0b;border-radius:38px;box-shadow:0 17px 38px rgba(0,0,0,.25)}.chat-screen{background:#f3efe8;border-radius:30px;min-height:545px;overflow:hidden}.chat-top{height:68px;background:#fff;padding:20px 16px 10px;font-size:12px;font-weight:800}.chat-msgs{padding:10px 12px;display:grid;gap:8px}.bubble{max-width:85%;padding:8px 10px;border-radius:9px;background:#fff;font-size:9px;line-height:1.35;box-shadow:0 2px 4px rgba(0,0,0,.06)}.bubble.me{background:#d7f2c7;margin-left:auto}.faq-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:20px}.faq-card{border:1px solid var(--line);border-radius:14px;padding:18px 16px;min-height:142px}.faq-card svg{width:34px;height:34px}.faq-card strong{display:block;font-size:14px;margin:8px 0}.faq-card p{margin:0;color:#5b6880;font-size:11px}

/* section 9 */
.pricing-head{text-align:center}.pricing-head .h1{font-size:50px}.pricing-head p{font-size:18px;color:#31415e}.pricing-panel{margin-top:20px;padding:28px;display:grid;grid-template-columns:.7fr 1fr .85fr;gap:28px}.price-col{padding-right:22px;border-right:1px solid var(--line)}.free-objects{display:flex;gap:16px;align-items:center}.free-objects .gift-circle{width:66px;height:66px;border-radius:50%;border:1px solid #f4c8cb;display:grid;place-items:center}.free-objects svg{width:40px;height:40px}.free-objects strong{font-size:46px;color:var(--navy)}.free-objects span{font-size:24px}.big-price{font-size:64px;color:var(--red);font-weight:850;margin:20px 0 12px}.big-price small{font-size:18px;color:var(--navy);font-weight:700}.tabs{display:grid;grid-template-columns:1fr 1fr 70px;border:1px solid var(--line);border-radius:28px;overflow:hidden;margin-bottom:18px}.tabs span{padding:12px;text-align:center;font-size:13px}.tabs .active{border:1px solid var(--red);border-radius:28px}.tabs .save{background:#eaf7ef;color:#17884f}.annual{border:1px solid #57bd83;border-radius:12px;padding:13px;color:#0d8448;font-weight:800}.annual small{display:block;font-weight:600}.included h3,.compare h3{text-align:center;font-size:20px;margin:3px 0 17px}.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 24px}.check{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700}.check svg{width:22px;height:22px}.compare-box{background:#fbfbfc;border-radius:12px;padding:12px}.compare-top{display:grid;grid-template-columns:1fr 40px 1fr;align-items:center;gap:8px}.compare-pill{text-align:center;padding:10px;border-radius:8px;background:#eef0f3;font-size:11px;font-weight:750}.compare-pill.dark{background:var(--navy);color:#fff}.compare-row{display:grid;grid-template-columns:1fr 40px 1fr;align-items:center;padding:16px 4px;border-top:1px solid var(--line);font-size:11px;font-weight:700}.compare-row:first-of-type{margin-top:6px}.compare-row svg{width:30px;height:30px}.price-ctas{display:grid;grid-template-columns:.8fr 1.1fr;gap:18px;margin-top:20px}.price-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:18px}.price-benefit{min-height:78px;border:1px solid var(--line);border-radius:13px;padding:12px 18px;display:flex;gap:14px;align-items:center;font-size:12px;font-weight:700}.price-benefit svg{width:36px;height:36px}

/* section 10 */
.final-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:26px;align-items:start}.final-pitch{padding:26px 28px}.final-pitch-body{display:grid;grid-template-columns:210px 1fr;gap:20px;align-items:center}.devices-illustration{height:190px;position:relative}.devices-illustration .mini-laptop{position:absolute;width:150px;height:100px;left:28px;top:46px;border:5px solid var(--navy);border-radius:8px;background:#fff;box-shadow:0 8px 0 -3px #666}.devices-illustration .mini-phone{position:absolute;width:45px;height:92px;left:0;top:65px;border:4px solid var(--navy);border-radius:10px;background:#fff}.devices-illustration .shield{position:absolute;width:115px;height:130px;right:3px;top:6px}.devices-illustration .shield svg{width:100%;height:100%}.final-pitch h3{font-family:Georgia,serif;font-size:30px;color:var(--navy);line-height:1.08;margin:0 0 16px}.final-bottom-badges{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}.final-bottom-badges .badge{box-shadow:none;min-height:62px}.accordion{padding:8px 18px}.accordion details{border-bottom:1px solid var(--line)}.accordion details:last-child{border-bottom:0}.accordion summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1.15fr .9fr 30px;align-items:center;min-height:66px;font-size:13px;font-weight:750}.accordion summary::-webkit-details-marker{display:none}.accordion summary span:nth-child(2){font-weight:500;color:#617087}.accordion summary b{font-size:22px;color:#405271;text-align:right}.site-footer{margin-top:24px;border-top:1px solid var(--line);padding:20px 0 16px}.footer-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:38px}.footer-brand p{color:#52617a;font-size:12px;max-width:300px}.footer-col h4{font-size:13px;margin:0 0 10px}.footer-col a{display:block;font-size:11px;color:#42516c;margin:7px 0}.footer-bottom{border-top:1px solid var(--line);margin-top:18px;padding:14px 0 4px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;font-size:11px}.footer-bottom div:nth-child(2){text-align:center}.footer-bottom div:nth-child(3){text-align:right}.france-data{display:flex;gap:20px;align-items:center;margin-top:16px;font-size:11px}.flag-fr{width:25px;height:25px;border-radius:50%;background:linear-gradient(90deg,#0b50b4 0 33%,#fff 33% 66%,#ef233c 66%);border:1px solid #e1e5ea}

/* vector illustration helpers */
.illus-fill-navy{fill:var(--navy)}.illus-stroke-navy{stroke:var(--navy)}.illus-fill-red{fill:var(--red)}

@media (max-width:1200px){
  :root{--container:min(1120px,calc(100% - 36px))}
  .main-nav{gap:24px}.brand{min-width:250px}.brand-title{font-size:26px}.brand-mark{width:50px;height:50px}
  .h1{font-size:46px}.h2{font-size:38px}
  .hero1-grid,.backoffice-grid,.prof-grid-layout,.final-grid{grid-template-columns:1fr}
  .device-wrap{max-width:850px;margin:0 auto;padding-right:130px}.prof-card-grid{grid-template-columns:repeat(5,1fr)}
  .shop-layout{grid-template-columns:1fr 1fr}.feature-list{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr)}.feature-list div{border-right:1px solid var(--line);border-bottom:0}.feature-list div:last-child{border-right:0}
  .security-grid{grid-template-columns:.7fr 1.3fr}.verification{grid-column:1/-1;max-width:400px;margin:0 auto;width:100%}
  .support-grid{grid-template-columns:1fr 1fr}.chat-phone{grid-column:1/-1}
}
@media (max-width:900px){
  .announcement{font-size:13px}.header-main{height:auto;padding:16px 0;flex-wrap:wrap}.brand{min-width:auto}.main-nav{order:3;width:100%;justify-content:space-between;gap:10px;overflow:auto}.dashboard-btn{margin-left:auto}.section{min-height:auto;padding:54px 0}.h1{font-size:40px}.lead{font-size:17px}
  .badge-row,.price-benefits,.faq-row,.security-features,.benefit-row{grid-template-columns:repeat(2,1fr)}
  .workflow{grid-template-columns:1fr;gap:4px}.workflow-item:not(:last-child):after{content:"↓";right:50%;bottom:-16px;top:auto}.profession-strip{grid-template-columns:repeat(5,1fr)}
  .two-col,.two-col-equal,.object-sync,.shop-layout,.smart-head,.security-grid,.support-grid,.pricing-panel{grid-template-columns:1fr}
  .smart-grid,.prof-card-grid{grid-template-columns:repeat(2,1fr)}.pricing-panel{padding:18px}.price-col{border-right:0;border-bottom:1px solid var(--line);padding:0 0 18px}
  .shop-layout .feature-list{display:block;grid-column:auto}.shop-choice{grid-template-columns:1fr}.ou{margin:0 auto}.choice{padding:18px}
  .device-wrap{padding-right:0}.device-wrap .phone{position:relative;right:auto;bottom:auto;margin:18px auto 0}.assurance-stack{position:static;width:auto;grid-template-columns:repeat(3,1fr);margin-top:22px}.assurance-card{min-height:90px}
  .app-shell{grid-template-columns:120px 1fr}.kpis{grid-template-columns:repeat(2,1fr)}.dashboard-charts,.lower-charts{grid-template-columns:1fr}
  .final-pitch-body{grid-template-columns:1fr}.devices-illustration{max-width:300px}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}
}
@media (max-width:620px){
  :root{--container:calc(100% - 24px)}
  .announcement{height:34px}.site-header{position:static}.brand-title{font-size:21px}.brand-sub{font-size:9px}.brand-mark{width:44px;height:44px}.dashboard-btn{padding:11px 12px;font-size:12px}.main-nav{font-size:12px}.main-nav a{font-size:12px}
  .h1{font-size:34px}.h2{font-size:32px}.lead{font-size:16px}
  .badge-row,.price-benefits,.faq-row,.security-features,.benefit-row,.feature-grid,.final-bottom-badges{grid-template-columns:1fr}
  .profession-strip{grid-template-columns:repeat(2,1fr)}.smart-grid,.prof-card-grid{grid-template-columns:1fr}.smart-card{grid-template-columns:90px 1fr}
  .app-shell{grid-template-columns:1fr}.app-sidebar{display:none}.fake-search{min-width:0}.activity-list .row{grid-template-columns:30px 1fr}.activity-list .row>*:nth-child(n+3){display:none}.phone{width:170px}.security-list{padding-left:34px}.control-row{grid-template-columns:70px 1fr 70px}.control-row>*:nth-child(n+4){display:none}.price-ctas{grid-template-columns:1fr}.compare-row{grid-template-columns:1fr 25px 1fr}.footer-grid{grid-template-columns:1fr}.footer-bottom{grid-template-columns:1fr;gap:8px;text-align:left!important}.footer-bottom div:nth-child(2),.footer-bottom div:nth-child(3){text-align:left}.prof-card .art{height:220px}
}


/* ==========================================================
   Production hardening & progressive enhancement
   ========================================================== */
:root{
  --header-offset:126px;
  --focus:0 0 0 4px rgba(19,62,115,.18);
  --ease:cubic-bezier(.2,.7,.2,1);
}
html{scroll-padding-top:var(--header-offset);text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
.section{scroll-margin-top:var(--header-offset);min-height:calc(100svh - var(--header-offset))}
.skip-link{position:fixed;left:16px;top:12px;z-index:9999;background:#fff;color:var(--navy);padding:10px 14px;border-radius:9px;box-shadow:var(--shadow);transform:translateY(-180%);transition:transform .18s ease}
.skip-link:focus{transform:translateY(0)}
button{color:inherit;background:none;border:0;padding:0}
a,button,summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--navy-3);outline-offset:3px;box-shadow:var(--focus)}
.btn,.dashboard-btn,.announcement,.whatsapp-box,.footer-col a,.main-nav a{transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s ease,color .2s ease,border-color .2s ease,opacity .2s ease}
@media (hover:hover){
  .btn:hover,.dashboard-btn:hover{transform:translateY(-2px)}
  .btn-red:hover,.dashboard-btn:hover{box-shadow:0 10px 24px rgba(227,19,27,.23);background:#c90f16}
  .btn-outline:hover{background:#fff4f4}
  .btn-whatsapp:hover,.whatsapp-box:hover{background:#f0fff6}
  .footer-col a:hover{color:var(--red)}
}
.announcement:hover{background:#08234b}
.whatsapp-box{display:block}
.main-nav a{position:relative;padding:11px 0}
.main-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;background:var(--red);transition:right .22s var(--ease)}
.main-nav a:hover:after,.main-nav a.is-active:after{right:0}
.main-nav a.is-active{color:var(--red)}
.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:11px;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer;flex:none}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--navy);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.site-header.is-scrolled{box-shadow:0 10px 28px rgba(6,26,58,.10)}

/* Prices are controls, not decoration. */
.tabs button{padding:12px;text-align:center;font-size:13px;cursor:pointer;border-radius:28px;font-weight:700}
.tabs button.active{border:1px solid var(--red);color:var(--red);background:#fff}
.tabs button:not(.active):hover{background:#f7f8fa}
.big-price [data-price-main]{display:inline-block;min-width:160px}
.annual{transition:opacity .2s ease,transform .2s ease}
.annual.is-monthly{opacity:.78}

/* Native details remain usable even if JS is disabled. */
.accordion details[open]{background:#fcfdff}
.accordion summary b{transition:transform .2s ease}
.accordion details[open] summary b{transform:rotate(180deg)}
.accordion-answer{padding:0 38px 16px 0;color:#52617a;font-size:12px;line-height:1.6}
.accordion-answer p{margin:0}

/* Lightweight reveal; disabled unless JS explicitly activates it. */
.js.reveal-ready [data-reveal]{opacity:0;transform:translateY(22px)}
.js.reveal-ready [data-reveal].is-visible{opacity:1;transform:none;transition:opacity .58s var(--ease),transform .58s var(--ease)}

/* Conversion helper appears only after the hero. */
.floating-whatsapp{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:45;background:#0d9f55;color:#fff;border-radius:999px;padding:12px 16px;display:flex;align-items:center;gap:9px;font-size:13px;font-weight:800;box-shadow:0 14px 32px rgba(9,118,64,.24);opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .22s ease,transform .22s var(--ease),background .2s ease}
.floating-whatsapp svg{width:23px;height:23px}
.floating-whatsapp.is-visible{opacity:1;transform:none;pointer-events:auto}
@media (hover:hover){.floating-whatsapp:hover{background:#087a41;transform:translateY(-2px)}}

/* Layout safety */
img,svg{max-width:100%}
.card,.soft-card,.pricing-panel,.shop-layout,.security-grid,.support-grid,.final-grid{min-width:0}
.app-main,.sync-main,.shop-card,.website-preview,.store-preview{min-width:0}

@media (max-width:900px){
  :root{--header-offset:108px}
  .site-header{position:sticky}
  .header-main{height:74px;padding:0;flex-wrap:nowrap;gap:10px}
  .brand{min-width:0;flex:1}
  .brand-copy{min-width:0}
  .brand-title{font-size:23px;overflow:hidden;text-overflow:ellipsis}
  .brand-sub{font-size:8px;letter-spacing:.28em;margin-top:6px}
  .brand-sub:after{bottom:-7px;width:82px;height:3px}
  .brand-mark{width:46px;height:46px}
  .nav-toggle{display:flex;order:4}
  .dashboard-btn{order:3;margin-left:auto;padding:11px 13px;border-radius:10px}
  .dashboard-btn span{display:none}
  .main-nav{position:absolute;top:100%;left:0;right:0;width:auto;order:initial;display:none;flex-direction:column;align-items:stretch;gap:0;overflow:visible;background:#fff;padding:10px max(18px,calc((100% - var(--container))/2)) 18px;border-top:1px solid var(--line);box-shadow:0 18px 30px rgba(6,26,58,.12)}
  .js .site-header.nav-open .main-nav{display:flex}
  .no-js .main-nav{display:flex;position:static;flex-basis:100%;order:5}
  .main-nav a{padding:14px 6px;border-bottom:1px solid #eef1f5;font-size:14px}
  .main-nav a:last-child{border-bottom:0}
  .main-nav a:after{display:none}
  .site-header.nav-open{z-index:100}
  .section{min-height:auto;scroll-margin-top:var(--header-offset)}
}
@media (max-width:620px){
  :root{--header-offset:96px}
  .announcement{height:30px;font-size:11px}
  .announcement svg{width:15px;height:15px}
  .header-main{height:66px}
  .brand-mark{width:39px;height:39px}
  .brand-title{font-size:19px}
  .brand-sub{font-size:7px}
  .dashboard-btn,.nav-toggle{width:40px;height:40px;padding:0;display:flex;justify-content:center}
  .dashboard-btn svg{width:18px;height:18px}
  .floating-whatsapp{right:12px;bottom:12px;padding:12px}
  .floating-whatsapp span{display:none}
  .floating-whatsapp svg{width:25px;height:25px}
  .accordion summary{grid-template-columns:1fr 26px;gap:10px;padding:12px 0;min-height:0}
  .accordion summary span:nth-child(2){display:none}
  .accordion summary b{grid-column:2;grid-row:1}
  .accordion-answer{padding:0 0 14px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}
  .js.reveal-ready [data-reveal]{opacity:1!important;transform:none!important}
}

.hosting-icon{width:25px;height:25px;color:var(--navy);flex:none}


/* ── Formulaire de contact ────────────────────────────────────────────────
   Ecrit ICI, dans la feuille du kit, et nulle part ailleurs. Charger une
   seconde feuille pour ces quelques regles aurait superpose deux systemes de
   styles sur la meme page : les memes selecteurs se seraient repris la main
   selon l'ordre de chargement, et le rendu aurait dependu d'un detail
   invisible. Une page, une feuille. */
.contact-form-wrap { margin-top: 28px; }
.contact-card { padding: 26px 24px; max-width: 720px; }
.contact-card h3 { margin: 0 0 6px; font-size: 20px; color: var(--navy); }
.contact-card > p { margin: 0 0 18px; color: #52627e; font-size: 15px; }
.contact-form { display: grid; gap: 6px; }
.contact-form label { font-size: 13px; font-weight: 600; color: var(--navy); margin-top: 8px; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 15px;
  color: var(--ink); background: #fff;
  border: 1px solid #d7dfeb; border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: none; border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(227,19,27,.14);
}
.contact-form textarea { resize: vertical; min-height: 110px; }
.contact-form .btn { margin-top: 16px; justify-content: center; }
.cf-note { display: block; margin-top: 10px; font-size: 12.5px; color: #6b7a93; }
/* Piege a robots : invisible a l'oeil, present pour un automate. Jamais
   display:none — certains robots ignorent les champs caches ainsi. */
.contact-form input.hp-field {
  /* ⚠️ SPECIFICITE, PAS ORDRE. Ecrit d'abord « .hp-field », cette regle
     perdait contre « .contact-form input[type="text"] » qui impose
     width:100% et qui est PLUS SPECIFIQUE — l'ordre dans le fichier n'y
     change rien. Resultat : un champ invisible large de 1265 px qui
     poussait la page a 2092 px. Le defaut ne se voyait pas (le champ est
     transparent et la page ne defile pas), il ne se mesurait que par la
     largeur du document. On aligne donc la specificite au lieu de
     s'en remettre a la place de la regle dans le fichier. */
  /* ⚠️ SEUL ELEMENT MASQUE DE LA PAGE, et il ne contient AUCUN texte.
     C'est un piege a robots : un champ que seul un automate remplit, ce qui
     permet de rejeter un envoi sans imposer de captcha au visiteur.
     J'abandonne le classique « left:-9999px » au profit du motif standard
     d'accessibilite (clip-path). Meme effet, mais c'est la forme que Google
     et les lecteurs d'ecran reconnaissent comme legitime — autant ne pas
     ressembler a ce qu'on n'est pas. */
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
@media (max-width: 860px) { .contact-card { padding: 22px 18px; } }


/* ── Boutons pleine largeur sur petit ecran ───────────────────────────────
   Sous 480 px, une etiquette longue tient mieux sur deux lignes lisibles que
   serree sur une. On evite aussi que l'icone mange la place du texte. */
@media (max-width: 480px) {
  .btn { font-size: 16px; padding: 13px 18px; gap: 10px; }
  .btn svg { flex: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — expertise du 15/08/2026, apres signalement d'Enyss.
   ══════════════════════════════════════════════════════════════════════════
   MESURE AVANT CORRECTION : 49 grilles multi-colonnes, dont 12 SANS aucune
   adaptation pour petit ecran. La pire, .enytrack, reclame 220+70+190 = 480 px
   de colonnes fixes : elle deborde d'un ecran de 375 px par construction,
   quelle que soit la longueur du texte.

   Trois causes, trois remedes, du plus general au plus precis. */

/* 1. LA CAUSE LA PLUS FREQUENTE, ET LA MOINS CONNUE : par defaut, un enfant de
   grille ou de flex refuse de devenir plus etroit que son contenu
   (min-width:auto). Un mot long, un nombre, une image, et la colonne pousse la
   page au-dela de l'ecran — sans qu'aucune regle de largeur soit en cause.
   C'est ce qui rend le defaut si difficile a trouver rule par rule. */
@media (max-width: 900px) {
  .container > *, [class*="grid"] > *, [class*="col"] > * { min-width: 0; }
}

/* 2. RIEN NE DOIT DEPASSER LA LARGEUR DE L'ECRAN. Filet de securite : une
   image, un cadre ou un tableau trop large est ramene a la largeur disponible
   plutot que de decaler toute la page. */
img, svg, video, iframe, canvas, table { max-width: 100%; }
@media (max-width: 900px) {
  .container, .section, .card { max-width: 100%; }
  [style*="width:"] { max-width: 100%; }
}

/* 3. LES DOUZE GRILLES SANS ADAPTATION, repliees une par une.
   On passe a une seule colonne quand la lecture l'exige, a deux quand le
   contenu reste lisible cote a cote (cases a cocher, meta d'une fiche). */
@media (max-width: 620px) {
  .three-col, .object-row, .enytrack, .mini-site-body,
  .proof-strip, .tabs, .compare-top, .support-row { grid-template-columns: 1fr; }
  .phone-meta, .check-grid, .mini-products { grid-template-columns: 1fr 1fr; }
  .qr { grid-template-columns: repeat(7, 1fr); }

  /* Une ligne d'objet repliee doit rester lisible : l'image en haut, le texte
     dessous, le prix aligne a gauche comme le reste. */
  .object-row { gap: 10px; text-align: left; }
  .object-row > * { justify-self: start; }
  .support-row { gap: 8px; }
  .compare-top { gap: 12px; }
}

/* 4. LES LARGEURS FIXES HERITEES DE LA MAQUETTE (jusqu'a 900 px) ne peuvent pas
   tenir sur un telephone. On les plafonne sans toucher au rendu sur grand
   ecran : au-dessus de 900 px, aucune de ces regles ne s'applique. */
@media (max-width: 900px) {
  .screen, .control-screen, .laptop, .phone, .verification,
  .support-card, .contact-card, .announcement { max-width: 100%; }
}

/* 5. Confort de lecture sur telephone : on evite qu'un titre en trois mots
   longs ne force la page a s'elargir. */
@media (max-width: 480px) {
  h1, .h1, h2, .h2, h3 { overflow-wrap: anywhere; hyphens: auto; }
  .container { padding-left: 16px; padding-right: 16px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   LE PLANCHER INVISIBLE — la vraie cause du debordement, mesuree le 15/08
   ══════════════════════════════════════════════════════════════════════════
   Le premier correctif ne suffisait pas, et voici pourquoi. La grille .shop-layout
   passait bien sur UNE colonne sur telephone — mais cette colonne mesurait
   817 px sur un ecran de 375. Mesure : grid-template-columns valait « 817.016px ».

   En CSS, « 1fr » signifie minmax(AUTO, 1fr) : le plancher « auto » vaut la
   largeur minimale du contenu, et une colonne ne descend JAMAIS en dessous.
   Un seul bloc large a l'interieur — ici la vitrine de demonstration — et toute
   la page s'elargit, quel que soit le nombre de points de rupture ajoutes.

   C'est pour ca qu'ajouter des media queries ne reglait rien : on repliait bien
   les colonnes, mais le plancher restait. Il faut le retirer explicitement. */

@media (max-width: 900px) {
  /* 1. On retire le plancher partout : plus aucun element ne peut imposer sa
        largeur minimale a son parent. C'est LA correction, les autres ne sont
        que du confort. */
  main *, footer * { min-width: 0; }

  /* 2. Toute colonne peut descendre a zero. minmax(0,1fr) dit exactement
        « prends la place disponible, et accepte d'etre plus etroite que ton
        contenu » — ce que « 1fr » seul refuse. */
  .shop-layout, .security-grid, .support-grid, .pricing-panel, .final-grid,
  .two-col, .two-col-equal, .three-col, .smart-head, .compare-top,
  .mini-site-body, .enytrack, .object-row, .proof-strip, .tabs,
  .check-grid, .phone-meta, .mini-products, .support-row,
  .feature-list, .badge-row, .workflow, .profession-strip {
    grid-template-columns: minmax(0, 1fr);
  }
  .check-grid, .phone-meta, .mini-products, .badge-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 3. LES MAQUETTES DE DEMONSTRATION font exception, et c'est voulu. Un ecran
        de tableau de bord ou une vitrine miniature n'a aucun sens comprime a
        320 px : on le laisse a sa taille et on le fait defiler DANS son cadre,
        au lieu de laisser la page entiere se decaler. Le visiteur garde le
        detail, la page reste droite. */
  .preview-card, .showcase-web, .screen, .app-shell, .control-screen,
  .dashboard-preview, .mini-site {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* La bande des dix metiers depassait de 26 px vers 1265 px de large : ses dix
   cases refusaient de devenir plus etroites que leur contenu (le meme plancher
   min-content que plus haut, a une autre echelle). On leve le plancher sans
   toucher au nombre de colonnes : la maquette garde ses dix metiers sur une
   ligne, ils se contentent simplement de la place disponible. */
.profession-strip > * { min-width: 0; }
/* Les dix metiers : l'icone AU-DESSUS du libelle, et non a cote.
   Mesure : la case fait 110 px, le contenu cote a cote en reclamait 116. En
   empilant, le libelle dispose de toute la largeur au lieu d'un tiers — il tient
   sans rognage, meme « Bijoutier / horloger » ou « Librairie ancienne ».
   La bande garde ses dix colonnes sur une ligne : la maquette est preservee, seul
   l'agencement interne de la case change. */
.profession-mini {
  flex-direction: column;
  gap: 8px;
  padding: 12px 6px;
  line-height: 1.2;
  overflow: visible;
  hyphens: auto;
}
.profession-mini svg { width: 26px; height: 26px; }
@media (max-width: 900px) { .profession-mini { font-size: 11px; } }


/* Surtitre du H1 : la requete que les gens tapent, dans le signal le plus fort
   de la page apres le titre. Discret a l'oeil, decisif pour un moteur. Le style
   reprend celui du sous-logo « REGISTRE NUMERIQUE » deja present, pour que
   l'ajout se lise comme faisant partie de la maquette et non colle dessus. */
.h1-kicker {
  display: block;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
}
@media (max-width: 620px) { .h1-kicker { font-size: 11.5px; letter-spacing: .16em; } }