:root {
    --primary: #711C32;
    --primary-hover: #521426;
    --primary-light: #F4E8EC;
    --background: #FBF8F4;
    --surface: #FFFFFF;
    --text-primary: #20242A;
    --text-secondary: #616A73;
    --accent: #B58A52;
    --border: #E8E0E2;

    /* alias historiques */
    --rouge: var(--primary);
    --rouge-fonce: var(--primary-hover);
    --gris-texte: var(--text-secondary);
    --gris-clair: #F6F1ED;
    --bordure: var(--border);
}

* { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--text-primary);
    background: var(--background);
    margin: 0;
    line-height: 1.5;
}

.conteneur {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px;
}

.fil-ariane {
    max-width: 1440px;
    margin: 0 auto;
    padding: 16px 20px;
    font-size: 14px;
    color: #7a8189;
}
.fil-ariane ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.fil-ariane li { display: inline-flex; align-items: center; }
.fil-ariane li + li::before { content: '›'; margin: 0 8px; color: #cfc6c9; }
.fil-ariane li[aria-current] { color: var(--text-secondary); }
.fil-ariane a { color: #7a8189; text-decoration: none; }
.fil-ariane a:hover { text-decoration: underline; }

/* Hero : image + infos produit côte à côte */
.hero {
    display: flex;
    gap: 40px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px 40px;
    flex-wrap: wrap;
}
.hero-image { flex: 1 1 0; min-width: 280px; }
.hero-image img {
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: contain;
    background: var(--gris-clair);
    border-radius: 12px;
    display: block;
}
.hero-image .visuel-dessin {
    width: 100%;
    aspect-ratio: 5 / 4;
    border-radius: 12px;
}

/* Dessin (illustration monochrome) affiché à la place d'une photo tant qu'aucune vraie photo n'a été ajoutée */
.visuel-dessin {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gris-clair);
}
.visuel-dessin svg {
    width: 42%;
    height: 42%;
    fill: none;
    stroke: #a9afb5;
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.visuel-dessin-clair {
    background: rgba(255,255,255,0.12);
}
.visuel-dessin-clair svg { stroke: #d9d0d3; }
.hero-miniatures {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 10px;
}
.hero-miniatures img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}
.hero-infos { flex: 1 1 0; min-width: 280px; display: flex; flex-direction: column; }
.produit-header { display: flex; flex-direction: column; flex: 1; }

.categorie-label {
    color: var(--rouge);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.produit-header h1 {
    font-size: 32px;
    margin: 0 0 12px;
}
.produit-header .accroche {
    font-size: 17px;
    color: var(--gris-texte);
    margin-bottom: 12px;
}
.produit-header .description {
    font-size: 15px;
    color: var(--gris-texte);
    margin-bottom: 24px;
}

.cta {
    display: inline-block;
    background: var(--rouge);
    color: #fff;
    padding: 14px 28px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s;
    white-space: nowrap;
}
.cta:hover { background: var(--rouge-fonce); }

.arguments {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 12px;
    margin: 24px 0 28px;
}
.argument {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    color: var(--gris-texte);
    flex: 1 1 0;
    min-width: 0;
}
.argument-icone {
    display: block;
    width: 22px;
    height: 22px;
    color: var(--rouge);
}
.produit-header .argument {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.produit-header .argument-icone { flex: 0 0 22px; }
.argument-icone svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.cta-tel {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--bordure);
    border-radius: 30px;
    padding: 10px 22px 10px 16px;
    text-decoration: none;
    color: var(--text-primary);
}
.cta-tel-icone {
    font-size: 18px;
}
.cta-tel-texte {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.cta-tel-label {
    font-size: 12px;
    color: #7a8189;
}
.cta-tel-numero {
    font-weight: 700;
    font-size: 14px;
}

.zone-locale {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    margin-top: 20px;
}
.zone-locale-icone {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin-top: 2px;
    color: var(--rouge);
}
.zone-locale-icone svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.zone-locale p { margin: 0; }
.zone-locale strong { display: block; color: var(--text-primary); margin-bottom: 2px; }
.zone-locale-villes { color: #7a8189; }
.zone-locale-villes a { color: #7a8189; text-decoration: none; }
.zone-locale-villes a:hover { color: var(--rouge); text-decoration: underline; }

/* Sections générales */
section {
    padding: 40px 20px;
    max-width: 1440px;
    margin: 0 auto;
}
section h2 {
    font-size: 24px;
    margin-bottom: 20px;
}
.sous-titre {
    color: #7a8189;
    font-size: 14px;
    margin-top: -14px;
    margin-bottom: 20px;
}

/* Trio : formats / usages / personnalisation côte à côte */
.trio-sections {
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: 1440px;
    margin: 0 auto;
    padding: 40px 20px;
}
.trio-sections section {
    flex: 1 1 0;
    min-width: 0;
}
@media (max-width: 800px) {
    .trio-sections { flex-direction: column; }
    .trio-sections section { padding: 24px 0 !important; border-left: none !important; border-top: 1px solid var(--bordure); }
    .trio-sections section:first-child { border-top: none; padding-top: 0 !important; }
}
.trio-sections section {
    padding: 0 40px;
    max-width: none;
    margin: 0;
}
.trio-sections section:first-child { padding-left: 0; }
.trio-sections section:last-child { padding-right: 0; }
.trio-sections section + section {
    border-left: 1px solid var(--bordure);
}
.trio-sections h2 {
    font-size: 18px;
    margin-bottom: 6px;
}
.trio-sections .sous-titre {
    margin-top: 0;
    margin-bottom: 14px;
}

/* Formats */
.formats ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.formats li {
    background: var(--gris-clair);
    border: 1px solid var(--bordure);
    border-radius: 8px;
    padding: 10px 16px;
    font-weight: 600;
    font-size: 14px;
}

/* Usages */
.usages ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}
.usages li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}
.usage-icone {
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    color: var(--text-primary);
}
.usage-icone svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Personnalisation */
.personnalisation ul {
    list-style: none;
    padding: 0;
}
.personnalisation li {
    padding: 8px 0;
    color: var(--gris-texte);
}
.personnalisation-check { color: var(--rouge); font-weight: 700; }

/* Galerie d'exemples */
.section-titre-ligne {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.lien-voir-plus {
    color: var(--rouge);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.exemples .galerie {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
.galerie-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}
.galerie-item img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
}
.galerie-legende {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.5px;
    background: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.35));
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.galerie-legende br { display: none; }
.galerie-legende small { display: block; margin-top: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; text-transform: none; opacity: 0.95; }

/* Pourquoi choisir */
.pourquoi .grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
}
.pourquoi .point strong {
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
}
.pourquoi .point-icone {
    display: block;
    width: 30px;
    height: 30px;
    margin-bottom: 8px;
    color: var(--rouge, var(--primary));
}
.pourquoi .point-icone svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.pourquoi .point p {
    color: var(--gris-texte);
    font-size: 14px;
    margin: 0;
}

/* Pourquoi choisir (fiche produit) : cadre gris, icône à gauche du texte */
.produit-pourquoi h2 {
    margin: 0 0 24px;
}
.produit-pourquoi .grille {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    background: var(--gris-clair);
    border-radius: 15px;
    padding: 26px 30px;
    margin-top: 0;
}
.produit-pourquoi .point {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}
.produit-pourquoi .point-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    margin: 0;
}
.produit-pourquoi .point-icone svg {
    width: 19px;
    height: 19px;
}
.produit-pourquoi .point-texte {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.produit-pourquoi .point strong {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
}
.produit-pourquoi .point p {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--gris-texte);
}
@media (max-width: 1100px) and (min-width: 769px) {
    .produit-pourquoi .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .produit-pourquoi .grille {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}

/* FAQ + Demander un devis, côte à côte */
.section-faq-devis {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 40px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 40px 20px;
    align-items: start;
}
.section-faq-devis .faq,
.section-faq-devis .devis {
    padding: 0;
    max-width: none;
    margin: 0;
}

/* FAQ */
.faq details {
    border-bottom: 1px solid var(--bordure);
    padding: 14px 0;
}
.faq details:last-child { border-bottom: none; }
.faq summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: '+';
    font-size: 20px;
    color: #7a8189;
    flex-shrink: 0;
}
.faq details[open] summary::after { content: '\2212'; }
.faq p { color: var(--gris-texte); margin-top: 10px; }

/* Demander un devis */
.devis {
    background: var(--gris-clair);
    border-radius: 12px;
    padding: 28px !important;
}
.devis-grille {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    grid-template-areas:
        "nom       message"
        "email     message"
        "telephone message"
        "fichier   fichier";
    gap: 16px;
    margin: 20px 0;
}
.devis-nom { grid-area: nom; }
.devis-message { grid-area: message; }
.devis-email { grid-area: email; }
.devis-telephone { grid-area: telephone; }
.devis-fichier { grid-area: fichier; }

.devis-grille label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gris-texte);
}
.devis-message { height: 100%; }
.devis-message textarea { flex: 1; min-height: 0; }
.devis-grille input,
.devis-grille select,
.devis-grille textarea {
    font: inherit;
    font-weight: 400;
    padding: 10px 12px;
    border: 1px solid var(--bordure);
    border-radius: 6px;
    background: #fff;
    color: var(--text-primary);
}
.devis-grille textarea { resize: vertical; }
.devis-fichier {
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    border: 1px dashed var(--bordure);
    border-radius: 8px;
    padding: 16px;
    background: #fff;
    text-align: center;
}
.devis-fichier-bouton {
    font-weight: 600;
    color: var(--text-primary);
}
.devis-fichier input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.devis-fichier-note {
    display: block;
    width: 100%;
    font-weight: 400;
    font-size: 12px;
    color: #7a8189;
}

@media (max-width: 600px) {
    .devis-grille {
        grid-template-columns: 1fr;
        grid-template-areas:
            "nom"
            "email"
            "telephone"
            "message"
            "fichier";
    }
}
.devis button.cta {
    border: none;
    cursor: pointer;
    font-size: 15px;
}

@media (max-width: 760px) {
    .section-faq-devis { grid-template-columns: 1fr; }
    .devis-grille { grid-template-columns: 1fr; }
}

/* Produits similaires */
.produits-similaires .grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
.produits-similaires a {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--bordure);
    border-radius: 10px;
    padding: 12px;
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color 0.2s;
}
.produits-similaires a:hover { border-color: var(--rouge); }
.produits-similaires img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}
.produits-similaires .visuel-dessin {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    flex-shrink: 0;
}
.produits-similaires .visuel-dessin svg { width: 60%; height: 60%; }
.similaire-texte {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.similaire-nom {
    font-weight: 600;
    font-size: 14px;
}
.similaire-fleche {
    color: #7a8189;
    font-size: 14px;
}

@media (max-width: 700px) {
    .hero { padding: 0 16px 30px; }
    .produit-header h1 { font-size: 26px; }
}

/* Carrousel horizontal (prestations, besoins, réalisations) */
.carrousel {
    position: relative;
}
.carrousel-piste {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.carrousel-piste::-webkit-scrollbar { display: none; }
.carrousel-piste > * { scroll-snap-align: start; }
.carrousel-fleche {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--bordure);
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--text-primary);
}
.carrousel-fleche:hover { border-color: var(--rouge); color: var(--rouge); }
.carrousel-fleche-gauche { left: -20px; }
.carrousel-fleche-droite { right: -20px; }
.carrousel-fleche[hidden] { display: none; }

@media (max-width: 500px) {
    .carrousel-fleche { display: none; }
}

/* Page d'accueil */
.accueil-hero {
    width: 100%;
    min-height: clamp(360px, 33.333vw, 450px);
    max-height: 450px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(90deg,
            rgba(32, 36, 42, 0.9) 0%,
            rgba(32, 36, 42, 0.78) 42%,
            rgba(32, 36, 42, 0.35) 56%,
            rgba(32, 36, 42, 0) 72%),
        url('images/banner-publimage.jpg') center / cover no-repeat,
        var(--gris-clair);
    background-size: cover;
    background-position: center;
    padding: 40px 20px;
}
.accueil-hero-contenu {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}
.accueil-hero h1 {
    color: #fff;
    font-size: 42px;
    max-width: 640px;
    margin: 0 0 16px;
}
.accueil-hero > .accueil-hero-contenu > p {
    color: #f4eeea;
    font-size: 16px;
    max-width: 540px;
    margin: 0 0 28px;
}
.cta-clair {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.6);
    color: #fff;
}
.cta-clair:hover { background: rgba(255,255,255,0.15); }
.accueil-hero-arguments {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 50%;
    max-width: 720px;
    gap: 10px;
    margin-top: 40px;
}
.accueil-hero-arguments .argument {
    flex: 0 0 auto;
    color: #fff;
    font-size: clamp(9px, 0.72vw, 11px);
    white-space: nowrap;
}
.accueil-hero-arguments .argument-icone { font-size: 18px; }

@media (max-width: 800px) {
    .accueil-hero {
        min-height: 0;
        max-height: none;
        padding: 36px 16px;
        background:
            linear-gradient(rgba(32, 36, 42, 0.72), rgba(32, 36, 42, 0.72)),
            url('images/banner-publimage.jpg') center / cover no-repeat,
            var(--gris-clair);
    }
    .accueil-hero h1 { font-size: 30px; line-height: 1.15; }
    .accueil-hero-arguments {
        width: 100%;
        flex-wrap: wrap;
    }
}

@media (max-width: 500px) {
    .accueil-hero-arguments {
        display: grid;
        grid-template-columns: 1fr;
    }
}

.accueil-prestations,
.accueil-besoins,
.accueil-realisations {
    max-width: 1440px;
    margin: 0 auto;
    padding: 50px 20px;
}
.accueil-prestations h2,
.accueil-besoins h2,
.accueil-realisations h2 {
    font-size: 24px;
    margin: 0 0 6px;
}
.accueil-prestations .sous-titre,
.accueil-besoins .sous-titre,
.accueil-realisations .sous-titre {
    margin-top: 0;
    margin-bottom: 24px;
}

.carte-prestation {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 200px;
    aspect-ratio: 3 / 4;
    text-decoration: none;
    color: var(--text-primary);
    border-radius: 14px;
    overflow: hidden;
    padding: 22px 16px 16px;
    transition: box-shadow 0.2s;
    background-color: #f6f1ed;
    background-image: linear-gradient(180deg, rgba(32, 36, 42,0.10) 0%, rgba(32, 36, 42,0.04) 100%);
}
.carte-prestation:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
.carte-prestation h3 {
    font-size: 17px;
    text-align: center;
    margin: 0 0 20px;
}
.carte-prestation img,
.carte-prestation-sans-image {
    flex: 1;
    min-height: 0;
    max-width: 100%;
    object-fit: contain;
    object-position: center top;
    display: block;
    filter: drop-shadow(0 14px 12px rgba(0,0,0,0.35));
}

.accueil-besoins {
    background-color: #f6ecdc;
    background-image: linear-gradient(rgba(255,255,255,0.72), rgba(255,255,255,0.72)), url('images/decor-dunes.svg');
    background-size: cover;
    background-position: center;
    max-width: none;
}
.accueil-besoins > * { max-width: 1440px; margin-left: auto; margin-right: auto; }
.accueil-besoins h2 { font-weight: 800; }
.accueil-besoins .sous-titre { text-align: left; margin-bottom: 32px; }
.besoin {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 28px;
    flex: 0 0 240px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.besoin:hover {
    border-color: #dcb4bf;
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(32, 36, 42, 0.06);
}
.besoin-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
    border-radius: 10px;
    background: var(--primary-light);
    color: var(--rouge, var(--primary));
}
.besoin-icone svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.besoin strong { display: block; margin-bottom: 8px; font-size: 20px; font-weight: 700; min-height: 52px; }
.besoin p { font-size: 15px; line-height: 1.45; color: var(--gris-texte); margin: 0; }
.besoin-cta {
    display: block;
    margin-top: 16px;
    font-size: 15px;
    font-weight: 600;
    color: var(--rouge, var(--primary));
    transition: transform 0.2s;
}
.besoin:hover .besoin-cta { transform: translateX(3px); }

.accueil-realisations .galerie-item {
    flex: 0 0 220px;
    display: block;
    text-decoration: none;
}
.accueil-realisations .galerie-legende small {
    display: block;
    font-weight: 500;
    text-transform: none;
    font-size: 11px;
    margin-top: 4px;
    opacity: 0.9;
}

.accueil-pourquoi { max-width: none; }
.accueil-pourquoi .grille {
    max-width: 1440px;
    margin: 0 auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    background: var(--gris-clair);
    border-radius: 15px;
    padding: 26px 30px;
}
.accueil-pourquoi .point {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}
.accueil-pourquoi .point-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    margin: 0;
}
.accueil-pourquoi .point-icone svg { width: 19px; height: 19px; }
.accueil-pourquoi .point-texte {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.accueil-pourquoi .point strong {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
}
.accueil-pourquoi .point p {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--gris-texte);
}
@media (max-width: 1100px) and (min-width: 769px) {
    .accueil-pourquoi .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .accueil-pourquoi .grille { grid-template-columns: 1fr; gap: 22px; }
}

.accueil-zone {
    max-width: none;
    background-color: #f6ecdc;
    background-image: linear-gradient(rgba(255,255,255,0.72), rgba(255,255,255,0.72)), url('images/decor-bassin.svg');
    background-size: cover;
    background-position: center;
}
.accueil-zone-interieur {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr;
    gap: 32px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 50px 20px;
    align-items: center;
}
.accueil-zone-photo {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}
.accueil-zone-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.accueil-zone-photo-vide {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--border), #f6f1ed);
}
.accueil-zone-texte h2 { font-size: 24px; margin: 8px 0 14px; }
.accueil-zone-texte p { color: var(--gris-texte); }
.accueil-zone-carte {
    background: var(--gris-clair);
    border-radius: 12px;
    padding: 26px;
}
.accueil-zone-liste {
    display: flex;
    gap: 28px;
}
.zone-groupe-titre {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #7a8189;
}
.zone-groupe ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.zone-groupe ul li a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
}
.zone-groupe ul li a:hover { color: var(--rouge); }
.zone-groupe ul li a svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--rouge);
}

@media (max-width: 1000px) {
    .accueil-zone-interieur { grid-template-columns: minmax(0, 1fr); }
    .accueil-zone-liste { flex-wrap: wrap; gap: 20px 28px; }
    .accueil-zone-photo { max-height: 260px; }
}
@media (max-width: 800px) {
    .accueil-zone-interieur { grid-template-columns: 1fr; }
}

/* Footer */
.site-footer {
    border-top: 3px solid var(--accent);
    background: var(--primary-hover);
    color: #fff;
    margin-top: 40px;
}
.site-footer-haut {
    max-width: 1440px;
    margin: 0 auto;
    padding: 40px 20px;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.4fr auto;
    gap: 30px;
    align-items: start;
}
.site-footer-marque p {
    color: rgba(255,255,255,0.78);
    font-size: 13px;
    margin: 10px 0 0;
    max-width: 280px;
}
.site-footer-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    color: rgba(255,255,255,0.78);
}
.site-footer-contact a { color: rgba(255,255,255,0.78); text-decoration: none; }
.site-footer-zones strong {
    color: #fff;
    display: block;
    font-size: 13px;
    margin-bottom: 8px;
}
.site-footer-zones p {
    margin: 0;
    font-size: 13px;
    color: rgba(255,255,255,0.78);
    line-height: 1.8;
}
.site-footer-zones a { color: rgba(255,255,255,0.78); text-decoration: none; }
.site-footer-zones a:hover { color: var(--accent); }
.site-footer-liens {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
}
.site-footer-liens a { color: rgba(255,255,255,0.78); text-decoration: none; }
.site-footer-liens a:hover { color: var(--accent); }
.site-footer-social {
    display: flex;
    gap: 12px;
    font-size: 18px;
}
.site-footer-social a { text-decoration: none; }
.site-footer-bas {
    border-top: 1px solid rgba(181,138,82,0.45);
    padding: 16px 20px;
    text-align: center;
    font-size: 12px;
    color: rgba(255,255,255,0.65);
}

@media (max-width: 800px) {
    .site-footer-haut { grid-template-columns: 1fr 1fr; }
}

/* Récit Situation / Besoin / Accompagnement / Résultat */
.recit {
    max-width: 1440px;
    margin: 0 auto;
    padding: 40px 20px;
}
.recit h2 { font-size: 22px; margin: 0 0 24px; }
.recit-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}
.recit-etape { position: relative; padding-left: 40px; }
.recit-num {
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--rouge);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.recit-etape strong { display: block; margin-bottom: 6px; font-size: 15px; }
.recit-etape p { color: var(--gris-texte); font-size: 14px; margin: 0; }

/* Conseil d'expert */
.conseil-expert {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px 40px;
}
.conseil-expert-icone {
    font-size: 22px;
    background: var(--gris-clair);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.conseil-expert strong { display: block; margin-bottom: 4px; }
.conseil-expert p { margin: 0; color: var(--gris-texte); font-size: 14px; }

/* Comment ça se passe (étapes du processus) */
.processus {
    max-width: 1440px;
    margin: 0 auto;
    padding: 40px 20px;
}
.processus h2 { font-size: 22px; margin: 0 0 24px; }
.processus-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
}
.processus-etape { text-align: left; }
.processus-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--rouge);
    color: var(--rouge);
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 10px;
}
.processus-etape strong { display: block; margin-bottom: 6px; font-size: 15px; }
.processus-etape p { color: var(--gris-texte); font-size: 14px; margin: 0; }

/* Page catégorie */
.categorie-hero {
    background: var(--gris-clair);
    padding: 48px 20px;
    margin-bottom: 20px;
}
.categorie-hero-marine {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 40px;
    max-height: 300px;
    box-sizing: border-box;
    overflow: hidden;
    padding: 24px 20px;
    background: linear-gradient(135deg, #521426 0%, #62182c 55%, #711c32 100%);
}
.categorie-hero-marine .categorie-hero-contenu { display: flex; flex-direction: column; justify-content: center; }
.categorie-hero-contenu {
    max-width: 1440px;
    margin: 0 auto;
}
.categorie-hero-marine .categorie-hero-contenu {
    margin: 0;
    flex: 1 1 auto;
}
.categorie-hero h1 {
    font-size: 40px;
    margin: 0 0 12px;
}
.categorie-hero-marine h1 { color: #fff; }
.categorie-hero-contenu > p {
    font-size: 16px;
    color: var(--gris-texte);
    max-width: 560px;
    margin: 0 0 24px;
}
.categorie-hero-marine .categorie-hero-contenu > p { color: var(--border); margin-bottom: 0; }
.categorie-hero-photo {
    flex: 0 0 260px;
    border-radius: 12px;
    overflow: hidden;
}
.categorie-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.categorie-hero-photo .visuel-dessin {
    width: 100%;
    height: 100%;
}
@media (max-width: 800px) {
    .categorie-hero-photo { display: none; }
}

.categorie-corps {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 20px 20px 50px;
    align-items: start;
}

.categorie-sidebar h2 {
    font-size: 16px;
    margin: 0 0 12px;
}
.categorie-liste {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
    border-top: 1px solid var(--bordure);
}
.categorie-liste li { border-bottom: 1px solid var(--bordure); }
.categorie-liste a {
    display: block;
    padding: 10px 12px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 14px;
    border-left: 3px solid transparent;
}
.categorie-liste a:hover { color: var(--rouge); }
.categorie-liste a.actif {
    color: var(--rouge);
    font-weight: 600;
    border-left-color: var(--rouge);
    background: var(--primary-light);
}

.categorie-contact {
    background: var(--primary-light);
    border-radius: 10px;
    padding: 20px;
}
.categorie-contact-icone { font-size: 20px; margin: 0 0 10px; }
.categorie-contact strong { display: block; margin-bottom: 6px; }
.categorie-contact p { color: var(--gris-texte); font-size: 13px; margin: 0 0 16px; }

.categorie-souscategories {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}
.categorie-souscategories a {
    border: 1px solid var(--bordure);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
}
.categorie-souscategories a:hover {
    border-color: var(--rouge);
    color: var(--rouge);
}

.categorie-produits-nombre {
    color: #7a8189;
    font-size: 14px;
    margin: 0 0 16px;
}
.categorie-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
    align-items: stretch;
}
.categorie-apercu-souscategorie {
    margin-bottom: 32px;
}
.categorie-apercu-souscategorie .section-titre-ligne {
    margin-bottom: 16px;
}
.categorie-apercu-souscategorie h2 {
    font-size: 19px;
    margin: 0;
}
.categorie-apercu-souscategorie h2 a {
    color: inherit;
    text-decoration: none;
}
.categorie-apercu-souscategorie h2 a:hover {
    color: var(--rouge);
    text-decoration: underline;
}
/* Aperçu des sous-catégories : une seule ligne qui défile horizontalement, sur mobile et sur PC */
.categorie-apercu-souscategorie .categorie-grille {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    align-items: stretch;
    gap: 16px;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.categorie-apercu-souscategorie .categorie-grille::-webkit-scrollbar { display: none; }
.categorie-apercu-souscategorie .carte-produit {
    flex: 0 0 220px;
    scroll-snap-align: start;
}
/* Titre de carte sur une seule ligne (points de suspension si trop long) */
.categorie-apercu-souscategorie .carte-produit h3 {
    display: block;
    flex: 0 0 auto;
    font-size: 13px;
    margin: 12px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.carte-produit {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: var(--text-primary);
    border: 1px solid var(--bordure);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.carte-produit:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.carte-produit img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.carte-produit .visuel-dessin {
    width: 100%;
    aspect-ratio: 4 / 3;
}
.carte-produit h3 {
    display: flex;
    align-items: center;
    flex: 1;
    font-size: 16px;
    margin: 14px 14px;
}
.carte-produit p {
    font-size: 13px;
    color: var(--gris-texte);
    margin: 0 14px 12px;
}
.carte-produit .lien-voir-plus {
    display: block;
    margin: 0 14px 14px;
}

.categorie-pourquoi { background: var(--gris-clair); max-width: none; padding: 40px 20px; }
.categorie-pourquoi .grille { max-width: 1440px; margin: 0 auto; }

.categorie-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    width: calc(100% - 40px);
    max-width: 1440px;
    margin: 40px auto;
    padding: 32px 36px;
    background: var(--gris-clair);
    border-radius: 15px;
}
@media (max-width: 600px) {
    .categorie-cta { padding: 28px 24px; }
}
.categorie-cta-texte h2 { font-size: 22px; margin: 0 0 6px; }
.categorie-cta-texte p { color: var(--gris-texte); margin: 0; }

@media (max-width: 800px) {
    .categorie-corps { grid-template-columns: 1fr; }
    .categorie-sidebar,
    .categorie-produits { min-width: 0; }

    /* Liste des catégories : cartes en une seule ligne qui défile */
    .categorie-liste {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 10px;
        margin: 0 -20px 30px;
        padding: 0 20px 4px;
        border-top: none;
        scroll-snap-type: x proximity;
        scroll-behavior: smooth;
        scrollbar-width: none;
    }
    .categorie-liste::-webkit-scrollbar { display: none; }
    .categorie-liste li {
        flex: 0 0 auto;
        border-bottom: none;
        scroll-snap-align: start;
    }
    .categorie-liste a {
        white-space: nowrap;
        padding: 10px 16px;
        border: 1px solid var(--bordure);
        border-left: 1px solid var(--bordure);
        border-radius: 999px;
    }
    .categorie-liste a.actif {
        border-color: var(--rouge);
    }

    /* Aperçu des sous-catégories : la ligne défile déjà (règle de base), ici juste le débord plein cadre */
    .categorie-apercu-souscategorie .categorie-grille {
        margin: 0 -20px;
        padding: 0 20px 4px;
    }
    .categorie-apercu-souscategorie .carte-produit {
        flex-basis: 250px;
    }

    .categorie-pourquoi .grille {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0;
        margin: 0 -20px;
        padding: 0;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
    }
    .categorie-pourquoi .grille::-webkit-scrollbar { display: none; }
    .categorie-pourquoi .point {
        flex: 0 0 100%;
        scroll-snap-align: center;
        text-align: center;
        padding: 0 20px;
    }
    .categorie-pourquoi .point-icone {
        margin-left: auto;
        margin-right: auto;
    }

    .pourquoi-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-top: 18px;
    }
    .pourquoi-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--bordure);
        padding: 0;
        border: none;
        outline: none;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.2s, transform 0.2s;
    }
    .pourquoi-dot.actif {
        background: var(--rouge, var(--primary));
        transform: scale(1.3);
    }
}
@media (min-width: 801px) {
    .pourquoi-dots { display: none; }
}

/* En-tête commun */
.site-header {
    border-bottom: 1px solid var(--border);
    background: #fff;
    color: var(--text-primary);
    box-shadow: 0 8px 24px rgba(32, 36, 42, 0.05);
}
.site-header-bandeau {
    background: var(--text-primary);
    color: #f6f1ed;
    font-size: 12px;
}
.site-header-bandeau-interieur {
    width: 100%;
    max-width: 1440px;
    min-height: 38px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.header-promesses,
.header-liens-rapides {
    display: flex;
    align-items: center;
    white-space: nowrap;
}
.header-promesses span,
.header-liens-rapides a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 18px;
    border-right: 1px solid rgba(255,255,255,0.28);
}
.header-promesses svg {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
}
.header-promesses span:first-child { padding-left: 0; }
.header-promesses span:last-child,
.header-liens-rapides a:last-child { border-right: 0; padding-right: 0; }
.header-liens-rapides a { color: #fff; text-decoration: none; }
.header-liens-rapides a:hover { color: var(--accent); }

.site-header-top {
    display: grid;
    grid-template-columns: 250px minmax(280px, 1fr) auto;
    align-items: center;
    gap: 32px;
    padding: 25px 20px;
    max-width: 1440px;
    margin: 0 auto;
}
.logo {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.logo i { color: var(--primary); font-style: normal; }
.logo-image {
    display: block;
    height: 26px;
    width: auto;
}
.logo-image-footer { height: 24px; }
.logo-tagline {
    margin-top: 10px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--text-secondary);
}
.header-recherche {
    height: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    background: #f6f1ed;
    border: 1px solid var(--border);
    border-radius: 999px;
}
.header-recherche svg {
    width: 20px;
    fill: none;
    stroke: var(--text-primary);
    stroke-width: 2;
}
.header-recherche input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
}
.header-recherche input::placeholder { color: var(--text-secondary); }
.site-header-infos {
    display: flex;
    align-items: center;
    gap: 28px;
}
.header-info {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--text-primary);
    text-decoration: none;
}
.header-info-icone {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #f6f1ed;
    color: var(--text-primary);
}
.header-info-icone svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}
.header-info strong,
.header-info small { display: block; white-space: nowrap; }
.header-info strong { font-size: 14px; }
.header-info small { margin-top: 2px; color: var(--text-secondary); font-size: 11px; }

.site-header-nav-ligne {
    display: flex;
    align-items: stretch;
    gap: 24px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 14px 20px;
    border-top: 1px solid #f6f1ed;
    position: sticky;
    top: 0;
    z-index: 300;
    background: #fff;
}
.site-header-nav {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: clamp(10px, 1.5vw, 24px);
    min-width: 0;
    flex: 1;
    font-size: clamp(10px, 0.85vw, 13px);
    flex-wrap: nowrap;
    position: static;
}
.menu-item {
    position: static;
    flex: 0 1 auto;
    align-self: stretch;
}
.menu-item > a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.25;
    height: 100%;
}
.menu-item > a:hover { color: var(--rouge); }
.nav-categorie-icone {
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
}
.nav-categorie-icone svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.nav-chevron { font-size: 14px; }
.header-devis {
    flex: 0 0 auto;
    align-self: center;
    padding: 13px 23px;
    font-size: 13px;
}
.header-devis span { margin-left: 5px; }

/* Méga-menu : sous-catégories + produits au survol d'une catégorie */
.mega-menu {
    display: none;
    position: absolute;
    left: 20px;
    right: 20px;
    top: 100%;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 0 0 16px 16px;
    box-shadow: 0 24px 60px rgba(32, 36, 42, 0.2);
    padding: 28px 30px 24px;
    z-index: 200;
    color: var(--text-primary);
}
.mega-menu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -16px;
    height: 16px;
}
.menu-item:hover .mega-menu,
.menu-item:focus-within .mega-menu {
    display: block;
}
.mega-menu-entete {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.8fr);
    align-items: end;
    gap: 40px;
    margin-bottom: 26px;
}
.mega-menu-label {
    display: block;
    margin-bottom: 5px;
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.mega-menu-entete h2 {
    position: relative;
    margin: 0;
    padding-bottom: 13px;
    font-size: clamp(23px, 2vw, 32px);
    line-height: 1.1;
}
.mega-menu-entete h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 42px;
    height: 4px;
    border-radius: 4px;
    background: var(--primary);
}
.mega-menu-entete p {
    margin: 0;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.55;
}
.mega-menu-corps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    max-height: min(620px, calc(100vh - 250px));
    overflow-y: auto;
    overscroll-behavior: contain;
}
.mega-menu-colonnes {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px 0;
    align-content: start;
    background-image: repeating-linear-gradient(to right, var(--border) 0, var(--border) 1px, transparent 1px, transparent 20%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.mega-menu-colonne {
    min-width: 0;
    padding: 0 18px;
}
.mega-menu-titre {
    width: 100%;
    box-sizing: border-box;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    font-weight: 800 !important;
    font-size: 13px !important;
    color: var(--text-primary) !important;
    text-decoration: none;
    margin-bottom: 7px;
    line-height: 1.25;
}
.mega-menu-titre:hover { color: var(--rouge) !important; }
.mega-menu-icone {
    display: none;
    width: 38px;
    height: 38px;
    padding: 7px;
    place-items: center;
    border-radius: 10px;
    background: #f6f1ed;
}
.mega-menu-icone svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.mega-menu-colonne ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mega-menu-colonne li { margin: 3px 0; }
.mega-menu-colonne a {
    color: var(--text-primary);
    text-decoration: none;
    font-size: 12px;
    font-weight: 400;
}
.mega-menu-colonne a:hover { color: var(--rouge); }
.mega-menu-voir-plus {
    display: block;
    margin-top: 8px;
    color: var(--rouge) !important;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}
.mega-menu-voir-plus:hover { text-decoration: underline; }
.mega-menu-visuel {
    display: none;
    margin-top: 14px;
    overflow: hidden;
    border-radius: 9px;
    background: #f6f1ed;
}
.mega-menu-visuel img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 8;
    object-fit: cover;
}
.mega-menu-visuel span {
    display: block;
    padding: 9px 10px;
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 700;
}
.mega-menu-aside {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.mega-menu-offre {
    padding: 20px;
    border-radius: 11px;
    background: linear-gradient(145deg, var(--primary-light), var(--primary-light));
    border: 1px solid var(--primary-light);
}
.mega-menu-offre > span {
    color: var(--primary);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
}
.mega-menu-offre h3 { margin: 6px 0 10px; font-size: 19px; line-height: 1.15; }
.mega-menu-offre p { margin: 0 0 12px; color: var(--text-primary); font-size: 11px; line-height: 1.45; }
.mega-menu-offre ul { margin: 0 0 15px; padding: 0; list-style: none; }
.mega-menu-offre li { margin: 5px 0; font-size: 11px; }
.mega-menu-offre li::first-letter { color: var(--primary); }
.mega-menu-offre .cta { width: 100%; padding: 11px 12px; text-align: center; font-size: 11px; }
.mega-menu-raccourci {
    min-height: 60px;
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    border-radius: 9px;
    background: #f6f1ed;
    color: var(--text-primary);
    text-decoration: none;
}
.mega-menu-raccourci > span { font-size: 22px; }
.mega-menu-raccourci strong { font-size: 11px; line-height: 1.35; }
.mega-menu-raccourci small { color: var(--text-secondary); font-size: 10px; font-weight: 500; }
.mega-menu-raccourci b { color: var(--primary); font-size: 17px; }
.mega-menu-raccourci:hover { background: #f6f1ed; }

/* En-tête mobile : burger, recherche pleine largeur, menu en accordéon */
.header-burger,
.nav-sous-toggle,
.menu-mobile-liens { display: none; }

@media (max-width: 1100px) {
    .site-header-bandeau { display: none; }

    .site-header-top {
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas: "logo tel burger" "recherche recherche recherche";
        gap: 12px 10px;
        padding: 12px 16px;
    }
    .logo { grid-area: logo; }
    .logo-image { height: 22px; }
    .logo-tagline { margin-top: 8px; font-size: 8px; letter-spacing: 2.4px; }
    .site-header-infos { grid-area: tel; gap: 0; }
    .site-header-infos .header-info:not(:first-child),
    .site-header-infos .header-info > span:last-child { display: none; }
    .header-recherche { grid-area: recherche; height: 44px; padding: 0 16px; min-width: 0; }
    .header-recherche input { font-size: 16px; min-width: 0; }

    .header-burger {
        grid-area: burger;
        width: 44px;
        height: 44px;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        border: 1px solid var(--border);
        border-radius: 50%;
        background: #f6f1ed;
        cursor: pointer;
    }
    .header-burger span {
        width: 18px;
        height: 2px;
        border-radius: 2px;
        background: var(--text-primary);
        transition: transform .2s, opacity .2s;
    }
    .menu-ouvert .header-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .menu-ouvert .header-burger span:nth-child(2) { opacity: 0; }
    .menu-ouvert .header-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .site-header-nav-ligne {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        position: static;
    }
    .menu-ouvert .site-header-nav-ligne { display: flex; }

    .site-header-nav {
        flex: none;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
        font-size: 15px;
    }
    .menu-item {
        position: static;
        align-self: auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 52px;
        border-bottom: 1px solid #f6f1ed;
    }
    .menu-item > a { height: auto; min-height: 52px; padding: 10px 16px; }
    .nav-categorie-icone { width: 26px; height: 26px; flex-basis: 26px; }
    .nav-chevron { display: none; }

    .nav-sous-toggle {
        display: grid;
        place-items: center;
        border: 0;
        border-left: 1px solid #f6f1ed;
        background: transparent;
        cursor: pointer;
    }
    .nav-sous-toggle span {
        width: 9px;
        height: 9px;
        border-right: 2px solid var(--text-primary);
        border-bottom: 2px solid var(--text-primary);
        transform: translateY(-2px) rotate(45deg);
        transition: transform .2s;
    }
    .menu-item.ouvert .nav-sous-toggle span { transform: translateY(2px) rotate(-135deg); }

    /* Le méga-menu devient une liste de sous-catégories dépliable */
    .site-header .menu-item .mega-menu { display: none !important; }
    .site-header .menu-item.ouvert .mega-menu { display: block !important; }
    .mega-menu {
        position: static;
        grid-column: 1 / -1;
        padding: 4px 16px 12px 24px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: #f6f1ed;
    }
    .mega-menu::before { display: none; }
    .mega-menu-corps { max-height: none; overflow: visible; }
    .mega-menu-colonnes {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        background-image: none;
    }
    .mega-menu-colonne { padding: 0; }
    .mega-menu-titre {
        min-height: 44px;
        margin: 0;
        align-content: center;
        justify-items: start;
        text-align: left;
        font-size: 14px !important;
        font-weight: 700 !important;
    }
    .mega-menu-colonne ul,
    .mega-menu-voir-plus,
    .mega-menu-visuel,
    .mega-menu-aside { display: none; }

    .header-devis {
        align-self: stretch;
        margin: 14px 16px 6px;
        text-align: center;
    }
    .menu-mobile-liens {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 20px;
        padding: 8px 16px 16px;
    }
    .menu-mobile-liens a {
        min-height: 40px;
        display: flex;
        align-items: center;
        color: var(--text-primary);
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
    }
}

@media (max-width: 380px) {
    .logo-image { height: 19px; }
}

/* Page contact */
.contact-hero {
    background: linear-gradient(135deg, #521426 0%, #62182c 55%, #711c32 100%);
    padding: 56px 20px;
    margin-bottom: 20px;
}
.contact-hero-contenu {
    max-width: 1440px;
    margin: 0 auto;
}
.contact-hero-contenu h1 {
    color: #fff;
    font-size: 42px;
    margin: 0 0 6px;
}
.contact-hero-souslitre {
    color: #fff;
    font-size: 19px;
    font-weight: 600;
    margin: 0 0 14px;
}
.contact-hero-contenu > p {
    color: #d9d0d3;
    font-size: 15px;
    max-width: 620px;
    margin: 0 0 26px;
}
.contact-hero .cta-tel-clair {
    border-color: rgba(255,255,255,0.4);
    color: #fff;
}
.contact-hero .cta-tel-clair:hover { border-color: #fff; }

.contact-corps {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 48px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 40px 20px;
    align-items: start;
}
.contact-formulaire h2 { margin: 0 0 4px; font-size: 24px; }
.contact-message {
    margin: 16px 0 0;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
}
.contact-message-succes { background: #e6f4ea; color: #1e7e34; }
.contact-message-erreur { background: var(--primary-light); color: var(--primary); }

.formulaire { margin-top: 20px; }
.formulaire-ligne {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}
.formulaire label,
.formulaire-message {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.formulaire-message { margin-bottom: 18px; }
.formulaire-source { margin-bottom: 18px; }
.formulaire input,
.formulaire select,
.formulaire textarea {
    font: inherit;
    font-weight: 400;
    padding: 11px 14px;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    background: #fff;
    color: var(--text-primary);
}
.formulaire textarea { resize: vertical; min-height: 110px; }
.formulaire-fichier {
    flex-direction: row !important;
    align-items: center;
    gap: 14px;
    border: 1px dashed var(--bordure);
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 20px;
    cursor: pointer;
}
.formulaire-fichier input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.formulaire-fichier-icone {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--gris-clair);
    font-size: 16px;
    color: var(--text-secondary);
}
.formulaire-fichier strong { display: block; font-size: 13px; font-weight: 600; }
.formulaire-fichier small { display: block; color: #7a8189; font-size: 12px; margin-top: 2px; font-weight: 400; }
.formulaire-envoyer {
    display: block;
    width: 100%;
    text-align: center;
    border: none;
    cursor: pointer;
    font-size: 15px;
}

.contact-infos {
    display: flex;
    flex-direction: column;
    gap: 20px;
    border: 1px solid var(--bordure);
    border-radius: 12px;
    padding: 26px;
}
.contact-info {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--bordure);
}
.contact-info:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-info-icone {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--gris-clair);
    color: var(--rouge);
}
.contact-info-icone svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.contact-info strong { display: block; margin-bottom: 4px; font-size: 14px; }
.contact-info p { margin: 0 0 4px; font-size: 13.5px; color: var(--gris-texte); }
.contact-info p a { color: var(--text-primary); text-decoration: none; }
.contact-info p a:hover { color: var(--rouge); }
.contact-info small { color: #7a8189; font-size: 12px; }

.contact-trust { background: var(--gris-clair); max-width: none; padding: 40px 20px; }
.contact-trust .grille { max-width: 1440px; margin: 0 auto; }

.contact-pourquoi {
    max-width: 1440px;
    margin: 0 auto;
    padding: 50px 20px 20px;
}
.contact-pourquoi-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 22px;
    margin-top: 24px;
}
.contact-pourquoi-carte {
    border: 1px solid var(--bordure);
    border-radius: 12px;
    padding: 22px;
}
.contact-pourquoi-icone {
    display: block;
    width: 32px;
    height: 32px;
    margin-bottom: 14px;
    color: var(--rouge);
}
.contact-pourquoi-icone svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contact-pourquoi-carte strong { display: block; margin-bottom: 6px; font-size: 15px; }
.contact-pourquoi-carte p { margin: 0; font-size: 13.5px; color: var(--gris-texte); }

.contact-zone {
    max-width: 1440px;
    margin: 0 auto;
    padding: 20px 20px 50px;
}
.contact-zone-carte {
    margin-top: 24px;
    height: 360px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--bordure);
}

.contact-faq {
    max-width: 1440px;
    margin: 0 auto;
    padding: 20px 20px 60px;
}
.contact-faq .sous-titre { margin-bottom: 20px; }

@media (max-width: 800px) {
    .contact-corps { grid-template-columns: 1fr; }
    .formulaire-ligne { grid-template-columns: 1fr; }
}

/* Page réalisations */
.realisations-section {
    max-width: 1440px;
    margin: 0 auto;
    padding: 40px 20px;
}
.realisations-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}
.realisations-grille .galerie-legende small {
    display: block;
    font-weight: 500;
    text-transform: none;
    font-size: 11px;
    margin-top: 4px;
    opacity: 0.9;
}
.devis-seul {
    max-width: 1440px;
    margin: 0 auto;
    padding: 20px 20px 60px;
}

/* Pages légales */
.page-legale {
    max-width: 820px;
    margin: 0 auto;
    padding: 20px 20px 70px;
}
.page-legale h1 { font-size: 32px; margin: 0 0 24px; }
.page-legale h2 { font-size: 19px; margin: 32px 0 10px; }
.page-legale p { color: var(--gris-texte); line-height: 1.7; margin: 0 0 6px; }
.page-legale a { color: var(--rouge); }

/* Pages zones d'intervention */
.contact-pourquoi-carte-lien {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.contact-pourquoi-carte-lien:hover {
    border-color: var(--rouge);
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.zone-contenu p { font-size: 15px; }
.zone-autres { padding-top: 0; padding-bottom: 40px; }
.zone-autres h2 { font-size: 19px; }
.zone-autres a { font-weight: 600; }

/* Pages profils clients (audience.php) */
.audience-probleme {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 44px;
    align-items: center;
    max-width: 1440px;
    margin: 0 auto;
    padding: 50px 20px;
}
.audience-probleme-sans-image { grid-template-columns: 1fr; max-width: 900px; }
.categorie-grille-fluide { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.audience-probleme-image {
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden;
    background: var(--gris-clair);
}
.audience-probleme-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.audience-probleme-contenu h2 { font-size: 26px; margin: 0 0 12px; }
.audience-probleme-contenu > p { color: var(--gris-texte); font-size: 15px; margin: 0 0 26px; }
.audience-benefices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px 16px;
}
.audience-benefice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 600;
    font-size: 13.5px;
    padding-left: 16px;
    border-left: 1px solid var(--bordure);
}
.audience-benefice:first-child { padding-left: 0; border-left: none; }
.audience-benefice-icone {
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    color: var(--rouge);
}
.audience-benefice-icone svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.audience-packs {
    max-width: 1440px;
    margin: 0 auto;
    padding: 20px 20px 50px;
}
.audience-packs h2 { font-size: 24px; margin: 0 0 6px; }
.audience-packs .sous-titre { margin-top: 0; margin-bottom: 24px; }
.audience-packs-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}
.audience-pack {
    border: 1px solid var(--bordure);
    border-radius: 14px;
    padding: 24px;
}
.audience-pack strong { display: block; font-size: 17px; margin-bottom: 14px; }
.audience-pack ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.audience-pack ul li { font-size: 14px; color: var(--gris-texte); }

.audience-pack-avec-image {
    display: flex;
    align-items: stretch;
    padding: 0;
    overflow: hidden;
}
.audience-pack-avec-image .audience-pack-contenu {
    flex: 1 1 auto;
    min-width: 0;
    padding: 24px;
}
.audience-pack-image {
    flex: 0 0 40%;
    position: relative;
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0% 100%);
    margin-left: -1px;
}
.audience-pack-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 700px) {
    .audience-pack-avec-image { flex-direction: column; }
    .audience-pack-image {
        flex: 0 0 140px;
        width: 100%;
        clip-path: polygon(0 22%, 100% 0, 100% 100%, 0 100%);
        margin-left: 0;
    }
}

.audience-process { max-width: 1440px; margin: 0 auto; padding: 20px 20px 50px; }
.audience-process h2 { font-size: 24px; margin: 0 0 6px; }
.audience-process .sous-titre { margin-top: 0; margin-bottom: 28px; }

@media (max-width: 800px) {
    .audience-probleme { grid-template-columns: 1fr; }
    .audience-probleme-image { order: -1; }
}

.audience-hero {
    background: linear-gradient(135deg, #521426 0%, #62182c 55%, #711c32 100%);
    padding: 56px 20px;
    margin-bottom: 20px;
}
.audience-hero-avec-image {
    background-size: cover;
    background-position: center;
    position: relative;
}
.audience-hero-avec-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(32, 36, 42, 0.55);
}
.audience-hero-contenu {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
}
.audience-hero-contenu h1 {
    color: #fff;
    font-size: 42px;
    line-height: 1.15;
    margin: 0 0 14px;
}
.audience-hero-contenu h1 span { color: var(--accent); }
.audience-hero-souslitre {
    color: var(--border);
    font-size: 16px;
    max-width: 620px;
    margin: 0 0 26px;
}
.cta-blanc {
    background: #fff;
    color: var(--text-primary);
    border: 1px solid #fff;
}
.cta-blanc:hover { background: #f4eeea; }

.audience-zones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 40px;
    max-width: 1440px;
    margin: 30px auto;
    padding: 20px 28px;
    background: #f6f1ed;
    border-radius: 12px;
}
.audience-zones-texte {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1 1 320px;
}
.audience-zones-icone {
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin-top: 2px;
    color: var(--rouge);
}
.audience-zones-icone svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.audience-zones-texte strong {
    display: block;
    color: var(--text-primary);
    font-size: 14.5px;
    margin-bottom: 2px;
}
.audience-zones-texte p {
    margin: 0;
    color: var(--text-primary);
    font-size: 13px;
}
.audience-zones-liste {
    flex: 1 1 420px;
    text-align: right;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.9;
}
.audience-zones-liste a {
    color: var(--text-primary);
    text-decoration: none;
}
.audience-zones-liste a:hover { color: var(--rouge); }
.audience-zones-liste span { color: #a9afb5; }

@media (max-width: 800px) {
    .audience-zones { flex-direction: column; align-items: flex-start; }
    .audience-zones-liste { text-align: left; }
}
.champ-piege { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.page-formulaire, .page-recherche { width: min(1100px, calc(100% - 40px)); margin: 48px auto 80px; }
.formulaire-intro { max-width: 720px; margin-bottom: 32px; }
.formulaire-conteneur { max-width: 850px; }
.message-succes, .message-erreur { padding: 14px 18px; border-radius: 8px; }
.message-succes { background: #e9f7ef; color: #17663a; }
.message-erreur { background: var(--primary-light); color: var(--primary-hover); }
.recherche-page { max-width: 700px; margin: 24px 0 48px; }
.recherche-page > div { display: flex; gap: 10px; margin-top: 8px; }
.recherche-page input { flex: 1; min-width: 0; padding: 13px 15px; border: 1px solid #cfc6c9; border-radius: 6px; }
.resultats-recherche { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin: 18px 0 42px; }
.resultat-recherche { display: flex; gap: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 8px; text-decoration: none; color: inherit; }
.resultat-recherche img { width: 90px; height: 75px; object-fit: cover; border-radius: 5px; }
.resultat-recherche span { display: grid; gap: 5px; }
.resultat-recherche small { color: var(--text-secondary); }
@media (max-width: 600px) { .recherche-page > div { flex-direction: column; } }

/* Mobile : rectifications communes à toutes les pages */
@media (max-width: 900px) {
    .arguments {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 16px;
    }
}
@media (max-width: 600px) {
    .arguments { grid-template-columns: minmax(0, 1fr); }
    .accueil-zone-carte { padding: 20px; }
    .contact-hero { padding: 40px 16px; }
    .contact-hero-contenu h1 { font-size: 32px; }
    h1, h2, h3 { overflow-wrap: break-word; }
    .cta { white-space: normal; text-align: center; }
    input, select, textarea { font-size: 16px; } /* évite le zoom automatique d'iOS au focus */
    .site-footer-haut { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .site-footer-marque .logo { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
    .site-footer-marque .logo-tagline { flex-basis: 100%; }
    .site-footer-liens a { display: block; padding: 6px 0; }
    form button[type="submit"], form .cta { margin-top: 12px; }
}

/* Page 404 */
.page-404 { max-width: 720px; }
.page-404-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.page-404 .cta-secondaire { background: #fff; color: var(--text-primary); border: 1px solid var(--bordure); }

/* Formulaires : confort mobile */
@media (max-width: 640px) {
    .formulaire-ligne { grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }
    .formulaire input, .formulaire select, .formulaire textarea { min-height: 46px; font-size: 16px; }
    .formulaire label + label, .formulaire label { gap: 6px; }
    .devis-grille input, .devis-grille textarea { min-height: 46px; font-size: 16px; }
    .devis-fichier, .formulaire-fichier { padding: 14px; }
    .page-formulaire { margin: 28px auto 56px; }
    .formulaire-intro { margin-bottom: 20px; }
}
.sur-titre { display: block; color: var(--rouge); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 8px; }

.prix-indicatif { font-size: 20px; font-weight: 700; color: var(--rouge); margin: 0 0 10px; }
.prix-indicatif small { display: block; font-size: 12px; font-weight: 400; color: #7a8189; }

/* Mobile : on masque l'encart « Un projet spécifique ? » des pages catégorie et recherche */
@media (max-width: 800px) {
    .categorie-contact { display: none; }
}

/* Mobile : espaces réduits entre les catégories et les rangées de produits */
@media (max-width: 800px) {
    .categorie-corps { row-gap: 0; padding-bottom: 30px; }
    .categorie-liste { margin-bottom: 8px; scroll-padding-left: 20px; }
    .categorie-apercu-souscategorie .categorie-grille { scroll-padding-left: 20px; }
    .categorie-apercu-souscategorie { padding: 16px 0 0; margin-bottom: 8px; }
    .categorie-apercu-souscategorie .section-titre-ligne { margin-bottom: 12px; }
}

/* Rangées de sous-catégories : titre, description, bouton, puis cartes (image, nom, prix, lien) */
.categorie-apercu-souscategorie .apercu-description { color: var(--gris-texte); font-size: 15px; line-height: 1.5; margin: 0 0 14px; max-width: 720px; }
.categorie-apercu-souscategorie .apercu-cta { display: block; text-align: center; margin: 0 0 18px; max-width: 420px; }
.categorie-apercu-souscategorie .carte-produit { flex: 0 0 280px; border-radius: 10px; box-shadow: 0 1px 6px rgba(0,0,0,0.08); }
.categorie-apercu-souscategorie .carte-produit-corps { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.categorie-apercu-souscategorie .carte-produit h3 { display: block; flex: 0 0 auto; margin: 0; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.categorie-apercu-souscategorie .carte-produit-prix { margin: 0; font-size: 14px; color: var(--text-primary); }
.categorie-apercu-souscategorie .carte-produit-lien { margin-top: auto; padding-top: 6px; font-weight: 700; font-size: 15px; color: var(--rouge); }
.categorie-apercu-souscategorie .carte-produit:hover .carte-produit-lien { text-decoration: underline; }
@media (max-width: 800px) {
    .categorie-apercu-souscategorie .carte-produit { flex-basis: 285px; }
    .categorie-apercu-souscategorie .apercu-cta { max-width: none; }
}

/* Réalisations liées (fiches produit et pages métier) */
.realisations-liees { max-width: 1440px; margin: 0 auto; padding: 40px 20px; }
.realisations-liees .section-titre-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.realisations-liees h2 { margin: 0; }
.realisations-liees .sous-titre { margin: 6px 0 18px; }
.realisations-liees-piste { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 4px; }
.realisations-liees-piste::-webkit-scrollbar { display: none; }
.realisations-liees-piste .galerie-item { flex: 0 0 260px; scroll-snap-align: start; }
@media (max-width: 800px) {
    .realisations-liees { padding: 28px 20px; }
    .realisations-liees-piste { margin: 0 -20px; padding: 0 20px 4px; scroll-padding-left: 20px; }
    .realisations-liees-piste .galerie-item { flex-basis: 220px; }
}

/* Mobile : espace de fin des rangées qui défilent.
   Safari ignore le padding droit d'un conteneur qui défile : un pseudo-élément le remplace. */
@media (max-width: 800px) {
    .categorie-liste,
    .categorie-apercu-souscategorie .categorie-grille,
    .categorie-pourquoi .grille,
    .realisations-liees-piste { padding-right: 0; }
    .categorie-liste::after,
    .categorie-apercu-souscategorie .categorie-grille::after,
    .realisations-liees-piste::after { content: ''; flex: 0 0 1px; }
    .categorie-liste::after { margin-left: 9px; }
    .categorie-apercu-souscategorie .categorie-grille::after,
    .realisations-liees-piste::after { margin-left: 3px; }
}

/* Mobile : laisser entrevoir la carte suivante pour signaler le défilement. */
@media (max-width: 800px) {
    .categorie-liste,
    .categorie-apercu-souscategorie .categorie-grille,
    .realisations-liees-piste {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        scroll-padding-left: 0;
    }
    .categorie-liste::after,
    .categorie-apercu-souscategorie .categorie-grille::after,
    .realisations-liees-piste::after { display: none; }

    .categorie-apercu-souscategorie .categorie-grille,
    .realisations-liees-piste,
    .carrousel-piste { scroll-snap-type: x mandatory; }

    .categorie-apercu-souscategorie .categorie-grille > .carte-produit,
    .realisations-liees-piste > .galerie-item,
    .carrousel-piste > * {
        flex: 0 0 84%;
        width: 84%;
        max-width: none;
        scroll-snap-align: start;
    }
}
@media (max-width: 800px) {
    .accueil-realisations .carrousel-piste > .galerie-item { flex: 0 0 84%; }
    .carrousel-piste > .carte-prestation { aspect-ratio: auto; padding: 18px 16px 16px; }
    .carte-prestation img { flex: 0 0 auto; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; }
    .carte-prestation h3 { margin: 16px 0 4px; order: 2; }
}

/* Grand écran : bandeaux et rangées alignés sur le contenu de l'en-tête (1440 px max, marges de 20 px) */
.categorie-hero-marine {
    padding-left: max(20px, calc((100% - 1440px) / 2 + 20px));
    padding-right: max(20px, calc((100% - 1440px) / 2 + 20px));
}
/* La colonne produits ne doit pas s'élargir à la taille de ses rangées qui défilent */
.categorie-sidebar,
.categorie-produits { min-width: 0; }
.categorie-apercu-souscategorie { padding-left: 0; padding-right: 0; }
/* Accueil « Des solutions » : même largeur que l'en-tête (le titre sortait à gauche) */
section.accueil-besoins > * { max-width: 1400px; margin-left: auto; margin-right: auto; }

/* Accueil : les cartes des 3 carrousels (prestations, solutions, réalisations) ont toutes le même format */
:root { --accueil-carte-l: 240px; --accueil-carte-h: 340px; }
.accueil-prestations-grille > .carte-prestation,
.accueil-besoins-grille > .besoin,
.accueil-realisations .accueil-realisations-grille > .galerie-item {
    flex: 0 0 var(--accueil-carte-l);
    width: var(--accueil-carte-l);
    height: var(--accueil-carte-h);
    aspect-ratio: auto;
    box-sizing: border-box;
}
.accueil-besoins-grille > .besoin { padding: 24px; overflow: hidden; }
.accueil-besoins-grille > .besoin .besoin-cta { margin-top: auto; padding-top: 12px; }
.accueil-realisations-grille > .galerie-item img { height: 100%; aspect-ratio: auto; }
.accueil-prestations-grille > .carte-prestation img { flex: 1 1 0; min-height: 0; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
.accueil-prestations-grille > .carte-prestation h3 { order: 0; margin: 0 0 16px; }
@media (max-width: 800px) {
    :root { --accueil-carte-l: 84%; --accueil-carte-h: 360px; }
    .accueil-prestations-grille > .carte-prestation h3 { order: 2; margin: 16px 0 0; }
}
.accueil-prestations-grille > .carte-prestation { justify-content: space-between; }
.accueil-prestations-grille > .carte-prestation img { object-position: center; }
.accueil-prestations-grille > .carte-prestation h3 { min-height: 44px; display: flex; align-items: center; justify-content: center; }

/* Page « Par métier » */
.page-solutions { max-width: 1440px; margin: 0 auto; padding: 20px 20px 60px; }
.page-solutions-intro { max-width: 760px; margin-bottom: 28px; }
.page-solutions-intro h1 { margin: 0 0 10px; }
.page-solutions-intro p { color: var(--gris-texte); margin: 0; }
.page-solutions-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.page-solutions-zones { margin-top: 48px; }
.page-solutions-zones p { color: var(--gris-texte); }
.page-solutions-zones ul { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.page-solutions-zones a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border: 1px solid var(--bordure); border-radius: 999px; color: var(--text-primary); text-decoration: none; font-weight: 600; font-size: 14px; }
.page-solutions-zones a:hover { border-color: var(--rouge); color: var(--rouge); }
.page-solutions-zones svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.page-solutions-cta { margin-top: 40px; }

/* En-tête : menu « Vous êtes… » (bandeau du haut, ordinateur) */
.bandeau-metiers { position: relative; display: flex; align-items: stretch; align-self: stretch; }
.header-liens-rapides .bandeau-metiers-lien { font-weight: 700; }
.bandeau-metiers-menu {
    display: none; position: absolute; top: 100%; right: 0; z-index: 300;
    min-width: 270px; padding: 10px; background: #fff; border-radius: 0 0 12px 12px;
    box-shadow: 0 18px 40px rgba(32, 36, 42, 0.22);
}
.bandeau-metiers:hover .bandeau-metiers-menu,
.bandeau-metiers:focus-within .bandeau-metiers-menu { display: block; }
.header-liens-rapides .bandeau-metiers-menu a {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0;
    border-radius: 8px; color: var(--text-primary); font-size: 14px; font-weight: 600;
}
.header-liens-rapides .bandeau-metiers-menu a:hover { background: var(--primary-light); color: var(--rouge); }
.header-liens-rapides .bandeau-metiers-menu .bandeau-metiers-tous { color: var(--rouge); font-weight: 700; }
.bandeau-metiers-icone { display: inline-flex; width: 28px; height: 28px; flex: 0 0 28px; align-items: center; justify-content: center; border-radius: 8px; background: var(--primary-light); color: var(--rouge); }
.bandeau-metiers-icone svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Menu mobile : métiers et bouton d'appel */
.menu-mobile-metiers, .menu-mobile-appel { display: none; }
@media (max-width: 1100px) {
    .menu-mobile-metiers { display: block; padding: 14px 16px 4px; border-top: 1px solid var(--border); }
    .menu-mobile-metiers strong { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-secondary); margin-bottom: 8px; }
    .menu-mobile-metiers > div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .menu-mobile-metiers a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 8px; border-radius: 10px; background: #f6f1ed; color: var(--text-primary); font-size: 13px; font-weight: 600; text-decoration: none; line-height: 1.2; }
    .menu-mobile-liens { border-top: 1px solid var(--border); margin-top: 10px; }
    .menu-mobile-appel { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 16px 18px; min-height: 48px; border: 2px solid var(--text-primary); border-radius: 999px; color: var(--text-primary); font-weight: 700; text-decoration: none; }
    .menu-mobile-appel svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
}
/* Le menu « Vous êtes… » passe au-dessus de la barre de catégories (sticky, z-index 300) */
.site-header-bandeau { position: relative; z-index: 400; }
/* Ordinateur : 8 catégories dans la barre sans texte écrasé */
@media (min-width: 1101px) {
    .site-header-nav { gap: 6px; }
    .site-header-nav-ligne { gap: 14px; }
    .menu-item > a { gap: 5px; }
    .nav-categorie-icone { width: 20px; height: 20px; flex-basis: 20px; }
    .nav-chevron { display: none; }
    .header-devis { padding: 12px 18px; }
}

/* Bouton devis : dans l'en-tête à droite du téléphone sur ordinateur, dans le menu sur mobile */
.header-devis-mobile { display: none; }
.header-devis-haut { align-self: center; white-space: nowrap; }
@media (max-width: 1100px) {
    .header-devis-haut { display: none; }
    .header-devis-mobile { display: block; }
}

/* Fiche produit : « Idéal pour » et « Dans la même gamme » */
.produit-ideal-pour, .produit-gamme { max-width: 1440px; margin: 0 auto; padding: 30px 20px; }
.produit-ideal-pour h2, .produit-gamme h2 { margin: 0 0 14px; }
.produit-ideal-pour-liens { display: flex; flex-wrap: wrap; gap: 10px; }
.produit-ideal-pour-liens a { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border: 1px solid var(--bordure); border-radius: 999px; color: var(--text-primary); font-weight: 600; text-decoration: none; }
.produit-ideal-pour-liens a:hover { border-color: var(--rouge); color: var(--rouge); }
.produit-gamme.categorie-apercu-souscategorie { padding-left: 20px; padding-right: 20px; }

/* Pied de page : colonnes Prestations et Métiers */
.site-footer-haut { grid-template-columns: 1.1fr 1fr 1fr 1fr 1.2fr auto; }
.site-footer-colonne { display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.site-footer-colonne strong { font-size: 14px; margin-bottom: 4px; color: #fff; }
.site-footer-colonne a { color: rgba(255,255,255,0.78); text-decoration: none; }
.site-footer-colonne a:hover { color: var(--accent); }
@media (max-width: 1100px) { .site-footer-haut { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 700px) {
    .site-footer-haut { grid-template-columns: 1fr 1fr; }
    .site-footer-marque, .site-footer-contact, .site-footer-zones, .site-footer-liens { grid-column: 1 / -1; }
    .site-footer-colonne a { padding: 5px 0; }
}
@media (min-width: 1101px) {
    .site-footer-haut { grid-template-columns: 1.4fr 1fr 1fr 1.3fr auto; row-gap: 18px; }
    .site-footer-marque { grid-column: 1; grid-row: 1; }
    .site-footer-contact { grid-column: 1; grid-row: 2; }
    .site-footer-colonne, .site-footer-zones, .site-footer-liens { grid-row: 1 / span 2; }
}

/* Page métier : rangée de produits qui défile, alignée sur le contenu */
.audience-solutions.categorie-apercu-souscategorie { max-width: 1440px; margin: 0 auto; padding: 40px 20px; }

/* Encart marées (page Tourisme & nautisme) */
.encart-marees { max-width: 1400px; margin: 10px auto 30px; padding: 24px; border-radius: 16px; background: linear-gradient(135deg, #f6f1ed 0%, var(--border) 100%); color: var(--text-primary); }
@media (min-width: 1441px) { .encart-marees { margin-left: auto; margin-right: auto; } }
@media (max-width: 1440px) { .encart-marees { margin-left: 20px; margin-right: 20px; } }
.encart-marees-entete h2 { margin: 0 0 4px; font-size: 20px; }
.encart-marees-entete p { margin: 0 0 16px; color: var(--text-secondary); font-size: 14px; }
.encart-marees-jours { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.encart-marees-jour { background: #fff; border-radius: 12px; padding: 14px 16px; }
.encart-marees-jour strong { display: block; margin-bottom: 8px; }
.encart-marees-jour ul { list-style: none; margin: 0; padding: 0; }
.encart-marees-jour li { display: grid; grid-template-columns: 38px 60px 1fr auto; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid #f6f1ed; font-size: 14px; }
.encart-marees-jour li:first-child { border-top: 0; }
.maree-type { font-weight: 700; font-size: 12px; text-align: center; border-radius: 6px; padding: 2px 0; }
.maree-pm .maree-type { background: var(--border); color: var(--text-secondary); }
.maree-bm .maree-type { background: #f6f1ed; color: var(--text-primary); }
.maree-heure { font-weight: 700; }
.maree-hauteur { color: var(--text-secondary); }
.maree-coef { font-weight: 600; color: var(--rouge); }
.encart-marees-lien { margin: 16px 0 0; font-size: 14px; }
.encart-marees-lien a { color: var(--rouge); font-weight: 600; }
.encart-marees-source { margin: 8px 0 0; font-size: 11px; color: var(--text-secondary); }
.encart-marees-source a { color: inherit; }

/* Texte SEO en bas des pages catégorie */
.categorie-texte-seo { max-width: 900px; margin: 0 auto; padding: 40px 20px 20px; color: var(--gris-texte); font-size: 15px; line-height: 1.7; }
.categorie-texte-seo h2 { color: var(--text-primary); font-size: 20px; margin: 28px 0 10px; }
.categorie-texte-seo h2:first-child { margin-top: 0; }
.categorie-texte-seo p { margin: 0 0 14px; }
.categorie-texte-seo ul { margin: 0 0 14px; padding-left: 20px; }
.categorie-texte-seo li { margin-bottom: 4px; }

/* Méga-menu : colonnes régulières, séparateurs entre colonnes, listes alignées */
@media (min-width: 1101px) {
    .mega-menu-colonnes {
        grid-template-columns: repeat(var(--colonnes, 5), minmax(0, 1fr));
        gap: 22px 0;
        background-image: none;
    }
    .mega-menu-colonnes { overflow: hidden; }
    /* Trait à gauche de chaque colonne ; celui de la 1re colonne de chaque ligne sort du cadre et reste masqué */
    .mega-menu-colonne {
        display: flex;
        flex-direction: column;
        padding: 0 22px;
        margin-left: -1px;
        border-left: 1px solid var(--border);
    }
    .mega-menu-titre { min-height: 2.6em; align-items: start; margin-bottom: 6px; }
    .mega-menu-colonne li { margin: 0 0 5px; }
    .mega-menu-voir-plus { margin-top: auto; padding-top: 8px; }
}

/* ───────── Menu mobile à tiroirs (≤ 1100 px) ───────── */
.tiroir { position: fixed; inset: 0; z-index: 2000; }
.tiroir[hidden] { display: none; }
.tiroir-fond { position: absolute; inset: 0; background: rgba(32, 36, 42, 0.45); opacity: 0; transition: opacity 0.25s; }
.tiroir.visible .tiroir-fond { opacity: 1; }
.tiroir-panneaux {
    position: absolute; top: 0; bottom: 0; left: 0;
    width: min(420px, 100%); overflow: hidden; background: #fff;
    transform: translateX(-100%); transition: transform 0.25s ease;
    box-shadow: 8px 0 30px rgba(32, 36, 42, 0.18);
}
.tiroir.visible .tiroir-panneaux { transform: none; }
.tiroir-panneau {
    position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff;
    transform: translateX(100%); transition: transform 0.25s ease; visibility: hidden;
}
.tiroir-panneau.actif { transform: none; visibility: visible; }
.tiroir-panneau.derriere { transform: translateX(-25%); visibility: hidden; }
.tiroir-entete {
    flex: 0 0 auto; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px;
    min-height: 68px; padding: 10px 14px; border-bottom: 1px solid #f6f1ed;
    background: linear-gradient(135deg, #f6ecdc 0%, #fff 70%);
}
#tiroir-racine .tiroir-entete { grid-template-columns: 1fr 44px; }
.tiroir-logo { text-decoration: none; }
.tiroir-logo .logo-image { height: 19px; }
.tiroir-titre { text-align: center; font-size: 17px; color: var(--text-primary); line-height: 1.2; }
.tiroir-bouton {
    width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff;
    box-shadow: 0 2px 8px rgba(32, 36, 42, 0.12); color: var(--text-primary); font-size: 26px; line-height: 1; cursor: pointer;
}
.tiroir-contenu { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px 28px; -webkit-overflow-scrolling: touch; }
.tiroir-liste { list-style: none; margin: 0; padding: 0; }
.tiroir-liste-secondaire { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.tiroir-ligne {
    display: flex; align-items: center; gap: 14px; width: 100%; min-height: 50px; padding: 6px 10px;
    border: 0; border-radius: 10px; background: none; color: var(--text-primary); text-align: left; text-decoration: none;
    font: inherit; font-size: 15px; cursor: pointer;
}
.tiroir-ligne:hover, .tiroir-ligne:focus-visible { background: #f6f1ed; outline: none; }
.tiroir-icone { flex: 0 0 26px; width: 26px; height: 26px; color: var(--rouge); }
.tiroir-icone svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tiroir-libelle { flex: 1 1 auto; }
.tiroir-chevron { flex: 0 0 10px; width: 10px; height: 10px; border-right: 2px solid var(--text-primary); border-top: 2px solid var(--text-primary); transform: rotate(45deg); margin-right: 6px; }
.tiroir-liste-produits .tiroir-ligne { min-height: 46px; font-size: 14px; border-bottom: 1px solid #f6f1ed; border-radius: 0; }
.tiroir-voir-tout { display: block; padding: 14px 10px 10px; color: var(--text-primary); font-weight: 700; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.tiroir-actions { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.tiroir-cta { display: block; text-align: center; }
.tiroir-appel {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
    border: 1.5px solid var(--text-primary); border-radius: 999px; color: var(--text-primary); font-weight: 700; text-decoration: none;
}
.tiroir-appel svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.tiroir-horaires { margin: 2px 0 0; text-align: center; color: var(--text-secondary); font-size: 12px; }
html.tiroir-ouvert, html.tiroir-ouvert body { overflow: hidden; }
@media (min-width: 1101px) { .tiroir { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .tiroir-panneaux, .tiroir-panneau, .tiroir-fond { transition: none; } }

.tiroir-entete .logo, .tiroir-entete .tiroir-bouton { grid-area: auto; }
#tiroir-racine .tiroir-entete .tiroir-logo { justify-self: start; }
#tiroir-racine .tiroir-entete .tiroir-logo .logo-image { height: 20px; }

/* Pages métier, mobile : points de réassurance affichés un par un, en fondu */
.audience-benefices-points { display: none; }
@media (max-width: 800px) {
    .audience-benefices {
        display: grid;
        grid-template-columns: 1fr;
        padding: 18px 20px;
        border-radius: 14px;
        background: #f6f1ed;
    }
    .audience-benefice {
        grid-area: 1 / 1;
        align-items: center;
        padding: 0;
        border: 0;
        font-size: 16px;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.6s ease, visibility 0.6s;
    }
    .audience-benefice.actif { opacity: 1; visibility: visible; }
    .audience-benefice-icone { width: 26px; height: 26px; flex-basis: 26px; }
    .audience-benefice-icone svg { width: 24px; height: 24px; }
    .audience-benefices-points { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
    .audience-benefices-points span { width: 7px; height: 7px; border-radius: 50%; background: #d9d0d3; transition: background 0.3s; }
    .audience-benefices-points span.actif { background: var(--rouge); }
}
@media (max-width: 800px) and (prefers-reduced-motion: reduce) {
    .audience-benefice { transition: none; }
}

/* Pages métier, mobile : bloc « Nous accompagnons… » sans grand vide.
   En colonne, la base de 320/420 px s'appliquait à la hauteur des blocs. */
@media (max-width: 800px) {
    .audience-zones { flex-direction: column; align-items: stretch; gap: 14px; margin: 24px 20px; padding: 18px 20px; }
    .audience-zones-texte, .audience-zones-liste { flex: 0 0 auto; }
    .audience-zones-liste { text-align: left; padding-left: 32px; line-height: 1.8; }
}

.site-footer .logo-tagline { color: rgba(255,255,255,0.7); }

/* Boutons principaux sur fonds bordeaux : champagne pour rester visibles */
.audience-hero .cta:not(.cta-blanc),
.categorie-hero-marine .cta:not(.cta-blanc),
.contact-hero .cta:not(.cta-blanc) { background: var(--accent); color: var(--text-primary); }
.audience-hero .cta:not(.cta-blanc):hover,
.categorie-hero-marine .cta:not(.cta-blanc):hover,
.contact-hero .cta:not(.cta-blanc):hover { background: #c79d66; }

/* Méga-menu : nombre de produits sous le titre de chaque sous-catégorie */
.mega-menu-nb { display: block; margin: 0; font-size: 12px; color: var(--text-secondary); }

/* Blocs de liens internes (métiers, villes, spécialités) */
.maillage { max-width: 1440px; margin: 0 auto; padding: 32px 20px 8px; }
.maillage h2 { font-size: 22px; margin: 0 0 6px; color: var(--text-primary); }
.maillage .sous-titre { margin: 0 0 14px; color: var(--text-secondary); }
.maillage-liens { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.maillage-liens a {
    display: inline-block; padding: 8px 16px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--text-primary); font-size: 14px; font-weight: 600; text-decoration: none;
}
.maillage-liens a:hover { border-color: var(--primary); color: var(--primary); }

/* Navigation principale et méga-menus */
.header-recherche-submit {
    flex: 0 0 42px; width: 42px; height: 42px; border: 0; border-radius: 50%;
    background: var(--primary); color: #fff; font-size: 23px; line-height: 1; cursor: pointer;
}
.header-recherche:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.header-recherche-submit:hover { background: #4c0d20; }
@media (min-width: 1101px) {
    .site-header-bandeau-interieur, .site-header-top, .site-header-nav-ligne { max-width: 1920px; }
    .site-header-top { grid-template-columns: minmax(200px, 280px) minmax(230px, 1fr) auto; gap: clamp(20px, 2vw, 38px); padding: 24px 30px; }
    .site-header-top .logo-image { height: auto; width: min(100%, 280px); }
    .header-signature { margin-top: 6px; font-size: 8px; letter-spacing: 1.8px; text-transform: uppercase; }
    .header-recherche { padding: 3px 3px 3px 20px; height: 52px; }
    .site-header-nav-ligne { padding: 0 20px; position: relative; }
    .site-header-nav { gap: 0; font-size: clamp(11px, .9vw, 15px); }
    .menu-item { flex: 1 1 0; min-width: 0; position: static; }
    .menu-item > a { min-height: 66px; padding: 10px clamp(7px, 1vw, 18px); position: relative; }
    .menu-item + .menu-item > a::before { content: ''; position: absolute; left: 0; top: 15px; bottom: 15px; border-left: 1px solid var(--border); }
    .menu-item:hover > a, .menu-item:focus-within > a { color: var(--primary); box-shadow: inset 0 -3px var(--primary); }
    .nav-categorie-icone { width: 26px; height: 26px; flex-basis: 26px; }
    .nav-chevron { margin-left: auto; flex: 0 0 auto; }
    .site-header .mega-menu { left: 0; right: 0; padding: 0; border-radius: 0; border-left: 0; border-right: 0; }
    .menu-item:hover .mega-menu, .menu-item:focus-within .mega-menu { display: grid; grid-template-columns: minmax(190px, 20%) minmax(0, 1fr) minmax(190px, 17%); }
    .mega-menu-intro { background: #f7f2f0; padding: 28px clamp(18px, 2vw, 36px); }
    .mega-menu-sur-titre { display: block; color: var(--primary); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 800; font-size: 10px; }
    .mega-menu-intro strong { display: block; margin: 12px 0 10px; font-size: clamp(20px, 1.5vw, 28px); line-height: 1.1; }
    .mega-menu-intro p { color: var(--text-secondary); font-size: 14px; line-height: 1.5; margin: 0 0 20px; }
    .mega-menu-intro .cta { font-size: 12px; padding: 12px 17px; }
    .mega-menu-corps { display: block; max-height: min(520px, calc(100vh - 210px)); padding: 25px 8px; }
    .mega-menu-colonnes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 0; background: none; }
    .mega-menu-colonne { padding: 0 clamp(10px, 1.2vw, 20px); border-right: 1px solid var(--border); }
    .mega-menu-titre { font-size: 14px !important; margin: 0 0 11px; }
    .mega-menu-produits li { margin: 7px 0; }
    .mega-menu-produits a { display: flex; gap: 8px; line-height: 1.3; color: var(--text-secondary); font-size: 13px; }
    .mega-menu-produits a::before { content: '›'; color: var(--primary); font-size: 18px; line-height: .8; }
    .mega-menu-visuel { display: block; margin-top: 16px; border-radius: 4px; }
    .mega-menu-visuel img { aspect-ratio: 1.9; object-fit: cover; }
    .mega-menu-contact { padding: 28px clamp(16px, 1.7vw, 30px); }
    .mega-menu-contact ul { list-style: none; padding: 0; margin: 18px 0 24px; color: var(--text-secondary); font-size: 13px; }
    .mega-menu-contact li { margin: 14px 0; }
    .mega-menu-contact li::before { content: '✓'; color: var(--primary); font-weight: bold; margin-right: 9px; }
    .mega-menu-contact > a { display: block; border: 1px solid var(--primary); border-radius: 999px; padding: 12px; color: var(--primary); text-align: center; font-weight: 700; text-decoration: none; font-size: 12px; }
    .mega-menu-contact > a:hover { background: var(--primary); color: #fff; }
}
@media (max-width: 1100px) {
    .header-signature { display: none; }
    .header-recherche { padding-right: 3px; }
    .header-recherche-submit { flex-basis: 36px; width: 36px; height: 36px; font-size: 20px; }
}
@media (min-width: 1400px) {
    .nav-chevron { display: inline; }
}
@media (min-width: 1101px) {
    .mega-menu-voir-plus { margin-top: 8px; padding-top: 0; }
    .mega-menu-visuel { margin-top: auto; padding-top: 16px; background: transparent; border-radius: 0; }
    .mega-menu-visuel img { border-radius: 4px; }
}
@media (min-width: 1101px) {
    .header-signature { white-space: nowrap; font-size: clamp(6px, .52vw, 8px); letter-spacing: .12em; }
}

/* Résultats de recherche */
.recherche-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:30px; width:min(1500px,calc(100% - 48px)); margin:28px auto 70px; }
.recherche-sidebar { display:flex; flex-direction:column; gap:14px; }
.recherche-panneau { background:#f5f1ee; border-radius:8px; padding:18px 14px; }
.recherche-panneau h2 { margin:0 0 12px; font-size:15px; }
.recherche-categories-nav { list-style:none; margin:0; padding:0; }
.recherche-categories-nav a { display:flex; align-items:center; gap:10px; padding:7px 4px; color:var(--text-primary); text-decoration:none; font-size:13px; border-radius:5px; }
.recherche-categories-nav a:hover { background:#eadfdf; color:var(--primary); }
.recherche-nav-icone { display:grid; place-items:center; width:28px; height:28px; flex:0 0 28px; border-radius:50%; background:white; }
.recherche-nav-icone svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round; stroke-linecap:round; }
.recherche-filtres fieldset { border:0; border-top:1px solid var(--border); margin:0; padding:13px 0; }
.recherche-filtres legend { font-size:13px; font-weight:700; padding:0 8px 0 0; }
.recherche-filtres label { display:flex; align-items:center; gap:9px; padding:6px 0; font-size:12px; cursor:pointer; }
.recherche-filtres input { accent-color:var(--primary); }
.recherche-filtres label span { flex:1; }
.recherche-filtres small { color:var(--text-secondary); }
.recherche-filtrer,.recherche-reset { display:block; width:100%; text-align:center; border:1px solid var(--primary); border-radius:30px; padding:10px; background:transparent; color:var(--primary); font-size:12px; font-weight:700; cursor:pointer; text-decoration:none; }
.recherche-reset { border:0; margin-top:5px; }
.recherche-contenu { min-width:0; }
.recherche-contenu .fil-ariane { margin:0 0 28px; padding:0; width:auto; }
.recherche-contenu h1 { margin:0 0 10px; font-size:clamp(28px,3vw,42px); line-height:1.15; }
.recherche-contenu h1 span { color:var(--primary); }
.recherche-total { margin:0 0 24px; color:var(--text-secondary); font-size:14px; }
.recherche-section { margin:0 0 36px; }
.recherche-section h2 { margin:0 0 14px; font-size:20px; }
.recherche-grille-categories { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.recherche-categorie-carte { overflow:hidden; padding:7px; border:1px solid #eee8e5; border-radius:7px; background:#fff; color:var(--text-primary); text-decoration:none; }
.recherche-categorie-carte:hover { border-color:var(--primary); }
.recherche-categorie-carte img,.recherche-categorie-carte .recherche-visuel-vide { width:100%; aspect-ratio:1.9; object-fit:cover; border-radius:4px; }
.recherche-categorie-carte strong { display:block; padding:9px 5px 5px; font-size:13px; line-height:1.25; }
.recherche-section-entete { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:15px; }
.recherche-section-entete h2 { margin:0; }
.recherche-section-entete h2 span { color:#8b919a; }
.recherche-tri { display:flex; align-items:center; gap:8px; color:var(--text-secondary); font-size:13px; }
.recherche-tri select,.recherche-tri button { border:1px solid var(--border); background:#fff; border-radius:5px; padding:8px; color:var(--text-primary); }
.recherche-tri button { cursor:pointer; }
.recherche-grille-produits { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.recherche-produit { display:flex; flex-direction:column; overflow:hidden; border:1px solid #eee8e5; border-radius:8px; background:#fff; box-shadow:0 2px 5px rgba(32,36,42,.04); }
.recherche-produit-image { display:block; background:#f1ece9; }
.recherche-produit-image img,.recherche-produit-image .recherche-visuel-vide { display:block; width:100%; aspect-ratio:1.9; object-fit:cover; }
.recherche-visuel-vide { display:grid !important; place-items:center; background:#f3eeeb; }
.recherche-visuel-vide svg { width:45%; height:75%; }
.recherche-produit-corps { display:flex; flex:1; flex-direction:column; padding:12px; }
.recherche-produit h3 { margin:0 0 5px; font-size:14px; line-height:1.25; }
.recherche-produit p { margin:0 0 9px; color:var(--text-secondary); font-size:13px; line-height:1.4; }
.recherche-produit-categorie { display:block; margin:0 0 12px; color:var(--text-secondary); font-size:12px; }
.recherche-produit-lien { display:block; margin-top:auto; padding:9px; border-radius:999px; background:var(--primary); color:white; text-align:center; text-decoration:none; font-weight:700; font-size:12px; }
.recherche-produit-lien:hover { background:#4c0d20; }
.recherche-produit-lien span { margin-left:8px; }
@media(max-width:1100px) { .recherche-layout { grid-template-columns:200px minmax(0,1fr); gap:20px; } .recherche-grille-produits { grid-template-columns:repeat(3,minmax(0,1fr)); } .recherche-grille-categories { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:700px) { .recherche-layout { display:flex; flex-direction:column-reverse; width:calc(100% - 32px); margin:22px auto 50px; } .recherche-sidebar { gap:10px; } .recherche-categories-nav { display:grid; grid-template-columns:1fr 1fr; } .recherche-section-entete { flex-wrap:wrap; } .recherche-grille-produits,.recherche-grille-categories { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } }

/* Repères pour préparer un projet */
.parcours-client { width:min(1400px,calc(100% - 40px)); margin:64px auto; padding:clamp(24px,4vw,48px); border:1px solid var(--border); border-radius:12px; background:#f7f3f0; }
.parcours-client-intro { max-width:700px; }
.parcours-client-label { color:var(--primary); text-transform:uppercase; font-size:11px; font-weight:800; letter-spacing:1.4px; margin:0 0 10px; }
.parcours-client h2 { font-size:clamp(24px,2.4vw,34px); line-height:1.15; margin:0 0 12px; }
.parcours-client-intro > p:last-child,.parcours-client-etapes p,.produit-conseil-prix { color:var(--text-secondary); line-height:1.6; }
.parcours-client-etapes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:28px; }
.parcours-client-etapes article { border-top:1px solid #d8c9c7; padding-top:18px; }
.parcours-client-etapes span { color:var(--primary); font-size:12px; font-weight:800; }
.parcours-client-etapes h3 { margin:8px 0; font-size:16px; }
.parcours-client-etapes p { margin:0; font-size:14px; }
.produit-conseil-prix { margin:16px 0; font-size:14px; }
@media (max-width:700px) { .parcours-client { margin:40px auto; } .parcours-client-etapes { grid-template-columns:1fr; gap:18px; } }
.realisation-projet { min-width:0; }
.realisation-projet > .galerie-item { display:block; }
.realisation-recit { background:#f7f3f0; padding:14px 16px; border-radius:0 0 8px 8px; font-size:14px; }
.realisation-recit summary { color:var(--primary); cursor:pointer; font-weight:700; }
.realisation-recit h3 { margin:15px 0 4px; font-size:14px; }
.realisation-recit p { margin:0; color:var(--text-secondary); line-height:1.5; }
.conseil-prestation { display:flex; align-items:center; justify-content:space-between; gap:24px; width:min(1400px,calc(100% - 40px)); margin:50px auto 0; padding:28px clamp(22px,3vw,40px); border-left:4px solid var(--primary); background:#f7f3f0; }
.conseil-prestation > div { max-width:760px; }
.conseil-prestation span { color:var(--primary); text-transform:uppercase; font-size:11px; font-weight:800; letter-spacing:1.2px; }
.conseil-prestation h2 { margin:8px 0; font-size:clamp(20px,2vw,26px); }
.conseil-prestation p { margin:0; color:var(--text-secondary); line-height:1.6; }
.conseil-prestation .cta { white-space:nowrap; }
@media(max-width:700px) { .conseil-prestation { align-items:flex-start; flex-direction:column; margin-top:35px; } }
.star-prestation { width:min(1400px,calc(100% - 40px)); margin:45px auto; padding:clamp(24px,3vw,40px); background:#f7f3f0; border:1px solid var(--border); border-radius:12px; }
.star-prestation-label { color:var(--primary); text-transform:uppercase; font-size:11px; font-weight:800; letter-spacing:1.3px; margin:0 0 8px; }
.star-prestation h2 { margin:0 0 8px; font-size:clamp(22px,2vw,30px); line-height:1.2; }
.star-prestation-intro { color:var(--text-secondary); margin:0; }
.star-prestation-grille { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; margin-top:25px; }
.star-prestation-grille article { border-top:1px solid #d8c9c7; padding-top:14px; }
.star-prestation-grille span { color:var(--primary); font-weight:800; font-size:12px; }
.star-prestation-grille h3 { margin:8px 0; font-size:15px; }
.star-prestation-grille p { margin:0; color:var(--text-secondary); font-size:14px; line-height:1.5; }
@media(max-width:900px) { .star-prestation-grille { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:550px) { .star-prestation-grille { grid-template-columns:1fr; gap:16px; } }
.star-conseil { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:25px; padding:18px 20px; background:#fff; border-radius:8px; }
.star-conseil strong { font-size:14px; }
.star-conseil p { margin:5px 0 0; color:var(--text-secondary); font-size:14px; line-height:1.5; }
.star-conseil a { flex:0 0 auto; color:var(--primary); font-size:13px; font-weight:700; text-decoration:none; }
.star-conseil a:hover { text-decoration:underline; }
@media(max-width:700px) { .star-conseil { align-items:flex-start; flex-direction:column; gap:12px; } }
.star-prestation-grille article { border-top: 0; padding-top: 0; }
.projet-detail { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,4vw,60px); width:min(1300px,calc(100% - 40px)); margin:35px auto 80px; align-items:start; }
.projet-detail-image img { display:block; width:100%; max-height:680px; object-fit:contain; border-radius:10px; background:#f5f1ee; }
.projet-detail-contenu h1 { margin:10px 0; font-size:clamp(30px,3vw,44px); line-height:1.12; }
.projet-detail-localisation { color:var(--text-secondary); }
.projet-detail-contenu section { margin-top:24px; }
.projet-detail-contenu h2 { margin:0 0 8px; font-size:18px; }
.projet-detail-contenu section p,.projet-detail-action p { color:var(--text-secondary); line-height:1.6; }
.projet-detail-action { margin-top:30px; padding:24px; border-radius:10px; background:#f7f3f0; }
.projet-detail-prestation { display:block; margin-top:18px; color:var(--primary); font-weight:700; }
@media(max-width:700px) { .projet-detail { grid-template-columns:1fr; margin-top:20px; } }