/* regle: mobile first */
:root {
--col1: #100716; /*mauve fonce*/
--col2: #3D264C; /*mauve moyen*/
}

select:focus-visible,textarea:focus-visible,input:focus-visible{outline:none;}

body{background:#510;color:#ddd;font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:14pt;margin:0;}
div,section,article{position:relative;}
img{max-width:100%;}
svg{display:block;margin:auto;}
a{text-decoration:none;color:#ddd}
a:hover{color:#fff}
header{position:fixed;left:0;top:0;padding:.4em;width:calc(100% - .8em);z-index:7;transition:background .3s linear}
.section{min-height:100vh;}
.btn{background:var(--col1);width:100px;margin:auto;padding-top:1em;border-radius:3px;cursor:pointer}
.btn:hover{background:hsl(208,50%,20%);}

/* precis discussion */

.discu_main{
width:calc(100vw - 1em);
height:calc(80vh - 2em);
padding:1em .5em;
}

.discu_article{
margin-bottom:.4em;
background:#282828;
padding:.3em;
}

.discu_date{
color:#597;
margin-bottom:.3em;
}

.discu_msg{
background:#181818;
color:#777;
padding:.6em;
}

.discu_msg_vieux{
color:#fb8;
}

.discu_text_input{
width:calc(100vw - 8em);
height:calc(20vh - 2.5em);
padding:1em 2em;
border:0;
border-radius:3em;
color:#ddd;
background:#222227;
resize:none;
font-size:13pt;
}

/* precis index - mobile first */

.div_img{width:80%;margin:0 auto;}
.div_img img{border-radius:1em;box-shadow:0 0 4px 1px #999;}

.index_article{width:100%;margin:0 0 2em 0;background-color:#212121;border-radius:7px;box-shadow:1px 4px 4px 0 #333;padding:1.4em 0;}
.index_article h3{font-size:20px;margin:0;color:#b4d;text-align:center;}
.index_article_details{padding:1.2em 2em 0 2em;}
.btn_panier{display:block;width:14em;margin:0 auto;padding:.5em 0 .45em 0;border:none;border-radius:5px;background:#93b;color:#f2f2f2;text-align:center;font-size:17px;cursor:pointer;}
.btn_panier:hover{background-color:#90b;}
._contain_width{max-width:95%;margin:auto;}

/* apres précis: generic*/

.pa_lt_100100{position:absolute;left:0;top:0;width:100%;height:100%;}
.pa_l0b0{position:absolute;left:0;bottom:0;}
.table{display:table;}
.flex, .full_center{display:flex;flex-wrap:wrap;}
.flexspace{justify-content:space-between;}
.flexspace_ptet{justify-content:space-evenly;}
.flex_end{justify-content:end;}
.flex_vertical{flex-direction:column;}
.nowrap{flex-wrap:nowrap;}
.minh100p{min-height:100%;}
.pt50vh_p_60{padding-top:calc(50vh + 6em)}
.py2{padding-top:.2em; padding-bottom:.2em;}
.py20{padding-top:2em; padding-bottom:2em;}
.px5{padding-left:.5em;padding-right:.5em;}
.pt10{padding-top:1em;}
.pt60{padding-top:6em;}
.pt150{padding-top:15em;}
.pb10{padding-bottom:1em;}
.pb40{padding-bottom:4em;}
.pd10{padding:1em;}
.ma{margin:0 auto}
.ml8{margin-left:.8em;}
.force_ma{display:block;}
.full_center{justify-content:center;align-items:center}
.flex_y_center{align-items:center;}
.minh40v{min-height:40vh;}
.minh60v{min-height:60vh;}
.minh90v{min-height:90vh;}
.tac{text-align:center}
.mr8{margin-right:.8em}
.mr10{margin-right:1em}
.mb20{margin-bottom:2em}
.my8{margin-top:1.1em;margin-bottom:1.5em;}
.hide{display:none;}
.sh1{box-shadow:0 0 0 1px #f80 inset}
.shado2{box-shadow:0 0 0 3px #8406 inset}
.mx_w90{max-width:9em;}
.w20vw_mw30{width:20vw;max-width:3em;}

.fill_c2{fill:var(--col2)}

.back_opa{background:#0008}
.back_transpa{background:none}

/*mobile*/

._9_show_hide{display:none;}

/*precis*/

.fs10{font-size:10pt;}
.fs16{font-size:16pt;}
.fs18{font-size:18pt;}
.fs28{font-size:28pt;}
.fs42{font-size:42pt;}
.cddd{color:#ddd;}
.text_blue{color:#08f;}
.back0{background:#001828 url("../ress_imgs/cosmic_doppelgangers_space_wallpaper_2Nu8xWHcpgLpds5UaKCq8R.jpg") no-repeat center center/cover;}
.back1{background:#aaa}
.back2{background:var(--col1)}
.back_n{background:#181818;}
.text1{color:#111;line-height:1.9;}
.text2{color:#fff;line-height:1.9;}
.w33{width:33%}
.w45{width:45%}
.w10{width:10%}
.icon_pd{padding-right:2em;padding-top:1.2em;}

/*pc*/
@media(min-width:1000px){

._9_show_hide{display:block;}
._contain_width{max-width:1200px;}
.index_article{width:31%;margin:0 1% 2em 1%;}

}

/* important */
header.transpa{ background: #0000; }

