/* Habillage « isolation intérieure » : bleu pétrole, plâtre, doublage en coupe, carte du gris au pétrole. */

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

:root { --casse: none; --a-braise: #f0d7a2; }
h1, h2, .ak-h1, .ak-h2, .hero__title { font-weight: 700; letter-spacing: -.02em; }
.hero__title { font-weight: 800; 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; }

/* Doublage en coupe : rails, isolant, plaque */
.grille { height: 18px; background:
	linear-gradient(90deg, #7f9aa4 0 4px, transparent 4px) 0 0 / 60px 100%,
	linear-gradient(180deg, #f0d7a2 0 12px, #e8ecee 12px 18px); border-radius: 3px; }
.hero > .grille { width: min(100% - 2rem, var(--ak-maxw)); margin: 0 auto clamp(1.75rem, 4vw, 2.75rem); }

/* La photo comme une plaque posée sur son ossature */
.porte { position: relative; margin: 0; padding: 0; }
.porte::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border-radius: 14px; background: repeating-linear-gradient(90deg, #7f9aa4 0 5px, #f0d7a2 5px 46px); z-index: -1; }
.porte { isolation: isolate; }
.porte img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; box-shadow: 0 24px 48px -28px rgb(0 0 0 / 60%); }
@media (max-width: 1023px) { .hero__media { max-width: 560px; } .porte img { aspect-ratio: 16 / 11; } }

/* Carte : du gris plâtre au bleu pétrole */
.ak-carte { --ak-map-0: #e4e6e6; --ak-map-1: #c7dbe0; --ak-map-2: #86b4c1; --ak-map-3: #2f7f97; --ak-map-4: #0e4657; --ak-map-stroke: var(--ak-bg); --ak-map-hover: #1d2a30; --ak-map-hors: var(--ak-surface); }
.zbande-sombre .home-section--fonte .ak-carte { --ak-map-0: #2a3a41; --ak-map-1: #3f5964; --ak-map-2: #6d8b93; --ak-map-3: #c6b48a; --ak-map-4: #f0d7a2; }

.site-footer::before { content: ""; display: block; width: min(100% - 2rem, var(--ak-maxw)); height: 12px; margin: 0 auto; padding-top: clamp(2rem, 5vw, 3rem); box-sizing: content-box; background: linear-gradient(90deg, #4f6770 0 4px, transparent 4px) 0 0 / 60px 100% content-box, linear-gradient(180deg, rgb(240 215 162 / 45%) 0 8px, rgb(232 236 238 / 30%) 8px 12px) content-box; }