:root{--ink:#171719;--muted:#66656b;--paper:#f4f3f1;--white:#fff;--red:#df1836;--red-dark:#a80824;--line:#d9d7d3;--soft:#e9e7e2;--shadow:0 24px 70px rgba(22,20,18,.13);--radius:2rem}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font:17px/1.72 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}img{display:block;max-width:100%}a{color:inherit}.skip{position:absolute;left:-999px;top:.5rem;z-index:100;background:#fff;padding:.7rem 1rem}.skip:focus{left:.5rem}.header{position:sticky;top:0;z-index:40;background:rgba(244,243,241,.94);backdrop-filter:blur(16px);border-bottom:1px solid rgba(23,23,25,.08)}.nav{width:min(1240px,calc(100% - 2rem));margin:auto;display:flex;align-items:center;min-height:74px;gap:1rem}.brand{text-decoration:none;font-size:1.18rem;font-weight:900;letter-spacing:-.04em;display:flex;align-items:center;gap:.7rem}.brand-mark{width:34px;height:34px;background:var(--red);display:grid;place-items:center;color:#fff;font-size:.72rem;font-weight:950;letter-spacing:.04em}.brand small{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.navlinks{margin-left:auto;display:flex;align-items:center;gap:.1rem}.navlinks a{text-decoration:none;color:#4e4d52;font-size:.86rem;font-weight:750;padding:.55rem .65rem;border-radius:999px}.navlinks a:hover,.navlinks a[aria-current=page]{color:#fff;background:var(--ink)}.menu{display:none;margin-left:auto;border:1px solid var(--line);background:#fff;border-radius:999px;padding:.55rem .85rem;font:inherit;font-weight:800}.container{width:min(1180px,calc(100% - 2.5rem));margin-inline:auto}.hero{background:#141416;color:#fff;overflow:hidden}.hero-grid{min-height:710px;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:3rem}.kicker{display:flex;align-items:center;gap:.65rem;color:var(--red);font-size:.74rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.kicker:before{content:"";width:2.2rem;height:3px;background:currentColor}.hero h1,.page-hero h1{font-size:clamp(3.2rem,7vw,6.7rem);line-height:.94;letter-spacing:-.07em;margin:.9rem 0 1.25rem;text-wrap:balance}.hero p{color:#cbc9cf;font-size:1.12rem;max-width:650px}.actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:.7rem 1.1rem;text-decoration:none;font-weight:850;border:1px solid #48474c}.btn-primary{background:var(--red);border-color:var(--red);color:#fff}.btn-light{color:#fff}.hero-media{position:relative}.hero-media img{width:100%;aspect-ratio:1/1.06;object-fit:cover;border-radius:10rem 0 0 0}.hero-media:after{content:"Design · fonction · connexion";position:absolute;right:0;bottom:0;background:var(--red);padding:.8rem 1.1rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;font-weight:900}.quick{margin-top:-38px;position:relative;z-index:4;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;box-shadow:var(--shadow)}.quick a{padding:1.25rem;text-decoration:none;border-right:1px solid var(--line)}.quick a:last-child{border:0}.quick strong,.quick span{display:block}.quick strong{font-size:.96rem}.quick span{font-size:.8rem;color:var(--muted);line-height:1.4}.section{padding:6rem 0}.section-dark{background:#1a1a1c;color:#fff}.section-red{background:var(--red);color:#fff}.section-head{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem;align-items:end;margin-bottom:2.7rem}.section-head h2,.prose h2{font-size:clamp(2.2rem,4.2vw,4rem);line-height:1;letter-spacing:-.055em;margin:.6rem 0}.section-head p{color:var(--muted);margin:0}.section-dark .section-head p{color:#c7c5ca}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.tile{background:#fff;border:1px solid var(--line);padding:1.5rem;min-height:260px;display:flex;flex-direction:column}.tile:nth-child(2){border-radius:0 3rem 0 0}.tile .num{font-size:.74rem;font-weight:900;color:var(--red);letter-spacing:.12em}.tile h3{font-size:1.6rem;line-height:1.08;letter-spacing:-.035em;margin:auto 0 .6rem}.tile p{color:var(--muted);font-size:.92rem}.tile a{font-weight:850;color:var(--red);text-underline-offset:.2em}.media-split{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}.media-split img{width:100%;aspect-ratio:4/3;object-fit:cover}.eyebrow-card{background:#fff;padding:2rem;border-left:7px solid var(--red)}.eyebrow-card h3{font-size:2rem;line-height:1.05;margin:.5rem 0}.page-hero{background:#19191b;color:#fff;padding:5.2rem 0 4rem}.page-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:end}.page-hero h1{font-size:clamp(3rem,6vw,5.5rem)}.page-hero p{color:#cbc9cf;font-size:1.12rem}.page-hero img{width:100%;aspect-ratio:16/9;object-fit:cover}.crumb{font-size:.84rem;color:#a7a5aa;margin-bottom:1.2rem}.crumb a{color:#fff}.article{display:grid;grid-template-columns:minmax(0,790px) 280px;gap:4rem;align-items:start}.prose>p:first-of-type{font-size:1.24rem;color:#333238}.prose h2{margin-top:4rem}.prose h3{font-size:1.48rem;line-height:1.15;letter-spacing:-.03em;margin:2.3rem 0 .6rem}.prose p,.prose li{color:#3d3c41}.prose li{margin-bottom:.55rem}.prose img{width:100%;margin:2.2rem 0;aspect-ratio:16/9;object-fit:cover}.callout{margin:2rem 0;padding:1.5rem 1.7rem;background:#fff;border:1px solid var(--line);border-left:7px solid var(--red)}.callout strong{display:block;margin-bottom:.25rem}.toc{position:sticky;top:94px;background:#fff;border:1px solid var(--line);padding:1.3rem}.toc strong{display:block;margin-bottom:.7rem}.toc a{display:block;text-decoration:none;color:var(--muted);font-size:.88rem;line-height:1.35;padding:.38rem 0}.toc a:hover{color:var(--red)}.table-wrap{overflow-x:auto;margin:1.7rem 0}.table{width:100%;border-collapse:collapse;background:#fff;font-size:.92rem}.table th,.table td{padding:.85rem;text-align:left;border:1px solid var(--line);vertical-align:top}.table th{background:#1b1b1d;color:#fff}.steps{counter-reset:step;display:grid;gap:.75rem;margin:2rem 0}.step{counter-increment:step;background:#fff;border:1px solid var(--line);padding:1.2rem 1.2rem 1.2rem 4.5rem;position:relative}.step:before{content:counter(step,decimal-leading-zero);position:absolute;left:1.2rem;top:1.05rem;color:var(--red);font-weight:950}.sources{background:#eceae6;padding:1.4rem;margin-top:3rem;font-size:.88rem}.sources a{color:var(--red-dark)}.next{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.next a{background:#1b1b1d;color:#fff;text-decoration:none;padding:1.8rem;min-height:180px;display:flex;flex-direction:column;justify-content:flex-end}.next span{color:#ff526b;font-weight:850}.footer{background:#0f0f10;color:#aaa8ad;padding:3rem 0}.footer-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem}.footer a{color:#fff}.footer small{display:block;max-width:650px}.chip-row{display:flex;flex-wrap:wrap;gap:.5rem}.chip{padding:.45rem .7rem;border:1px solid #4c4b50;border-radius:999px;font-size:.82rem}.quote{font-size:clamp(1.8rem,3vw,3rem);line-height:1.1;letter-spacing:-.04em;border-left:7px solid var(--red);padding-left:1.5rem;margin:3rem 0}.compare{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin:2rem 0}.compare>div{background:#fff;border:1px solid var(--line);padding:1.4rem}.compare h3{margin-top:0}.stat-band{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#555}.stat{background:#1b1b1d;padding:1.5rem}.stat strong{display:block;font-size:2rem;color:#fff}.stat span{color:#bbb9be;font-size:.88rem}@media(max-width:920px){.menu{display:block}.navlinks{display:none;position:absolute;top:70px;left:1rem;right:1rem;background:#fff;box-shadow:var(--shadow);padding:.7rem;flex-direction:column;align-items:stretch}.navlinks.open{display:flex}.hero-grid,.page-hero-grid,.section-head,.media-split,.article{grid-template-columns:1fr}.hero-grid{padding:4rem 0}.hero-media img{aspect-ratio:16/9;border-radius:4rem 0 0 0}.quick{grid-template-columns:repeat(2,1fr)}.grid3{grid-template-columns:1fr 1fr}.toc{position:static;order:-1}.stat-band{grid-template-columns:1fr}}@media(max-width:580px){body{font-size:16px}.container{width:min(100% - 1.5rem,1180px)}.hero h1,.page-hero h1{font-size:clamp(2.8rem,15vw,4.2rem)}.hero-grid{min-height:0}.quick,.grid3,.next,.compare,.footer-grid{grid-template-columns:1fr}.quick a{border-right:0;border-bottom:1px solid var(--line)}.section{padding:4.5rem 0}.page-hero{padding:4rem 0 3rem}.brand small{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
