@charset "utf-8";
/*
 * En-tête commun des pages du catalogue des produits (chapitres et pages de gammes des surpresseurs, 2026-11-12) :
 * bande bleue avec le titre à gauche et le fil d'Ariane à droite, puis titre du premier bloc et boutons sur la même
 * ligne (en haut à droite avec .boutonsDroite).
 * Après imgrd.2510.css (.bloctxtrondV2) et produits.css (.button).
 */

/* Bande bleue : titre collé à gauche et fil d'Ariane collé à droite, 10 px de marge ; le fil passe dessous, toujours
   à droite, quand la ligne ne suffit plus */
.bloctxtrondV2.bandeBleueFil {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 24px;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
    text-align: left;
}

/* Titre de la bande : un paragraphe (le titre principal de la page est le h1 du premier bloc), sans marge */
.bandeBleueFil .bandeBleueTitre {
    margin: 0;
}

/* Doublons des titres de section pour petits écrans : paragraphes avec role="heading" (style dans produits.css) */

/* Titres des tuiles d'avantages (adoucisseur, piscine, filtration) : paragraphes au lieu de h2, sans marge */
p.bloctxtspan {
    margin: 0;
}

.bandeBleueFil .filAriane {
    margin-left: auto;
    padding: 0;
    font-size: 0.85em;
    font-weight: normal;
    text-align: right;
}

.bandeBleueFil .filAriane ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bandeBleueFil .filAriane li {
    display: inline;
    color: #ffffff;
}

.bandeBleueFil .filAriane li + li::before {
    content: "›";
    padding: 0 6px;
    color: #c8d4ea;
}

.bandeBleueFil .filAriane a {
    color: #ffffff;
    text-decoration: none;
}

.bandeBleueFil .filAriane a:hover,
.bandeBleueFil .filAriane a:focus-visible {
    text-decoration: underline;
}

/* Titre du premier bloc à gauche et boutons centrés dans le bloc, sur une ligne (grille 1fr / auto / 1fr : la colonne
   du milieu est au centre) ; boutons centrés sous le titre sur un écran étroit. Marge haute des boutons (.button,
   20 px) retirée pour les centrer sur le titre */
.titreBoutons {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px 32px;
    margin-bottom: 12px;
}

.titreBoutonsLiens {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.titreBoutonsLiens a.button {
    margin: 0;
}

@media (max-width: 999px) {
    .titreBoutons {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Titre à gauche, boutons en haut à droite du bloc (demande de l'utilisateur du 2026-11-12 ; pages de gammes et
   surpresseurs) ; boutons centrés sous le titre quand la ligne ne suffit plus (sous 1100 px) */
.titreBoutons.boutonsDroite {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.titreBoutons.boutonsDroite .titreBoutonsLiens {
    justify-content: flex-end;
}

@media (max-width: 1099px) {
    .titreBoutons.boutonsDroite {
        grid-template-columns: minmax(0, 1fr);
    }

    .titreBoutons.boutonsDroite .titreBoutonsLiens {
        justify-content: center;
    }
}

/* Questions fréquentes des pages de chapitres (2026-11-12) : question en bleu, réponse dessous */
.textb h3.questionFaq {
    color: #003888;
    font-size: 1.1em;
    font-weight: bold;
    margin: 14px 0 4px 0;
}

.textb p.reponseFaq {
    margin: 0 0 8px 0;
}

/*
 * Bloc « Cela pourrait aussi vous intéresser » (module chapitresLies.function.php, 2026-11-12) : cinq chapitres.
 * Ordinateur : tuiles rondes comme avant (intitulé à double bordure blanche, image ovale), plus petites, cinq par
 * ligne. Téléphone (moins de 700 px) : liste de cartes blanches sans image, petite icône, flèche à droite.
 */
.chapitresLies {
    clear: both;
    padding: 24px 2% 12px 2%;
}

.chapitresLiesTitre {
    margin: 0 0 18px 0;
    color: #ffffff;
    font-size: 1.6em;
    font-weight: bold;
    text-align: center;
}

/* Rangée centrée : la dernière ligne incomplète (3 + 2 sur tablette) reste au milieu */
.chapitresLiesListe {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    max-width: 1275px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.chapitresLiesListe > li {
    flex: 0 1 calc((100% - 4 * 18px) / 5);
}

.chapitreLie {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    text-decoration: none;
}

.chapitreLieNom {
    box-sizing: border-box;
    width: 92%;
    padding: 3px 8px;
    border: 3px double #ffffff;
    border-radius: 999px;
    font-family: Arial, sans-serif;
    font-size: 0.85em;
    font-weight: bold;
    text-align: center;
    /* Même hauteur pour un intitulé sur une ou deux lignes : les images restent alignées */
    min-height: 3.1em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chapitreLieImage {
    display: block;
    width: 92%;
    height: auto;
    border-radius: 50%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.chapitreLieIcone {
    display: none;
}

@media (hover: hover) {
    .chapitreLie .chapitreLieImage {
        transition: transform 0.2s ease-in-out;
    }

    .chapitreLie:hover .chapitreLieImage {
        transform: scale(1.05);
    }
}

.chapitreLie:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

@media (max-width: 999px) {
    .chapitresLiesListe > li {
        flex-basis: calc((100% - 2 * 18px) / 3);
    }
}

@media (max-width: 699px) {
    .chapitresLiesListe {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 8px;
        max-width: 480px;
    }

    .chapitresLiesListe > li {
        flex-basis: auto;
    }

    .chapitreLie {
        flex-direction: row;
        gap: 12px;
        padding: 12px 14px;
        border-radius: 10px;
        background-color: #ffffff;
        color: #003888;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }

    .chapitreLieImage {
        display: none;
    }

    .chapitreLieIcone {
        display: block;
        flex: 0 0 auto;
        width: 24px;
        height: 24px;
        color: #1e6b3a;
    }

    .chapitreLieNom {
        flex: 1 1 auto;
        width: auto;
        padding: 0;
        border: none;
        font-size: 0.95em;
        text-align: left;
        min-height: 0;
        display: block;
    }

    /* Flèche à droite de chaque carte */
    .chapitreLie::after {
        content: "›";
        font-size: 1.4em;
        line-height: 1;
        color: #003888;
    }

    .chapitreLie:focus-visible {
        outline-color: #003888;
    }
}

/*
 * Photo du haut des pages de chapitres à une seule photo, sur ordinateur (2026-11-12, demande de l'utilisateur) :
 * même hauteur que le bandeau de surpresseurs (283 px au plus) ; un tiers de la largeur, 425 px au plus (photo au
 * format 3:2, 425 × 283), centrée. Les pages à trois photos (filtration-traitement_eau, adoucisseur,
 * recuperation-retention-infiltration) gardent leurs photos d'un tiers de la largeur chacune (demande du même jour).
 */
@media (min-width: 1000px) {
    .blocimgtxtrondV2[style*="float: none"]:not(.bandeauGammes) {
        width: min(33.333%, 425px);
    }
}