/* ne pas supprimer cette ligne qui permet d'eviter une erreur 404 */

:root {
    --primary: #c6d44f;
    --darkerprimary:#94a500;
    --secondary:#e5366b;
    --tertiary:#f3c13a;
    --white: #fff;
    --info:#ede6e3;
    --bordercreme:#ccc3c0;
    --grey:#777;
    --lightergrey:#999;
    --brown:#53443d;

    --bg-secondaryQuarter: rgba(229,54,107,0.25);
    --bg-cremeHalf: rgba(237,230,227,0.5);
    --bg-greenQuarter:rgb(198, 212, 79, 0.2);
    --bg-greenHalf:rgb(198, 212, 79, 0.5);
}

/**** 
SOMMAIRE

1. FLEXBOX UTILISATION + PRECAUTION
2. DIY CAROUSEL DANS FICHES PRODUIT
3. FICHE PRODUIT
    3.0 FICHE PRODUIT ASSETS
        3.0.1 COMPOSITION ROLL
    3.1 FP HUILE ESSENTIELLE  
        3.1.1 CHEMOTYPE, ALLERGENES, ORGANOLEPTIQUE, ANALYSES, CONSERVATION
        3.1.2 USAGES ET CONTRE INDICATIONS
    3.2 FP LIVRES
        3.2.1 SOMMAIRE
        3.2.2 BOX INFORMATIONS COMPLEMENTAIRES LIVRE
        3.2.3 BOX PRECAUTIONS D'EMPLOI LIVRE
    3.3 HUILE DE MASSAGE NEUTRE PRO 
        3.3.1 HdM COMPOSITION  
    3.4 FP ROLL ON MICROKYSTE 

4. BLOC CAUTION PHARMACIENNE  
    4.1 SPECIAL : KITS, SOURCES, ETC 

5. FICHE CONSEIL CMS

00. ASSETS
000. MEDIA QUERIES    
****/



/****** FLEXBOX UTILISATION + PRECAUTION ******/
/** Description, notes... **/
.flex_utilisation {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap:20px;

    margin: 10px 0;
}

    .box__530 {
        max-width:530px
    }

    .box__530pink {
        max-width: 530px;
        padding: 10px;

        border-radius: 8px;
        background-color: var(--bg-secondaryQuarter);
    }

    .utilisation__h2 {
        color: var(--primary);
        font-family: "Open Sans", sans-serif;
        font-weight: 800;
        font-size: 2rem;
    }

    .precaution__h2 {
        color: var(--secondary); 
        font-weight: bold; 
        font-size: 2rem;
        text-align: center; 
        margin: 1em;
    }




/****** DIY CAROUSEL DANS FICHES PRODUIT ******/
/** Description, notes... **/
.carousel__card {
    border: 1px solid var(--bordercreme);
    border-radius: 8px;

    position:relative;

    display: flex;
    flex-direction: column;
}

    .thumbnail-container {
        margin-left: auto;
        margin-right: auto;
    }
        .carousel__card__image {
            width: 175px;
            height: 100%;
        }

    .carousel__card_descrBox {
        padding: 10px;
    }        
        .carousel__card__title {
            margin: 5px 0;

            color: var(--primary);
            text-transform: uppercase; 
            font-weight: bold; 
            font-size: 1.1em;
            text-align: center;
        }
        .carousel__subtitle {
            font-style: italic;
            color: var(--grey); 
            text-transform: none; 
            font-size: 0.9em; 
            font-weight: normal;
        } 
        .carousel__card_text {
            text-align: justify;
        } 

        .carousel__link {
            text-decoration: none;
            font-weight: 600;
            color: var(--primary);
        }
            .carousel__hiddenLink {
                width: 100%; 
                height: 100%;
                
                position: absolute; 
                top: 0; 
                left: 0; 
                z-index: 1;
            } 


        .carousel__controls {
            color: var(--grey);
        }
        .carousel__controls:hover {
            color: var(--darkerprimary);
        }




/****** FICHE PRODUIT ******/
/** Description, notes... **/

.product-short-description > p > i,
.product-short-description > p > em,
.card-body > p > i,
.card-body > p > em {font-style: italic !important;}

.card-body > p > a {
    text-decoration: underline;
}
/* Fixe l'italique sur la description courte du produit*/

/*** FICHE PRODUIT ASSETS***/
/** 3.0.1 COMPOSITION **/
.compo__container {
    display: flex; 
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
    
    margin-bottom: 1em;
}
    .compo__title {
        color: var(--primary);
        font-weight: bold;
        font-size: 1.6em;
        text-align: center;

        margin: 1em;
    }
    .compo__naturelbio {padding: 0; margin: 0; font-weight: 600;}
    .compo__w600 {font-weight: 600;}
    .compo__smallTXT {font-size: 0.8em;}

/** 3.0.2 COMPOSITION **/
.container__utilisationPrecaution {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap:20px;

    margin: 1em 0;
}
    .utilisation__box {
        width: 45%;
    }
        .utilisation__title {
            color: #c6d44f;
            font-weight: bold;
            font-size: 20px;
            line-height: 1.1;
            text-align: center;
            
            margin: 1em;
        }

    .precaution__box {
        width: 45%;
        border-radius: 8px; 
        background-color: rgba(229,54,107,0.25); 
        padding: 10px;
    }
        .precaution__title {
            color: #e5366b;
            font-weight: bold;
            font-size: 20px;
            line-height: 1.1;
            text-align: center;
            
            margin: 1em;            
        }



/*** FP HUILE ESSENTIELLE ***/
/** CHEMOTYPE, ALLERGENES, ORGANOLEPTIQUE, ANALYSES, CONSERVATION **/
.chemotype__title,
.allergenes__title,
.organoleptique__title,
.analysePhy__title,
.conservation__title,
.caraFlacon__title {
    text-align: center;
    font-size: 1.2em;
    font-weight: 600;
    margin: 0;
}

.chemotype__titleBorder,
.allergenes__titleBorder,
.organoleptique__titleBorder,
.analysePhy__titleBorder,
.conservation__titleBorder,
.caraFlacon__Border {
    border-top: 1px solid var(--darkerprimary);
    width: 75%;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

    .chemotypeSource {
        font-size: 0.8em;
        color: var(--grey);
        line-height: 1.1;
        padding-top:1em}

    .chemotypeList,
    .organoleptiqueList,
    .analyseList,
    .caraFlaconList  {
        list-style-type: none;
        padding: 0;
    }

    .allergenesList {
        list-style-type: disc;
        padding-left: 2em;
    }

/** USAGES ET CONTRE INDICATIONS **/
.utilisation__aromatherapie,
.utilisation__cosmetique,
.utilisation__precautions {
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    margin: 0;
    text-transform:
    uppercase;
    margin-bottom: 1rem;}

    .utilisation__aromatherapie {color: var(--darkerprimary)}
    .utilisation__cosmetique {color:var(--tertiary)}
    .utilisation__precautions {color: var(--secondary);}

    .utilisation__voiesRecommandees {text-decoration: underline;}
        .utilisationsList {list-style-type: none; padding-left: 20px;}
            .utilisationsListItem {margin-bottom: 1em;}
                span.utilisation__voie {font-weight: bold; color: var(--darkerprimary);}


/*** FP LIVRES ***/
/** SOMMAIRE **/
.box_sommaireLivre {
    width: 100%;
}
    .sommaireLivre_title {
        text-align: center; 
        color: var(--primary); 
        font-weight: bold; 
        font-size: 1.6em; 
    }
    .sommaireLivre_flexBox {
        display: flex; 
        flex-direction: row; 
        flex-wrap: wrap; 
        justify-content: center; 
        align-items: start; 
        gap: 5px; 
    }
        .sommaireLivre_flexBox__box {
            width: 33%;
        }
            ul.sommaireLivre__listeUL {
                list-style-type: circle;
                padding-left: 2em;    
            }
            ol.sommaireLivre__listeOL,
            ol.caraFlaconVerre__list,
            ol.commonOL {
                list-style-type: decimal;
                padding-left: 2em;
                margin-bottom: 1em;    
            }
            div.sommaireLivre__listeSCROLL {
                height: 200px;
                width: 90%;
                overflow: auto;
                padding: 10px;
            }
            a.sommaireLivre__softURL {
                text-decoration: underline;
            }
                a.sommaireLivre__softURL:hover {
                    text-decoration: underline;
                    color: var(--darkerprimary);
                }
        .sommaireLivre_navigation {
            width: 100%;
            padding: 10px;

            border-bottom: 1px solid var(--bordercreme);
        }

        .sommaireLivre_GuideTV_box {
            max-width: 340px;
            padding-bottom: 5px;
            
            border-radius: 8px;
            border: 1px solid var(--bordercreme);
        }
            .sommaireLivre_GuideTV_title {
                color: var(--tertiary);
                text-align: left;
                text-transform: uppercase;
                margin: 9px 3px;
                font-weight: 700;
            }
            .sommaireLivre_GuideTV_subtitle {
                color: var(--darkerprimary);
                text-align: center;
                text-transform: uppercase;
                margin: 9px 3px;
            }


/** BOX INFORMATIONS COMPLEMENTAIRES LIVRE **/
.box_infoSuppLivre {
    max-width: 500px;
    padding: 10px 10px 10px 40px;

    border: 1px solid var(--bordercreme);
    border-radius: 8px;
    margin: 1em 0em
}
    .infoSuppLivreTitle {
        text-align: center;
        margin-bottom: 0.5em;
    }
    
    .infoSuppLivre_listInfo {
        list-style-type: none !important;
        text-align: left;
    }
        span.infoSuppLivre_listeTitre {
            font-weight: bold; 
            color: var(--darkerprimary);
        }

/** BOX PRECAUTIONS D'EMPLOI LIVRE **/
.precautionsLivre__box {
    width: 80%;
    padding: 10px;
    margin: 1em 0em;

    background-color: var(--bg-secondaryQuarter);
    
    border-radius: 8px;

    text-align: left;
}

.precautionsLivre__title {
    color: var(--secondary); 
    font-weight: bold; 
    font-size: 20px; 
    line-height: 1.1; 
    text-align: center; 
    
    margin: 1em;
}

/*** HUILE DE MASSAGE NEUTRE PRO  ***/
/** HdM COMPOSITION **/
.HdM__compo__title {
    color: var(--primary);
    font-weight: bold;
    font-size: 1.6em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    
    margin: 0.5em;
}

.HdM__compo__container {
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    justify-content: space-around;
    align-items: center;
}
    .HdM__compo__box1 {
        width: 700px;
    }
    .HdM__compo__box2 {
        width: 500px; 
        background: var(--bg-cremeHalf); 
        padding: 1em;
        border-radius: 8px;
    }
        .HdM__compo_box2__list {
            padding-left: 2em;
            list-style: disc;      
        }

.HdM__proprietesHV__container {
    display: flex; 
    flex-wrap: wrap; 
    flex-direction: row; 
    justify-content: space-around; 
    align-items: baseline; 
    gap: 5px;

    margin-top: 2em;
}        
    .HdM__fakeCRSL__HVbox {
        width: 24%;
    }

.HdM__techFlacon__container {
    max-width: 800px;
    border: 1px solid var(--darkerprimary);
    border-radius: 8px;

    text-align: left;

    padding: 0.5em;
    margin-bottom: 1em;
}
    .HdM__techFlacon__title {
        color: var(--darkerprimary);
        text-align: center;
        font-weight: 600;
        font-size: 16px;
    }
    .HdM__techFlacon__subtitle {

        text-align: center;
    }

    .HdM__techFlacon__boxFlex {
        display: flex; 
        flex-direction: row; 
        flex-wrap: wrap; 
        justify-content: left; 
        align-items: center;
    }
        .HdM__techFlacon__innerFlexBox {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-evenly;
            align-items: baseline;
        }
            .HdM__techFlacon__innerBox {
                width: 290px;
            }
                .HdM__techFlacon__innerTitle {
                    padding: 0;
                    margin: 0;
                    
                    text-align: left;
                    font-weight: 600;    
                }
                .HdM__techFlacon__innerLign {
                    border-bottom: 2px solid var(--darkerprimary);
                    width: 85%;
                }
                .HdM__techFlacon__innerList {
                    padding-left: 2em;
                    list-style: disc;
                }


/*** FP ROLL ON MICROKYSTE  ***/
.microkyste__warning {
    max-width: 700px;
    padding: 0;
    margin: 1em;   

    border: 1px solid #e5366b;
}
    .microkyste__warning__titlebox {
        background-color: #e5366b; 
        padding: 1em 2em;
        text-align: center;
    }
        .microkyste__warning__title {
            text-align: center; 
            text-transform: uppercase; 
            color: #fff; 
            font-weight: 600; 
            font-size: 1.25em; 
            line-height: 1.25em; 
            
            padding: 0; 
            margin: 0;        
        }
    .microkyste__warning__txt {
        margin: 1.5em;
        
        text-align: left;
    }

    .precaution__microkystScroll {
        overflow: auto;
        max-height: 300px;
    }

.microkyste__titreNV3 {
    margin-left: 1em; 
    
    color: #94a500; 
    font-size: 16px;
    font-weight: 500;
}
.conseilsbeaute__microkyste {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap:20px;
}
    .conseilsbeaute__hygiene {
        width: 45%;
    }
        .hygiene__Scroll {
            max-height: 200px;
            overflow: auto;

            padding-left: 35px;
        }
    .conseilsbeaute__alimentation {
        width: 45%;
        
        padding: 10px;
        border-radius: 8px;
        border: 1px solid var(--bordercreme);
    }

.microkyste__questions__container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    gap: 20px;

    margin:1em 0;
}
    .microkyste__question__cosmetique {
        width: 45%; 
        padding: 10px;
        
        border: 1px solid #c6d44f;
        border-radius: 8px;
    }
        .microkyste__qstnCOS__title {
            text-align: center; 
            color: #c6d44f; 
            font-size: 24px;
            
            margin: 0.5em;
            padding: 0;
        }
    .microkyste__question__vigilance {
        width: 40%; 
        padding: 10px; 
        margin-top: 1em; 

        background-color: rgba(243,193,58,0.25); 
        border-radius: 8px;        
    }
        .microkyste__vigilance__scroll {
            height: 300px; 
            padding: 10px; 
            overflow: auto;    
        }

/*** BASE NEUTRE ***/
.baseNeutreScroll {
    max-height: 300px;
    overflow: auto;

    padding: 10px;

    border-radius: 8px;
    border: 1px solid var(--primary);
}

.BNcomposition {
    color: var(--primary);
    font-weight: bold;
}


/****** BLOC CAUTION PHARMACIENNE ******/
h2.conseilsPharma__title,
p.conseilsPharma__title {
    color: var(--darkerprimary);
    font-weight: bold;
    font-size: 1.6em;
    text-align: center;
}

.conseilsPharma__subtitle {
    font-style: italic !important;
}

.conseilsPharma__box {
    border-left: 2px solid var(--darkerprimary);
    padding-left: 10px;
    margin: 20px 5px 5px 20px;
}
    .conseilsPharma__boxTitle {
        font-weight: 600; 
        font-size: 1.2em;
    }
        .conseilsPharma__boxSubtitle {
            font-weight: 600; 
            font-size: 1.1em;
            margin-left: 2em;
        }
            .conseilsPharma__green {
                color:var(--darkerprimary)
            }
            .conseilsPharma__pink {
                color:var(--secondary)
            }

        .conseilsPharma__boxList {
            padding-left: 2em;
            list-style-type: disc !important;
        }
            
        .conseilsPharma__box cite {
            font-style: italic !important;
            color:var(--grey)}

a.conseilsPharma__link {
    color: var(--secondary);
    font-weight: 600;
    text-decoration: underline;
}

a.conseilsPharma__link:hover {color: var(--darkerprimary);}

/*** SPECIAL : KITS, SOURCES, ETC ***/
.conseilsPharma__specialTitle {
    text-align: center; 
    color: var(--darkerprimary); 
    font-weight: bold; 
    font-size: 1.6em; 
}

.conseilsPharma__specialFlex {
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    justify-content: center; 
    align-items: center; 
    gap: 5px;

    margin-bottom: 1em;
}
    .conseilsPharma__specialFlexBox2 {
        width: 45%;
    }
        .conseilsPharma__specialImg {
            width: auto;
            
            display: block; 
            margin-left: auto; 
            margin-right: auto;
        }
        .conseilsPharma__btn {
            width: 75%;
            padding: 1rem; 

            display: block;
            background-color: var(--secondary);

            color: var(--white); 
            font-weight: bold; 
            font-size: 1.2em; 
            text-transform: uppercase; 
            text-decoration: none; 
            
            border-radius: 8px; 
        }

        .conseilsPharma__btn:hover {
            color: var(--white); 
            text-decoration: underline; 
        }




/****** FICHE CONSEIL CMS ******/

/*** TABLEAU ***/
table.tableGreen {
    width: 100%;
}
    table.tableGreen thead {
        padding: 10px 0;

        background-color: var(--primary);

        font-size: 1.1em;
        text-align: center;
        font-weight: 600;
    }
    table.tableGreen thead th {
        padding: 10px;
    }
    table.tableGreen tbody tr {
        width: auto;
        padding: 10px 0;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
        table.tableGreen tbody tr:nth-child(odd) {
            background-color: var(--white);
        }
        table.tableGreen tbody tr:nth-child(even) {
            background-color: var(--bg-greenQuarter);
        }
        table.tableGreen tbody tr td {
            padding: 10px;
        }
    table.tableGreen caption {
        font-size: 0.8em !important;
        font-style: italic !important;
        color:var(--lightergrey);
        text-align: right;
    }


/****************************/
/****************************/
/****** ASSETS ******/
/****************************/
/****************************/
.hiddenH2 {
    font-size: 1em !important;
    font-weight: 500 !important;
    font-family: 'Open Sans', Arial, sans-serif !important;
}

.destockage {
    color: var(--secondary);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.3em;
    text-align: center;
}

.destockage-small {
    color: var(--secondary);
    font-weight: 400;
    margin-bottom: 0;
    font-size: 0.8em;
    font-style: italic;
    text-align: right;
}

.common-text li:before {
    content:none;
}

ul.commonUL,
.card-body > ul {
    padding-left:2em;
    list-style:disc
}

ul.spacingUL {
    padding-left:2em;
}

.description_caution a {
    color: var(--secondary);
    font-weight: 600;
    text-decoration: underline !important;    
}

.smallTxT {
    font-size: 0.8em;
    font-style: italic;
    color:var(--lightergrey)
}

.titre_nv2 {
    color: var(--primary);
    font-family: "Open Sans", sans-serif;
    font-size: 1.6em;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
}

.url-produit {
    color: var(--secondary);
    font-weight: 600;
    text-decoration: underline !important;
}
    .url-produit:hover {color: var(--darkerprimary);}

    a.soft-url {
        text-decoration: underline;
    }
        a.soft-url:hover {
            text-decoration: underline;
            color: var(--darkerprimary);
        }

.underTitleBorder {
    border-top: 1px solid var(--primary);
        
    width: 75%;
    margin-top:1rem;
    margin-bottom: 1rem;
}

.btn_obf {
    font-weight: 700;
    text-transform: uppercase;
    background-color: var(--primary) !important;
    font-family: "Open Sans", sans-serif;
}

.btn_obf:hover {
    background-color: #e5366b !important;
}


/*** ELEMENT FAUX CAROUSEL ***/
.fakeCRSL__card {
    border: 1px solid var(--bordercreme);
    border-radius: 8px;

    position:relative;

    display: flex;
    flex-direction: column;
}
    .fakeCRSL__card__descrBox {
        padding: 10px;
    }
        .fakeCRSL__card__title {
            margin: 5px 0;

            color: var(--primary);
            text-transform: uppercase; 
            font-weight: bold; 
            font-size: 1.1em;
            text-align: center;
        }
        .fakeCRSL__card__subtitle {
            font-style: italic;
            color: var(--grey); 
            text-transform: none; 
            font-size: 0.9em; 
            font-weight: normal;
        } 
        .fakeCRSL__card__text {
            text-align: justify;
        } 

        .fakeCRSL__card__link {
            text-decoration: none;
            font-weight: 600;
            color: var(--primary);
        }
            .fakeCRSL__card__hiddenLink {
                width: 100%; 
                height: 100%;
                
                position: absolute; 
                top: 0; 
                left: 0; 
                z-index: 1;
            } 

/*** CMS ARTICLES LIES ACCORDEON ***/
.articles-lies-titre {
    font-size: 1em !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    color: var(--grey) !important;
    
    margin:0;
    padding: 0;
}
    .articles-lies-chevrons {
        color: var(--grey);
    }

.list-articles-lies {
    color:var(--grey) !important;
    margin-bottom: 0;
}
.list-articles-lies > li:before {
    content: "\F0142";
    font-family: Material Design Icons,sans-serif;
    color:var(--darkerprimary);
    margin-left: 1em;
}


.list-articles-lies:hover > a:hover {
    color:var(--secondary);
}

.carteIDtitle {
    font-weight: bold;
    color: var(--darkerprimary);
}
.energieAyurvedaTitle {
    color: var(--brown);
    text-transform: uppercase;
    font-weight: 800 !important;
    text-align: center;

    margin: 0 !important;
    padding: 0 !important;
}

    .energieAyurvedaSUBT {
        color: var(--brown);
        text-transform: lowercase;
        font-weight: 300 !important;
        font-style: italic;
        text-align: center;

        margin: 0 !important;
        padding: 0 !important;
    }


.containerNwslttrRegisterConf {
    display: table;
    height: 400px;
    width: 100%;
    overflow: hidden;
}

    .TxtNwslttrRegisterConf {
        display: table-cell;
        vertical-align: middle;
        font-size: 1.5em;
        text-align: center;
    }

span.uniteFlacon {
    color: var(--secondary);
}


/*** QUIZ ***/
.quiz-box { 
    max-width: 80%;
    margin: auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
}
    .quiz-box h2 {
        color:var(--darkerprimary) !important;
        text-align: center;
    }
    .question-txt { 
        margin-bottom: 20px; 
        font-size: 18px; 
        font-weight: bold; }
    .btnYES, .btnNO {
        padding: 10px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        width: 100px;
        color: white;
    }
  
    .btnYES {
        background-color: var(--primary);
    }
    .btnNO {
        background-color: var(--secondary);
    }
    .btnYES.disabled, .btnNO.disabled {
        background-color: var(--lightergrey);
        cursor: not-allowed;
    }
    .btnYES.selected, .btnNO.selected {
        background-color: var(--grey);
    }

.quiz-box#quiz-type-peau {
    max-width: 80%;
    margin: auto;
    padding: 20px;
    border: none !important;
    text-align: center;
}

.answers-container {
    display: flex;
    gap: 10px;
    justify-content: center;
}
  .btnMULTI {
        padding: 10px;

        border: 1px solid var(--bordercreme) !important;
        border-radius: 5px;

        cursor: pointer;

        background-color: var(--white);
        color: var(--brown);
        
        max-width: 300px;

        transition: background-color 0.3s ease, color 0.3s ease;
    }

        .btnMULTI.disabled {
            background-color: var(--info);
            cursor: not-allowed;
        }
        .btnMULTI.selected {
            background-color: var(--bg-greenHalf);
        }
        .btnMULTI:hover {
            background-color: var(--bg-greenHalf);    
        }

    .btnPREV { 
        padding: 5px;

        border: none;

        cursor: pointer;

        background-color: var(--info);

        font-size: 0.8em;
        font-style: italic;
        color: var(--brown);
    }

    .result-txt {
        margin-top: 20px;
        font-weight: bold;
    }
    .btnRESTART {
        display: none;
        background-color: var(--primary);
        color: var(--white);
        padding: 10px;
        border: none;
        border-radius: 5px; 
        cursor: pointer;
        margin-top: 20px;
    }
    .timer-txt {
        display: none;
        margin-top: 10px;
        font-style: italic;
    }

/****************************/
/****************************/
/****** MEDIA QUERIES ******/
/****************************/
/****************************/

/*TABLETTE < 768px */
@media only screen and (max-width: 768px) {
    .sommaireLivre_flexBox__box,
    .HdM__fakeCRSL__HVbox
    .utilisation__box,
    .precaution__box,
    .conseilsbeaute__hygiene,
    .conseilsbeaute__alimentation {
        width: 45%;
    }

    .quiz-box {
        text-align: center;
    }
    .answers-container {
        display: flex;
        gap: 10px;
        flex-direction: column;
    }

    
}

/* MOBILE > 425px */
@media only screen and (max-width: 425px) {
    .sommaireLivre_flexBox__box,
    .conseilsPharma__specialFlexBox2,
    .HdM__fakeCRSL__HVbox,
    .utilisation__box,
    .precaution__box,
    .conseilsbeaute__hygiene,
    .conseilsbeaute__alimentation {
        width: 100%;
    }
 
    img.responsiveCustom {
        width: 100%;
    }
}