/* Habillage « fenêtre de toit » : bleu ciel profond, lumière zénithale, châssis incliné, carte du gris au bleu ciel. */

@font-face { font-family: "Overpass Repli"; src: local("Arial"), local("ArialMT"), local("Roboto"); size-adjust: 100%; }

:root { --casse: none; --a-braise: #ffd98a; }
h1, h2, .ak-h1, .ak-h2, .hero__title { font-weight: 800; letter-spacing: -.02em; }
.hero__title { line-height: 1.02; }
.site-nav .menu a, .submenu-toggle, .ak-btn, .site-footer__title, .types__count, .ak-card__more, .site-brand__name { letter-spacing: 0; }

/* Rangée de châssis vus en perspective */
.grille { height: 20px; background:
	linear-gradient(100deg, transparent 0 8px, #9fc6f0 8px 30px, transparent 30px) 0 0 / 46px 100%,
	linear-gradient(100deg, transparent 0 6px, #e6eef8 6px 32px, transparent 32px) 0 0 / 46px 100%; opacity: .55; }
.hero > .grille { width: min(100% - 2rem, var(--ak-maxw)); margin: 0 auto clamp(1.75rem, 4vw, 2.75rem); }

/* La photo dans un châssis de fenêtre de toit, avec son raccord en zinc */
.porte { position: relative; margin: 0; padding: 12px; background: linear-gradient(135deg, #3b4a5e, #222d3b); border-radius: 6px; transform: perspective(1400px) rotateX(4deg); box-shadow: 0 0 0 6px #8995a5, 0 34px 60px -30px rgb(0 0 0 / 70%); }
.porte img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
@media (max-width: 1023px) { .hero__media { max-width: 560px; } .porte img { aspect-ratio: 16 / 11; } }
@media (prefers-reduced-motion: reduce) { .porte { transform: none; } }

/* Carte : du gris au bleu du ciel */
.ak-carte { --ak-map-0: #e2e7ec; --ak-map-1: #cbdcf2; --ak-map-2: #8db6ea; --ak-map-3: #3f7fd9; --ak-map-4: #163f99; --ak-map-stroke: var(--ak-bg); --ak-map-hover: #1b2b44; --ak-map-hors: var(--ak-surface); }
.zbande-sombre .home-section--fonte .ak-carte { --ak-map-0: #26364f; --ak-map-1: #34507a; --ak-map-2: #5279ad; --ak-map-3: #b9c98f; --ak-map-4: #ffd98a; }

.site-footer::before { content: ""; display: block; width: min(100% - 2rem, var(--ak-maxw)); height: 14px; margin: 0 auto; padding-top: clamp(2rem, 5vw, 3rem); box-sizing: content-box; background: linear-gradient(100deg, transparent 0 8px, rgb(159 198 240 / 30%) 8px 30px, transparent 30px) 0 0 / 46px 100% content-box; }
