/**
 * BLOC « NOS CONSEILS » — bas de fiche produit. 30/10/2026, version 1.0.2.
 *
 * 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.3.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.
 *
 * 1.0.2 — UNE CARTE GARDE LA TAILLE D'UNE CARTE PRODUIT, QU'IL Y AIT UN, DEUX
 * OU TROIS ARTICLES. Releve du client le 30/10 : « les blocs sont enormes et les images
 * floues ». Mesure a 1 920 px avant correction : deux articles = deux cartes de
 * 800 x 590, image etiree a 798 px ; trois = 527 x 477 ; un seul = une bande de
 * 1 620 px dont la photo etait recadree a 615 x 166. LA VIGNETTE DU BLOG NE FAIT
 * QUE 450 x 255 : tout affichage plus large l'agrandit, d'ou le flou. Sous
 * 265 px, elle reste nette jusqu'a un zoom d'ecran de 150 %.
 * Les variantes `-solo` et `-duo` de 1.0.1 sont retirees : une carte a la meme
 * taille quel que soit le nombre d'articles. Le gabarit pose toujours ces
 * classes, elles ne portent simplement plus de regle.
 *
 * 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;
}

/* DES COLONNES D'AU MOINS 220 PX, autant que la ligne en contient, et les
   colonnes vides restent reservees (`auto-fill`, pas `auto-fit`) : un article
   seul garde la taille d'une carte, il ne s'etale plus sur la ligne. Mesure le
   30/10 : 253 px a 1 920, 263 a 1 440, 227 a 1 024, 235 a 820 — la largeur des
   cartes produits du site (255 px), et toujours sous les 450 px de la vignette.
   `min(100%, 220px)` evite un debordement si le conteneur tombait sous 220. */
.m-product__conseilsListe {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 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;
}

/* LE CHAPO S'ARRETE A TROIS LIGNES : sur une carte de 300 px, un chapo long
   faisait a lui seul la hauteur de la carte et desalignait la ligne. */
.m-product__conseilTexte {
    -webkit-box-orient: vertical;
    color: #5B6B7A;
    display: -webkit-box;
    font-size: 14px;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    line-height: 1.45;
    margin: 0 0 14px;
    overflow: hidden;
}

.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;
}

/* --- 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;
    }
}