/* ═══════════════════════════════════════
   PEINTURA — Page d'accueil (maquette nov. 2026)
   ═══════════════════════════════════════ */
:root {
    --hm-navy: #0e1847;
    --hm-navy-deep: #06213f;
    --hm-blue: #0b5ed7;
    --hm-blue-dark: #0848ad;
    --hm-yellow: #fec902;
    --hm-text: #1f2937;
    --hm-muted: #6b7280;
    --hm-line: #e5e9f0;
    --hm-soft: #f1f5f9;
}

.hm-container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }

/* Titres avec soulignement jaune */
.hm-title {
    position: relative; font-family: var(--font-body); font-weight: 700;
    font-size: 1.6rem; line-height: 1.2; letter-spacing: -.01em; color: var(--hm-navy);
    padding-bottom: .55rem; margin-bottom: 1.4rem;
}
.hm-title::after {
    content: ''; position: absolute; left: 0; bottom: 0; width: 64px; height: 4px;
    border-radius: 4px; background: var(--hm-yellow); transform: rotate(-1.5deg);
}
.hm-link {
    display: inline-flex; align-items: center; gap: .4rem; text-decoration: none;
    color: var(--hm-blue); font-weight: 600; font-size: .92rem;
}
.hm-link:hover { color: var(--hm-blue-dark); }
.hm-link svg { transition: transform .15s; }
.hm-link:hover svg { transform: translateX(3px); }

/* ═══════ HERO ═══════ */
.hm-hero {
    position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(100deg, var(--hm-navy-deep) 0%, #0b2a4d 45%, #0d2c4b 100%);
}
.hm-hero-media {
    position: absolute; top: 0; right: 0; bottom: 0; width: 50%;
}
.hm-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.hm-hero-media::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, #0b2a4d 0%, rgba(11,42,77,.75) 18%, rgba(11,42,77,0) 45%);
}
.hm-hero-inner { position: relative; z-index: 2; padding-top: 2.6rem; padding-bottom: 2.4rem; }
.hm-eyebrow {
    font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(255,255,255,.92); margin-bottom: 1rem;
}
.hm-hero h1 {
    font-family: var(--font-body); font-weight: 700; color: #fff;
    font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.08; letter-spacing: -.02em; margin-bottom: 1rem;
    max-width: 720px;
}
.hm-hero h1 span { color: var(--hm-yellow); }
.hm-hero-sub { font-size: 1.2rem; font-weight: 500; color: rgba(255,255,255,.92); margin-bottom: 1.4rem; }
.hm-hero-sub i { font-style: normal; margin: 0 .35rem; opacity: .8; }

.hm-search {
    display: flex; align-items: center; gap: .6rem; max-width: 640px;
    background: #fff; border-radius: 10px; padding: .4rem .4rem .4rem 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.25); margin-bottom: 1.8rem;
}
.hm-search input {
    flex: 1; min-width: 0; border: 0; outline: none; background: none;
    font-family: var(--font-body); font-size: .95rem; color: var(--hm-text); height: 42px;
}
.hm-search input::placeholder { color: #6b7280; }
.hm-search button {
    display: inline-flex; align-items: center; gap: .45rem; height: 44px; padding: 0 1.2rem;
    background: var(--hm-yellow); color: var(--hm-navy); border: 0; border-radius: 8px;
    font-family: var(--font-body); font-size: .98rem; font-weight: 700; cursor: pointer; white-space: nowrap;
    transition: background .15s;
}
.hm-search button:hover { background: #ffd83a; }

.hm-hero-feats { list-style: none; display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
.hm-hero-feats li { display: flex; align-items: center; gap: .65rem; font-size: .88rem; line-height: 1.3; color: rgba(255,255,255,.95); }
.hm-hero-feats svg { width: 30px; height: 30px; flex-shrink: 0; color: #fff; }

/* ═══════ CATÉGORIES ═══════ */
.hm-cats { padding: 1.6rem 0 .6rem; background: #fff; }
.hm-cats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.hm-cat {
    --c: #014584;
    display: flex; flex-direction: column; border-radius: 12px; overflow: hidden;
    background: var(--c); color: #fff; text-decoration: none;
    box-shadow: 0 6px 18px rgba(14,24,71,.12); transition: transform .2s, box-shadow .2s;
}
.hm-cat:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(14,24,71,.2); }
.hm-cat--blue    { --c: #014584; }
.hm-cat--magenta { --c: #9e1f68; }
.hm-cat--green   { --c: #019140; }
.hm-cat--orange  { --c: #e07205; }
.hm-cat--purple  { --c: #5b2ea3; }
.hm-cat-img { position: relative; display: block; aspect-ratio: 183 / 95; overflow: hidden; }
.hm-cat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.hm-cat:hover .hm-cat-img img { transform: scale(1.04); }
.hm-cat-img::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 28%;
    background: linear-gradient(180deg, transparent, var(--c));
}
.hm-cat-body { display: flex; flex-direction: column; gap: .55rem; padding: .7rem 1.1rem 1.1rem; flex: 1; }
.hm-cat-title { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.hm-cat-title strong { font-size: 1.22rem; font-weight: 700; line-height: 1.15; }
.hm-cat-title svg { flex-shrink: 0; transition: transform .15s; }
.hm-cat:hover .hm-cat-title svg { transform: translateX(3px); }
.hm-cat-desc { font-size: .86rem; line-height: 1.4; color: rgba(255,255,255,.92); }

/* ═══════ MARQUES ═══════ */
.hm-brands { padding: 1.8rem 0 1.4rem; background: #fff; }
.hm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.hm-head .hm-link { margin-bottom: 1.6rem; }
.hm-carousel { position: relative; padding: 0 2.6rem; }
.hm-car-viewport { overflow: hidden; padding: 6px 4px 10px; margin: -6px -4px -10px; }
.hm-car-track { display: flex; gap: 14px; transition: transform .35s ease; }
.hm-brand {
    flex: 0 0 calc((100% - 7 * 14px) / 8); height: 86px;
    display: flex; align-items: center; justify-content: center; padding: .7rem .9rem;
    background: #fff; border: 1px solid var(--hm-line); border-radius: 10px;
    box-shadow: 0 3px 10px rgba(14,24,71,.07); text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.hm-brand:hover { border-color: #bcd3f5; box-shadow: 0 8px 18px rgba(14,24,71,.12); transform: translateY(-2px); }
.hm-brand img { max-width: 100%; max-height: 56px; width: auto; height: auto; object-fit: contain; }
.hm-brand-name { font-weight: 700; color: var(--hm-navy); text-align: center; font-size: .95rem; }
.hm-car-btn {
    position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px;
    border-radius: 50%; border: 1px solid var(--hm-line); background: #fff; color: var(--hm-navy);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 3px 10px rgba(14,24,71,.12); z-index: 2;
}
.hm-car-btn svg { width: 16px; height: 16px; }
.hm-car-btn:hover { color: var(--hm-blue); border-color: #bcd3f5; }
.hm-car-btn:disabled { opacity: .35; cursor: default; }
.hm-car-btn.prev { left: 0; }
.hm-car-btn.next { right: 0; }

/* ═══════ BANDEAU VALEUR ═══════ */
.hm-value-wrap { padding: 1.4rem 0; background: #fff; }
.hm-value {
    display: grid; grid-template-columns: minmax(0, 30%) minmax(0, 1fr) auto; align-items: center;
    background: linear-gradient(90deg, #022c57 0%, #012f5d 55%, #062f59 100%);
    border-radius: 14px; overflow: hidden; color: #fff; min-height: 160px;
    box-shadow: 0 10px 30px rgba(1,47,93,.22);
}
.hm-value-img { position: relative; align-self: stretch; }
.hm-value-img img { width: 100%; height: 100%; object-fit: cover; }
.hm-value-img::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(2,44,87,0) 55%, #022c57 100%);
}
.hm-value-text { padding: 1.4rem 1.8rem 1.4rem 1.2rem; }
.hm-value-text h2 {
    position: relative; font-family: var(--font-body); font-weight: 700; font-size: 1.5rem;
    line-height: 1.2; color: #fff; padding-bottom: .7rem; margin-bottom: .8rem;
}
.hm-value-text h2::after {
    content: ''; position: absolute; left: 0; bottom: 0; width: 64px; height: 4px; border-radius: 4px;
    background: var(--hm-yellow); transform: rotate(-1.5deg);
}
.hm-value-text p { font-size: .95rem; line-height: 1.5; color: rgba(255,255,255,.9); max-width: 440px; }
.hm-value-checks {
    list-style: none; display: flex; flex-direction: column; gap: .55rem;
    padding: 1.2rem 1.8rem; border-left: 1px solid rgba(255,255,255,.25); margin: 1.2rem 0;
}
.hm-value-checks li {
    position: relative; padding-left: 1.7rem; font-size: .92rem; color: #fff; white-space: nowrap;
}
.hm-value-checks li::before {
    content: ''; position: absolute; left: 0; top: .15em; width: 14px; height: 8px;
    border-left: 2.5px solid var(--hm-yellow); border-bottom: 2.5px solid var(--hm-yellow);
    transform: rotate(-45deg);
}

/* ═══════ FINDER + NEWS ═══════ */
.hm-finder { padding: 2rem 0 2.2rem; background: #fff; }
.hm-finder-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 0; }
.hm-finder-main { padding-right: 2.2rem; border-right: 1px solid var(--hm-line); }
.hm-news { padding-left: 2.2rem; }

.hm-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-bottom: .9rem; }
.hm-tab {
    display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 54px;
    padding: .4rem .8rem; border: 1px solid var(--hm-line); border-radius: 8px;
    background: var(--hm-soft); color: var(--hm-text); cursor: pointer;
    font-family: var(--font-body); font-size: .92rem; font-weight: 500; line-height: 1.2; text-align: left;
    transition: background .15s, color .15s, border-color .15s;
}
.hm-tab svg { width: 28px; height: 28px; flex-shrink: 0; }
.hm-tab:hover { border-color: #bcd3f5; }
.hm-tab.is-active { background: var(--hm-blue); border-color: var(--hm-blue); color: #fff; }

.hm-city {
    display: flex; align-items: center; gap: .7rem; padding: .35rem .35rem .35rem 1rem;
    border: 1px solid var(--hm-line); border-radius: 10px; background: #fff;
    box-shadow: 0 4px 14px rgba(14,24,71,.07); margin-bottom: 1.4rem;
}
.hm-city input { flex: 1; min-width: 0; border: 0; outline: none; height: 40px; font-family: var(--font-body); font-size: .92rem; }
.hm-city button {
    height: 42px; padding: 0 1.6rem; border: 0; border-radius: 8px; background: var(--hm-blue); color: #fff;
    font-family: var(--font-body); font-weight: 600; font-size: .95rem; cursor: pointer; transition: background .15s;
}
.hm-city button:hover { background: var(--hm-blue-dark); }

.hm-finder-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 250px); gap: 1.4rem; align-items: center; }
.hm-map-svg { width: 100%; height: auto; display: block; }
.hm-region { fill: #cfe0f8; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; transition: fill .15s; }
.hm-region.is-hl { fill: #1260d6; }
.hm-map a:hover .hm-region { fill: #8fb5ee; }
.hm-map a:hover .hm-region.is-hl { fill: #0848ad; }

.hm-regions { list-style: none; display: flex; flex-direction: column; gap: .45rem; }
.hm-regions a {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem; white-space: nowrap;
    padding: .55rem .85rem; border-radius: 6px; background: var(--hm-soft);
    color: var(--hm-text); text-decoration: none; font-size: .9rem; font-weight: 500;
    transition: background .15s, color .15s;
}
.hm-regions a svg { width: 15px; height: 15px; flex-shrink: 0; }
.hm-regions a:hover { background: #e3edfb; color: var(--hm-blue); }

.hm-news-item {
    display: grid; grid-template-columns: 38% 1fr; margin-bottom: .9rem; overflow: hidden;
    background: #fff; border: 1px solid var(--hm-line); border-radius: 8px; text-decoration: none;
    box-shadow: 0 4px 14px rgba(14,24,71,.07); transition: box-shadow .15s, transform .15s;
}
.hm-news-item:hover { box-shadow: 0 10px 22px rgba(14,24,71,.12); transform: translateY(-2px); }
.hm-news-img { display: block; min-height: 100%; position: relative; }
.hm-news-img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 144 / 86; }
.hm-news-body { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; padding: .7rem 1rem; }
.hm-tag {
    background: var(--hm-blue); color: #fff; font-size: .72rem; font-weight: 600;
    padding: .12rem .55rem; border-radius: 5px;
}
.hm-news-body strong { font-size: 1rem; font-weight: 700; line-height: 1.25; color: var(--hm-navy); }
.hm-news-body time { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; color: #374151; }
.hm-news-all { display: flex; justify-content: center; margin-top: 1.1rem; }

/* ═══════ CHIFFRES ═══════ */
.hm-stats-wrap { padding: .4rem 0 2.6rem; background: #fff; }
.hm-stats {
    position: relative; display: grid; grid-template-columns: repeat(4, 1fr) 1.45fr; align-items: center;
    background: var(--hm-soft); border-radius: 14px; padding: 1.2rem 1.2rem; overflow: hidden;
}
.hm-stats::before {   /* trait jaune décoratif */
    content: ''; position: absolute; right: -40px; top: 50%; width: 330px; height: 46px;
    background: var(--hm-yellow); opacity: .75; border-radius: 50%;
    transform: translateY(-50%) rotate(-28deg); pointer-events: none;
}
.hm-stat {
    position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .2rem;
    padding: .2rem .8rem; border-right: 1px solid #d5dce6; color: var(--hm-navy);
}
.hm-stat svg { width: 36px; height: 36px; margin-bottom: .2rem; }
.hm-stat strong { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.hm-stat span { font-size: .9rem; color: var(--hm-text); }
.hm-stat--text span { font-size: .95rem; line-height: 1.35; }
.hm-stats-cta {
    position: relative; z-index: 1; margin-left: 1.2rem;
    display: flex; align-items: center; gap: .9rem; padding: 1rem 1.2rem;
    background: var(--hm-blue); color: #fff; border-radius: 10px; text-decoration: none;
    font-size: 1rem; font-weight: 600; line-height: 1.3; white-space: nowrap; box-shadow: 0 8px 22px rgba(11,94,215,.3);
    transition: background .15s, transform .15s;
}
.hm-stats-cta:hover { background: var(--hm-blue-dark); transform: translateY(-2px); }
.hm-stats-cta svg { flex-shrink: 0; }
.hm-stats-cta span svg { width: 17px; height: 17px; vertical-align: -3px; margin-left: .25rem; }

/* ═══════ RESPONSIVE ═══════ */
@media (max-width: 1180px) {
    .hm-brand { flex-basis: calc((100% - 5 * 14px) / 6); }
    .hm-value { grid-template-columns: minmax(0, 28%) minmax(0, 1fr); }
    .hm-value-checks { grid-column: 1 / -1; border-left: 0; border-top: 1px solid rgba(255,255,255,.2);
        margin: 0; flex-direction: row; flex-wrap: wrap; gap: .6rem 1.6rem; }
    .hm-stats { grid-template-columns: repeat(4, 1fr); gap: 1rem 0; }
    .hm-stats-cta { grid-column: 1 / -1; margin: .4rem 0 0; justify-content: center; }
}
@media (max-width: 1000px) {
    .hm-hero-media { width: 60%; opacity: .45; }
    .hm-cats-grid { grid-template-columns: repeat(3, 1fr); }
    .hm-finder-grid { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
    .hm-finder-main { padding-right: 0; border-right: 0; }
    .hm-news { padding-left: 0; }
}
@media (max-width: 760px) {
    .hm-container { padding: 0 1rem; }
    .hm-hero-media { width: 100%; opacity: .25; }
    .hm-hero-media::before { background: rgba(11,42,77,.4); }
    .hm-hero-sub { font-size: 1rem; }
    .hm-hero-inner { padding-top: 1.8rem; }
    .hm-search { flex-wrap: wrap; padding: .5rem; }
    .hm-search > svg { display: none; }
    .hm-search input { flex-basis: 100%; padding: 0 .5rem; }
    .hm-search button { width: 100%; justify-content: center; }
    .hm-hero-feats { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
    .hm-cats-grid { grid-template-columns: 1fr 1fr; gap: .7rem; }
    .hm-cat:last-child { grid-column: 1 / -1; }
    .hm-cat-title strong { font-size: 1.05rem; }
    .hm-cat-desc { font-size: .8rem; }
    .hm-head { flex-direction: column; align-items: flex-start; gap: 0; }
    .hm-head .hm-link { margin: -.6rem 0 1rem; }
    .hm-carousel { padding: 0; }
    .hm-car-btn { display: none; }
    .hm-car-viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .hm-car-viewport::-webkit-scrollbar { display: none; }
    .hm-brand { flex-basis: 128px; scroll-snap-align: start; }
    .hm-value { grid-template-columns: 1fr; }
    .hm-value-img { height: 120px; }
    .hm-value-img::after { background: linear-gradient(180deg, rgba(2,44,87,0) 40%, #022c57 100%); }
    .hm-value-text { padding: 1rem 1.2rem .4rem; }
    .hm-value-text h2 { font-size: 1.25rem; }
    .hm-value-checks { flex-direction: column; padding: 1rem 1.2rem 1.2rem; }
    .hm-value-checks li { white-space: normal; }
    .hm-title { font-size: 1.35rem; }
    .hm-tabs { gap: .4rem; }
    .hm-tab { flex-direction: column; gap: .25rem; text-align: center; font-size: .8rem; padding: .5rem .3rem; }
    .hm-tab span br { display: none; }
    .hm-city button { padding: 0 1rem; }
    .hm-finder-map { grid-template-columns: minmax(0, 1fr); }
    .hm-regions a { white-space: normal; }
    .hm-stats-cta { white-space: normal; }
    .hm-map { max-width: 380px; margin: 0 auto; width: 100%; }
    .hm-news-body strong { font-size: .92rem; }
    .hm-stats { grid-template-columns: 1fr 1fr; padding: 1rem .6rem; }
    .hm-stat:nth-child(2) { border-right: 0; }
    .hm-stat:nth-child(4) { border-right: 0; }
    .hm-stats::before { display: none; }
}

/* Hero : positionnement « plateforme peinture pro » */
.hm-pro-badge { display: inline-flex; align-items: center; gap: .6rem; padding: .35rem .9rem .35rem .35rem; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); letter-spacing: .1em; }
.hm-pro-badge span { padding: .2rem .55rem; border-radius: 999px; background: var(--hm-yellow); color: var(--hm-navy); font-weight: 800; letter-spacing: .08em; }
.hm-hero-lead { font-size: 1.15rem; line-height: 1.5; color: rgba(255,255,255,.95); max-width: 600px; margin-bottom: .6rem; }
.hm-hero .hm-hero-sub { font-size: .98rem; color: rgba(255,255,255,.85); max-width: 600px; }
.hm-hero .hm-hero-sub strong { color: #fff; font-weight: 700; }
@media (max-width: 760px) { .hm-hero-lead { font-size: 1rem; } .hm-hero .hm-hero-sub { font-size: .9rem; } }

/* Marque de l'actualité sur la vignette */
.hm-news-img .act-brands { position: absolute; top: .3rem; right: .3rem; display: flex; gap: .2rem; }
.hm-news-img .act-brand { display: inline-flex; align-items: center; height: 20px; padding: .1rem .35rem; border-radius: 5px; background: #fff; box-shadow: 0 2px 6px rgba(14,24,71,.2); font-size: .58rem; font-weight: 800; text-transform: uppercase; color: #0e1847; white-space: nowrap; }
.hm-news-img .act-brand--logo img { height: 100%; width: auto; max-width: 54px; object-fit: contain; aspect-ratio: auto; }