/* Polices auto-hébergées (assets/fonts, licence SIL OFL 1.1 : voir le LICENSE.txt
   du dossier). Aucune requête vers un service tiers n'est nécessaire pour
   afficher la page. Les deux familles sont variables : un seul fichier par
   sous-ensemble couvre toutes les graisses utilisées. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/dmsans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/dmsans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500 800;font-display:swap;src:url(assets/fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500 800;font-display:swap;src:url(assets/fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--navy:#061b4f;--navy-2:#0b2c63;--blue:#1588ba;--cyan:#2cb4d7;--green:#78bf3a;--ink:#102145;--muted:#63718a;--paper:#f7fafb;--line:#dce7ed;--orange:#f29a35;--radius:22px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:96px}body{margin:0;background:#fff;color:var(--ink);font-family:'DM Sans',Arial,sans-serif;line-height:1.55}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}.container{width:min(1160px,calc(100% - 44px));margin:auto}.skip-link{background:var(--navy);color:#fff;left:-9999px;padding:10px 16px;position:fixed;z-index:20}.skip-link:focus{left:10px;top:10px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.topbar{background:var(--navy);color:#9fb2d1;font-size:12px}.topbar-inner{display:flex;align-items:center;gap:14px;height:36px}.topbar-brand{font-weight:800;color:#fff;letter-spacing:.3px;flex-shrink:0}.topbar-sep{width:1px;height:14px;background:rgba(255,255,255,.22);flex-shrink:0}.topbar-tagline{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar-contact{color:#8fd6ea;font-weight:600;flex-shrink:0;transition:color .2s}.topbar-contact:hover{color:#fff}
.site-header{background:rgba(255,255,255,.96);border-bottom:1px solid rgba(6,27,79,.07);position:sticky;top:0;z-index:10;backdrop-filter:blur(10px)}.nav-wrap{height:80px;display:flex;align-items:center;justify-content:space-between}.brand img{display:block;width:180px;height:auto;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(6,27,79,.08));margin-top:2px;background:transparent}.navigation{display:flex;align-items:center;gap:26px;font-size:14px;color:#44536d;font-weight:600}.navigation>a:not(.button){transition:color .2s}.navigation>a:not(.button):hover{color:var(--blue)}.button{position:relative;overflow:hidden;display:inline-flex;justify-content:center;align-items:center;gap:11px;border:1px solid transparent;border-radius:99px;padding:14px 22px;background:var(--navy);color:#fff;font-weight:700;font-size:14px;box-shadow:0 8px 18px rgba(6,27,79,.16);transition:transform .2s,background .2s}.button:hover{background:#10377b;transform:translateY(-2px)}.button:after{content:"";position:absolute;top:0;left:-60%;width:35%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);transition:left .6s ease}.button:hover:after{left:130%}.button-small{padding:10px 16px;font-size:13px}.menu-toggle{display:none;background:none;border:0;width:42px;height:42px;padding:10px}.menu-toggle span:not(.sr-only){display:block;width:22px;height:2px;background:var(--navy);margin:5px auto}.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 24px}.hero-badge{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;border:1px solid rgba(21,136,186,.18);background:rgba(255,255,255,.8);color:var(--navy);font-size:12px;font-weight:700}.hero-badge-primary{background:linear-gradient(120deg,rgba(44,180,215,.16),rgba(120,191,58,.14));color:var(--navy)}.hero-highlight{display:flex;align-items:flex-start;gap:12px;margin-top:24px;padding:16px 18px;border-radius:18px;background:linear-gradient(135deg,rgba(6,27,79,.94),rgba(21,136,186,.9));color:#fff;box-shadow:0 16px 34px rgba(6,27,79,.22);max-width:620px}.hero-highlight strong{display:block;margin-bottom:6px;font-size:15px}.hero-highlight p{margin:0;color:rgba(255,255,255,.84);font-size:13px;line-height:1.55}.pulse-dot{width:11px;height:11px;border-radius:50%;background:#7ee36f;box-shadow:0 0 0 0 rgba(126,227,111,.6);animation:pulse 1.8s infinite;margin-top:7px;flex-shrink:0}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(126,227,111,.6)}70%{box-shadow:0 0 0 10px rgba(126,227,111,0)}100%{box-shadow:0 0 0 0 rgba(126,227,111,0)}}
.hero{overflow:hidden;background:linear-gradient(120deg,#f7fbfd 0%,#fff 53%,#f1f9fc 100%);position:relative}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 6% 60%,rgba(44,180,215,.13),transparent 23%),linear-gradient(120deg,transparent 48%,rgba(120,191,58,.06));pointer-events:none}.hero:after{content:"";position:absolute;inset:0;z-index:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.02 0 0 0 0 0.1 0 0 0 0 0.31 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.5;mix-blend-mode:multiply;pointer-events:none}.hero-grid{min-height:650px;display:grid;grid-template-columns:1fr 1.1fr;gap:25px;align-items:center;position:relative;z-index:1}.hero-copy{padding:70px 0}.eyebrow{color:var(--blue);font-size:12px;letter-spacing:1.35px;text-transform:uppercase;font-weight:800;margin:0 0 18px;display:flex;align-items:center;gap:9px}.eyebrow span{display:block;width:28px;height:2px;background:var(--green)}h1,h2,h3{font-family:Manrope,'DM Sans',sans-serif;line-height:1.12;margin:0}h1{font-size:clamp(39px,4.2vw,62px);letter-spacing:-2.7px;font-weight:800;color:var(--navy)}h1 em{font-style:normal;color:var(--blue)}.hero-text{font-size:17px;line-height:1.7;max-width:510px;color:var(--muted);margin:25px 0 29px}.hero-text strong{color:var(--navy);font-weight:700}.hero-actions{display:flex;align-items:center;gap:23px}.text-link{font-weight:700;color:var(--blue);font-size:14px;display:inline-flex;gap:9px;align-items:center}.text-link:hover{color:var(--navy)}.trust-line{display:flex;align-items:center;gap:10px;color:#60718b;font-size:13px;margin-top:33px}.check{background:#e4f4dd;color:#4f9d23;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-weight:bold}.hero-visual{height:500px;position:relative;align-self:end;transition:transform .25s ease-out}.hero-visual:hover{transform:translateY(-4px)}.hero-orb{position:absolute;border-radius:50%;filter:blur(1px)}.orb-one{width:290px;height:290px;background:rgba(44,180,215,.16);right:52px;top:63px}.orb-two{width:190px;height:190px;background:rgba(120,191,58,.15);right:-22px;bottom:36px}.laptop{width:565px;position:absolute;right:2px;top:43px;z-index:2}.laptop-screen{border:9px solid #10264d;border-radius:13px 13px 4px 4px;background:#fff;box-shadow:0 25px 38px rgba(6,27,79,.24);overflow:hidden}.laptop-base{width:605px;height:17px;background:linear-gradient(#ccd8dc,#eef5f6);border-radius:0 0 40px 40px;margin-left:-20px;box-shadow:0 13px 15px rgba(6,27,79,.17)}.window-bar,.browser-top{height:24px;background:#f0f4f6;color:#8492a0;font-size:7px;display:flex;align-items:center;gap:4px;padding:0 8px}.window-bar span{margin-left:6px}.window-bar i,.browser-top i,.desktop-top i{width:5px;height:5px;border-radius:50%;background:#e3726a}.window-bar i:nth-child(2),.browser-top i:nth-child(2){background:#f2c35c}.window-bar i:nth-child(3),.browser-top i:nth-child(3){background:#70bc73}.app-shell{height:290px;display:flex;background:#f6f8fa}.mini-sidebar{width:93px;background:#fff;border-right:1px solid #e5edf0;padding:11px 7px;display:flex;flex-direction:column;gap:3px}.mini-sidebar b{width:25px;height:25px;border-radius:6px;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:9px;margin-bottom:8px}.mini-sidebar small{font-size:7px;padding:5px;color:#687690}.mini-sidebar small.active{background:#e5f5fb;color:#1177a8;border-radius:4px;font-weight:bold}.mini-main{padding:15px;width:calc(100% - 93px)}.mini-top{display:flex;justify-content:space-between;font-size:10px;margin-bottom:12px}.mini-top span{font-size:7px;color:#718099}.kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.kpi-row>div{background:#fff;border:1px solid #e7edf0;border-radius:6px;padding:8px;display:flex;flex-direction:column}.kpi-row small{font-size:6px;color:#718099}.kpi-row b{font-size:12px;margin:2px 0;color:var(--navy)}.kpi-row em{font-size:6px;color:#55a72b;font-style:normal}.kpi-row .orange{color:var(--orange)}.chart-card{background:#fff;border:1px solid #e7edf0;border-radius:6px;margin-top:8px;padding:8px}.chart-title{font-size:7px;display:flex;justify-content:space-between}.chart-title span{color:#718099}.chart{height:58px;display:flex;align-items:end;gap:10px;padding:6px 11px 0;border-bottom:1px solid #e7edf0}.chart i{width:15px;background:linear-gradient(var(--cyan),#91d9e8);border-radius:3px 3px 0 0}.work-row{display:grid;grid-template-columns:1.15fr .85fr;gap:8px;margin-top:8px}.jobs,.todo{background:#fff;border:1px solid #e7edf0;border-radius:6px;padding:8px;font-size:6px}.work-row b{font-size:7px}.work-row p{border-top:1px solid #eff3f5;margin:4px 0 0;padding:4px 0;color:#63718a}.work-row em{float:right;color:#55a72b;font-style:normal}.dot{width:5px;height:5px;display:inline-block;border-radius:50%;margin-right:2px}.blue{background:var(--blue)}.green{background:var(--green)}
.phone{width:173px;border:8px solid #092151;border-radius:26px;background:#092151;box-shadow:0 20px 30px rgba(4,27,68,.27);overflow:hidden;position:absolute;z-index:4}.hero-visual>.phone{right:18px;bottom:22px}.phone-notch{background:#092151;border-radius:0 0 12px 12px;height:14px;width:68px;position:absolute;left:calc(50% - 34px);z-index:3}.phone-screen{height:337px;background:#f7fafb;padding:23px 10px 38px;color:#152a50;position:relative}.mobile-head{display:flex;justify-content:space-between;align-items:center;font-size:7px}.mobile-head b{font-size:8px}.mobile-head span:last-child{color:#66bc3e}.mobile-title{font-size:9px;font-weight:bold;margin:17px 0 7px}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.quick-grid span{background:#fff;border:1px solid #e2ebef;border-radius:7px;height:45px;color:var(--blue);display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:13px}.quick-grid small{font-size:6px;color:#52617a;margin-top:2px}.mobile-event{background:#fff;border:1px solid #e2ebef;border-radius:7px;min-height:41px;padding:7px 5px 5px 13px;position:relative;margin:4px 0;font-size:7px}.mobile-event i{position:absolute;width:4px;height:25px;left:4px;top:8px;border-radius:3px;background:var(--green)}.mobile-event .orange-dot{background:var(--orange)}.mobile-event b{display:block;font-size:7px}.mobile-event small{position:absolute;right:5px;top:7px;font-size:6px;color:#7a889c}.mobile-event em{font-size:6px;color:#7a889c;font-style:normal}.mobile-nav{position:absolute;bottom:0;left:0;right:0;height:33px;background:#fff;border-top:1px solid #e2ebef;display:flex;justify-content:space-around;align-items:center;color:#8c9aab;font-size:11px}.mobile-nav .plus{background:var(--blue);color:#fff;width:21px;height:21px;display:grid;place-items:center;border-radius:50%;font-size:15px;margin-top:-12px}.visual-note{position:absolute;bottom:35px;left:22px;background:#fff;padding:9px 12px;border-radius:9px;box-shadow:0 8px 20px rgba(6,27,79,.1);font-size:9px;color:#52617a;z-index:5}.pulse{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;margin-right:5px}.floating{animation:float 5s ease-in-out infinite}.floating-delay{animation:float 5s 1.4s ease-in-out infinite}@keyframes float{50%{transform:translateY(-11px)}}
.metrics{background:var(--navy);color:#fff}.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:30px 0}.metrics-grid>div{padding:3px 35px;border-left:1px solid rgba(255,255,255,.16)}.metrics-grid>div:first-child{border:0}.metrics strong{display:block;font:800 31px Manrope}.metrics span{font-size:12px;color:#bdcce1}.hosting-section{background:linear-gradient(135deg,#f6fcfe 0%,#f0f7f9 100%)}.hosting-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:center}.hosting-copy h2{font-size:clamp(27px,3.2vw,40px);letter-spacing:-1.4px;color:var(--navy);margin:12px 0 16px}.hosting-copy p{color:var(--muted);font-size:16px;line-height:1.7}.hosting-points{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.hosting-points span{padding:9px 12px;border-radius:999px;background:#fff;border:1px solid #e3edf0;color:#26506f;font-size:12px;font-weight:700}.hosting-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}.host-card{background:#fff;border:1px solid #e3edf0;border-radius:20px;padding:20px;box-shadow:0 10px 24px rgba(6,27,79,.06);transition:transform .25s ease,box-shadow .25s ease}.host-card:hover{transform:translateY(-4px);box-shadow:0 18px 32px rgba(6,27,79,.1)}.host-card-main{grid-column:1/-1;background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff}.host-card-main p,.host-card-main h3{color:#fff}.host-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.14);margin-bottom:12px;font-size:20px}.host-card h3{font-size:18px;margin:0 0 8px;color:var(--navy)}.host-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}.host-card-main p{color:rgba(255,255,255,.84)}.section{padding:112px 0}.intro-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:75px}.editor-section{background:linear-gradient(135deg,#f6fcfe 0%,#f0f7f9 100%)}.editor-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:center}.editor-copy h2{font-size:clamp(27px,3.2vw,40px);letter-spacing:-1.4px;color:var(--navy);margin:12px 0 16px}.editor-copy p{color:var(--muted);font-size:16px;line-height:1.7;margin:0 0 14px}.editor-cards{display:flex;flex-direction:column;gap:12px}.editor-card{background:#fff;border:1px solid #e3edf0;border-left:3px solid var(--blue);border-radius:14px;padding:18px 20px;box-shadow:0 8px 20px rgba(6,27,79,.05);transition:transform .25s ease,box-shadow .25s ease}.editor-card:hover{transform:translateX(3px);box-shadow:0 10px 24px rgba(6,27,79,.09)}.editor-card h3{font-size:15px;margin:0 0 6px;color:var(--navy);font-family:Manrope,'DM Sans',sans-serif;font-weight:700}.editor-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}.intro-grid h2,.section-heading h2,.security h2,.contact h2{font-size:clamp(31px,3.6vw,48px);letter-spacing:-1.8px;color:var(--navy)}.intro-copy{color:var(--muted);font-size:16px;padding-top:14px}.intro-copy p{margin:0 0 15px}.intro-copy .text-link{margin-top:7px}.features-section{background:#f3f8fa}.section-heading{max-width:720px;margin-bottom:44px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.feature-card{background:#fff;border:1px solid #e4edef;border-radius:var(--radius);padding:27px;min-height:320px;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s}.feature-card:hover{transform:translateY(-5px);box-shadow:0 16px 29px rgba(6,27,79,.1)}.feature-card.featured{background:var(--navy);color:#fff;border-color:var(--navy)}.feature-icon{width:38px;height:38px;border-radius:10px;background:#e4f5fa;color:var(--blue);display:grid;place-items:center;font-size:20px}.featured .feature-icon{background:#174984;color:#b5eff9}.feature-number{position:absolute;right:25px;top:22px;font-size:12px;color:#9aa9bc}.featured .feature-number{color:#8bb8d6}.feature-card h3{font-size:20px;margin:24px 0 10px}.feature-card>p:not(.feature-number){font-size:14px;color:var(--muted);max-width:255px;margin:0}.featured>p:not(.feature-number){color:#bed0e7}.card-schematic,.doc-mini,.calendar-mini,.stock-mini,.tool-mini{position:absolute;bottom:22px;left:27px;right:27px}.card-schematic{height:58px;border-radius:9px;background:#174984;padding:10px;font-size:8px}.card-schematic span{display:block;color:#d8effe;margin-bottom:8px}.card-schematic i{display:inline-block;width:21%;height:4px;margin-right:3px;background:#4c7eaf;border-radius:4px}.card-schematic .done{background:#78bf3a}.card-schematic b{float:right;font-size:10px}.doc-mini{background:#f6fafb;border:1px solid #e3edef;border-radius:8px;padding:10px;height:69px}.doc-mini span{font-size:7px;color:var(--blue);letter-spacing:1px;display:block}.doc-mini b{font-size:10px}.doc-mini i{height:1px;background:#d8e3e8;display:block;margin:7px 0 4px}.doc-mini small{font-size:8px;float:right;font-weight:bold}.calendar-mini{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;align-items:start}.calendar-mini span{font-size:7px;color:#8290a2;text-align:center}.calendar-mini .today{color:var(--blue);font-weight:bold}.calendar-mini i{height:31px;border-radius:4px;background:#e0f4f9;margin-top:4px}.calendar-mini i:nth-of-type(2){background:#e9f6df;height:45px}.calendar-mini i:nth-of-type(3){background:#fceedc;height:22px}.stock-mini{display:flex;flex-direction:column;gap:6px}.stock-mini span{background:#f7fafb;border-radius:5px;padding:5px 7px;font-size:8px;color:#5a6a81}.stock-mini b{color:#74b83d;float:right}.stock-mini b.warn{color:var(--orange)}.tool-mini{background:#e5f5f9;padding:10px;border-radius:8px}.tool-mini span{font-size:7px;letter-spacing:1px;color:#2180a7;display:block}.tool-mini b{font-size:11px}.tool-mini i{font-style:normal;float:right;color:var(--blue)}.cta-card{background:linear-gradient(135deg,#1688b8,#2bb8d3);color:#fff;display:flex;flex-direction:column;justify-content:space-between}.cta-card p{font:500 23px/1.25 Manrope!important;color:#fff!important}.cta-card strong{font-weight:800}.round-link{width:41px;height:41px;border-radius:50%;background:#fff;color:var(--blue);font-size:21px;display:grid;place-items:center}
.platforms{background:#fff}.centered{text-align:center;margin-left:auto;margin-right:auto}.centered .eyebrow{justify-content:center}.platform-tabs{display:flex;justify-content:center;gap:4px;background:#eff5f7;padding:4px;border-radius:99px;width:max-content;max-width:100%;margin:0 auto 44px}.tab{border:0;background:transparent;padding:10px 18px;border-radius:99px;color:#627188;font-weight:700;font-size:13px;cursor:pointer}.tab.active{background:#fff;box-shadow:0 3px 9px rgba(6,27,79,.09);color:var(--navy)}.platform-panel{display:grid;grid-template-columns:.8fr 1.2fr;gap:75px;align-items:center;animation:panel .4s ease}.platform-panel[hidden]{display:none}@keyframes panel{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.platform-label{color:var(--blue);letter-spacing:1.2px;font-size:11px;font-weight:800}.platform-copy h3{font-size:31px;letter-spacing:-1px;margin:13px 0;color:var(--navy)}.platform-copy>p{font-size:15px;color:var(--muted);margin:0 0 17px}.platform-copy ul{list-style:none;padding:0;margin:0 0 22px}.platform-copy li{font-size:13px;color:#40516c;margin:8px 0}.platform-copy li:before{content:'✓';color:#6cb731;margin-right:10px;font-weight:bold}.download-stack{margin:20px 0 0}.download-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}.button-secondary{background:#fff;color:var(--navy);border-color:var(--line);box-shadow:none}.button-secondary:hover{background:#f4f8fa;color:var(--navy)}.qr-card{display:flex;align-items:center;gap:16px;padding:16px;border:1px solid var(--line);border-radius:18px;background:#f8fbfc;max-width:100%;width:min(100%,420px)}.qr-card img{width:112px;height:112px;display:block;border-radius:12px;background:#fff;padding:8px;border:1px solid #e7eff3;flex-shrink:0}.qr-copy strong{display:block;font-size:15px;margin-bottom:6px;color:var(--navy)}.qr-copy p{margin:0;color:var(--muted);font-size:13px}.screen-stage{min-height:380px;background:linear-gradient(135deg,#e5f4f8,#f3f9fa);border-radius:var(--radius);display:grid;place-items:center;overflow:hidden;position:relative}.web-stage:before,.desktop-stage:before{content:"";position:absolute;width:270px;height:270px;background:rgba(120,191,58,.12);border-radius:50%;right:-70px;bottom:-90px}.browser-shot{width:90%;height:315px;background:#fff;border-radius:10px;box-shadow:0 18px 31px rgba(6,27,79,.17);overflow:hidden;position:relative}.browser-top{height:29px;font-size:8px}.browser-top span{margin-left:8px;background:#fff;border:1px solid #e2eaed;border-radius:4px;padding:3px 8px;width:70%;color:#9eabb7}.browser-app{height:286px;display:flex}.browser-app aside{width:103px;padding:12px 7px;border-right:1px solid #e7eef1;display:flex;flex-direction:column;gap:3px}.browser-app aside b{display:grid;place-items:center;width:26px;height:26px;border-radius:6px;background:var(--navy);color:#fff;font-size:9px;margin-bottom:8px}.browser-app aside small{font-size:7px;color:#748398;padding:5px}.browser-app aside small.selected{background:#e5f5fa;border-radius:4px;color:#087da9;font-weight:bold}.browser-app main{padding:16px;width:calc(100% - 103px);background:#f8fafb}.shot-head{font-size:11px;display:flex;justify-content:space-between}.shot-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:12px 0}.shot-kpis p{background:#fff;border:1px solid #e7eef1;border-radius:5px;padding:8px;margin:0;font-size:7px;color:#77879d}.shot-kpis b{display:block;font-size:12px;color:var(--navy);margin:2px 0}.shot-kpis em{font-style:normal;color:#55a72b;font-size:6px}.shot-body{display:grid;grid-template-columns:1fr .77fr;gap:7px}.shot-graph,.shot-list{background:#fff;border:1px solid #e7eef1;border-radius:5px;padding:8px;font-size:7px}.line-graph{height:108px;margin-top:8px}.line-graph svg{width:100%;height:100%}.shot-list p{border-top:1px solid #edf1f3;padding:6px 0;margin:4px 0;font-size:6px}.shot-list i{width:5px;height:5px;display:inline-block;background:var(--blue);border-radius:50%;margin-right:3px}.shot-list em{font-style:normal;float:right;color:#5ba82e}.large-phone{position:relative;width:204px;border-width:9px;border-radius:31px}.large-phone .phone-screen{height:365px;padding:27px 12px 39px}.large-phone .mobile-title{font-size:10px}.large-phone .quick-grid span{height:50px}.large-phone .mobile-event{min-height:44px;font-size:8px}.mobile-kpis{display:flex;gap:5px}.mobile-kpis span{background:#fff;border:1px solid #e2ebef;border-radius:6px;flex:1;padding:7px;font-size:10px;font-weight:bold}.mobile-kpis small{font-size:6px;color:#7b899c;display:block;font-weight:normal}.desktop-shot{width:91%;height:315px;border-radius:8px;overflow:hidden;background:#f5f6fa;box-shadow:0 18px 31px rgba(6,27,79,.17);position:relative}.desktop-top{height:27px;background:#10264d;color:#fff;display:flex;align-items:center;padding:0 9px;font-size:8px;gap:6px}.desktop-top i{background:#6ca2bd}.desktop-top b{margin-left:auto;font-size:8px;color:#a8c3d7}.desktop-app{height:288px;display:flex}.desktop-app aside{width:120px;background:#fff;padding:13px 8px;display:flex;flex-direction:column;gap:4px}.desktop-app aside b{width:25px;height:25px;border-radius:5px;background:var(--navy);display:grid;place-items:center;color:#fff;font-size:8px}.desktop-app aside p{font-size:6px;color:#8a98a9;margin:5px 0}.desktop-app aside small{font-size:7px;color:#5d6c82;padding:5px}.desktop-app aside small.selected{background:#dff4f9;color:#087da9;border-radius:4px;font-weight:bold}.desktop-app main{padding:16px;width:calc(100% - 120px)}.desktop-app h4{font-size:12px;margin:0 0 13px}.win-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.win-stats span{background:#fff;border:1px solid #e0e7eb;border-radius:4px;padding:7px;font-size:6px;color:#78869a}.win-stats b{display:block;color:var(--navy);font-size:10px;margin-top:3px}.desktop-app h5{font-size:9px;margin:17px 0 7px}table{width:100%;border-collapse:collapse;background:#fff;font-size:6px}th{text-align:left;color:#8190a3;background:#f5f8fa}td,th{padding:6px;border-bottom:1px solid #e8eef1}td i{width:30px;height:3px;display:inline-block;background:#54ad32;border-radius:3px}td i.half{background:linear-gradient(90deg,#4ba6c7 42%,#e5edf0 42%)}td i.full{background:#69b83b}td em{font-style:normal;color:#4da32a;background:#eaf6e4;padding:2px 3px;border-radius:3px}td em.planned{color:#0978a6;background:#e1f4fb}td em.done{color:#5b9f2d;background:#edf7e5}
.security{background:#eaf6f8}.security-grid{display:grid;grid-template-columns:100px 1.25fr 1fr;gap:31px;align-items:center}.shield{width:78px;height:90px;clip-path:polygon(50% 0,93% 17%,85% 68%,50% 100%,15% 68%,7% 17%);background:var(--navy);color:#a9e6f4;display:grid;place-items:center;font-size:33px}.security-grid>p{font-size:14px;color:#5c6d84;margin:0}.security-points{grid-column:2/4;display:flex;gap:18px}.security-points span{font-size:12px;color:#406075;font-weight:600}.security-points span:before{content:'✓';color:#67af30;margin-right:6px}.contact{background:var(--navy);color:#fff;padding:89px 0}.contact-inner{display:grid;grid-template-columns:1fr .8fr;gap:100px}.contact h2{color:#fff;margin-bottom:17px}.contact-inner>div>p:last-child{color:#b9cae0;font-size:16px}.eyebrow.light{color:#83d7e8}.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}.contact-form label{font-size:11px;color:#bfd1e5;font-weight:bold}.contact-form button,.form-note{grid-column:1/-1}.contact-form input,.contact-form textarea{border:1px solid #5073a0;background:#10316a;color:#fff;border-radius:7px;width:100%;padding:10px;margin-top:5px;outline:0;font-size:13px}.contact-form input:focus,.contact-form textarea:focus{border-color:#73d8e9}.contact-form input::placeholder,.contact-form textarea::placeholder{color:#88a0be}.button-light{background:#fff;color:var(--navy);justify-self:start;margin-top:2px}.button-light:hover{background:#e6f6fa}.form-note{font-size:10px;color:#98afca;margin:0}footer{background:#041331;color:#b4c5da}.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;padding:56px 0 40px}.footer-brand{background:#fff;border-radius:8px;overflow:hidden;height:44px;display:inline-flex;align-items:center;padding:6px 10px}.footer-brand img{width:auto;height:32px;object-fit:contain}.footer-brand-col p{margin:16px 0 0;font-size:13px;color:#8ea0bd;max-width:280px;line-height:1.6}.footer-col{display:flex;flex-direction:column;gap:10px;font-size:13px}.footer-col h2{margin:0 0 4px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#6f84a8;font-weight:700;font-family:inherit;line-height:inherit}.footer-col a{color:#b4c5da;transition:color .2s}.footer-col a:hover{color:#fff}.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid rgba(255,255,255,.08);padding:20px 0;font-size:11px;color:#748099}.reveal{opacity:0;transform:translateY(19px);transition:opacity .65s ease,transform .65s ease}.reveal.visible{opacity:1;transform:none}
.trades-section{background:linear-gradient(180deg,#fbfdfe 0%,#f2f8fa 100%)}.trades-intro{color:var(--muted);font-size:16px;line-height:1.7;margin:16px 0 0}.trade-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.trade-card{background:#fff;border:1px solid #e3edf0;border-radius:16px;padding:18px;box-shadow:0 8px 20px rgba(6,27,79,.05);transition:transform .25s ease,box-shadow .25s ease}.trade-card:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(6,27,79,.1)}.trade-icon{width:38px;height:38px;border-radius:10px;background:#e4f5fa;color:var(--blue);display:grid;place-items:center;font-size:18px;margin-bottom:12px}.trade-card h3{font-size:15px;margin:0 0 6px;color:var(--navy);font-family:Manrope,'DM Sans',sans-serif;font-weight:700}.trade-card p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.5}.trade-card-cta{background:linear-gradient(135deg,var(--navy),var(--blue));border-color:transparent}.trade-card-cta h3{color:#fff}.trade-card-cta p{color:rgba(255,255,255,.84)}.trade-card-cta .trade-icon{background:rgba(255,255,255,.14);color:#fff}.trade-card-cta .text-link{color:#a9e6f4;margin-top:10px;font-size:13px}.trade-card-cta .text-link:hover{color:#fff}
@media(max-width:1000px){.trade-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:850px){.navigation{gap:13px}.trade-grid{grid-template-columns:repeat(2,1fr)}.hero-grid{grid-template-columns:1fr;min-height:0}.hero-copy{padding:75px 0 17px}.hero-visual{height:460px;max-width:620px;width:100%;margin:auto}.laptop{width:min(88vw,540px);right:0}.laptop-base{width:107%;margin-left:-3.5%}.intro-grid,.platform-panel,.contact-inner,.hosting-grid,.editor-grid{grid-template-columns:1fr;gap:36px}.topbar-tagline{display:none}.platform-copy{max-width:580px}.screen-stage{min-height:360px}.security-grid{grid-template-columns:90px 1fr;gap:23px}.security-grid>p{grid-column:1/-1}.security-points{grid-column:1/-1}.feature-grid{grid-template-columns:repeat(2,1fr)}.hosting-cards{grid-template-columns:1fr}}
@media(max-width:620px){.topbar{display:none}.container{width:min(100% - 34px,1160px)}.nav-wrap{height:67px}.brand img{width:136px;height:52px}.menu-toggle{display:block}.navigation{display:none;position:absolute;top:67px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:20px 22px;box-shadow:0 10px 20px rgba(6,27,79,.08);flex-direction:column;align-items:flex-start}.navigation.is-open{display:flex}.navigation .button{align-self:stretch}.hero-copy{padding-top:59px}.hero-text{font-size:15px}.hero-actions{gap:16px;flex-wrap:wrap}.hero-visual{height:315px}.laptop{top:29px;width:87vw}.laptop-screen{border-width:5px}.app-shell{height:202px}.mini-main{padding:9px}.mini-sidebar{width:63px;padding:6px 4px}.mini-sidebar small{font-size:5px;padding:3px}.mini-sidebar b{margin-bottom:3px;width:20px;height:20px;font-size:7px}.mini-main{width:calc(100% - 63px)}.kpi-row{gap:3px}.kpi-row>div{padding:4px}.kpi-row b{font-size:8px}.chart-card{margin-top:4px;padding:4px}.chart{height:37px;gap:6px}.chart i{width:10px}.work-row{gap:4px;margin-top:4px}.jobs,.todo{padding:4px}.hero-visual>.phone{transform:scale(.74);transform-origin:bottom right;right:-7px;bottom:10px}.visual-note{font-size:7px;bottom:13px;left:0;padding:6px 7px}.metrics-grid{grid-template-columns:repeat(2,1fr);padding:18px 0}.metrics-grid>div{padding:8px 15px}.metrics-grid>div:nth-child(3){border-left:0}.metrics strong{font-size:24px}.metrics span{font-size:10px}.section{padding:74px 0}.intro-grid{gap:25px}.intro-grid h2,.section-heading h2,.security h2,.contact h2{letter-spacing:-1.2px}.feature-grid{grid-template-columns:1fr}.feature-card{min-height:278px}.platform-tabs{width:100%;overflow:auto;justify-content:flex-start;margin-bottom:30px}.tab{white-space:nowrap;padding:9px 13px;font-size:12px}.platform-copy h3{font-size:26px}.screen-stage{min-height:315px}.browser-shot{height:237px}.browser-app{height:208px}.browser-app aside{width:72px;padding:7px 4px}.browser-app main{width:calc(100% - 72px);padding:8px}.browser-app aside small{font-size:5px;padding:3px}.browser-app aside b{margin-bottom:2px;width:18px;height:18px;font-size:6px}.shot-kpis{margin:7px 0;gap:3px}.shot-kpis p{padding:4px;font-size:5px}.shot-kpis b{font-size:8px}.shot-body{gap:3px}.shot-graph,.shot-list{padding:4px}.line-graph{height:70px;margin-top:3px}.desktop-shot{height:230px}.desktop-app{height:203px}.desktop-app aside{width:89px;padding:7px 4px}.desktop-app aside small{font-size:5px;padding:3px}.desktop-app main{padding:8px;width:calc(100% - 89px)}.desktop-app h4{font-size:8px;margin-bottom:6px}.win-stats{gap:3px}.win-stats span{padding:4px;font-size:4px}.win-stats b{font-size:6px}td,th{padding:3px;font-size:4px}.desktop-app h5{font-size:6px;margin:9px 0 4px}.security-grid{grid-template-columns:1fr}.shield{width:56px;height:64px;font-size:23px}.security-grid>p,.security-points{grid-column:auto}.security-points{gap:10px;flex-wrap:wrap}.contact{padding:65px 0}.contact-inner{gap:35px}.contact-form{grid-template-columns:1fr}.contact-form label{grid-column:1/-1}.footer-grid{grid-template-columns:1fr;gap:28px;padding:40px 0 28px}.footer-bottom{flex-direction:column;align-items:flex-start;gap:6px}.trade-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}

/* scaleX plutôt que width : la barre s'anime sans provoquer de recalcul de mise en page. */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--blue),var(--green));z-index:30;box-shadow:0 0 18px rgba(44,180,215,.35);will-change:transform}
.back-to-top{position:fixed;right:22px;bottom:22px;z-index:25;width:46px;height:46px;border:0;border-radius:999px;background:var(--navy);color:#fff;display:grid;place-items:center;box-shadow:0 14px 24px rgba(6,27,79,.2);cursor:pointer;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.back-to-top.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}
.back-to-top:hover{transform:translateY(-2px)}
.navigation a.active{color:var(--navy)}
.navigation a.active::after{content:"";display:block;height:2px;width:100%;margin-top:4px;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--green))}
.story-section{background:linear-gradient(135deg,#f8fbff 0%,#f2f8fa 100%)}
.story-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.story-copy h2{font-size:clamp(28px,3.2vw,40px);letter-spacing:-1.4px;color:var(--navy);margin:12px 0 16px}
.story-copy p{font-size:16px;line-height:1.75;color:var(--muted)}
.story-actions{display:flex;flex-wrap:wrap;gap:18px;margin-top:24px}
.story-steps{display:grid;gap:14px}
.step-card{background:#fff;border:1px solid #e6eef3;border-radius:20px;padding:18px 20px;box-shadow:0 14px 30px rgba(6,27,79,.06);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.step-card:hover,.step-card.active{transform:translateY(-4px);box-shadow:0 20px 36px rgba(6,27,79,.1);border-color:rgba(21,136,186,.24)}
.step-number{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,rgba(21,136,186,.16),rgba(120,191,58,.16));color:var(--navy);font-weight:800;font-size:13px;margin-bottom:10px}
.step-card h3{font-size:18px;color:var(--navy);margin:0 0 8px}
.step-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}
.metric-value{display:block;font:800 31px Manrope}
.form-feedback{grid-column:1/-1;min-height:18px;margin-top:4px;font-size:13px;color:#8fe2f2;font-weight:600}
@media(max-width:850px){.story-grid{grid-template-columns:1fr;gap:30px}}
@media(max-width:620px){.back-to-top{right:16px;bottom:16px;width:42px;height:42px}.story-copy h2{font-size:27px}.story-actions{gap:12px}.step-card{padding:15px 16px}}

/* ==========================================================================
   Couche « premium » — jeu d'icônes, accessibilité et composants interactifs.
   Placée en fin de feuille pour affiner les règles de base sans les réécrire.
   ========================================================================== */

:root{
  --shadow-sm:0 2px 6px rgba(6,27,79,.05),0 8px 20px rgba(6,27,79,.05);
  --shadow-md:0 4px 10px rgba(6,27,79,.06),0 16px 34px rgba(6,27,79,.08);
  --shadow-lg:0 8px 18px rgba(6,27,79,.08),0 28px 56px rgba(6,27,79,.12);
  --ring:0 0 0 3px rgba(21,136,186,.32);
  --ease:cubic-bezier(.22,.68,0,1);
}

/* ------------------------------------------------------------- Icônes SVG */
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{
  width:1em;height:1em;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
  vertical-align:-.125em;
}

/* ------------------------------------------------- Focus visible unifié */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
  border-radius:6px;
}
.contact :where(a,button,input,textarea):focus-visible,
.metrics :where(a,button):focus-visible,
footer :where(a,button):focus-visible{outline-color:#8fd6ea}
.contact-form input:focus,.contact-form textarea:focus{box-shadow:0 0 0 3px rgba(115,216,233,.24)}
[hidden]{display:none!important}

/* ------------------------------------------------------------- En-tête */
.site-header{transition:box-shadow .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease)}
.site-header.is-scrolled{background:rgba(255,255,255,.88);box-shadow:0 6px 26px rgba(6,27,79,.08);border-bottom-color:rgba(6,27,79,.05)}
.navigation>a:not(.button){position:relative;padding-block:4px}
.navigation a.active::after{background:linear-gradient(90deg,var(--blue),var(--green))}

/* ------------------------------------------------- Menu et sous-menus
   Quatre entrées de premier niveau, dont deux ouvrent un panneau (voir
   inc/content.php). Le panneau s'ouvre au survol ET au focus : sans
   JavaScript, la souris comme la tabulation atteignent toutes les sections.
   Le script n'ajoute que la fermeture au clic ailleurs, l'échappement, et
   l'ouverture au clic sur mobile où il n'y a pas de survol. */
.nav-groupe{position:relative}
.nav-declencheur{display:inline-flex;align-items:center;gap:6px;padding:4px 0;border:0;background:none;color:inherit;font:inherit;font-weight:600;cursor:pointer}
.nav-declencheur:hover,.nav-groupe.is-ouvert>.nav-declencheur{color:var(--blue)}
.nav-chevron{width:14px;height:14px;transition:transform .25s var(--ease)}
.nav-groupe.is-ouvert .nav-chevron,.nav-groupe:hover .nav-chevron{transform:rotate(180deg)}
/* La section en cours de lecture teinte l'entrée qui la contient : le menu
   replié dit quand même où l'on se trouve. */
.nav-groupe.is-courant>.nav-declencheur{color:var(--navy)}
.nav-groupe.is-courant>.nav-declencheur::after{content:"";position:absolute;left:0;right:18px;bottom:-2px;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--green))}
.sous-menu{position:absolute;top:calc(100% + 14px);left:-16px;z-index:20;display:grid;gap:2px;width:max-content;max-width:330px;padding:10px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 22px 44px -18px rgba(6,27,79,.34);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s var(--ease),transform .2s var(--ease-doux),visibility .2s}
/* Le dernier groupe est collé au bouton d'appel : son panneau s'aligne par la
   DROITE. Aligné à gauche, il sortait de la fenêtre entre 621 et 760 px de
   large — et comme un panneau fermé occupe quand même la place (il est
   `visibility:hidden`, pas `display:none`, pour pouvoir s'animer), la page
   entière défilait horizontalement sans que rien ne se voie à l'écran. */
.nav-groupe:last-of-type .sous-menu{left:auto;right:-16px}
/* Pont invisible entre l'entrée et le panneau : sans lui, les 14 px qui les
   séparent referment le menu dès qu'on descend vers lui à la souris. */
.sous-menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.nav-groupe:hover>.sous-menu,.nav-groupe:focus-within>.sous-menu,.nav-groupe.is-ouvert>.sous-menu{opacity:1;visibility:visible;transform:none}
.sous-menu a{display:block;padding:9px 12px;border-radius:11px;transition:background .2s var(--ease)}
.sous-menu a:hover,.sous-menu a:focus-visible{background:#f1f7fa}
.sous-menu strong{display:block;color:var(--navy);font-family:Manrope,'DM Sans',sans-serif;font-size:14px;font-weight:700}
.sous-menu span{display:block;margin-top:2px;color:var(--muted);font-size:12.5px;font-weight:500;line-height:1.45}
.sous-menu a.active strong{color:var(--blue)}
/* Le soulignement de la barre principale n'a pas de sens dans un panneau. */
.sous-menu a.active::after{display:none}

.menu-toggle{display:none;place-items:center;color:var(--navy);cursor:pointer;font-size:24px;border-radius:12px}
.menu-toggle .icon{stroke-width:1.9}
.menu-toggle .icon-close,.menu-toggle[aria-expanded="true"] .icon-open{display:none}
.menu-toggle[aria-expanded="true"] .icon-close{display:block}
body.nav-open{overflow:hidden}
@media(min-width:621px){body.nav-open{overflow:auto}}

/* -------------------------------------------------------------- Boutons */
.button{gap:9px;font-size:14px;letter-spacing:.1px;transition:transform .22s var(--ease),background .22s var(--ease),box-shadow .22s var(--ease)}
.button:hover{box-shadow:0 12px 26px rgba(6,27,79,.22)}
.button:active{transform:translateY(0) scale(.985)}
.button .icon{font-size:16px;transition:transform .22s var(--ease)}
.button:hover .icon{transform:translateX(2px)}
.button[href^="#plateformes"]:hover .icon,.button[download]:hover .icon{transform:translateY(2px)}
.button-secondary:hover{box-shadow:0 10px 22px rgba(6,27,79,.1)}
.text-link{transition:color .2s var(--ease)}
.text-link .icon{font-size:15px;transition:transform .22s var(--ease)}
.text-link:hover .icon{transform:translateX(3px)}
.round-link{transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.round-link .icon{font-size:20px;stroke-width:1.9}
.cta-card:hover .round-link{transform:translateX(4px);box-shadow:0 10px 22px rgba(6,27,79,.18)}

/* ---------------------------------------------------------------- Hero */
.hero-visual{
  transform:perspective(1100px) rotateY(var(--tilt-x,0deg)) rotateX(var(--tilt-y,0deg));
  transition:transform .45s var(--ease);
  transform-style:preserve-3d;
}
.hero-visual:hover{transform:perspective(1100px) rotateY(var(--tilt-x,0deg)) rotateX(var(--tilt-y,0deg)) translateY(-4px)}
.hero-badge{gap:7px;box-shadow:var(--shadow-sm);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.hero-badge:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.hero-badge .icon{font-size:14px;color:var(--blue)}
.hero-badge-primary .icon{color:#3f8f1f}
.check{width:20px;height:20px;font-size:12px}
.check .icon{stroke-width:3;width:11px;height:11px}
.mobile-live{width:6px;height:6px;border-radius:50%;background:#66bc3e;display:inline-block}

/* Icônes des maquettes (téléphone, sidebar) */
.quick-grid span .icon{font-size:16px;stroke-width:1.6}
.mobile-nav .icon{font-size:14px;stroke-width:1.7}
.mobile-nav .plus .icon{font-size:12px;stroke-width:2.4}

/* -------------------------------------------------------------- Cartes */
.host-card,.editor-card,.trade-card,.feature-card,.step-card{will-change:transform}
.host-icon .icon,.feature-icon .icon,.trade-icon .icon{font-size:20px;stroke-width:1.6}
.host-card .host-icon{background:#e4f5fa;color:var(--blue)}
.host-card-main .host-icon{background:rgba(255,255,255,.16);color:#fff}
.host-card{position:relative;overflow:hidden}
.host-card:not(.host-card-main)::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(44,180,215,.1),transparent 55%);
  opacity:0;transition:opacity .3s var(--ease);
}
.host-card:not(.host-card-main):hover::after{opacity:1}
.feature-card:hover{box-shadow:var(--shadow-lg)}
.feature-card:hover .feature-icon{transform:scale(1.06) rotate(-3deg)}
.feature-icon{transition:transform .3s var(--ease)}
.tool-mini b{display:block}

/* --------------------------------------------------- Étapes (boutons) */
.step-card{
  display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
  border-width:1px;border-style:solid;
  position:relative;overflow:hidden;
}
.step-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--blue),var(--green));
  transform:scaleY(0);transform-origin:50% 0;transition:transform .35s var(--ease);
}
.step-card.active::before{transform:scaleY(1)}
.step-card h3,.step-card p{pointer-events:none}

/* ------------------------------------------------- Recherche de métier */
.trade-search{position:relative;width:min(100%,560px);margin:0 0 26px}
.trade-search input{
  width:100%;padding:15px 52px 15px 48px;
  border:1px solid var(--line);border-radius:999px;background:#fff;
  color:var(--ink);font-size:15px;box-shadow:var(--shadow-sm);
  -webkit-appearance:none;appearance:none;
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease);
}
.trade-search input::-webkit-search-cancel-button{display:none}
.trade-search input::placeholder{color:#9aa8bd}
.trade-search input:focus{outline:none;border-color:var(--blue);box-shadow:var(--ring)}
.trade-search-icon{position:absolute;left:18px;top:16px;font-size:18px;color:#8b9ab0;pointer-events:none}
.trade-search:focus-within .trade-search-icon{color:var(--blue)}
.trade-search-clear{
  position:absolute;right:9px;top:9px;width:34px;height:34px;
  display:grid;place-items:center;border:0;border-radius:50%;
  background:#eef4f7;color:#5c6c85;font-size:15px;cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .2s var(--ease),background .2s var(--ease);
}
.trade-search.has-value .trade-search-clear{opacity:1;pointer-events:auto}
.trade-search-clear:hover{background:#e0eaef;color:var(--navy)}
.trade-status{margin:12px 0 0;padding-left:4px;font-size:13px;color:var(--muted)}
.trade-empty{
  margin:24px 0 0;padding:22px;border:1px dashed #cfdde6;border-radius:18px;
  background:#fff;color:var(--muted);font-size:14px;text-align:center;
}
.trade-empty a{color:var(--blue);font-weight:700}

.trade-card{position:relative}
.trade-icon{transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.trade-card:hover .trade-icon{background:var(--blue);color:#fff;transform:scale(1.05)}
.trade-card-cta:hover .trade-icon{background:rgba(255,255,255,.26);color:#fff}

/* ------------------------------------------------------------- Onglets */
.tab{transition:background .22s var(--ease),color .22s var(--ease),box-shadow .22s var(--ease)}
.tab:hover:not(.active){color:var(--navy);background:rgba(255,255,255,.6)}
.platform-panel:focus-visible{outline-offset:8px}
.platform-panels{position:relative}

/* ---------------------------------------------------------------- FAQ */
.faq-section{background:linear-gradient(180deg,#fbfdfe 0%,#f3f9fb 100%)}
.faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.faq-intro h2{font-size:clamp(28px,3.2vw,40px);letter-spacing:-1.4px;color:var(--navy);margin:12px 0 16px}
.faq-intro p{color:var(--muted);font-size:16px;line-height:1.7;margin:0}
.faq-list{display:grid;gap:12px}
.faq-item{
  background:#fff;border:1px solid #e4eef2;border-radius:18px;overflow:hidden;
  box-shadow:var(--shadow-sm);transition:box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.faq-item.is-open{border-color:rgba(21,136,186,.28);box-shadow:var(--shadow-md)}
.faq-item h3{margin:0;font-size:inherit;font-weight:inherit}
.faq-question{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  width:100%;padding:20px 22px;border:0;background:none;cursor:pointer;
  font-family:Manrope,'DM Sans',sans-serif;font-size:16px;font-weight:700;
  color:var(--navy);text-align:left;line-height:1.4;
  transition:color .2s var(--ease);
}
.faq-question:hover{color:var(--blue)}
.faq-chevron{font-size:20px;color:var(--blue);transition:transform .3s var(--ease)}
.faq-item.is-open .faq-chevron{transform:rotate(180deg)}
.faq-answer{padding:0 22px 22px;animation:faqIn .3s var(--ease)}
.faq-answer p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.7}
.faq-answer a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------ Sécurité */
.shield .icon{font-size:34px;stroke-width:1.5}

/* ------------------------------------------------------------ Contact */
.contact-email{
  display:inline-flex;align-items:center;gap:11px;margin-top:26px;
  padding:12px 18px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);
  color:#fff;font-size:14px;font-weight:700;
  transition:background .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease);
}
.contact-email:hover{background:rgba(255,255,255,.13);transform:translateY(-2px)}
.contact-email .icon{font-size:16px;color:#8fd6ea}
.contact-email-hint{
  font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:#8fd6ea;padding-left:11px;border-left:1px solid rgba(255,255,255,.18);
}
.contact-email.is-copied{border-color:rgba(126,227,111,.5);background:rgba(126,227,111,.12)}
.contact-email.is-copied .icon,.contact-email.is-copied .contact-email-hint{color:#a6ef99}

.field-full{grid-column:1/-1}
.field-optional{font-weight:500;color:#8fa5c1;text-transform:none;letter-spacing:0}
.field-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-form input[aria-invalid="true"],.contact-form textarea[aria-invalid="true"]{border-color:#f2a08a;background:#12326b}
.form-feedback:empty{min-height:0;margin:0}
.form-feedback[data-state="error"]{color:#ffb9a4}
.form-feedback[data-state="success"]{color:#a6ef99}
.form-feedback[data-state="pending"]{color:#bfd1e5}

/* --------------------------------------------------------- Bas de page */
.back-to-top{font-size:20px;transition:opacity .25s var(--ease),transform .25s var(--ease),background .25s var(--ease)}
.back-to-top:hover{background:#10377b}
.footer-col a{position:relative;width:max-content}

/* ------------------------------------------------------- Responsive */
@media(max-width:900px){.faq-grid{grid-template-columns:1fr;gap:32px}}
@media(max-width:620px){
  .menu-toggle{display:grid}

  /* Sur mobile il n'y a pas de survol : le sous-menu devient un accordéon
     déplié au clic, dans le flux du menu. Le panneau flottant du bureau y
     serait sorti de l'écran. */
  .navigation{max-height:calc(100vh - 67px);overflow-y:auto;gap:2px}
  .nav-groupe{width:100%}
  .nav-declencheur{justify-content:space-between;width:100%;padding:10px 0}
  .nav-groupe.is-courant>.nav-declencheur::after{display:none}
  .sous-menu{position:static;width:auto;max-width:none;padding:2px 0 8px 12px;border:0;border-left:2px solid var(--line);border-radius:0;box-shadow:none;transform:none;transition:none}
  .sous-menu::before{display:none}
  /* Replié par défaut : `visibility` seule laisserait la place occupée. */
  .nav-groupe:not(.is-ouvert)>.sous-menu{display:none}
  .nav-groupe>.sous-menu{opacity:1;visibility:visible}
  .sous-menu a{padding:8px 10px}
  .sous-menu span{display:none}

  /* Deux colonnes plutôt qu'une : 13 métiers restent scannables sans scroll interminable. */
  .trade-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .trade-card{padding:15px 14px}
  .trade-card h3{font-size:14px}
  .trade-card p{font-size:12px}
  .trade-search input{padding:14px 48px 14px 44px;font-size:15px}
  .trade-search-icon{left:16px;top:15px;font-size:17px}
  .faq-question{padding:17px 18px;font-size:15px}
  .faq-answer{padding:0 18px 18px}
  .contact-email{width:100%;justify-content:space-between}
}

@media(max-width:380px){.trade-grid{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){
  .hero-visual,.hero-visual:hover{transform:none}
  .faq-answer{animation:none}
}

/* ------------------------------------------- Formulaire : erreurs serveur */
.field-error{display:block;margin-top:6px;font-size:11.5px;font-weight:600;color:#ffb9a4;letter-spacing:0;text-transform:none}

/* ------------------------------------------------- Pages documentaires
   Mentions légales, confidentialité et page 404 : une colonne de lecture
   étroite posée sur le même système typographique que le reste du site. */
.page-doc{background:var(--paper);border-bottom:1px solid var(--line);padding:64px 0 88px}
.doc-inner{max-width:820px}
.page-doc h1{font-size:clamp(30px,3.4vw,44px);letter-spacing:-1.6px;margin:6px 0 18px}
.page-doc h2{font-size:19px;font-weight:700;color:var(--navy);letter-spacing:-.4px;margin:0 0 10px}
.page-doc section{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.page-doc p,.page-doc li{color:#4a5a76;font-size:15px;line-height:1.75}
.page-doc p{margin:0 0 12px}
.doc-lead{font-size:17px;color:#3b4c69;max-width:70ch}
.page-doc ul{margin:0;padding-left:20px;display:grid;gap:7px}
.page-doc li strong{color:var(--ink)}
.page-doc a:not(.button):not(.text-link){color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.page-doc a:not(.button):not(.text-link):hover{color:var(--navy)}
.doc-todo{background:#fff2dd;color:#8a5a11;border-radius:5px;padding:1px 7px;font-size:13px;font-weight:600}
.doc-updated{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.page-404 .hero-actions{margin:26px 0 30px}

/* ------------------------------------------------ Liens légaux du pied */
.footer-legal{display:flex;gap:18px;flex-wrap:wrap}
.footer-legal a{color:#8ea0bd;transition:color .2s}
.footer-legal a:hover{color:#fff;text-decoration:underline}

/* ==========================================================================
   Couche « vitrine produit » — captures d'écran réelles et finitions visuelles.

   Ajoutée en fin de feuille, comme la couche premium ci-dessus : elle affine
   des règles existantes par la cascade, sans réécrire les fondations. Les
   animations retombent d'elles-mêmes sous prefers-reduced-motion, neutralisé
   plus haut pour l'ensemble du document.
   ========================================================================== */

:root{
  --ease-doux:cubic-bezier(.22,1,.36,1);
  --nuit:#07173a;
  --nuit-2:#0d2350;
  --halo:0 30px 70px -20px rgba(6,27,79,.45);
}

/* ---------------------------------------------------- Chapeau de section */
.section-lead{max-width:620px;margin:16px auto 0;color:var(--muted);font-size:16px;line-height:1.7}
.centered .section-lead{text-align:center}

/* -------------------------------------------------------------- Onglets */
/* Le fond blanc de l'onglet actif GLISSE d'un onglet à l'autre au lieu
   d'apparaître : c'est ce mouvement qui relie les deux états dans l'œil. */
.platform-tabs{position:relative;gap:2px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.platform-tabs::-webkit-scrollbar{display:none}
.tab-glider{position:absolute;top:4px;bottom:4px;left:0;width:var(--glider-w,0);border-radius:99px;background:#fff;box-shadow:0 3px 9px rgba(6,27,79,.09);transform:translateX(var(--glider-x,0));transition:transform .42s var(--ease-doux),width .42s var(--ease-doux);pointer-events:none}
.tab{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:color .25s var(--ease)}
.tab.active{background:transparent;box-shadow:none}
.tab:hover{color:var(--navy)}
.tab-icon{width:16px;height:16px;opacity:.7;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.tab.active .tab-icon{opacity:1;color:var(--blue)}
.tab:hover .tab-icon{transform:translateY(-1px)}

/* --------------------------------------------------------- Colonne texte */
.platform-panel{gap:56px;align-items:center}
.platform-label{display:inline-flex;align-items:center;gap:8px;padding:6px 13px 6px 10px;border-radius:99px;background:linear-gradient(120deg,rgba(44,180,215,.15),rgba(120,191,58,.13));text-transform:uppercase}
.platform-label .icon{width:15px;height:15px}
.platform-copy li{display:flex;align-items:flex-start;gap:10px;margin:10px 0}
.platform-copy li:before{content:none}
.point-check{width:17px;height:17px;flex-shrink:0;margin-top:2px;padding:3px;border-radius:50%;background:#e4f4dd;color:#4f9d23;stroke-width:3}

/* -------------------------------------------------------- Scène et cadres */
/* Cadres sombres assumés : les trois applications sont en thème nuit, un
   habillage clair les aurait fait flotter sur un halo blanc au lieu de les
   mettre en avant. */
.platform-showcase{display:flex;flex-direction:column;gap:18px;min-width:0}
.shot-frame{position:relative;border-radius:14px;overflow:hidden;background:#0b0b0d;box-shadow:var(--halo);transition:transform .5s var(--ease-doux),box-shadow .5s var(--ease-doux)}
.platform-showcase:hover .shot-frame{transform:translateY(-4px);box-shadow:0 40px 80px -22px rgba(6,27,79,.5)}
.frame-chrome{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;background:#15161a;border-bottom:1px solid rgba(255,255,255,.06)}
.frame-chrome i{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:#3a3d45}
.frame-chrome i:nth-child(1){background:#e0645c}
.frame-chrome i:nth-child(2){background:#e2b34f}
.frame-chrome i:nth-child(3){background:#54b45f}
.frame-url{display:inline-flex;align-items:center;gap:6px;margin-left:10px;padding:3px 12px;border-radius:99px;background:#0e0f12;color:#8c93a1;font-size:11px;max-width:66%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frame-lock{width:11px;height:11px;color:#5aa845;flex-shrink:0}
.frame-title{color:#c3c8d2;font-size:11.5px;font-weight:600;letter-spacing:.2px}
.frame-buttons{margin-left:auto;color:#7d8492;font-size:11px;letter-spacing:1px;font-weight:400}
.frame-screen{position:relative;display:block;overflow:hidden;background:#0b0b0d}
.shot-image{display:block;width:100%;height:auto;cursor:zoom-in;transition:opacity .28s var(--ease)}
.shot-image.is-swapping{opacity:.25}

/* Téléphone : cadre étroit, bords très arrondis, centré dans sa colonne. */
.shot-frame-phone{width:min(272px,72%);margin:0 auto;padding:9px;border-radius:34px;background:#0a0c14;box-shadow:0 26px 54px -14px rgba(6,27,79,.5),inset 0 0 0 1px rgba(255,255,255,.08)}
.shot-frame-phone .frame-screen,.shot-frame-phone .shot-image{border-radius:26px}
.frame-notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:82px;height:19px;border-radius:0 0 12px 12px;background:#0a0c14;z-index:2}

/* Agrandissement : discret au repos, franc au survol du cadre. */
.shot-zoom{position:absolute;right:12px;bottom:12px;z-index:3;display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:11px;background:rgba(10,12,20,.72);color:#fff;cursor:pointer;opacity:0;transform:translateY(6px);backdrop-filter:blur(6px);transition:opacity .3s var(--ease),transform .3s var(--ease),background .2s}
.shot-frame:hover .shot-zoom,.shot-zoom:focus-visible{opacity:1;transform:none}
.shot-zoom:hover{background:var(--blue)}
.shot-zoom .icon{width:17px;height:17px}
.shot-frame-phone .shot-zoom{right:18px;bottom:18px}

/* ------------------------------------------------------------- Légende */
.shot-caption{margin:0;min-height:46px;color:var(--muted);font-size:13.5px;line-height:1.6}
.shot-caption strong{display:block;margin-bottom:3px;color:var(--navy);font-family:Manrope,'DM Sans',sans-serif;font-size:15px}

/* ------------------------------------------------------------ Vignettes */
.shot-thumbs{display:flex;gap:10px;flex-wrap:wrap}
.shot-thumb{position:relative;width:92px;padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#0b0b0d;line-height:0;cursor:pointer;opacity:.62;transition:opacity .28s var(--ease),transform .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease)}
.shot-thumb img{display:block;width:100%;height:auto}
.shot-thumb:hover{opacity:1;transform:translateY(-3px)}
.shot-thumb.active{opacity:1;border-color:var(--blue);box-shadow:0 0 0 2px rgba(21,136,186,.28),0 8px 18px rgba(6,27,79,.14)}
.showcase-phone .shot-thumbs{justify-content:center}
.showcase-phone .shot-thumb{width:52px}
/* Sans JavaScript, cliquer une vignette ne ferait rien : on ne la montre pas. */
body:not(.js-ready) .shot-thumbs{display:none}

/* --------------------------------------- Repli sans capture préparée */
.mockup-stage{display:grid;place-items:center;gap:14px;min-height:340px;padding:28px;border-radius:var(--radius);background:linear-gradient(135deg,var(--nuit),var(--nuit-2))}
.mockup-note{display:inline-flex;align-items:center;gap:8px;color:#8fd6ea;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}
.mockup-note .icon{width:16px;height:16px}
.mockup-shell{display:grid;gap:10px;width:min(100%,420px);padding:22px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.06)}
.mockup-bar{height:10px;border-radius:99px;background:rgba(255,255,255,.16)}
.mockup-bar.short{width:58%}
.mockup-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px}
.mockup-tiles i{height:44px;border-radius:10px;background:rgba(255,255,255,.09)}

/* ---------------------------------------------------------- Visionneuse */
/* ------------------------------------------------------ Visionneuse
   La capture doit tenir ENTIÈREMENT dans la fenêtre, légende comprise. La
   version précédente bornait l'image à `76vh` : une hauteur choisie à l'avance,
   qui ignorait les 24 px de marge, l'espacement et les deux lignes de légende
   posées dessous. Sur un portable — ou sur toute fenêtre pas tout à fait haute —
   le total dépassait l'écran, et une grille centrée déborde par les DEUX bouts :
   le haut et le bas de la capture passaient hors champ, sans moyen de les
   atteindre puisque la page ne défile plus derrière.

   Deux changements suffisent :
     - la hauteur maximale se calcule à partir de la fenêtre RÉELLE (`dvh` sur
       mobile, où la barre d'adresse mange une partie de `100vh`), moins la
       place occupée par le reste ;
     - le conteneur défile en dernier recours, pour qu'aucune fenêtre, si basse
       soit-elle, ne puisse rendre une partie de l'image inaccessible.
   Les boutons, eux, sont ancrés au conteneur plein écran (voir sections/lightbox.php) :
   ils ne dépendent plus de la hauteur de l'image.

   Tout ici repose sur `position:fixed` — donc sur le fait qu'AUCUN ancêtre de
   `#lightbox` ne porte de transform, de filter ni d'animation de transform. C'est
   pour cette raison que la boîte est rendue hors de <main>. */
.lightbox{--lightbox-chrome:176px;position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto;overscroll-behavior:contain}
.lightbox[hidden]{display:none}
.lightbox-backdrop{position:fixed;inset:0;background:rgba(4,12,32,.86);backdrop-filter:blur(8px);opacity:0;transition:opacity .22s var(--ease)}
.lightbox.is-open .lightbox-backdrop{opacity:1}
/* `margin:auto` centre la figure quand elle tient, et la laisse commencer en
   haut quand elle déborde — un centrage par `align-items` seul l'aurait rognée. */
.lightbox-figure{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px;margin:auto;max-width:min(1180px,94vw);opacity:0;transform:scale(.97) translateY(10px);transition:opacity .26s var(--ease-doux),transform .26s var(--ease-doux)}
.lightbox.is-open .lightbox-figure{opacity:1;transform:none}
/* `--lightbox-chrome` = tout ce qui n'est pas l'image : marges (48), espacement
   (14), légende sur deux lignes (~70) et le dégagement des flèches. En variable
   plutôt qu'en dur, pour que le mobile n'ait qu'à la redéfinir sans redéclarer
   deux fois la hauteur — et sans que l'ordre des règles décide du résultat. */
.lightbox-figure img{max-width:100%;max-height:calc(100vh - var(--lightbox-chrome));width:auto;height:auto;border-radius:12px;background:#0b0b0d;box-shadow:0 30px 70px rgba(0,0,0,.5);transition:opacity .28s var(--ease)}
/* Le temps que la capture arrive, sa boîte est déjà réservée au bon rapport (le
   script pose `width`/`height` avant la source) : reste à ne pas montrer une
   image qui se dévoile par bandes, ni la précédente déformée à la taille de la
   suivante. Même idiome que la galerie, où l'on change aussi de source en place. */
.lightbox-figure img.is-chargement{opacity:.12}
@supports (height:100dvh){.lightbox-figure img{max-height:calc(100dvh - var(--lightbox-chrome))}}
.lightbox-figure figcaption{max-width:640px;text-align:center;color:#c8d6ea;font-size:13.5px;line-height:1.6}
.lightbox-figure figcaption strong{display:block;margin-bottom:4px;color:#fff;font-family:Manrope,'DM Sans',sans-serif;font-size:16px}
.lightbox-nav,.lightbox-close{position:fixed;z-index:2;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;backdrop-filter:blur(6px);transition:background .2s,transform .2s var(--ease)}
.lightbox-close:hover{background:var(--blue);transform:scale(1.06)}
.lightbox-nav{top:50%;width:46px;height:46px;transform:translateY(-50%)}
.lightbox-nav:hover{background:var(--blue);transform:translateY(-50%) scale(1.06)}
.lightbox-nav.prev{left:18px}
.lightbox-nav.next{right:18px}
.lightbox-close{top:18px;right:18px;width:38px;height:38px}
.lightbox-nav .icon,.lightbox-close .icon{width:20px;height:20px}
body.lightbox-open{overflow:hidden}

/* ========================= Vidéo de présentation ========================= */
/* Sept plans enchaînés dans un plateau 16:9 (voir inc/sections/video.php).

   TOUT est dimensionné en `--u`, qui vaut 1 % de la largeur du plateau. Sans
   cette unité, il faudrait redéclarer chaque taille de texte et chaque cadre à
   chaque palier de largeur : une scène composée pour 1160 px se disloque à
   700 px, le titre passant sur cinq lignes pendant que le téléphone déborde par
   le bas. Avec elle, le plan entier se réduit d'un bloc, comme le ferait une
   vraie vidéo — la composition reste celle qu'on a réglée.

   `--u` se calcule à partir du conteneur, pas d'un `cqw` : une requête de
   conteneur ferait dépendre le rendu d'une fonctionnalité que ce site n'utilise
   nulle part ailleurs, alors que `min()` suffit et fonctionne partout. */
.video-section{background-color:rgba(255,255,255,.74)}
/* La mise en couleur du second membre de phrase n'existait que pour `h1` : dans
   un `h2` l'`em` serait ressorti en italique, ce qu'aucun titre du site n'est.
   Le titre de cette section oppose deux moments — le chantier puis le bureau —
   et c'est cette bascule que la couleur doit rendre lisible. */
.video-section h2 em{font-style:normal;color:var(--blue)}
/* Accroche plus longue qu'ailleurs : `pretty` évite le mot seul en dernière
   ligne, sans toucher aux autres sections. */
.video-section .section-lead{text-wrap:pretty}
/* Pastilles de faits, calquées sur `.hosting-points` — mêmes dimensions, mêmes
   couleurs, simplement centrées sous un titre centré. */
.video-points{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:22px 0 0}
.video-points span{padding:9px 13px;border-radius:999px;background:#fff;border:1px solid #e3edf0;color:#26506f;font-size:12px;font-weight:700}
.video-figure{--u:min(11.6px,(100vw - 44px)/100);margin:0}
.video-plateau{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--navy);box-shadow:0 30px 70px -24px rgba(4,12,32,.55)}

.video-plan{position:absolute;inset:0;opacity:0}
/* Le poster est le plan qui résume la promesse : c'est celui qu'on doit voir à
   l'arrêt, y compris quand le script ne tourne pas. Les opacités posées par le
   script sont en style inline, elles l'emportent dès que la lecture commence. */
.video-plan[data-poster]{opacity:1}
.video-fond{position:absolute;inset:0;background:radial-gradient(circle at 12% 18%,rgba(44,180,215,.22),transparent 45%),radial-gradient(circle at 88% 82%,rgba(120,191,58,.16),transparent 45%),linear-gradient(160deg,#061b4f 0%,#0b2c63 58%,#0a2352 100%)}
.video-frise{position:absolute;left:0;right:0;bottom:0;height:38%;background:url("assets/frise-metiers.png") repeat-x bottom left;background-size:auto 100%;opacity:.3;-webkit-mask-image:linear-gradient(180deg,transparent,#000 55%);mask-image:linear-gradient(180deg,transparent,#000 55%)}

.video-texte{position:absolute;left:calc(var(--u)*6);right:calc(var(--u)*6);display:grid;gap:calc(var(--u)*1.1);justify-items:start}
.video-texte.centre{justify-items:center;text-align:center;left:calc(var(--u)*8);right:calc(var(--u)*8)}
.video-surtitre{display:flex;align-items:center;gap:calc(var(--u)*1);margin:0;font-family:Manrope,'DM Sans',sans-serif;font-weight:800;font-size:calc(var(--u)*1.15);letter-spacing:.22em;text-transform:uppercase;color:var(--cyan)}
.video-surtitre i{display:block;width:calc(var(--u)*2.4);height:2px;background:var(--green)}
.video-titre{margin:0;font-family:Manrope,'DM Sans',sans-serif;font-weight:800;color:#fff;font-size:calc(var(--u)*4.6);line-height:1.07;letter-spacing:-.035em}
.video-titre.petit{font-size:calc(var(--u)*3.5)}
.video-titre em{font-style:normal;color:var(--cyan)}
.video-sous{margin:0;font-size:calc(var(--u)*1.5);line-height:1.55;color:#9fb2d1;max-width:44ch}
/* Sous un titre centré, la phrase respire plus large : à 44ch elle formait une
   colonne étroite au milieu d'un plateau vide. */
.video-sous.centre-texte{max-width:56ch;text-align:center}
.video-cta{margin:calc(var(--u)*1) 0 0}
.video-cta .button{padding:calc(var(--u)*1.2) calc(var(--u)*2);font-size:calc(var(--u)*1.3);box-shadow:none;background:var(--blue)}
.video-cta .button:hover{background:var(--cyan)}

/* Chaque ligne monte à son tour, sur ordre du script : c'est ce décalage qui
   fait lire dans l'ordre voulu au lieu de tout jeter à l'écran d'un coup. */
.video-plan [data-in]{opacity:0;transform:translateY(calc(var(--u)*1.2));transition:opacity .5s var(--ease),transform .5s var(--ease-doux)}
.video-plan [data-in].on{opacity:1;transform:none}
.video-figure:not(.est-lue) [data-poster] [data-in]{opacity:1;transform:none}

/* Cadres d'appareils — même vocabulaire que la section Plateformes. */
/* `.inverse` ne change rien ici : les plans qui montrent l'appareil à gauche le
   placent simplement en premier dans le balisage. La classe ne sert qu'en bas de
   fichier, pour rétablir texte-puis-image quand la grille passe sur une colonne. */
.video-duo{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:calc(var(--u)*4);padding:0 calc(var(--u)*6)}
/* Le bloc de texte reprend sa place dans le FLUX : les plans en pleine largeur
   (ouverture, clôture) le positionnent absolument pour le caler à une hauteur
   choisie, mais dans une grille à deux colonnes il doit occuper la sienne. Sans
   cette remise à zéro il s'étalait sur tout le plateau, derrière l'appareil, et
   la grille — réduite à un seul enfant dans le flux — centrait le cadre. */
.video-duo .video-texte{position:static;left:auto;right:auto}
.video-cadre{position:relative;justify-self:center;filter:drop-shadow(0 calc(var(--u)*2) calc(var(--u)*3) rgba(0,0,0,.45))}
.video-cadre img{display:block;width:100%;height:auto}
.video-navigateur,.video-fenetre{width:min(100%,calc(var(--u)*44));border-radius:calc(var(--u)*.9);overflow:hidden;background:#0b0b0d;border:1px solid rgba(255,255,255,.16)}
/* Cerne clair obligatoire : le châssis du téléphone valait #092151, c'est-à-dire
   la couleur du fond du plateau. Une capture en thème sombre posée dedans se
   fondait dans le décor — on ne voyait plus un appareil, juste une tache. */
.video-tel{width:calc(var(--u)*17);border:calc(var(--u)*.7) solid #0d2a63;border-radius:calc(var(--u)*2.4);background:#0d2a63;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.17)}
.video-encoche{position:absolute;top:calc(var(--u)*.35);left:50%;transform:translateX(-50%);width:36%;height:calc(var(--u)*1.4);background:#092151;border-radius:0 0 calc(var(--u)*1.1) calc(var(--u)*1.1);z-index:2}
.video-barre-cadre{height:calc(var(--u)*2.4);display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*.5);padding:0 calc(var(--u)*1);background:#f0f4f6;color:#5c6a7d;font-size:calc(var(--u)*1);font-weight:700}
.video-barre-cadre.chrome{justify-content:flex-start}
.video-barre-cadre i{width:calc(var(--u)*.55);height:calc(var(--u)*.55);border-radius:50%;background:#e3726a;flex-shrink:0}
.video-barre-cadre i:nth-child(2){background:#f2c35c}
.video-barre-cadre i:nth-child(3){background:#70bc73}
.video-barre-cadre.chrome span{margin-left:calc(var(--u)*.8);font-weight:600;color:#8492a0}

/* Panoramique lent piloté par --p (0 → 1), posé par le script sur le plan actif.
   C'est le seul mouvement des plans produit : il ne recadre presque rien, et ne
   déforme jamais l'interface — une capture étirée décrédibiliserait tout. */
.video-zoom{transform:scale(calc(1.01 + var(--p,0)*.045));transform-origin:50% 30%}

.video-fils{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.video-fils path{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:6 10;animation:video-file 2.4s linear infinite}
@keyframes video-file{to{stroke-dashoffset:-32}}
/* Trio : la même fonction sur les trois plateformes, en rang. Le décrochement
   depuis le haut laisse la place au surtitre, au titre sur deux lignes et à sa
   phrase — mesuré, pas approché : sous 21u le titre passait derrière les cadres. */
.video-trio{position:absolute;inset:calc(var(--u)*21) 0 0;display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*3)}
.video-trio .video-tel{width:calc(var(--u)*13)}
.video-trio .video-navigateur{width:calc(var(--u)*30)}
.video-trio .video-fenetre{width:calc(var(--u)*25)}

/* Paire : l'écran large du chapitre, et le téléphone qui porte la même fonction
   posé sur son coin. La composition dit « la même chose, aux deux endroits » sans
   avoir à l'écrire — et elle tient dans une demi-colonne, ce que deux cadres
   côte à côte ne feraient pas sans devenir illisibles. */
.video-paire{position:relative;justify-self:center;width:100%;padding:0 calc(var(--u)*7) calc(var(--u)*6) 0}
.video-paire .video-navigateur,.video-paire .video-fenetre{width:100%}
.video-paire .video-tel{position:absolute;right:0;bottom:0;z-index:2;width:calc(var(--u)*11)}

/* Bouton de lecture, deux états — et c'est `est-lue` qui les sépare, pas `joue` :
   voile plein cadre et gros rond AVANT la première lecture, c'est l'invitation ;
   petit rond en coin ENSUITE. Un voile plein cadre qui revient à chaque pause
   recouvrirait exactement ce qu'on est venu regarder, et une mise en pause pour
   examiner un écran est le geste le plus attendu de cette section. */
.video-lecture{position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center;border:0;background:rgba(6,27,79,.3);cursor:pointer;transition:background .3s var(--ease),opacity .25s var(--ease)}
.video-lecture:hover{background:rgba(6,27,79,.16)}
.video-lecture-rond{display:grid;place-items:center;width:max(56px,calc(var(--u)*6.4));height:max(56px,calc(var(--u)*6.4));border-radius:50%;background:rgba(255,255,255,.94);color:var(--navy);box-shadow:0 14px 34px rgba(4,12,32,.45);transition:transform .25s var(--ease),background .25s,width .3s var(--ease-doux),height .3s var(--ease-doux)}
.video-lecture:hover .video-lecture-rond{transform:scale(1.07);background:#fff}
.video-lecture .icon{width:42%;height:42%}
.video-icone-pause,.video-figure.joue .video-icone-play{display:none}
.video-figure.joue .video-icone-pause{display:block}

.video-figure.est-lue .video-lecture{inset:auto calc(var(--u)*2.4) calc(var(--u)*2.4) auto;width:auto;height:auto;background:none;place-items:end}
.video-figure.est-lue .video-lecture-rond{width:max(42px,calc(var(--u)*3.8));height:max(42px,calc(var(--u)*3.8));box-shadow:0 8px 22px rgba(4,12,32,.45)}
/* Pendant la lecture il s'effile ; il revient au survol et au focus clavier. */
.video-figure.joue .video-lecture{opacity:0}
.video-figure.joue:hover .video-lecture,.video-figure.joue .video-lecture:focus-visible{opacity:1}
/* Sans survol, aucun geste ne le ferait réapparaître : sur tactile il reste
   visible, sinon la vidéo devient impossible à arrêter. */
@media(hover:none){.video-figure.joue .video-lecture{opacity:1}}

.video-commandes{display:flex;align-items:center;gap:16px;margin-top:18px}
.video-reprise{border:1px solid var(--line);background:#fff;color:var(--navy);font-weight:700;font-size:13px;padding:9px 15px;border-radius:99px;cursor:pointer;transition:border-color .2s,color .2s}
.video-reprise:hover{border-color:var(--blue);color:var(--blue)}
.video-piste{flex:1;height:6px;border-radius:99px;background:var(--line);position:relative;cursor:pointer}
.video-piste-remplie{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:99px;background:linear-gradient(90deg,var(--blue),var(--green))}
.video-chrono{font-size:13px;color:var(--muted);min-width:82px;text-align:right;font-variant-numeric:tabular-nums}

@media(max-width:620px){
  .video-figure{--u:min(11.6px,(100vw - 34px)/100)}
  /* LE PLATEAU SE REDRESSE. Un 16:9 large de 340 px offre 191 px de hauteur : il
     n'y a place ni pour le texte du chapitre ni pour les cadres, et tout se
     chevauchait. Un téléphone donne de la hauteur en abondance — c'est la seule
     dimension à ne pas ménager ici. Le format vertical est aussi celui qu'on
     regarde sur un téléphone : ce n'est pas un pis-aller. */
  .video-plateau{aspect-ratio:4/5}
  .video-titre{font-size:calc(var(--u)*5.4)}
  .video-titre.petit{font-size:calc(var(--u)*4.2)}
  .video-sous{font-size:calc(var(--u)*2)}
  .video-sous.centre-texte{max-width:38ch}
  .video-surtitre{font-size:calc(var(--u)*1.6)}
  .video-duo{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;gap:calc(var(--u)*5);padding:0 calc(var(--u)*7)}
  /* Le texte passe toujours en premier : sur une colonne, l'ordre du balisage des
     plans « appareil à gauche » mettrait l'image avant ce qui l'explique. */
  .video-duo.inverse>.video-paire,.video-duo.inverse>.video-cadre{order:2}
  .video-navigateur,.video-fenetre{width:min(100%,calc(var(--u)*70))}
  .video-paire{padding:0 calc(var(--u)*13) calc(var(--u)*9) 0}
  .video-paire .video-tel{width:calc(var(--u)*20)}
  .video-trio{inset:calc(var(--u)*34) 0 0;gap:calc(var(--u)*2.5)}
  .video-trio .video-tel{width:calc(var(--u)*15)}
  .video-trio .video-navigateur{width:calc(var(--u)*34)}
  .video-trio .video-fenetre{width:calc(var(--u)*29)}
  .video-commandes{flex-wrap:wrap}
  .video-piste{order:3;flex-basis:100%}
}

@media(prefers-reduced-motion:reduce){
  .video-zoom{transform:none}
  .video-fils path{animation:none}
}

/* ========================= Finitions visuelles d'ensemble ================ */

/* Barre de progression : dégradé de marque plutôt qu'un aplat. */
.scroll-progress{background:linear-gradient(90deg,var(--blue),var(--cyan) 55%,var(--green))}

/* Filet dégradé sous les titres de section centrés. */
.section-heading.centered{margin-bottom:52px}
.section-heading.centered h2{position:relative;display:inline-block}
.section-heading.centered h2:after{content:"";position:absolute;left:50%;bottom:-14px;width:64px;height:3px;border-radius:99px;transform:translateX(-50%);background:linear-gradient(90deg,var(--blue),var(--green))}

/* Cartes : une seule courbe de mouvement pour toute la page, et un liseré qui
   s'allume — le survol indique que la carte est un objet, pas une image. */
.trade-card,.feature-card,.host-card,.editor-card,.step-card{transition:transform .38s var(--ease-doux),box-shadow .38s var(--ease-doux),border-color .38s var(--ease-doux)}
.trade-card:hover,.host-card:hover{transform:translateY(-5px);border-color:rgba(21,136,186,.3);box-shadow:var(--shadow-lg)}
.trade-icon{transition:transform .38s var(--ease-doux),background .3s}
.trade-card:hover .trade-icon{transform:translateY(-2px) rotate(-4deg);background:#d5eef7}

/* La flèche d'un lien avance au survol : le lien devient une action. */
.text-link .icon{transition:transform .3s var(--ease-doux)}
.text-link:hover .icon{transform:translateX(3px)}

/* Léger enfoncement au clic, pour un retour tactile crédible. */
.button:active{transform:translateY(0) scale(.985)}

/* Révélation : translation ET mise à l'échelle infime, plus douce à l'œil que
   la translation seule. */
.reveal{transform:translateY(22px) scale(.995);transition:opacity .7s var(--ease-doux),transform .7s var(--ease-doux)}
.reveal.visible{transform:none}

@media(max-width:850px){
  .platform-panel{gap:34px}
  .shot-frame-phone{width:min(240px,66%)}
}
@media(max-width:620px){
  .section-heading.centered{margin-bottom:36px}
  .shot-caption{min-height:0}
  .shot-thumb{width:70px}
  .showcase-phone .shot-thumb{width:46px}
  /* Sur mobile, les flèches passent en bas, dans le pouce : sur les côtés elles
     recouvraient une capture de téléphone, qui occupe presque toute la largeur.
     La hauteur disponible se réduit d'autant. */
  .lightbox{--lightbox-chrome:210px;padding:14px}
  .lightbox-nav{top:auto;bottom:16px;width:42px;height:42px;transform:none}
  .lightbox-nav:hover{transform:scale(1.06)}
  .lightbox-nav.prev{left:16px}
  .lightbox-nav.next{right:16px}
  .lightbox-close{top:12px;right:12px}
}

/* ============================== Formules et tarifs ======================= */
.tarifs-section{background:linear-gradient(180deg,#fbfdfe 0%,#f2f8fa 100%)}

/* Bascule mensuel / annuel — même curseur glissant que les onglets Plateformes. */
.tarifs-bascule{display:flex;justify-content:center;gap:4px;width:max-content;max-width:100%;margin:0 auto 38px;padding:4px;border-radius:99px;background:#eff5f7}
.bascule-option{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border:0;border-radius:99px;background:transparent;color:#627188;font-weight:700;font-size:13px;cursor:pointer;transition:background .3s var(--ease-doux),color .25s var(--ease)}
.bascule-option.active{background:#fff;color:var(--navy);box-shadow:0 3px 9px rgba(6,27,79,.09)}
.bascule-gain{padding:2px 8px;border-radius:99px;background:rgba(120,191,58,.18);color:#46791b;font-size:10.5px;font-weight:800;letter-spacing:.2px}

/* Cinq colonnes sur grand écran, puis dégressif. `align-items:start` : les cartes
   n'ont pas le même nombre d'arguments, les étirer ferait flotter les boutons. */
.tarifs-grille{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;align-items:start}
.tarif-carte{position:relative;display:flex;flex-direction:column;height:100%;padding:24px 20px;border:1px solid #e3edf0;border-radius:18px;background:#fff;box-shadow:var(--shadow-sm);transition:transform .38s var(--ease-doux),box-shadow .38s var(--ease-doux),border-color .38s var(--ease-doux)}
.tarif-carte:hover{transform:translateY(-5px);border-color:rgba(21,136,186,.3);box-shadow:var(--shadow-lg)}
.tarif-vedette{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),var(--shadow-md)}
.tarif-ruban{position:absolute;top:-11px;left:50%;transform:translateX(-50%);padding:4px 12px;border-radius:99px;background:linear-gradient(120deg,var(--navy),var(--blue));color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.3px;white-space:nowrap}
.tarif-nom{font-size:19px;margin:0 0 4px;color:var(--navy)}
.tarif-resume{margin:0 0 16px;color:var(--muted);font-size:12.5px;line-height:1.5;min-height:38px}
.tarif-prix{margin:0 0 4px;display:flex;flex-direction:column;gap:2px}
.tarif-montant{font:800 30px/1 Manrope,'DM Sans',sans-serif;color:var(--navy);letter-spacing:-1px}
.tarif-unite{color:var(--muted);font-size:11.5px}
.tarif-essai{display:flex;align-items:center;gap:6px;margin:12px 0 16px;color:#46791b;font-size:11.5px;font-weight:700}
.tarif-essai .icon{width:14px;height:14px}
.tarif-essai-vide{color:var(--muted);font-weight:600}
.tarif-plateformes{list-style:none;margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid var(--line);display:grid;gap:7px}
.tarif-plateformes li{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:#40516c}
.tarif-plateformes .icon{width:14px;height:14px;flex-shrink:0}
.tarif-plateformes .incluse .icon{color:#67af30}
.tarif-plateformes .exclue{color:#a3aec0;text-decoration:line-through}
.tarif-plateformes .exclue .icon{color:#c3ccd8}
.tarif-plateformes .metiers{color:var(--blue)}
.tarif-points{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:6px;flex:1}
.tarif-points li{position:relative;padding-left:15px;color:var(--muted);font-size:12px;line-height:1.5}
.tarif-points li:before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--cyan)}
.tarif-cta{width:100%;padding:11px 14px;font-size:13px}
.tarifs-note{max-width:760px;margin:34px auto 0;text-align:center;color:var(--muted);font-size:12.5px;line-height:1.75}

@media(max-width:1100px){
  .tarifs-grille{grid-template-columns:repeat(3,1fr)}
  .tarif-resume{min-height:0}
}
@media(max-width:760px){.tarifs-grille{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){
  .tarifs-grille{grid-template-columns:1fr}
  .tarifs-bascule{width:100%}
  .bascule-option{flex:1;justify-content:center;padding:10px 12px;font-size:12px}
  .bascule-gain{display:none}
}

/* ---------------------------------------------- Animations de la grille tarifaire */
/* Le prix change au basculement mensuel/annuel : sans transition, le chiffre se
   téléporte et l'œil ne sait pas ce qui vient d'être modifié. Le montant sort par
   le haut, revient par le bas — le sens du mouvement porte l'information. */
.tarif-montant,.tarif-unite{display:inline-block;transition:opacity .18s var(--ease),transform .18s var(--ease)}
.tarifs-grille.change .tarif-montant,.tarifs-grille.change .tarif-unite{opacity:0;transform:translateY(-7px)}

/* Carte mise en avant : halo qui respire lentement. Assez lent pour ne pas
   accrocher le regard pendant la lecture, assez présent pour désigner le palier. */
@keyframes respire{0%,100%{box-shadow:0 0 0 1px var(--blue),var(--shadow-md)}50%{box-shadow:0 0 0 1px var(--blue),0 0 0 6px rgba(21,136,186,.09),var(--shadow-lg)}}
.tarif-vedette{animation:respire 4.5s ease-in-out infinite}
.tarif-ruban{animation:flotte 4.5s ease-in-out infinite}
@keyframes flotte{50%{transform:translateX(-50%) translateY(-3px)}}

/* Les puces de plateforme s'allument une à une quand la carte se révèle : c'est la
   ligne que le visiteur vient lire, elle mérite d'attirer l'œil en dernier. */
.tarif-carte .tarif-plateformes li{opacity:0;transform:translateX(-6px);transition:opacity .4s var(--ease-doux),transform .4s var(--ease-doux)}
.tarif-carte.visible .tarif-plateformes li{opacity:1;transform:none}
.tarif-carte.visible .tarif-plateformes li:nth-child(1){transition-delay:.16s}
.tarif-carte.visible .tarif-plateformes li:nth-child(2){transition-delay:.24s}
.tarif-carte.visible .tarif-plateformes li:nth-child(3){transition-delay:.32s}
.tarif-carte.visible .tarif-plateformes li:nth-child(4){transition-delay:.40s}

/* Survol : le tarif prend un cran de plus, le bouton se remplit. */
.tarif-carte:hover .tarif-montant{transform:scale(1.04)}
.tarif-carte .tarif-cta{transition:transform .3s var(--ease-doux),background .25s var(--ease)}
.tarif-carte:hover .tarif-cta.button-secondary{background:var(--navy);color:#fff;border-color:transparent}

/* Bascule mensuel/annuel : la pastille « 2 mois offerts » pulse une fois à
   l'apparition de la section, juste assez pour être remarquée. */
.tarifs-bascule.visible .bascule-gain{animation:pastille .9s var(--ease-doux) .5s both}
@keyframes pastille{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}

/* ==========================================================================
   Fond « atelier » et écran de chargement — identité visuelle d'ensemble.
   ========================================================================== */

/* -------------------------------------------------------- Fond du site */
/* La tuile des treize métiers est portée par un pseudo-élément FIXE placé derrière
   tout le document, et non par `background-image` sur body.
   Deux raisons, apprises en essayant l'inverse :
     - un fond de body est recouvert par la première section opaque venue, et le
       motif ne se voyait donc nulle part ;
     - `background-blend-mode: soft-light` d'un trait bleu clair sur un fond quasi
       blanc s'annule purement et simplement — le motif était bien chargé, et
       parfaitement invisible.
   Un calque séparé rend l'opacité pilotable d'une seule valeur, et le `fixed` fait
   glisser la page par-dessus : de la profondeur sans parallaxe au scroll. */
html{background:linear-gradient(180deg,#fbfdfe 0%,#f4fafb 100%)}
body{background:transparent}
body:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
}
/* Frise des métiers — l'illustration au trait fournie, détourée et répétée en bas de
   la fenêtre. Ancrée en bas plutôt que répétée en tuile : c'est une SCÈNE au sol
   (des artisans agenouillés, une ligne de chantier continue), la carreler
   verticalement mettrait des ouvriers en plein ciel.
   `background-attachment: fixed` : la page défile par-dessus la frise, qui reste
   posée au bas de l'écran comme une ligne d'horizon. */
body:after{
  content:"";
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:min(340px,38vh);
  z-index:-1;
  background:url("assets/frise-metiers.png") repeat-x bottom left;
  background-size:auto 100%;
  opacity:.42;
  pointer-events:none;
  /* Fondu vers le haut : la frise sort du blanc au lieu d'être coupée net. */
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 40%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 40%);
}

/* La tuile d'icônes générée reste, très discrète, pour habiller le HAUT de la page
   là où la frise ne monte pas — les deux couches se relaient sans se superposer. */
body:before{
  background:
    url("assets/fond-metiers.svg") repeat,
    radial-gradient(circle at 12% 6%,rgba(44,180,215,.14),transparent 44%),
    radial-gradient(circle at 88% 20%,rgba(120,191,58,.10),transparent 40%);
  background-size:620px 620px,auto,auto;
  opacity:.55;
}

/* Les sections qui posaient un aplat opaque le rendent translucide : la texture
   transparaît sans que le texte y perde en lisibilité. La hero garde son dégradé,
   simplement adouci pour laisser voir les motifs derrière son titre. */
.hero{background:linear-gradient(120deg,rgba(247,251,253,.86) 0%,rgba(255,255,255,.78) 53%,rgba(241,249,252,.86) 100%)}
.section.platforms{background-color:rgba(255,255,255,.74)}
.trades-section,.tarifs-section{background-image:none;background-color:rgba(251,253,254,.78)}
.features-section,.hosting-section,.editor-section{background-image:none;background-color:rgba(246,252,254,.80)}
.security{background-color:rgba(234,246,248,.88)}
.metrics,.contact,footer{position:relative;z-index:1}

/* --------------------------------------------------- Écran de chargement */
.preloader{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:linear-gradient(160deg,#061b4f 0%,#0b2c63 55%,#1588ba 140%);transition:opacity .5s var(--ease-doux),visibility .5s}
.preloader[hidden]{display:none}
.preloader.is-parti{opacity:0;visibility:hidden;pointer-events:none}
.preloader-inner{display:flex;flex-direction:column;align-items:center;gap:22px;padding:0 24px}
.preloader-logo{width:180px;height:auto;padding:14px 18px;border-radius:14px;background:#fff;box-shadow:0 20px 50px rgba(0,0,0,.28);animation:preloader-entre .6s var(--ease-doux) backwards}
@keyframes preloader-entre{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}

/* Barre déterminée : sa largeur suit la progression réelle du chargement (voir
   script.js). Une barre qui tourne en boucle n'informe de rien ; celle-ci avance
   avec les ressources et finit à 100 % avant de disparaître. */
.preloader-piste{width:min(260px,60vw);height:4px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden}
.preloader-barre{display:block;width:0;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--cyan),var(--green));transition:width .35s var(--ease-doux)}
.preloader-texte{margin:0;color:rgba(255,255,255,.62);font-size:12.5px;letter-spacing:.4px}

/* Le contenu monte doucement une fois le voile parti — la page n'apparaît pas d'un
   coup, elle se pose.

   `backwards` et SURTOUT PAS `both` : une animation de `transform` qui garde son
   état final (`forwards`) reste « en effet » pour toujours, et le navigateur
   continue alors de traiter l'élément comme transformé — même quand l'image finale
   vaut `transform:none`. `<main>` devenait ainsi, définitivement, le bloc conteneur
   de tous ses descendants `position:fixed` : la visionneuse de captures se calait
   sur la hauteur entière de la page au lieu de la fenêtre, et n'affichait plus
   qu'un voile sombre avec sa croix de fermeture. L'état final étant identique au
   style de base, `forwards` n'apportait rien de toute façon. */
body.chargement-fini main,body.chargement-fini .site-header{animation:page-entre .6s var(--ease-doux) backwards}
@keyframes page-entre{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Tant que le voile est là, la page ne défile pas sous lui. */
body.chargement-en-cours{overflow:hidden}

@media(prefers-reduced-motion:reduce){
  .preloader-logo,body.chargement-fini main,body.chargement-fini .site-header{animation:none}
}
@media(max-width:620px){
  body{background-attachment:scroll;background-size:520px 520px,auto,auto,auto}
  .preloader-logo{width:150px}
}

/* ========================================================================== */
/* PAGES MÉTIER — /metiers et /metiers/<slug>                                 */
/* ========================================================================== */
/* Tout ce qui suit réemploie les composants de l'accueil (`.trade-card`,      */
/* `.editor-card`, `.faq-item`, `.section-heading`) : ces pages ne sont pas un */
/* second gabarit, seulement le même site avec deux blocs qui lui manquaient — */
/* le fil d'Ariane et l'encadré de résumé.                                     */

/* ------------------------------------------------------------ Fil d'Ariane */
/* Discret par construction : c'est un repère de position, pas une navigation
   principale. Il défile horizontalement plutôt que de passer à la ligne sur
   petit écran — trois étapes coupées en deux lignes se lisent mal et pousseraient
   le H1 sous la ligne de flottaison. */
.fil-ariane{margin:0 0 26px;font-size:13px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.fil-ariane ol{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;gap:8px;white-space:nowrap;
}
.fil-ariane li{display:flex;align-items:center;gap:8px}
.fil-ariane li+li:before{content:"›";color:#9aabbd;font-weight:700}
.fil-ariane a{color:var(--blue);font-weight:600}
.fil-ariane a:hover{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.fil-ariane [aria-current]{color:var(--muted)}

/* -------------------------------------------------------------- L'accroche */
.metier-tete{
  padding-top:64px;
  background:linear-gradient(180deg,#fbfdfe 0%,#fff 62%);
}
.metier-tete-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:52px;align-items:start}
.metier-tete h1{font-size:clamp(34px,3.7vw,54px);letter-spacing:-2.2px;margin-bottom:22px}
.metier-tete .doc-lead{color:var(--muted);font-size:16.5px;line-height:1.75;margin:0 0 16px;max-width:62ch}
.metier-tete .hero-actions{margin-top:28px}

/* Encadré de résumé : ce que le secteur ouvre, en trois lignes. Il répond à la
   question que le visiteur se pose vraiment en arrivant — « et pour MOI, ça
   donne quoi ? » — sans qu'il ait à lire les deux paragraphes d'accroche. */
.metier-resume{
  position:sticky;top:96px;
  background:#fff;border:1px solid #e3edf0;border-radius:20px;padding:24px;
  box-shadow:var(--shadow-sm);
}
/* Pas de `text-transform:capitalize` : il mettait une majuscule à CHAQUE mot,
   ce qui donnait « Sans Connexion » — une capitalisation anglaise, fautive en
   français. Les titres qui ont besoin d'une majuscule la portent dans leur
   texte. */
.metier-resume h2{font-size:17px;color:var(--navy);margin:14px 0 8px}
.metier-resume>p{margin:0 0 16px;color:var(--muted);font-size:13.5px;line-height:1.6}
.metier-resume ul{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid #eef4f6;display:grid;gap:10px}
.metier-resume li{font-size:13.5px;color:#40516c;display:flex;gap:8px;align-items:baseline}
.metier-resume li strong{color:var(--blue);font-weight:800}

/* --------------------------------------------- Cartes de métier cliquables */
/* `.trade-card` existe déjà ; on n'ajoute ici que ce qu'implique le passage de
   <article> à <a> : la couleur de texte héritée, l'affordance de lien et un
   anneau de focus visible — une carte devenue cliquable qui ne montre pas le
   focus clavier est une régression d'accessibilité, pas un détail. */
/* Le sommaire titre ses cartes en <h2> (elles sont les sections de la page),
   l'accueil en <h3> (elles sont sous son <h2> de section). La hiérarchie
   diffère, l'apparence doit rester la même : sans cette règle, le <h2>
   reprenait la taille par défaut du navigateur et poussait la grille à 550 px
   de large dans une fenêtre de 390 — la page défilait horizontalement sur
   téléphone.

   `break-word` n'est qu'un filet de sécurité, et il ne doit servir à rien : la
   vraie coupure des noms composés a lieu au trait d'union, rendu sécable par
   nom_metier_affiche() (inc/helpers.php). Si cette règle se déclenche un jour,
   c'est qu'un nom trop long a été ajouté sans point de rupture. */
.trade-card h2{
  font-size:15px;margin:0 0 6px;color:var(--navy);
  font-family:Manrope,'DM Sans',sans-serif;font-weight:700;
}
.trade-card h2,.trade-card h3{overflow-wrap:break-word}
.trade-card-lien{display:flex;flex-direction:column;color:inherit;height:100%}
.trade-card-lien:hover{border-color:rgba(21,136,186,.35)}
.trade-card-lien:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.trade-card-plus{
  margin-top:auto;padding-top:12px;
  display:inline-flex;align-items:center;gap:7px;
  color:var(--blue);font-size:12.5px;font-weight:700;
}
.trade-card-plus .icon{transition:transform .22s var(--ease)}
.trade-card-lien:hover .trade-card-plus .icon{transform:translateX(3px)}

/* ------------------------------------------------------- Les calculateurs */
/* Trois colonnes et non quatre : ces cartes portent une phrase entière, là où
   la grille de l'accueil ne porte qu'une étiquette. À quatre, la description se
   coupait sur cinq lignes étroites. */
.metier-outils-grille{grid-template-columns:repeat(3,1fr)}
.metier-outils-grille .trade-card{padding:22px}
.metier-outils-grille h3{font-size:16px;margin-bottom:8px}
.metier-outils-grille p{font-size:13.5px;line-height:1.6}
.metier-outils .trades-intro{max-width:74ch}

/* ------------------------------------------------- Maillage vers les voisins */
.metier-voisins{background:linear-gradient(180deg,#fbfdfe 0%,#f2f8fa 100%)}
.metier-liens{display:flex;flex-wrap:wrap;gap:10px}
.metier-liens a{
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 15px;border-radius:999px;
  background:#fff;border:1px solid #e3edf0;
  color:#26506f;font-size:13.5px;font-weight:700;
  transition:border-color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease);
}
.metier-liens a:hover{border-color:rgba(21,136,186,.4);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.metier-liens a:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.metier-liens .icon{color:var(--blue);font-size:17px}

.metier-note{margin:34px 0 0;color:var(--muted);font-size:14.5px}

/* ------------------------------------------------------------ Adaptations */
@media(max-width:1000px){
  .metier-outils-grille{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:850px){
  /* L'encadré passe sous l'accroche : à cette largeur, une colonne de 250 px
     rendrait le texte principal illisible. `sticky` n'a plus de sens une fois
     l'encadré dans le flux vertical — on le désactive explicitement. */
  .metier-tete-grid{grid-template-columns:1fr;gap:34px}
  .metier-resume{position:static;max-width:520px}
}
@media(max-width:620px){
  .metier-tete{padding-top:44px}
  .metier-tete .doc-lead{font-size:15px}
  .metier-outils-grille{grid-template-columns:1fr}
  .fil-ariane{font-size:12px;margin-bottom:20px}
}