/**
 * BLOC « NOS CONSEILS » — bas de fiche produit. 29/09/2026, version 1.0.1.
 *
 * LA VERSION EST DANS LE NOM DU FICHIER. Tout .css est cache un an sans version
 * sur ce site : un correctif ecrit dans `conseils.css` n'atteindrait jamais un
 * visiteur deja venu. Pour modifier ces regles, creer `conseils-1.0.1.css` et
 * changer la constante CSS du module — ne jamais reecrire ce fichier en place.
 *
 * DEUX FORMES POUR UN SEUL BALISAGE. Au-dessus de 768 px, des cartes en colonne
 * avec la photo en 16/9. En dessous, une liste : la photo devient un carre de
 * 72 px a gauche, le chapo et l'appel disparaissent. MESURE le 29/09 dans une
 * fenetre de 371 px : trois cartes empilees font 1 292 px, la liste 354 px, soit
 * 97 px par article — moins que les deux blocs produits qui la precedent, qui
 * mesurent 449 et 437 px.
 *
 * LES COULEURS SONT CELLES DE LA CHARTE, ecrites en dur avec la variable en
 * premier : ce bloc peut etre servi avant la feuille qui declare les variables.
 */

.m-product__conseils {
    margin: 36px 0 8px;
}

.m-product__conseilsTitre {
    color: var(--clr-blue, #0F5FA6);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 6px;
}

.m-product__conseilsChapo {
    color: #5B6B7A;
    font-size: 15px;
    margin: 0 0 20px;
}

.m-product__conseilsListe {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

/* LE RESET DU `li` EST PORTE PAR LA LISTE, PAS PAR `li` SEUL : une regle
   `li { padding: 0 }` trop large avait deja atteint un autre etat de la fiche
   le 18/09. Ici on ne sort pas du bloc. */
.m-product__conseilsListe > li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.m-product__conseil {
    background: #FFFFFF;
    border: 1px solid var(--prohd-filet-fonce, #DCE5EB);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* LE LIEN EST LA CARTE. `display: flex` en colonne pour que le corps pousse
   l'appel en bas et que toutes les cartes d'une ligne s'alignent. */
.m-product__conseils .m-product__conseilLien {
    color: inherit;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    text-decoration: none;
}

.m-product__conseilVignette {
    aspect-ratio: 16 / 9;
    background: #EEF3F6;
    display: block;
    height: auto;
    max-width: 100%;
    object-fit: cover;
    width: 100%;
}

.m-product__conseilCorps {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 14px 16px 16px;
}

.m-product__conseilRubrique {
    color: var(--clr-blue, #0F5FA6);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    margin: 0 0 6px;
    text-transform: uppercase;
}

.m-product__conseilTitre {
    color: var(--prohd-encre, #22303F);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 8px;
}

.m-product__conseilTexte {
    color: #5B6B7A;
    font-size: 14px;
    line-height: 1.45;
    margin: 0 0 14px;
}

.m-product__conseilAppel {
    color: var(--clr-blue, #0F5FA6);
    font-size: 14px;
    font-weight: 600;
    margin-top: auto;
}

.m-product__conseils .m-product__conseilLien:hover .m-product__conseilTitre {
    color: var(--clr-blue, #0F5FA6);
}

.m-product__conseils .m-product__conseilLien:hover .m-product__conseilAppel {
    text-decoration: underline;
}

.m-product__conseils .m-product__conseilLien:focus-visible {
    outline: 2px solid var(--clr-blue, #0F5FA6);
    outline-offset: 2px;
}

/* --- UNE OU DEUX CARTES NE LAISSENT PLUS DE LIGNE VIDE -----------------
   1.0.1, apres relevé du client le 29/09 sur la fiche 10883.

   CE QU'IL A VU : une seule carte dans une grille de trois, donc les deux
   tiers de la ligne vides. La cause n'etait pas le bloc mais le CATALOGUE —
   la categorie « Nettoyeur vapeur » ne compte que deux produits, et un seul
   article la declare aujourd'hui.

   UNE SEULE CARTE PASSE DONC A L'HORIZONTALE : photo a gauche, texte a
   droite, toute la largeur. Deux cartes se partagent la ligne en deux.
   C'est le gabarit qui compte et pose `-solo` ou `-duo` : le CSS ne sait
   pas compter ses enfants, et `:has()` ne se verifie pas aussi simplement.

   TOUT CECI EST BORNE AU-DESSUS DE 768 PX. En dessous, la liste compacte
   s'applique deja et n'a aucune ligne a remplir. */
@media (min-width: 768px) {
    .m-product__conseilsListe.-duo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .m-product__conseilsListe.-solo {
        grid-template-columns: minmax(0, 1fr);
    }

    /* `flex-direction: row` EST ECRIT EXPLICITEMENT : la regle de carte pose
       `column` plus haut, et « display: flex » ne dit rien de la direction. */
    .m-product__conseilsListe.-solo .m-product__conseilLien {
        align-items: stretch;
        flex-direction: row;
    }

    /* LA PHOTO PREND 38 % ET S'ETIRE EN HAUTEUR. On retire le rapport 16/9,
       qui imposerait une hauteur de carte enorme sur une ligne entiere. */
    .m-product__conseilsListe.-solo .m-product__conseilVignette {
        aspect-ratio: auto;
        flex: 0 0 38%;
        height: auto;
        min-height: 100%;
        width: 38%;
    }

    .m-product__conseilsListe.-solo .m-product__conseilCorps {
        justify-content: center;
        padding: 24px 28px;
    }

    .m-product__conseilsListe.-solo .m-product__conseilTitre {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .m-product__conseilsListe.-solo .m-product__conseilTexte {
        font-size: 15px;
    }

    /* L'APPEL NE SE COLLE PLUS EN BAS quand la carte est haute : centre avec
       le reste du texte, il reste sous le chapo au lieu de flotter seul. */
    .m-product__conseilsListe.-solo .m-product__conseilAppel {
        margin-top: 0;
    }
}

/* --- ENTRE 768 ET 991 PX : DEUX PAR LIGNE ------------------------------
   A trois, chaque carte tomberait sous 240 px et le titre partirait sur
   quatre lignes. */
@media (max-width: 991px) and (min-width: 768px) {
    .m-product__conseilsListe:not(.-solo) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --- SOUS 768 PX : LA LISTE COMPACTE -----------------------------------
   Demande du client le 29/09 : « j'ai peur que ca fasse beaucoup trop de
   scroll ». La mesure lui donnait raison — 1 292 px contre 354. */
@media (max-width: 767px) {
    .m-product__conseils {
        margin: 28px 0 8px;
    }

    .m-product__conseilsTitre {
        font-size: 22px;
    }

    .m-product__conseilsChapo {
        margin-bottom: 10px;
    }

    .m-product__conseilsListe {
        display: block;
    }

    .m-product__conseil {
        background: none;
        border: 0;
        border-top: 1px solid var(--prohd-filet-fonce, #DCE5EB);
        border-radius: 0;
        overflow: visible;
    }

    .m-product__conseilsListe > li:last-child .m-product__conseil {
        border-bottom: 1px solid var(--prohd-filet-fonce, #DCE5EB);
    }

    /* `flex-direction: row` EST ECRIT, il ne se devine pas : la regle de
       carte plus haut pose `column`, et une feuille parente illisible
       pourrait en poser une autre. */
    .m-product__conseils .m-product__conseilLien {
        align-items: flex-start;
        display: flex;
        flex-direction: row;
        gap: 12px;
        padding: 12px 0;
    }

    .m-product__conseilVignette {
        aspect-ratio: 1 / 1;
        border-radius: 8px;
        flex: 0 0 72px;
        height: 72px;
        width: 72px;
    }

    .m-product__conseilCorps {
        min-width: 0;
        padding: 0;
    }

    .m-product__conseilRubrique {
        font-size: 10px;
        margin-bottom: 3px;
    }

    .m-product__conseilTitre {
        font-size: 15px;
        margin: 0;
    }

    /* LE CHAPO ET L'APPEL SORTENT. Trois fois « lire l'article » dans
       355 px n'apporte rien, et la ligne entiere est deja cliquable. */
    .m-product__conseilTexte,
    .m-product__conseilAppel {
        display: none;
    }
}