/* ════════════════════════════════════════════════════════
   STYLE-2.CSS — Fusion unique
   Remplace : style.css + home-additions.css + product-additions.css + modele-additions.css
   Doublons résolus (voir historique de décisions) :
   - .card / .pp-section--light → fusionnés
   - --orange conservé vif (#FF6B00), --orange-dark nommé (était en dur)
   - --vert-eco devient LE --vert unique (remplace l'ancien #27ae60)
   - --terracotta supprimé, absorbé par --orange
   - --carte-sombre conservé comme second ton sombre (cartes router)
   - .grid-cards : 3 tailles via modificateurs --sm/--md/--lg
   Polices Space Grotesk / Work Sans : lien Google Fonts pas encore posé
   en prod — règles gardées, fallback Inter en attendant.
   ════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   POLICES AUTO-HÉBERGÉES
   À coller TOUT EN HAUT de /assets/css/style-2.css, avant le :root.
   Remplace l'appel à fonts.googleapis.com retiré de layout.php.

   Fichiers attendus :
     /assets/fonts/space-grotesk-700.woff2
     /assets/fonts/work-sans-400.woff2

   font-display: swap → le texte s'affiche immédiatement dans la police
   de repli, puis bascule dès que le woff2 est chargé. Jamais de texte
   invisible pendant le chargement.

   unicode-range limite le téléchargement au jeu latin : inutile de
   charger les glyphes cyrilliques ou vietnamiens pour un site en français.
   ═══════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/space-grotesk-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                   U+FFFD;
}

@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/work-sans-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                   U+FFFD;
}


:root {
    --anthracite: oklch(20% 0.01 75);
    --carte-sombre: oklch(22% 0.012 75);
    --sable: oklch(90% 0.026 85);
    --blanc: #fff;
    --gris-100: #f5f3ef;
    --gris-300: #ddd;
    --gris-500: #888;
    --gris-700: #555;

    --orange: #FF6B00;
    --orange-dark: #e55d00;
    --vert: oklch(58% 0.16 150);
    --vert-dark: oklch(44% 0.15 150);
    --rouge: #c0392b;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: Inter, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--anthracite);
    background: var(--sable);
}

a { color: var(--anthracite); }

/* ── HEADER ─────────────────────────────────────────── */
.header {
    background: var(--anthracite);
    color: var(--blanc);
    padding: 0 24px;
}
.header-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 32px;
    height: 56px;
}
.logo {
    font-weight: 700;
    font-size: 1rem;
    color: var(--blanc);
    text-decoration: none;
    white-space: nowrap;
}
.nav { display: flex; gap: 20px; flex: 1; }
.nav a { color: rgba(255,255,255,0.7); text-decoration: none; font-size: 0.85rem; }
.nav a:hover { color: var(--blanc); }
.cart-link {
    color: var(--blanc);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}
.cart-badge {
    display: inline-block;
    background: var(--orange);
    color: var(--blanc);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
    margin-left: 4px;
}

/* ── MAIN ───────────────────────────────────────────── */
.main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px;
    min-height: calc(100vh - 56px - 200px);
}

/* ── FOOTER ─────────────────────────────────────────── */
.footer {
    background: var(--anthracite);
    color: rgba(255,255,255,0.6);
    padding: 32px 24px;
    font-size: 0.8rem;
    margin-top: 48px;
}
.footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 32px;
}
.footer-col a { display: block; color: rgba(255,255,255,0.6); text-decoration: none; margin-bottom: 4px; }
.footer-col a:hover { color: var(--blanc); }
.footer-col strong { color: var(--blanc); }

/* ── COMPOSANTS GÉNÉRIQUES ──────────────────────────── */
.page-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 24px;
}

.breadcrumb {
    font-size: 0.8rem;
    color: var(--gris-500);
    margin-bottom: 16px;
}
.breadcrumb a { color: var(--gris-500); }
.breadcrumb a:hover { color: var(--anthracite); }
.breadcrumb span { margin: 0 6px; }

/* .card et .pp-section--light étaient identiques → fusionnés */
.card,
.pp-section.pp-section--light {
    background: var(--blanc);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* ── Grid de cartes — 3 tailles ──────────────────────── */
.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-size, 240px), 1fr));
    gap: 16px;
}
.grid-cards--sm { --card-size: 240px; }
.grid-cards--md { --card-size: 300px; }
.grid-cards--lg { --card-size: 340px; }

.product-card {
    background: var(--blanc);
    border-radius: 8px;
    padding: 16px;
    text-decoration: none;
    color: var(--anthracite);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s;
}
.product-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.product-card .img-placeholder {
    background: var(--sable);
    border-radius: 4px;
    height: 140px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gris-500);
    font-size: 0.75rem;
}
.product-card .name { font-weight: 600; font-size: 0.9rem; margin-bottom: 4px; }
.product-card .price { color: var(--gris-700); font-size: 0.85rem; }

.btn {
    display: inline-block;
    padding: 10px 20px;
    background: var(--anthracite);
    color: var(--blanc);
    border: none;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
.btn:hover { background: #444; }
.btn-orange { background: var(--orange); }
.btn-orange:hover { background: var(--orange-dark); }
.btn-disabled {
    background: var(--gris-300);
    color: var(--gris-500);
    cursor: not-allowed;
}

.alert {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 0.85rem;
}
.alert-info { background: #d1ecf1; color: #0c5460; }
.alert-warn { background: #fff3cd; color: #856404; }
.alert-err  { background: #f8d7da; color: #721c24; }
.alert-ok   { background: #d4edda; color: #155724; }

/* ── TABLE ──────────────────────────────────────────── */
table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
table.data th, table.data td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--gris-300);
    text-align: left;
}
table.data th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gris-500);
}

/* ── AIGUILLAGE CLIENTS (pose | pro) ─────────────────── */
.aiguillage {
    background: var(--anthracite);
    color: var(--blanc);
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
.aiguillage-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
}
.aiguillage-half {
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.aiguillage-div { background: rgba(255,255,255,0.15); }
.aiguillage-txt h { font-size: 0.95rem; font-weight: 600; margin-bottom: 1px; color: var(--blanc); }
.aiguillage-txt p  { font-size: 0.78rem; color: rgba(255,255,255,0.65); }
.aiguillage-cta {
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--blanc);
    background: var(--orange);
    text-decoration: none;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s;
}
.aiguillage-cta:hover { background: var(--orange-dark); }

/* ── Mention prix (réassurance pro sur fiche) ───────── */
.mention-prix {
    font-size: 0.8rem;
    color: var(--gris-500);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.mention-prix .sep { color: var(--gris-300); }
.mention-prix a {
    color: var(--anthracite);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--gris-300);
    padding-bottom: 1px;
}
.mention-prix a:hover { border-color: var(--anthracite); }

/* ════════════════════════════════════════════════════════
   HOME — bandeau, hero, router, benefits, familles
   (ex home-additions.css — nécessite Space Grotesk + Work Sans,
   pas encore chargées en prod : fallback Inter en attendant)
   ════════════════════════════════════════════════════════ */

.marquee {
    overflow: hidden;
    white-space: nowrap;
    background: var(--anthracite);
    padding: 9px 0;
}
.marquee__track {
    display: inline-block;
    animation: marquee-scroll 18s linear infinite;
    font: 700 12px 'Space Grotesk', sans-serif;
    color: var(--orange);
    letter-spacing: .03em;
}
@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; }
}

.hero-split {
    position: relative;
    display: grid;
    grid-template-columns: 0.82fr 1.3fr;
    min-height: 460px;
    margin: 28px 0 -34px;
}
.hero-split__text {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 32px 20px 0;
}
.hero-split__title {
    font: 700 2.15rem/1.05 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: -.01em;
    margin: 0 0 18px;
    color: var(--anthracite);
}
.hero-split__title em { font-style: normal; color: var(--orange); }
.hero-split__title-sub { font-size: 1.3rem; text-transform: none; letter-spacing: 0; color: var(--anthracite); }
.hero-split__desc {
    font: 400 0.98rem/1.55 'Work Sans', sans-serif;
    color: var(--gris-700);
    margin: 0 0 26px;
    max-width: 300px;
}
.hero-split__actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.hero-split__media {
    position: relative;
    clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%);
    overflow: hidden;
    background: var(--sable);
}
.hero-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.router-grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin: 0 0 64px;
}
.router-card {
    text-decoration: none;
    color: #fff;
    background: var(--carte-sombre);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .22s, box-shadow .22s;
    box-shadow: 0 14px 30px rgba(0,0,0,.28);
}
.router-card:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 22px 40px rgba(0,0,0,.35); }
.router-card--materiaux    { transform: rotate(-2deg); }
.router-card--installation { transform: rotate(1.4deg); }
.router-card--pro          { transform: rotate(-0.8deg); }
.router-card__stripe { height: 5px; }
.router-card--materiaux .router-card__stripe    { background: linear-gradient(90deg, var(--orange), var(--orange-dark)); }
.router-card--installation .router-card__stripe { background: linear-gradient(90deg, var(--vert), var(--vert-dark)); }
.router-card--pro .router-card__stripe          { background: linear-gradient(90deg, #fff, var(--gris-100)); }
.router-card__body { padding: 26px 24px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.router-card__icon { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(0,0,0,.3); }
.router-card--materiaux .router-card__icon    { background: linear-gradient(155deg, var(--orange), var(--orange-dark)); }
.router-card--installation .router-card__icon { background: linear-gradient(155deg, var(--vert), var(--vert-dark)); }
.router-card--pro .router-card__icon          { background: linear-gradient(155deg, #fff, var(--gris-100)); }
.router-card__icon-shape { width: 18px; height: 18px; background: rgba(255,255,255,.9); }
.router-card--materiaux .router-card__icon-shape    { border-radius: 5px; }
.router-card--installation .router-card__icon-shape { border-radius: 100px; }
.router-card--pro .router-card__icon-shape {
    background: var(--anthracite);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.router-card__title { font: 700 1.05rem 'Space Grotesk', sans-serif; margin-bottom: 6px; }
.router-card__desc  { font: 400 12.5px/1.5 'Work Sans', sans-serif; color: rgba(255,255,255,.55); }
.router-card__foot  { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); }
.router-card__cta   { font: 700 12px 'Space Grotesk', sans-serif; }
.router-card--materiaux .router-card__cta    { color: var(--orange); }
.router-card--installation .router-card__cta { color: var(--vert); }
.router-card--pro .router-card__cta          { color: #fff; }
.router-card__arrow { width: 30px; height: 30px; border-radius: 100px; display: flex; align-items: center; justify-content: center; font: 700 14px sans-serif; flex-shrink: 0; }
.router-card--materiaux .router-card__arrow    { background: var(--orange); color: var(--anthracite); }
.router-card--installation .router-card__arrow { background: var(--vert); color: var(--anthracite); }
.router-card--pro .router-card__arrow          { background: #fff; color: var(--anthracite); }

/* .benefits et .pp-section--dark restent séparés (gabarits différents, volontaire) */
.benefits { background: var(--anthracite); border-radius: 14px; padding: 44px; color: #fff; }
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 16px; }
.benefit { background: rgba(255,255,255,.06); border-radius: 10px; padding: 20px; }
.benefit__check {
    width: 26px; height: 26px; border-radius: 100px;
    display: flex; align-items: center; justify-content: center;
    font: 700 13px sans-serif; margin-bottom: 12px; color: var(--anthracite);
}
.benefit--a .benefit__check { background: var(--orange); }
.benefit--b .benefit__check { background: var(--vert); }
.benefit__title { font: 700 13.5px 'Space Grotesk', sans-serif; margin-bottom: 6px; color: #fff; }
.benefit__text  { font: 400 12.5px/1.6 'Work Sans', sans-serif; color: rgba(247,244,238,.65); margin: 0; }

.familles-home { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.famille-home {
    background: var(--blanc); border-radius: 8px; padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.famille-home a { text-decoration: none; color: var(--anthracite); }
.famille-home img { width: 100%; height: 100%; object-fit: cover; display: block; }
.famille-home .grande { display: block; height: 260px; border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.famille-home .vignettes { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.famille-home .vignettes > a { display: block; height: 84px; border-radius: 4px; overflow: hidden; }
.famille-home .img-placeholder {
    width: 100%; height: 100%;
    background: var(--sable);
    display: flex; align-items: center; justify-content: center;
    color: var(--gris-500); font-size: 0.75rem; text-align: center; padding: 4px;
}
.famille-home .name { display: block; margin-top: 12px; font-weight: 600; font-size: 0.95rem; }
.famille-home .name:hover { color: var(--orange); }

/* ════════════════════════════════════════════════════════
   FICHE PRODUIT — dimensions / description / faq / specs
   (ex product-additions.css + modele-additions.css)
   ════════════════════════════════════════════════════════ */

.pp-section {
    border-radius: 8px;
    padding: 24px;
    margin-top: 16px;
}
.pp-section.pp-section--first { margin-top: 24px; }
.pp-section.pp-section--dark {
    background: var(--anthracite);
    color: var(--blanc);
}
.pp-section h2 { font-size: 1rem; margin: 0 0 16px; }
.pp-section.pp-section--dark h2 { color: var(--blanc); }

.pp-dims-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.pp-dim-card { border: 1px solid var(--gris-300); border-radius: 6px; padding: 14px 16px; }
.pp-dim-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gris-500); margin-bottom: 6px; }
.pp-dim-value { font-size: 1.05rem; font-weight: 700; }

.pp-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.pp-tag {
    font: 600 12px ui-monospace, Menlo, monospace;
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.8);
    padding: 6px 12px;
    border-radius: 5px;
}
.pp-desc-body { font-size: .9rem; line-height: 1.7; color: rgba(255,255,255,.75); display: flex; flex-direction: column; gap: 14px; }
.pp-desc-body p { margin: 0; }

.pp-faq-list { display: flex; flex-direction: column; gap: 10px; }
.pp-faq-item { border: 1px solid var(--gris-300); border-radius: 6px; padding: 14px 16px; }
.pp-faq-item summary { cursor: pointer; font-size: .9rem; font-weight: 600; list-style: none; }
.pp-faq-item summary::-webkit-details-marker { display: none; }
.pp-faq-item p { font-size: .85rem; color: var(--gris-700); margin: 8px 0 0; }

.pp-specs {
    border: 1px solid var(--gris-300);
    border-radius: 6px;
    overflow: hidden;
}
.pp-spec-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--gris-300);
}
.pp-spec-row:last-child { border-bottom: none; }
.pp-spec-row:nth-child(even) { background: var(--gris-100); }
.pp-spec-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gris-500);
    align-self: center;
}
.pp-spec-value { font-size: .92rem; align-self: center; }

/* ════════════════════════════════════════════════════════
   RESPONSIVE — consolidé, breakpoints d'origine conservés
   (harmonisation des seuils à prévoir dans un futur passage)
   ════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .hero-split { grid-template-columns: 1fr; margin-bottom: 24px; }
    .hero-split__media { height: 280px; clip-path: none; border-radius: 8px; order: -1; margin-bottom: 24px; }
    .router-grid { grid-template-columns: 1fr; }
    .router-card { transform: none !important; }
    .benefits-grid { grid-template-columns: 1fr 1fr; }
    .familles-home { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .header-inner { gap: 16px; }
    .nav { gap: 12px; }
    .nav a { font-size: 0.78rem; }
    .footer-inner { grid-template-columns: 1fr 1fr; }
    .grid-cards { grid-template-columns: 1fr 1fr; }
    .pp-dims-grid { grid-template-columns: repeat(2, 1fr); }
    .aiguillage-inner { grid-template-columns: 1fr; }
    .aiguillage-div   { height: 1px; width: 100%; }
    .aiguillage-half  { flex-direction: column; align-items: flex-start; gap: 10px; }
    .aiguillage-cta   { width: 100%; justify-content: center; }
}

@media (max-width: 640px) {
    .pp-spec-row { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 560px) {
    .benefits-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .nav { display: none; }
    .footer-inner { grid-template-columns: 1fr; }
    .grid-cards { grid-template-columns: 1fr; }
}
/* ════════════════════════════════════════════════════════
   PAGES FABRICANT & INSTALLATEUR — ajouts
   (fabricant-cloture-beton, installateur-cloture-beton)
   ════════════════════════════════════════════════════════ */

.page-surtitre {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gris-500);
    margin-bottom: 8px;
}

.page-intro {
    font-size: 1rem;
    color: var(--gris-700);
    max-width: 640px;
    margin-bottom: 8px;
}

/* Au cœur de l'atelier — vidéo autoplay + photos, même principe que la landing */
.atelier-video-block { max-width: 720px; margin: 0 auto 24px; }
.atelier-video-wrapper { width: 100%; overflow: hidden; border-radius: 8px; background: var(--anthracite); }
.atelier-video-wrapper video { width: 100%; height: auto; display: block; }
.atelier-photos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 720px; margin: 0 auto; }
.atelier-photo-wrapper { width: 100%; overflow: hidden; border-radius: 8px; background: var(--gris-100); }
.atelier-photo-wrapper img { width: 100%; height: auto; display: block; transition: transform .5s ease; }
.atelier-photo-wrapper:hover img { transform: scale(1.02); }
.atelier-caption { font-size: 0.82rem; color: var(--gris-500); margin-top: 10px; }

/* Zoom textures (matière de près) */
.zoom-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 16px;
}
.zoom-item { border-radius: 6px; overflow: hidden; }
.zoom-item img { width: 100%; height: 130px; object-fit: cover; display: block; }
.zoom-caption { font-size: 0.75rem; color: var(--gris-500); padding: 6px 2px 0; text-align: center; }

/* Deux CTA de fermeture (page fabricant) */
.cta-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.cta-split .card { text-align: center; }
.cta-split h3 { font-size: 1rem; margin-bottom: 8px; }
.cta-split p { color: var(--gris-700); font-size: 0.88rem; margin-bottom: 16px; }

/* Bandeau fabricant condensé (page installateur) */
.bandeau-fabricant {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.bandeau-fabricant__chiffres { font: 700 1.05rem 'Space Grotesk', sans-serif; }
.bandeau-fabricant__texte { color: rgba(255,255,255,.65); font-size: 0.85rem; margin-top: 4px; }
.bandeau-fabricant__cta {
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.4);
    padding-bottom: 2px;
}
.bandeau-fabricant__cta:hover { border-color: #fff; }

/* Mention discrète fournisseurs (page installateur) */
.mention-discrete { font-size: 0.82rem; color: var(--gris-500); text-align: center; }
.mention-discrete a { color: var(--anthracite); font-weight: 600; }

/* Hero simple (page installateur) */
.hero-simple { text-align: center; padding: 40px 24px 32px; }
.hero-simple h1 { font: 700 2rem 'Space Grotesk', sans-serif; margin-bottom: 12px; letter-spacing: -.01em; }
.hero-simple p { color: var(--gris-700); font-size: 1rem; max-width: 480px; margin: 0 auto 24px; }

/* Cartes gamme (image + fiche PDF, sans lien englobant) */
.gamme-card { background: var(--blanc); border-radius: 8px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.gamme-card img { width: 100%; height: 160px; object-fit: cover; border-radius: 4px; margin-bottom: 12px; display: block; }
.gamme-card .name { font-weight: 600; font-size: 0.9rem; margin-bottom: 2px; }
.gamme-card .face { color: var(--gris-500); font-size: 0.8rem; margin-bottom: 10px; }
.gamme-card a.fiche { font-size: 0.8rem; font-weight: 600; color: var(--anthracite); text-decoration: none; border-bottom: 1px solid var(--gris-300); padding-bottom: 1px; }
.gamme-card a.fiche:hover { border-color: var(--anthracite); }

/* Liens lisibles dans .benefit__text sur fond sombre */
.benefit__text a { color: #fff; }

/* pp-specs dans un contexte sombre (section "Le procédé") */
.pp-section--dark .pp-specs { border-color: rgba(255,255,255,.15); }
.pp-section--dark .pp-spec-row { border-bottom-color: rgba(255,255,255,.1); }
.pp-section--dark .pp-spec-row:nth-child(even) { background: rgba(255,255,255,.03); }
.pp-section--dark .pp-spec-label { color: rgba(255,255,255,.5); }
.pp-section--dark .pp-spec-value { color: #fff; }

/* Gamme en 2x2 (images plus grandes) */
.grid-cards--2col { grid-template-columns: repeat(2, 1fr); }
.gamme-card img { height: 220px; }

/* Aperçu de l'app — 2 parties (formulaire / pré-devis empilé) */
.chiffrage-captures {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 20px 0;
}
.chiffrage-capture-item { text-align: center; }
.chiffrage-capture-wrapper img,
.chiffrage-predevis-stack img {
    width: 100%;
    max-width: 220px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    display: block;
    margin: 0 auto;
}
.chiffrage-predevis-stack { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.chiffrage-capture-caption { font-size: 0.85rem; color: var(--gris-700); margin-top: 12px; }

/* Écosystème installateur — cartes sombres avec photo ou icône */
.eco-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.eco-card {
    background: var(--carte-sombre);
    border-radius: 12px;
    overflow: hidden;
    color: #fff;
    display: flex;
    flex-direction: column;
}
.eco-card__photo { width: 100%; height: 180px; object-fit: cover; display: block; }
.eco-card__icon {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.04);
}
.eco-card__icon svg { width: 42px; height: 42px; stroke: var(--orange); fill: none; stroke-width: 1.6; }
.eco-card__body { padding: 20px; flex: 1; }
.eco-card__title { font: 700 1rem 'Space Grotesk', sans-serif; margin-bottom: 8px; }
.eco-card__text { font-size: 0.85rem; color: rgba(255,255,255,.65); line-height: 1.6; }
.eco-card__actions { margin-top: 12px; display: flex; gap: 14px; flex-wrap: wrap; }
.eco-card__actions a {
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,.4);
    text-decoration: none;
}
.eco-card__actions a:hover { border-color: #fff; }

/* Aperçu de l'app — capture statique + zone scrollable pour le pré-devis */
.chiffrage-capture-wrapper {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    height: 460px;
    overflow: hidden;
    position: relative;
    background: var(--gris-100);
    box-shadow: 0 4px 20px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05);
    border-radius: 8px;
}
.chiffrage-capture-wrapper.is-static img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}
.chiffrage-capture-wrapper.is-scrollable {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--gris-300) transparent;
}
.chiffrage-capture-wrapper.is-scrollable::-webkit-scrollbar { width: 6px; }
.chiffrage-capture-wrapper.is-scrollable::-webkit-scrollbar-track { background: transparent; }
.chiffrage-capture-wrapper.is-scrollable::-webkit-scrollbar-thumb { background: var(--gris-300); border-radius: 3px; }
.chiffrage-capture-wrapper.is-scrollable::after {
    content: '';
    position: sticky;
    bottom: 0; left: 0; right: 0;
    display: block;
    height: 50px;
    background: linear-gradient(to bottom, transparent 0%, var(--gris-100) 100%);
    pointer-events: none;
    margin-top: -50px;
}
.chiffrage-predevis-stack img { width: 100%; height: auto; display: block; }

/* Boutons stores — logos officiels Apple / Google Play */
.chiffrage-stores { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 24px 0 12px; }
.store-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--anthracite);
    color: var(--blanc);
    border: 1px solid var(--anthracite);
    border-radius: 6px;
    text-decoration: none;
    min-width: 200px;
    transition: background .15s, transform .15s;
}
.store-btn:hover { background: #444; transform: translateY(-2px); }
.store-btn-icon { flex-shrink: 0; width: 22px; height: 22px; display: block; }
.store-btn-text { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.store-btn-text-small { font-size: 0.65rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; opacity: .75; }
.store-btn-text-large { font-size: 0.92rem; font-weight: 600; margin-top: 2px; }

@media (max-width: 768px) {
    .zoom-grid { grid-template-columns: 1fr 1fr; }
    .cta-split { grid-template-columns: 1fr; }
    .bandeau-fabricant { flex-direction: column; align-items: flex-start; }
    .eco-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .grid-cards--2col { grid-template-columns: 1fr; }
    .chiffrage-captures { grid-template-columns: 1fr; }
}