:root { --navy:#06082e; --blue:#0066be; --cyan:#009ff3; --deep:#004a91; --text:#163467; --pale:#eff9ff; --border:#cfeaff; font-size:min(1.5625vw,1.5625rem); scroll-behavior:smooth; }
@font-face { font-family:Roboto; font-style:normal; font-weight:100 900; font-stretch:75% 100%; font-display:swap; src:url('/assets/roboto-variable.ttf') format('truetype'); }
* { box-sizing:border-box; }
body { margin:0; background:white; color:var(--text); font-family:Roboto,Arial,sans-serif; font-size:0.875rem; line-height:normal; text-rendering:geometricPrecision; -webkit-font-smoothing:antialiased; }
h1,h2,h3,p,ul { margin:0; padding:0; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; border:0; padding:0; background:none; }
button,a { touch-action:manipulation; }
img { display:block; max-width:none; }
.page { max-width:64rem; width:100%; margin:auto; }
.icon { width:1.25rem; height:1.25rem; flex:none; }
.skip-link { position:fixed; z-index:100; top:0.5rem; left:0.5rem; padding:0.75rem 1.25rem; color:white; background:var(--deep); transform:translateY(-180%); }
.skip-link:focus { transform:none; }
a:focus-visible,button:focus-visible { outline:0.1875rem solid var(--cyan); outline-offset:0.1875rem; }
.button { display:flex; align-items:center; justify-content:center; flex:none; gap:1rem; color:white; background:var(--blue); border-radius:62.4375rem; font-size:0.875rem; font-weight:500; line-height:1.125rem; white-space:nowrap; transition:background-color .15s; }
.button:hover { background:#004a91; }
.button:active { background:#003d78; }
.button .arrow { width:1.125rem; height:1.125rem; }
.button.outline { color:var(--deep); background:white; border:0.0625rem solid var(--cyan); font-size:0.6875rem; line-height:0.875rem; }
.button.outline:hover { background:var(--pale); }
.hero { position:relative; height:38.4375rem; background:var(--pale); overflow:hidden; }
.hero-background { position:absolute; left:0; top:0; width:100%; height:37.5rem; overflow:hidden; }
.hero-background img { width:100%; height:100%; object-fit:cover; }
.site-header { position:absolute; top:0; left:0; width:100%; height:6.125rem; padding:0 2rem 0 2.5rem; display:flex; align-items:center; justify-content:space-between; z-index:5; }
.brand-azur { display:block; position:relative; overflow:hidden; flex:none; }
.brand-azur img { position:absolute; width:102.4%; height:137.64%; top:-18.25%; left:-1.08%; }
.header-brand { width:19.5625rem; height:5rem; }
.desktop-nav { display:flex; height:2.75rem; width:25.875rem; align-items:center; flex:none; }
.desktop-nav a { display:flex; align-items:center; justify-content:center; height:2rem; font-size:0.6875rem; line-height:0.875rem; font-weight:500; color:var(--navy); }
.desktop-nav a:nth-child(1) { width:3.375rem; }
.desktop-nav a:nth-child(2) { width:5.375rem; }
.desktop-nav a:nth-child(3) { width:4.75rem; }
.desktop-nav a:nth-child(4) { width:5rem; }
.desktop-nav a:nth-child(5) { width:4.0625rem; }
.desktop-nav a:nth-child(6) { width:3.3125rem; }
.desktop-nav a[aria-current] { border-bottom:0.125rem solid var(--cyan); color:var(--blue); }
.desktop-nav a:hover { color:var(--blue); }
.header-quote { position:relative; width:11.375rem; height:2.5625rem; flex:none; }
.header-button { width:11.375rem; height:2.5625rem; }
.header-button span { padding-left:0.875rem; }
.quote-icon { position:absolute; width:1.125rem; height:1.125rem; left:1.25rem; top:0.75rem; pointer-events:none; }
.menu-toggle,.mobile-menu { display:none; }
.hero-copy { position:absolute; left:2.875rem; top:7.125rem; width:32.5rem; }
.eyebrow { font-size:0.875rem; line-height:0.9375rem; letter-spacing:0.04375rem; }
h1 { height:7.75rem; font-size:3.5rem; line-height:3.125rem; font-weight:900; color:var(--navy); white-space:nowrap; }
h1 span { color:var(--cyan); }
.categories { display:flex; position:absolute; gap:1rem; top:16.75rem; left:2.5rem; width:25.5rem; height:6.375rem; }
.category { display:flex; flex-direction:column; align-items:center; gap:0.25rem; width:5.625rem; flex:none; color:var(--deep); text-align:center; font-size:0.8125rem; line-height:1rem; font-weight:500; }
.category-circle { display:flex; align-items:center; justify-content:center; flex:none; width:4.375rem; height:4.375rem; background:var(--pale); border:0.125rem solid white; border-radius:62.4375rem; }
.category-circle .icon { width:2.5rem; height:2.5rem; }
.hero-description { position:absolute; left:2.875rem; top:24.375rem; width:26.875rem; font-size:0.875rem; line-height:1.25rem; }
.hero-description span { display:block; }
.hero-actions { position:absolute; display:flex; align-items:flex-start; gap:1.25rem; top:29.375rem; left:2.875rem; width:26.25rem; height:3.0625rem; }
.hero-quote { width:16.125rem; height:3.0625rem; }
.video-button { display:flex; align-items:center; gap:0.625rem; height:3.0625rem; width:8.75rem; flex:none; font-size:0.8125rem; line-height:1rem; text-align:left; color:var(--deep); font-weight:500; cursor:default; }
.video-button .icon { width:3.0625rem; height:3.0625rem; }
.signature { position:absolute; }
.signature-desktop { width:18.375rem; height:6.875rem; left:40rem; top:5.9375rem; overflow:hidden; }
.signature-desktop img { position:absolute; width:348.3%; height:1396.36%; left:-217.69%; top:-86.36%; }
.signature-responsive { display:none; }
.partner-badge { position:absolute; left:53.25rem; top:17.0625rem; width:9.1875rem; height:9.1875rem; }
.badge-inner { width:9.1875rem; height:9.1875rem; background:white; border-radius:62.4375rem; display:flex; flex-direction:column; gap:0.5rem; justify-content:center; align-items:center; }
.badge-inner > p { width:8.125rem; font-size:0.875rem; line-height:1.125rem; text-align:center; color:var(--deep); }
.brand-bwt { position:relative; width:6.75rem; height:2.875rem; flex:none; }
.bwt-mark { position:absolute; top:0; left:0; width:100%; height:2.25rem; }
.bwt-letters { position:absolute; top:29.62%; right:.18%; bottom:2.82%; left:30.75%; width:69.07%; height:67.56%; }
.bwt-drop { position:absolute; top:0; left:.18%; width:24.89%; height:100%; }
.brand-bwt span { position:absolute; top:2.375rem; left:0; font-size:0.3rem; font-weight:500; letter-spacing:0.048rem; color:#00174a; white-space:nowrap; }
.brand-bwt-white { width:8.4375rem; height:3.5625rem; }
.brand-bwt-white .bwt-mark { height:2.884625rem; }
.brand-bwt-white .bwt-letters { top:29.66%; left:30.68%; width:69.32%; height:67.43%; }
.brand-bwt-white .bwt-drop { top:.1%; left:0; width:24.98%; height:99.8%; }
.brand-bwt-white span { top:3.009375rem; font-size:0.375rem; letter-spacing:0.06rem; color:white; }
.benefits { display:grid; grid-template-columns:repeat(4,1fr); height:9.9375rem; background:var(--pale); overflow:hidden; }
.benefit { height:9.9375rem; padding:1rem 0.75rem; display:flex; flex-direction:column; align-items:center; gap:0.5rem; text-align:center; }
.benefit + .benefit { border-left:0.0625rem solid var(--cyan); }
.benefit .icon { width:2.25rem; height:2.25rem; }
.benefit h2 { font-size:0.9375rem; line-height:1.1875rem; color:var(--deep); font-weight:700; width:100%; }
.benefit p { font-size:0.875rem; line-height:1.125rem; width:100%; }
.solutions { display:grid; grid-template-columns:362fr 207fr 224fr 231fr; height:19.5rem; overflow:hidden; }
.comfort { position:relative; height:19.5rem; background:var(--navy); overflow:hidden; }
.comfort-photo { width:100%; height:19.5rem; object-fit:cover; }
.comfort-copy { position:absolute; left:9.5625rem; top:2.6875rem; width:12.4375rem; display:flex; flex-direction:column; gap:1rem; color:white; }
.comfort h2 { width:12.25rem; font-size:1.375rem; line-height:1.4375rem; font-weight:700; }
.comfort ul { display:flex; flex-direction:column; gap:0.75rem; list-style:none; width:11.875rem; }
.comfort li { display:flex; align-items:flex-start; gap:0.75rem; width:11.875rem; height:1.25rem; font-size:0.875rem; line-height:1.125rem; white-space:nowrap; }
.service { background:var(--pale); height:19.5rem; }
.service-photo { width:100%; height:14.125rem; object-fit:cover; }
.service-copy { height:5.375rem; padding:0.75rem 0.75rem 0; text-align:center; display:flex; flex-direction:column; gap:0.25rem; }
.service h2 { font-size:0.9375rem; line-height:1.1875rem; color:var(--deep); font-weight:700; }
.service p { font-size:0.875rem; line-height:1.125rem; }
.audiences { height:15.625rem; padding:1.5rem 3.5rem 0; overflow:hidden; }
.section-heading { font-size:1.375rem; line-height:1.75rem; color:var(--navy); font-weight:700; }
.section-heading:after { content:''; display:block; height:0.1875rem; width:2.375rem; background:var(--cyan); margin-top:0.25rem; }
.audience-cards { display:grid; grid-template-columns:444fr 440fr; gap:1.75rem; height:11.75rem; }
.audience-card { height:11.75rem; border:0.0625rem solid var(--border); border-radius:0.5rem; position:relative; overflow:hidden; }
.audience-photo { position:absolute; top:-0.0625rem; left:-0.0625rem; width:calc(100% + 0.125rem); height:calc(100% + 0.125rem); object-fit:cover; }
.audience-copy { display:flex; flex-direction:column; align-items:flex-start; gap:0.25rem; width:12.5rem; padding:0.75rem 1.25rem; position:relative; left:-0.0625rem; top:-0.0625rem; }
.audience-copy .icon:not(.arrow) { width:2.625rem; height:2.625rem; }
.audience-copy h3 { width:10.625rem; font-size:1.25rem; line-height:1.5625rem; font-weight:700; color:var(--navy); }
.audience-copy p { width:10.625rem; font-size:0.875rem; line-height:1.125rem; }
.audience-button { width:7.625rem; height:2rem; }
.audience-shade { display:none; }
.partner { position:relative; height:8rem; background:var(--deep); color:white; }
.partner-waves { position:absolute; width:100%; height:4.5rem; top:-1.75rem; left:0; }
.partner-water { position:absolute; top:5.0625rem; left:0; width:15.0625rem; height:2.9375rem; overflow:hidden; }
.partner-water img { position:absolute; left:0; top:-3014.89%; width:424.9%; height:3268.09%; }
.partner-content { position:absolute; top:1.625rem; left:2.875rem; width:58.25rem; height:5.625rem; display:flex; align-items:center; gap:1.75rem; }
.partner h2 { width:10.5625rem; flex:none; font-size:0.9375rem; font-weight:700; line-height:1.1875rem; }
.commitments { display:flex; gap:1rem; width:21.75rem; height:4.75rem; flex:none; }
.commitment { display:flex; flex-direction:column; align-items:center; width:6.5rem; height:4.75rem; flex:none; text-align:center; font-size:0.6875rem; line-height:0.875rem; }
.commitment .icon { width:2rem; height:2rem; }
.partner-button { width:11.875rem; height:2.4375rem; }
.site-footer { display:flex; height:4.5rem; align-items:center; justify-content:space-between; padding:0 2.5rem 0 2.875rem; }
.footer-brand { width:13.625rem; height:3.4824375rem; }
.contact-item { display:flex; align-items:center; gap:0.625rem; font-size:0.6875rem; line-height:0.875rem; white-space:nowrap; }
.socials { display:flex; align-items:center; gap:0.75rem; width:6rem; height:2rem; }
.socials .icon { width:1.375rem; height:1.375rem; }
/* Alignement de la ligne de base Roboto avec les métriques de texte Figma. */
.eyebrow,.hero-description,.category > span:last-child,.benefit h2,.benefit p,
.comfort h2,.comfort li span,.service-copy h2,.service-copy p,.section-heading,
.audience-copy h3,.audience-copy p,.button span,.video-button > span,.badge-inner > p,
.partner h2,.commitment p,.contact-item span { transform:translateY(0.0625rem); }
.section-heading:after { position:relative; top:-0.0625rem; }
@media (max-width: 1023px) {
 :root { font-size:2.0833333333vw; }
 .page { max-width:none; }
 .hero { height:40.625rem; }
 .hero-background { top:5.625rem; height:35rem; }
 .site-header { height:5.875rem; padding:0 2rem; }
 .header-brand { width:17.5rem; height:4.4728125rem; }
 .desktop-nav { display:none; }
 .header-button span { padding:0; }
 .quote-icon { display:none; }
 .menu-toggle { display:flex; width:2.75rem; height:2.75rem; align-items:center; justify-content:center; cursor:pointer; }
 .menu-toggle .icon { width:1.75rem; height:1.75rem; }
 .mobile-menu:not([hidden]) { display:flex; position:absolute; top:5.5rem; right:1.5rem; flex-direction:column; width:16.25rem; padding:0.75rem; background:white; border:0.0625rem solid var(--border); border-radius:0.5rem; box-shadow:0 0.75rem 2rem #004a9126; }
 .mobile-menu a { display:flex; min-height:2.75rem; align-items:center; padding:0 0.875rem; font-size:1rem; color:var(--navy); }
 .mobile-menu a:hover { background:var(--pale); }
 .hero-copy { left:2rem; top:7.25rem; width:44rem; }
 h1 { font-size:2.75rem; line-height:2.625rem; height:6.625rem; }
 .categories { left:1.75rem; top:15.25rem; }
 .hero-description { left:2rem; top:22.875rem; width:23.75rem; }
 .hero-description span { display:inline; }
 .hero-actions { top:28.625rem; left:2rem; flex-direction:column; width:16.125rem; height:auto; gap:0.75rem; }
 .signature-desktop { display:none; }
 .signature-responsive { display:block; left:28.75rem; top:9.125rem; width:10.162875rem; height:3.8024375rem; }
 .signature-responsive p { position:absolute; left:0; top:0.345625rem; width:100%; text-align:center; font:400 1.071875rem/1.348125rem 'Dancing Script',cursive; color:var(--blue); }
 .signature-responsive img { position:absolute; width:8.4690625rem; height:0.691375rem; left:1.555625rem; top:2.938125rem; }
 .partner-badge { left:40.625rem; top:14.8125rem; width:5.0814375rem; height:5.0814375rem; }
 .badge-inner { transform:scale(.5530816327); transform-origin:top left; }
 .benefits { height:20rem; grid-template-columns:repeat(2,1fr); }
 .benefit { height:10rem; }
 .benefit + .benefit { border:0; }
 .solutions { height:39rem; grid-template-columns:repeat(2,1fr); }
 .audiences { height:auto; padding:1.5rem 2rem 2.5rem; }
 .audience-cards { height:auto; display:flex; flex-direction:column; gap:1.25rem; }
 .audience-card { width:100%; height:13.5rem; }
 .audience-copy { height:11.875rem; }
 .audience-button { width:9rem; height:2.75rem; }
 .partner { height:auto; padding:1.5rem 2rem; }
 .partner-waves { height:3.375rem; top:-2.375rem; }
 .partner-water { display:none; }
 .partner-content { position:relative; inset:auto; width:100%; height:auto; flex-direction:column; gap:1rem; }
 .partner h2 { width:100%; height:2.5rem; text-align:center; }
 .desktop-break { display:none; }
 .brand-bwt-white { width:8rem; height:3.37775rem; }
 .brand-bwt-white .bwt-mark { height:2.7350625rem; }
 .brand-bwt-white span { top:2.85375rem; font-size:0.355625rem; letter-spacing:0.0569rem; }
 .commitments { width:100%; height:5rem; justify-content:space-between; gap:0; }
 .partner-button { width:15rem; height:2.75rem; }
 .site-footer { flex-direction:column; height:auto; padding:1.5rem; gap:1rem; }
 .contact-item { height:2rem; }
}
@media (max-width: 639px) {
 :root { font-size:4.1025641026vw; }
 .hero { height:59.375rem; }
 .site-header { height:5.5rem; padding:0 1.25rem; }
 .header-brand { width:15.625rem; height:3.993625rem; }
 .header-quote { display:none; }
 .hero-background { top:37.8125rem; height:21.5625rem; }
 .hero-background img { position:absolute; width:151.01%; height:100%; left:-51.01%; object-fit:fill; }
 .hero-copy { top:6.75rem; left:1.25rem; width:21.875rem; }
 .eyebrow { font-size:0.75rem; }
 h1 { font-size:2.25rem; line-height:2.25rem; height:5.625rem; }
 .categories { top:14.125rem; left:1rem; width:22.375rem; gap:0; }
 .category { width:5.5625rem; height:6.375rem; }
 .category > span:last-child { width:5.625rem; }
 .hero-description { top:21.625rem; left:1.25rem; width:21.875rem; height:6.25rem; font-size:1rem; line-height:1.375rem; }
 .hero-actions { top:29.625rem; left:1.25rem; width:21.875rem; height:7.75rem; gap:1rem; }
 .hero-quote { width:21.875rem; }
 .signature-responsive { left:1.25rem; top:38.4375rem; width:12.271rem; height:4.5911875rem; }
 .signature-responsive p { top:0.4175rem; font-size:1.29375rem; line-height:1.6278125rem; }
 .signature-responsive img { left:1.878125rem; top:3.5475rem; width:10.2258125rem; height:0.83475rem; }
 .partner-badge { top:38.125rem; left:17.5rem; width:6.1355rem; height:6.1355rem; }
 .badge-inner { transform:scale(.6678095238); }
 .benefits { height:21.875rem; }
 .benefit { height:10.9375rem; }
 .benefit h2 { font-size:0.8125rem; }
 .solutions { display:flex; flex-direction:column; height:auto; }
 .comfort { flex:none; }
 .service { height:20.875rem; flex:none; }
 .audiences { padding:1.5rem 1.25rem 2.5rem; }
 .audience-shade { display:block; position:absolute; top:-0.0625rem; left:-0.0625rem; width:13.75rem; height:13.5rem; background:linear-gradient(90deg,white 0%,rgba(255,255,255,.94) 68%,rgba(255,255,255,0) 100%); }
 .partner { padding:1.5rem 1.25rem; }
 .partner-waves { height:1.713875rem; top:-0.71375rem; }
 .partner-button { width:21.875rem; }
}
@media (prefers-reduced-motion:reduce) { :root { scroll-behavior:auto; } .button { transition:none; } }