/*COMMUN*/
.wrapper-tonies .only-mobile{display: none;}
.wrapper-tonies {font-size: 16px;overflow-wrap: break-word;}
.wrapper-tonies  .clic{position: absolute;height: 100%;width: 100%;top: 0;display: block;background-color: transparent;z-index: 1;}
.wrapper-tonies .accueil{background: #d10c1b;position: relative;    display: flex; justify-content: space-between; width: 100%; margin-bottom: 30px;}
.wrapper-tonies  .cta{padding: 13px 35px;display: table;  width: fit-content;  margin:20px auto;  font-weight: 600;color: #fff; background-color: #d10c1b;border-radius: 10px;}
.wrapper-tonies .back {background-color: #f9d2c1;padding:20px 0;}
.wrapper-tonies h2{font-weight: 700;font-size: 45px;color: #d10c1b;text-align: center;}
.wrapper-tonies h3{font-size: 28px;text-align: center;}
.wrapper-tonies .intro{text-align: center;padding: 10px;}
.wrapper-tonies .intro h3{ width: 55ch;margin:auto;}
.wrapper-tonies .block-picto ul{display: flex;justify-content: center;margin:40px auto;}
.wrapper-tonies .block-picto ul li {margin: 0 30px;}
.wrapper-tonies .block-picto ul li p{width: 20ch;text-align: center;margin: 10px auto 0;}
.wrapper-tonies ::-webkit-scrollbar-thumb { background: #d10c1b; border-radius: 10px;}
.wrapper-tonies ::-webkit-scrollbar-track { border-radius: 10px;   box-shadow: inset 0 0 5px rgb(206, 205, 205);}
.wrapper-tonies .overflow-slide::-webkit-scrollbar-thumb:hover { background: #f9d2c18c; }
.wrapper-tonies  .products{display: flex;justify-content: center;width: fit-content; align-items: stretch; margin:40px auto 30px;}
.wrapper-tonies  .product{flex: 1; margin: 0 10px;position: relative;justify-content: space-between;align-items: stretch;display: flex;flex-direction: column;    text-align: center;font-weight: 600;border: 3px solid #f9d2c1;border-radius: 23px ; overflow: hidden;}
.wrapper-tonies  .products .product .text{padding:10px;width: 25ch;}
.wrapper-tonies .overflow-slide {width: 100%;overflow: auto; padding: 0 0 20px; margin: auto;}

/*HEADER*/
.wrapper-tonies .accueil .title{
 position: absolute;    z-index: 1;  transform: translate(-50%, -50%);
 top: 50%;  left: 50%; text-align: center; color: #fff; background: #d10c1b; padding: 10px;}
.wrapper-tonies .accueil .title img{max-width: 310px;}

/*NAVIGATION*/
.wrapper-tonies .main-nav__topic{position: relative;}
.wrapper-tonies .main-nav__topic .red-nav{display: flex; justify-content: center;}
.wrapper-tonies .main-nav__topic p.title{font-weight: 600; color: #d10c1b; margin: 10px auto; line-height: 20px; font-size: 19px;}
.wrapper-tonies .main-nav__topic .red-nav li .square {margin: auto;height:190px;width: 190px;border-radius:23px;background: white;display: flex;align-items: center;justify-content: center;border: 5px solid #f9d2c1;    overflow: hidden;}
.wrapper-tonies .main-nav__topic .red-nav li{text-align: center;    margin: 0 20px}
.wrapper-tonies .main-nav__topic .red-nav li a.active, 
.wrapper-tonies .main-nav__topic .red-nav li a.active .square, 
.wrapper-tonies .main-nav__topic .red-nav li:hover a .square{border:5px solid #f9d2c1;background-color: #f9d2c1;}
.wrapper-tonies .main-nav__topic  p.small {max-width: 22ch;font-size: 12px;color: #383838;}

/*DESCRIPTION*/
.wrapper-tonies .description {margin-top: 4rem;} 
.wrapper-tonies .description .bloc1{display: flex; margin-top: 4em;  justify-content: center;margin: 4rem 0;}
.wrapper-tonies .description .bloc1 .desc{display: flex;
flex-direction: column;background: #f9d2c1;     padding: 32px 30px;margin-left: 20px;width: 33%;border-radius: 23px;}
.wrapper-tonies .description .bloc1 ul{margin-top: 10px; list-style : disc;font-size: 16px; margin-left: 25px;}
.wrapper-tonies .description .bloc1 ul li{ margin-bottom: 7px;}
.wrapper-tonies .description .bloc1 .desc p{font-size: 18px;}
.wrapper-tonies .description .bloc1 video{border-radius: 23px; width: 100%;
}
.wrapper-tonies .description .bloc1 .cta{margin:0}

/*BLOC TONIE 2*/
.wrapper-tonies .tonieb2 .grid{display: flex;width: 80%; align-items: center;justify-content: center;  margin: auto;}
.wrapper-tonies .tonieb2 .grid ul li{text-align: center;margin-bottom: 20px;}
.wrapper-tonies .tonieb2 .grid ul li p {margin-top: 10px; text-align: center;line-height: 20px;}
.wrapper-tonies .tonieb2 .t2-product{display: flex;margin-bottom: 60px;}
.wrapper-tonies .tonieb2 .legend{margin-left: 3%;font-weight: bold;}
.wrapper-tonies .tonieb2 .t2-product .cta{margin: 10px 0 0 0;}
.wrapper-tonies .tonieb2 .hotspot { display:block; outline:2px dashed transparent; }
.wrapper-tonies .tonieb2 .hotspot:focus,
.wrapper-tonies .tonieb2 .hotspot:hover { outline-color:#888; }
.wrapper-tonies .tonieb2 .product.red-prod {background: #d10c1b;border-radius: 23px;color: #fff;display: flex;align-items: center;justify-content: center;font-size: 45px;font-weight: 500;line-height: 56px;border: none;}
.wrapper-tonies .tonieb2 .t2-product3 .products .product{    width: 420px;
    height: 508px;}
.wrapper-tonies .tonieb2 .t2-product3 .text{margin:auto;}
.wrapper-tonies .tonieb2 .t2-product3 .product.red-prod{font-weight: 700;}
.wrapper-tonies .tonieb2 .t2-product3 .product.red-prod img{ margin-left: 185px; margin-top: 34px;}
.wrapper-tonies .tonies  .t2-product4{margin: 60px 0;}

 /*BLOC TONIES*/
.wrapper-tonies .tonies .back{margin: 40px 0;}

/*BLOC TONIEPLAY*/
.wrapper-tonies .tonieplay {margin: 40px auto;}
.wrapper-tonies .tonieplay .back{margin: 40px 0;}

.wrapper-tonies .red-square .product{     width: 354px;height:170px;flex: none;background: #d10c1b;color: #fff; font-size: 30px;font-weight: 500;line-height: 56px;border: none;}
.wrapper-tonies .products.red-square .product .text{width: auto;}
.wrapper-tonies .products.red-square .product {justify-content: center;}
.wrapper-tonies .red-square .product p{line-height: 33Px;}
.wrapper-tonies .red-square .product:hover{background-color:#f9d2c1;}

/*BLOC TOUT PETIT*/
.wrapper-tonies .toutpetits .bloc1 .img > img{border-radius:23px}

@media screen and (max-width: 1290px){
.wrapper-tonies .overflow-slide {width: 100%;overflow: auto;}
.wrapper-tonies .products { width: max-content;}
}

@media screen and (max-width: 1025px){
.wrapper-tonies .accueil{height: 130Px;}
.wrapper-tonies .accueil .img {display: none;}
.wrapper-tonies .intro h3,
.wrapper-tonies .block-picto ul li p {width: auto;}
.wrapper-tonies .description .bloc1 .desc{border-radius: 0;width: 100%;
 margin-left: 0;}
.wrapper-tonies .description .bloc1{flex-direction: column;margin: 2rem 0;}
.wrapper-tonies .tonieb2 .back{background:#fff;padding-bottom: 0;}
.wrapper-tonies .tonieb2 .back .grid{flex-direction: column;        background: #f9d2c1;width: 100%;padding-bottom: 20px;}
.wrapper-tonies .tonieb2 .back .grid ul{display: flex;flex-direction: row;
 justify-content: space-around;order: 2;}
.wrapper-tonies .tonieb2 .back .grid ul .img{order: 1;}
.wrapper-tonies .tonieb2 .grid ul li,
.wrapper-tonies .block-picto ul li { width: 28%;margin: 0px 10px;}
.wrapper-tonies .block-picto ul li p,
.wrapper-tonies .tonieb2 .grid ul li p{font-size: 13px;line-height: 14px;}
.wrapper-tonies .toutpetits .bloc1 .img > img { border-radius: 0;    margin: auto; display: block;}
.wrapper-tonies .main-nav__topic {width: 100%;overflow: auto;   padding-bottom: 16px;}
.wrapper-tonies .main-nav__topic .red-nav {justify-content: flex-start;}
.wrapper-tonies .description .bloc1 video { border-radius: 0;width: 100%;
 height: 100%;}
}

@media screen and (max-width: 768px){
.wrapper-tonies h2 {font-size: 35px;line-height: 38px;}
.wrapper-tonies h3 {font-size: 20px;}
.wrapper-tonies .main-nav__topic .red-nav li .square { margin: auto; height: 150px; width: 150px; }
.wrapper-tonies .tonieb2 .t2-product { flex-direction: column;}
.wrapper-tonies .tonieb2 .legend {text-align: center;}
.wrapper-tonies .tonieb2 .legend .cta {margin: 10px auto 0;}
.wrapper-tonies .red-square .product {width: 220px;}
.wrapper-tonies .tonieb2 .t2-product3 .products .product {width: 280px;
height: 365px;}
.wrapper-tonies .tonieb2 .product.red-prod {font-size: 37px;     line-height: 51px;}
}