:root{ --navy:#162d46; --red:#ed2636; --muted:#62728a; --line:#dce2e8; --pale:#f3f5f7}
 *{ box-sizing:border-box}
 html{ scroll-behavior:smooth; scroll-padding-top:28px}
 body{ margin:0; color:var(--navy); background:#fff; font-family:'DM Sans',Arial,sans-serif}
 a{ color:inherit; text-decoration:none}
 a:focus-visible{ outline:3px solid var(--red); outline-offset:6px}
 img{ max-width:100%; display:block}
 .wrap{ max-width:1320px; margin:auto; padding-left:52px; padding-right:52px}
 header{ max-width:1440px; margin:auto; display:flex; justify-content:space-between; align-items:center; padding:24px 52px; border-bottom:1px solid var(--line)}
 .identity{ display:flex; align-items:center; gap:14px}
 .identity img{ width:62px; height:62px}
 .identity strong{ font-size:19px; letter-spacing:.02em}
 .identity small{ display:block; color:var(--muted); font-size:11px; margin-top:5px}
 nav{ display:flex; align-items:center; gap:32px; font-size:13px; font-weight:600}
 .nav-contact{ padding:14px 18px; border:1px solid var(--line)}
 .nav-contact span{ margin-left:20px; color:var(--red)}
 .hero{ display:grid; grid-template-columns:.95fr 1.2fr; align-items:center; gap:25px; padding-top:66px; padding-bottom:55px}
 .eyebrow{ font-size:11px; font-weight:800; letter-spacing:.15em; display:flex; align-items:center; gap:10px; margin:0 0 24px}
 .eyebrow:before{ content:''; display:block; background:var(--red); width:22px; height:3px}
 h1,h2,h3{ font-family:Manrope,Arial,sans-serif; margin:0; letter-spacing:-.045em}
 h1{ font-size:clamp(45px,4.35vw,65px); line-height:1.09; font-weight:800}
 h1 em{ font-style:normal; color:var(--red)}
 .intro{ max-width:390px; font-size:16px; line-height:1.75; color:var(--muted); margin:26px 0 30px}
 .button{ display:inline-flex; align-items:center; gap:27px; justify-content:space-between; padding:17px 22px; font-size:13px; font-weight:700; transition:background .2s,transform .2s}
 .button:hover{ transform:translateY(-2px)}
 .primary{ background:var(--red); color:#fff}
 .primary:hover{ background:#cf1828}
 .button span{ font-size:20px; line-height:1}
 .hero-visual{ padding-top:36px; position:relative}
 .visual-label{ font-size:9px; letter-spacing:.13em; font-weight:700; display:flex; align-items:center; gap:9px; padding:0 20px 15px}
 .dot{ height:6px; width:6px; border-radius:50%; background:var(--red)}
 .equipment{ width:100%; mix-blend-mode:multiply}
 .visual-bottom{ margin:20px 20px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; padding-top:15px; font-size:11px; color:var(--muted)}
 .visual-bottom span:last-child{ font-size:8px; letter-spacing:.12em}
 .brands{ display:flex; align-items:center; gap:35px; padding-top:24px; padding-bottom:24px; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
 .brands>span{ font-size:9px; font-weight:700; letter-spacing:.12em}
 .brands img{ width:39px; height:39px; object-fit:contain}
 .brands .lenovo{ width:90px; height:auto}
 .brands p{ color:var(--muted); font-size:12px; margin-left:auto}
 .catalogue-section{ padding-top:78px; padding-bottom:70px}
 .section-heading{ display:flex; justify-content:space-between; align-items:end; margin-bottom:34px}
 h2{ font-size:36px; font-weight:800; line-height:1.2}
 .section-heading .eyebrow{ margin-bottom:17px}
 .section-heading>p{ font-size:13px; line-height:1.8; color:var(--muted); margin-bottom:3px}
 .categories{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
 .categories article{ background:var(--pale); padding:25px 22px; transition:background .2s}
 .categories article:hover{ background:#eaf0f5}
 .card-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:27px}
 .number{ font-size:10px; color:var(--muted)}
 svg{ width:39px; height:39px; fill:none; stroke:var(--navy); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
 h3{ font-size:20px; letter-spacing:-.03em}
 .categories p{ font-size:12px; line-height:1.8; color:var(--muted); min-height:65px; margin:14px 0 24px}
 .categories a{ font-size:10px; font-weight:700; display:flex; justify-content:space-between; border-top:1px solid #d9e0e7; padding-top:18px}
 .categories a span{ color:var(--red); font-size:15px}
 .caption{ font-size:10px; color:var(--muted); margin:18px 0 0}
 .catalogue-banner{ background:#fcf2f2; overflow:hidden}
 .catalogue-inner{ display:grid; grid-template-columns:1.2fr .8fr; gap:90px; align-items:center; padding-top:62px; padding-bottom:62px}
 .catalogue-copy>p:not(.eyebrow){ max-width:430px; font-size:14px; line-height:1.8; color:var(--muted); margin:22px 0 28px}
 .text-link{ display:block; font-size:11px; text-decoration:underline; text-underline-offset:4px; margin-top:20px}
 .text-link span{ margin-left:8px}
 .cover{ width:240px; justify-self:center; box-shadow:12px 18px 36px #54242b23; transform:rotate(5deg); transition:transform .2s}
 .cover:hover{ transform:rotate(0)}
 .contact{ display:flex; justify-content:space-between; align-items:center; padding-top:76px; padding-bottom:76px}
 .contact h2{ font-size:32px}
 .contact h2 span{ color:var(--red)}
 .contact p:not(.eyebrow){ font-size:14px; color:var(--muted); margin:21px 0 0}
 .contact-links{ min-width:320px}
 .contact-links a{ display:flex; justify-content:space-between; gap:30px; padding:20px 0; border-bottom:1px solid var(--line); font-size:15px}
 .contact-links .phone{ font-size:27px; font-weight:700; letter-spacing:-.03em}
 .contact-links span{ color:var(--red)}
 footer{ background:var(--navy); color:#fff}
 footer .wrap{ display:flex; justify-content:space-between; align-items:center; padding-top:25px; padding-bottom:25px; font-size:10px}
 footer span:first-child{ font-weight:800; letter-spacing:.08em}
 footer span:nth-child(2){ color:#b8c5d3}
 @media(min-width:1500px){ .hero{ padding-top:85px; padding-bottom:75px}
 }
 @media(max-width:1000px){ .wrap{ padding-left:30px; padding-right:30px}
 header{ padding:20px 30px}
 nav{ gap:18px}
 nav>a:first-child{ display:none}
 .hero{ gap:10px}
 .hero-visual{ padding-top:70px}
 .categories{ grid-template-columns:repeat(2,1fr)}
 .categories p{ min-height:0}
 .catalogue-inner{ gap:40px}
 .contact-links{ min-width:280px}
 .contact h2{ font-size:28px}
 }
 @media(max-width:650px){ .wrap{ padding-left:22px; padding-right:22px}
 header{ padding:16px 22px}
 .identity img{ width:44px; height:44px}
 .identity strong{ font-size:14px}
 .identity small{ font-size:9px}
 .nav-contact{ display:none}
 nav{ font-size:11px}
 .hero{ grid-template-columns:1fr; padding-top:42px; padding-bottom:30px}
 h1{ font-size:48px}
 .intro{ font-size:15px; margin-top:22px}
 .hero-visual{ padding-top:28px}
 .visual-label{ padding-left:0; font-size:8px}
 .visual-bottom{ margin:12px 0 0}
 .brands{ gap:20px; flex-wrap:wrap; padding-top:20px; padding-bottom:20px}
 .brands>span{ width:100%; font-size:9px}
 .brands p{ font-size:10px; margin:0; flex:1}
 .brands img{ width:32px; height:32px}
 .brands .lenovo{ width:74px}
 .catalogue-section{ padding-top:48px; padding-bottom:44px}
 .section-heading{ display:block}
 .section-heading>p{ margin-top:20px}
 h2{ font-size:30px}
 .categories{ grid-template-columns:1fr; gap:12px}
 .categories article{ padding:24px}
 .card-top{ margin-bottom:15px}
 .categories p{ font-size:14px; margin-bottom:20px}
 .categories a{ font-size:12px}
 .catalogue-inner{ grid-template-columns:1fr; gap:40px; padding-top:44px; padding-bottom:44px}
 .catalogue-copy .button{ font-size:12px; gap:17px}
 .cover{ width:205px}
 .contact{ display:block; padding-top:48px; padding-bottom:48px}
 .contact-links{ min-width:0; margin-top:24px}
 .contact h2{ font-size:27px}
 .contact-links .phone{ font-size:26px}
 footer .wrap{ flex-wrap:wrap; gap:18px; line-height:1.6}
 footer span:nth-child(2){ order:3; width:100%}
 }
 @media(prefers-reduced-motion:reduce){ html{ scroll-behavior:auto}
 *{ transition:none!important}
 }
 .security-categories{ grid-template-columns:repeat(3,minmax(0,1fr))}
 .security-categories article{ display:flex; flex-direction:column}
 .security-categories article>a{ margin-top:auto}
 .security-categories p{ min-height:0; margin-bottom:26px}
 @media(max-width:650px){ .security-categories{ grid-template-columns:1fr}
 }
 /* Fenêtre locale de consultation du flyer */ .flyer-open{ overflow:hidden}
 .flyer-dialog{ width:min(1000px,94vw); max-width:none; height:92vh; max-height:92vh; padding:0; border:0; border-radius:10px; color:var(--navy); box-shadow:0 24px 90px #0005; overflow:hidden}
 .flyer-dialog[open]{ display:flex; flex-direction:column}
 .flyer-dialog::backdrop{ background:#102237bb}
 .flyer-header{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 22px; background:#fff; border-bottom:1px solid var(--line)}
 .flyer-header h2{ font-size:18px; letter-spacing:-.02em}
 .flyer-close{ background:var(--navy); color:white; border:0; border-radius:4px; padding:10px 16px; font:600 13px Arial,sans-serif; cursor:pointer}
 .flyer-frame{ width:100%; flex:1; min-height:0; border:0; background:#eef1f5}
 .flyer-fallback{ margin:0; padding:10px 20px; font-size:11px; background:white}
 .flyer-fallback a{ text-decoration:underline}
 .flyer-title-button{ border:0; background:transparent; padding:0; text-align:left; color:inherit; font:inherit; letter-spacing:inherit; cursor:pointer}
 .flyer-title-button:hover{ text-decoration:underline; text-underline-offset:4px}
 .flyer-view{ display:inline-flex; align-items:center; justify-content:space-between; gap:20px; background:var(--red); color:#fff; border:0; padding:12px 14px; font:700 12px Arial,sans-serif; cursor:pointer; margin-bottom:20px}
 .flyer-close:focus-visible,.flyer-view:focus-visible,.flyer-title-button:focus-visible{ outline:3px solid var(--red); outline-offset:4px}
 @media(max-width:650px){ .flyer-dialog{ width:96vw; height:94vh; max-height:94vh}
 .flyer-header{ padding:12px}
 .flyer-header h2{ font-size:15px}
 .flyer-close{ padding:10px}
 .flyer-fallback{ padding:10px 12px}
 }