@charset "UTF-8";

* {
     box-sizing: border-box;
}

html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}td:not([align]),th:not([align]){text-align:left}

html,body {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.4;
	margin: 0;
	padding: 0;
	height:100%;
}

a {
	color: inherit;
	text-decoration:none;
}

/* VARIABLE */ 

:root{
	--orange:#ea5906;
	--bleu1:#42b1db;
	--bleu2:#2d7f9c;
	--bleuf:#2a2f3f;
	--gris1:#cfd0d0;
	--grisc:#e8e8e8;

	--TPM:#E4AA39;
	--AOTC:#A20C19;
	--TCW:#FDBD17;
	--TBB:#7C0D2A;
	--SWR:#72378C;
	--RO:#7da89a;
	--ANH:#cc5a35;
	--ESB:#0067B2;
	--ROTJ:#3DA031;	
	--TM:#BB6B27;
	--TBOBF:#565924;
	--TROS:#00B3EC;
	--GG:#277FA3;
	--OWK:#4293d0;
	--CA:#cc251e;
}

/* HEADER */



/* ---------------------------------------------- HEADER -------------------------------------------------  */

.sous-menu-tel{
	width: 100%;
	background-color: var(--bleuf);
	height: 25px;
	color: #fff;
	text-align: center;
	font-size: 0.9em;
	line-height: 1.8em;
	letter-spacing: 2px;
	font-weight: 600;
}
.sous-menu-ordi{
	display:none;
}

/* ----------------------------------------------- PRESENTATION ---------------------------------------------------  */


.presentation{
	width: 100%;
	/*background-color: var(--bleu2);*/
	margin-top: 25px;
	text-align:center;
}
.bandeaux{
	width: 96%;
	margin-left: 2%;
}
.texte {
	/*background-color: var(--bleu1);*/
	margin: 5px;
}
.texte h2 {
	color: var(--orange);
	font-size: 1.3em;
	line-height: 1.3em;
	font-weight: 700;
	margin-top: 15px;
}
.texte h3 {
	color: var(--bleuf);
	font-size: 1.2em;
	line-height: 1.2em;
	font-weight: 700;
}

.light{
	font-weight: 400;
}
.pouces {
	color: var(--bleu1);
}
.texte p {
	color: var(--bleuf);
	font-size: 0.8em;
	line-height: 1.3em;
	font-weight: 400;
	padding: 20px;
}
.liste {
	/*background-color: var(--bleu1);*/
	margin: 0px;
	margin-top: 25px;
}
.jaquette {
	width: 70%;
	margin: 0 auto;
}
.liste h2 {
	color: var(--bleuf);
	margin: 15px;
	font-size: 0.9em;
	line-height: 1.4em;
	font-weight: 400;
	text-align: center;
}
.liste h2:before {
	content:'';
	display: block;
	height: 1px;
	margin: 10px;
	background-color:var(--bleuf);
}
.liste h2:after {
	content:'';
	display: block;
	height: 1px;
	margin: 10px;
	background-color:var(--bleuf);
}

.nombre, .nombre-1 {
	width: 80px;
	background-color:var(--bleuf);
	padding: 5px 0px;
	margin: 0 auto;
	margin-top: 7px;
}
.nombre h3, .nombre-1 h3 {
	color: #FFF;
	font-size: 1em;
	line-height: 1.2em;
	font-weight: 600;
	text-align: center;
}


/* --------------------------------------------- COLOR-BOX ---------------------------------------------------  */

#the-phantom-menace {
	background-color:var(--TPM);
}
#the-phantom-menace-t h2 {
	width: 100%;
	height: 80%;
	margin-top: 10px;
	padding-top: 10px;
}

#attack-of-the-clone {
	background-color:var(--AOTC);
}
#attack-of-the-clone-t h2 {
	width: 100%;
	height: 80%;
	margin-top: 10px;
	padding-top: 10px;
}

#the-clone-wars {
	background-color:var(--TCW);
}
#the-clone-wars-t h2 {
	width: 100%;
	height: 80%;
	margin-top: 10px;
	padding-top: 10px;
}

#the-bad-batch {
	background-color:var(--TBB);
}
#the-bad-batch-t h2 {
	width: 100%;
	height: 80%;
	margin-top: 10px;
	padding-top: 10px;
}

#star-wars-rebels {
	background-color:var(--SWR);
}
#star-wars-rebels-t h2 {
	width: 100%;
	height: 80%;
	margin-top: 10px;
	padding-top: 10px;
}

#obi-wan-kenobi {
	background-color:var(--OWK);
}
#obi-wan-kenobi-t h2 {
	width: 100%;
	height: 80%;
	margin-top: 10px;
	padding-top: 10px;
}

#andor {
	background-color:var(--CA);
}
#andor-t h2 {
	width: 100%;
	height: 80%;
	margin-top: 10px;
	padding-top: 10px;
}

#rogue-one {
	background-color:var(--RO);
}
#rogue-one-t h2 {
	width: 100%;
	height: 80%;
	margin-top: 10px;
	padding-top: 10px;
}

#a-new-hope {
	background-color:var(--ANH);
}
#a-new-hope-t h2{
	width: 100%;
	height: 80%;
	margin-top: 10px;
	padding-top: 10px;
}

#the-empire-strikes-back {
	background-color:var(--ESB);
}
#the-empire-strikes-back-t h2 {
	width: 100%;
	height: 80%;
	margin-top: 10px;
	padding-top: 10px;
}

#return-of-the-jedi {
	background-color:var(--ROTJ);
}
#return-of-the-jedi-t h2 {
	width: 100%;
	height: 80%;
	margin-top: 10px;
	padding-top: 10px;
}

#the-mandalorian {
	background-color:var(--TM);
}
#the-mandalorian-t h2 {
	width: 100%;
	height: 80%;
	margin-top: 10px;
	padding-top: 10px;
}

#the-book-of-boba-fett {
	background-color:var(--TBOBF);
}
#the-book-of-boba-fett-t h2 {
	width: 100%;
	height: 80%;
	margin-top: 10px;
	padding-top: 10px;
}

#the-rise-of-skywalker {
	background-color:var(--TROS);
}
#the-rise-of-skywalker-t h2 {
	width: 100%;
	height: 80%;
	margin-top: 10px;
	padding-top: 10px;
}

#gaming-greats {
	background-color:var(--GG);
}
#gaming-greats-t h2 {
	width: 100%;
	height: 80%;	
	margin-top: 10px;
	padding-top: 10px;
}


/* ------------------------------------------------- PAGE ACCUEIL TBS ---------------------------------------------------  */

.CollorBox {
	width: 90%;
	margin-left: 5%;
	margin-top: 20px;
	margin-bottom: 40px;
	/*background-color: #00B3EC;*/
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-column-gap: 3%;
}
.cartouche  {
	width: 100%;
	margin-bottom: 15px;
}
.cartouche img  {
	width: 100%;
}
.cartouche:hover  {
	transform:scale(1.13)
}
.cartouche a  {
	display: block;
	width: 100%;
	text-align: center;
}
.nombre-t {
	width: 100%;
	background-color:var(--bleuf);
	padding: 5px 0px;
	margin: 0 auto;
}
.nombre-t h3 {
	color: #FFF;
	font-size: 0.6em;
	line-height: 0.5em;
	font-weight: 600;
}

/* ------------------------------------------------- PAGE SEGMENTS TBS ---------------------------------------------------  */

.CollorBoxThemes {
	width: 96%;
	margin-left: 2%;
	margin-top: 10px;
	margin-bottom: 10px;
	/*background-color: #00B3EC;*/
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-column-gap: 3%;
	padding-left: 3%;
	padding-right: 3%;
	padding-top: 10px;
}
.cartouche-themes  {
	width: 100%;
	margin-bottom: 15px;
}
.cartouche-themes  img  {
	width: 100%;
	/*border: solid 2px #fff;*/
}
.cartouche-themes:hover  {
	transform:scale(1.10);
}
.cartouche-themes-active  {
	transform:scale(1.10);
}
.cartouche-themes-active  img  {
	width: 100%;
	/*border: solid 2px #fff;*/
}

.CollorBoxThemes h2 {
	color: var(--bleuf);
	font-weight: 700;
	padding-bottom: 15px;
	font-size: 1.6em;
	grid-column: span 6;
	text-align: center;
	background-color:rgba(37,45,61,0.1);
}

/* ---------------------------------------------------  COLLECTION  --------------------------------------------------------- */
	
.pas-encore {
	background-color:var(--gris1);
	margin: 20px 10px 50px 10px;
	text-align:center;
	padding: 30px 0px;
}
.pas-encore h2 {
	color: var(--bleuf);
	font-size: 0.9em;
	line-height: 1em;
	font-weight: 600;
}
.fond-1 {
	background-color:var(--gris1);
	margin: 20px 10px 20px 10px;
	display: grid;
	grid-template-columns: 100px 100px 100px;
	justify-content: center;
	grid-column-gap: 20px;
	padding-top: 20px;
}
.cadre-simple {
	/*background-color:var(--bleu1);*/
	width: 100px;
	display: flex;
	flex-direction: column;
	text-align:center;
	margin-bottom: 20px;
}
.cadre-double, .cadre-double-a  {
	/*background-color:var(--bleu1);*/
	width: 220px;
	grid-column: span 2;
	display: flex;
	flex-direction: column;
	text-align:center;
	margin-bottom: 20px;
}
.cadre-double-a  {
	width: 340px;
}
.cadre-triple {
	/*background-color:var(--bleu1);*/
	width: 340px;
	grid-column: span 3;
	display: flex;
	flex-direction: column;
	text-align:center;
	margin-bottom: 20px;
}
.cadre-simple:after, .cadre-double:after, .cadre-double-a:after, .cadre-triple:after {
	content:'';
	display: block;
	height: 1px;
	margin: 0px;
	background-color:var(--bleuf);
}
.visuel{
	background-color: #FFF;
}
.visuel img{
	width: 100%;
}
.segment-1 {
	background-color:var(--bleu1);
	margin-top: 10px;
	margin-bottom: 5px;
}
.segment-1 p {
	color: #FFF;
	font-size: 0.6em;
	font-weight: 600;
	padding: 0px 0px;
}
.name {
	width: 100%;
	height: 37px;
	padding-bottom: 5px;
	display: table;
}
.cadre-simple h4, .cadre-double h4, .cadre-double-a h4, .cadre-triple h4 {
	text-align:center;
	display: table-cell;
    vertical-align: middle;
	color: var(--bleuf);
	font-size: 0.7em;
	line-height: 1.4em;
	font-weight: 600;
}
.petit {
	font-weight: 400;
}

.sous-dossier, .sous-dossier-1, .sous-dossier-2 {
	width: 100%;
	/*background-color: var(--bleu2);*/
	margin-top: 25px;
	padding: 0px 10px 0px 0px;
	text-align:center;
}
.sous-dossier h2, .sous-dossier-1 h2, .sous-dossier-2 h2 {
	color: var(--bleuf);
	font-size: 1.1em;
	line-height: 1.4em;
	font-weight: 400;
}
.sous-dossier h2:before {
	content:'';
	display: block;
	height: 1px;
	margin: 10px;
	background-color:var(--bleuf);
}
.sous-dossier  h2:after {
	content:'';
	display: block;
	height: 1px;
	margin: 10px;
	background-color:var(--bleuf);
}
.sous-dossier-1 h2:before {
	content:'';
	display: block;
	height: 1px;
	margin: 10px;
	background-color:var(--bleuf);
}
.sous-dossier-1 h2:after {
	content:'';
	display: block;
	height: 1px;
	margin: 10px;
	background-color:var(--bleuf);
}
.sous-dossier-2 h2:before {
	content:'';
	display: block;
	height: 1px;
	margin: 10px;
	background-color:var(--bleu);
}
.sous-dossier-2 h2:after {
	content:'';
	display: block;
	height: 1px;
	margin: 10px;
	background-color:var(--bleu);
}




/* ---------------------------  + 500px  -------------------------------------------------------------------------------  */

@media screen and (min-width: 500px) {
	
/* --------------------------------------------- PRESENTATION ---------------------------------------------------  */



.bandeaux img {
	width: 100%;
}

/* ------------------------------------------------- PAGE ACCUEIL TBS ---------------------------------------------------  */

.nombre-t h3 {
	font-size: 0.7em;
}

/* ---------------------------------------------  COLLECTION  ---------------------------------------------------- */

.fond-1 {
	margin: 30px 10px 20px 10px;
	grid-template-columns: 140px 140px 140px;
	grid-column-gap: 20px;
	padding-top: 30px;
}
.cadre-simple {
	width: 140px;
}
.cadre-double, .cadre-double-a {
	width: 300px;
}
.cadre-triple {
	width: 460px;
}
.sous-dossier {
	margin-top: 70px;
}

/* --------------------------------------------- COLOR-BOX ---------------------------------------------------  */

.sous-dossier-color-box {
	width: 94%;
	height: 35px;
	margin-top: 25px;
	margin-left: 3%;
	border-radius: 15px;
	text-align:center;
}
.sous-dossier-color-box h2 {
	color: #000;
	font-size: 1.3em;
	line-height: 1.7em;
	font-weight: 700;
}

/* ------------------------------------------------- PAGE SEGMENTS TBS ---------------------------------------------------  */

.CollorBoxThemes h2 {
	font-size: 2em;
}

}

/* -----------------------  + 600px  -------------------------------------------------------------------------------  */

@media screen and (min-width: 600px) {

/* ----------------------------------------------  PRESENTATION  ----------------------------------------------------- */

.jaquette {
	width: 55%;
	margin: 0 auto;
}

/* ------------------------------------------------  COLLECTION  -------------------------------------------------- */
	
.fond-1 {
	margin: 30px 10px 20px 10px;
	grid-template-columns: 160px 160px 160px;
	grid-column-gap: 20px;
	padding-top: 30px;
}
.cadre-simple {
	width: 160px;
}
.cadre-double {
	width: 340px;
}
.cadre-triple {
	width: 520px;
}

}

/* --------------------------  + 700px  -------------------------------------------------------------------------------  */

@media screen and (min-width: 700px) {
	
/* ------------------------------------------------ SOUS MENU ---------------------------------------------------  */

.sous-menu-tel{
	display:none;
}
.sous-menu-ordi li:nth-child(1){
	background-color: var(--bleu1);
	color: var(--bleuf);
	font-weight: 600;
}

/* ----------------------------------------------- PRESENTATION ---------------------------------------------------  */


.jaquette {
	width: 50%;
	margin: 0 auto;
}

/* --------------------------------------------- COLOR-BOX ---------------------------------------------------  */


#the-phantom-menace-t h2 {
	padding-top: 0px;
}
#attack-of-the-clone-t h2 {
	padding-top: 0px;
}
#the-clone-wars-t h2 {
	padding-top: 0px;
}
#the-bad-batch-t h2 {
	padding-top: 0px;
}
#star-wars-rebels-t h2 {
	padding-top: 0px;
}
#obi-wan-kenobi-t h2 {
	padding-top: 0px;
}
#andor-t h2 {
	padding-top: 0px;
}
#rogue-one-t h2 {
	padding-top: 0px;
}
#a-new-hope-t h2{
	padding-top: 5px;
}
#the-empire-strikes-back-t h2 {
	padding-top: 5px;
}
#return-of-the-jedi-t h2 {
	padding-top: 5px;
}
#the-mandalorian-t h2 {
	padding-top: 5px;
}
#the-book-of-boba-fett-t h2 {
	padding-top: 5px;
}
#the-rise-of-skywalker-t h2 {
	padding-top: 5px;
}
#gaming-greats-t h2 {
	padding-top: 5px;
}

/* ------------------------------------------------- PAGE ACCUEIL TBS ---------------------------------------------------  */

.CollorBox {
	width: 94%;
	/*height: 200px;*/
	margin-top: 20px;
	margin-bottom: 40px;
	margin-left: 3%;
	grid-template-columns: repeat(16, 1fr);
	grid-column-gap: 1.5%;
}
.cartouche  {
	width: 100%;
}
.cartouche a  {
	display: block;
	width: 100%;
	text-align: center;
}
.nombre-t h3 {
	font-size: 0.6em;
	line-height: 0.5em;
}

/* ------------------------------------------------- PAGE SEGMENTS TBS ---------------------------------------------------  */

.CollorBoxThemes {
	width: 96%;
	margin-left: 2%;
	margin-top: 10px;
	margin-bottom: 10px;
	grid-template-columns: repeat(16, 1fr);
	grid-column-gap: 1.5%;
	padding-left: 1.5%;
	padding-right: 1.5%;
	padding-top: 20px;
}
.cartouche-themes  {
	margin-bottom: 10px;
}
.CollorBoxThemes h2 {
	padding-bottom: 10px;
	font-size: 1.8em;
	line-height: 1.8em;
	grid-column: span 16;
}
.cartouche-themes-active  {
	transform:scale(1.11);	
}

/* -----------------------------------------------  COLLECTION  ---------------------------------------------------- */
	
.fond-1 {
	margin: 30px 10px 20px 10px;
	grid-template-columns: 150px 150px 150px 150px;
	grid-column-gap: 20px;
	padding-top: 30px;
}
.cadre-simple {
	width: 150px;
}
.cadre-double, .cadre-double-a {
	width: 320px;
}
.cadre-triple {
	width: 490px;
}

}
/* ---------------------------------------------------------------  + 800px  -------------------------------------------------------------------------------  */

@media screen and (min-width: 800px) {


/* ----------------------------------------------  PRESENTATION  ----------------------------------------------------- */

	
.jaquette {
	width: 50%;
	margin: 0 auto;
}	

/* -----------------------------------------------  COLLECTION  ----------------------------------------------------- */
	
.fond-1 {
	margin: 30px 10px 20px 10px;
	grid-template-columns: 160px 160px 160px 160px;
	grid-column-gap: 20px;
	padding-top: 30px;
}
.cadre-simple {
	width: 160px;
}
.cadre-double, .cadre-double-a {
	width: 340px;
}
.cadre-triple {
	width: 520px;
}

}

/* ---------------------------------------------------------------  + 900px  -------------------------------------------------------------------------------  */

@media screen and (min-width: 900px) {
	
.main{
	max-width: 1500px;
	background-color: #FFF;
	margin: 0 auto;
}

/* ----------------------------------------------  PRESENTATION  ----------------------------------------------------- */

.presentation{
	width: 100%;
	/*background-color: var(--gris1);*/
	margin-top: 40px;
	text-align:left;
}
.bandeaux{
	width: 96%;
	margin-left: 2%;
}

.infos{
	/*background-color: var(--grisc);*/
	display: grid;
	grid-template-columns: 1fr 320px;
	margin: 30px 25px 0px 25px;
}

.texte {
	margin: 0px;
	padding-left: 5px;
	/*background-color: var(--bleu1);*/
}
.texte h2 {
	font-size: 2.2em;
	line-height: 0.75em;
	font-weight: 700;
	margin-top: 0px;
}
.light{
	font-weight: 300;
}
.texte h3 {
	color: var(--bleuf);
	font-size: 2.3em;
	line-height: 1.2em;
	font-weight: 600;
	margin-top: 8px;
}
.pouces {
	color: var(--bleu1);
	font-weight: 400;
}
.texte p {
	color: var(--bleuf);
	font-size: 0.75em;
	line-height: 1.5em;
	font-weight: 400;
	padding: 5px 40px 0px 0px;
}
.jaquette {
	background-color: transparent;
}

.jaquette {
	width: 100%;
	margin: 0 auto;
}	
.liste {
	/*background-color: var(--bleu1);*/
	margin: 20px 33px 0px 25px;
	display: grid;
	grid-template-columns: 1fr 100px;
}

.liste h2 {
	color: var(--bleuf);
	font-size: 0.9em;
	line-height: 1em;
	font-weight: 400;
}
.liste h2:before, .liste h2:after {
	content:'';
	display: block;
	height: 1px;
	margin: 10px 10px 10px 0px;
	background-color:var(--bleuf);
}

.important {
	font-size: 1em;
	font-weight: 700;
}
.nombre{
	width: 100px;
	background-color:var(--bleuf);
	padding: 5px 0px;
	margin: 23px 0px 23px 0px;
	text-align:center;
}
.nombre-1 {
	width: 100px;
	background-color:var(--bleuf);
	padding: 5px 0px;
	margin: 9px 0px 9px 0px;
	text-align:center;
}
.nombre h3  {
	color: #FFF;
	font-size: 1.5em;
	line-height: 1.2em;
	font-weight: 400;
}
.nombre-1 h3  {
	color: #FFF;
	font-size: 1.5em;
	line-height: 1.8em;
	font-weight: 400;
}

/* --------------------------------------------- COLOR-BOX ---------------------------------------------------  */

/* ------------------------------------------------- PAGE ACCUEIL TBS ---------------------------------------------------  */

.nombre-t h3 {
	font-size: 0.7em;
	line-height: 0.5em;
}

/* ------------------------------------------------- PAGE SEGMENTS TBS ---------------------------------------------------  */
.CollorBoxThemes h2 {
	font-size: 2em;
	line-height: 2em;
}

/* ------------------------------------------------  COLLECTION  ------------------------------------------------------ */
	
.pas-encore {
	background-color:var(--gris1);
	margin: 20px 10px 50px 10px;
	text-align:center;
	padding: 100px 0px;
}
.pas-encore h2 {
	color: var(--bleuf);
	font-size: 1.2em;
	line-height: 1em;
	font-weight: 600;
}
	
.name {
	width: 100%;
	height: 38px;
	padding-bottom: 5px;
	display: table;
}
	
.fond-1 {
	margin: 30px 10px 20px 10px;
	grid-template-columns: 190px 190px 190px 190px;
	grid-column-gap: 20px;
	padding-top: 30px;
}
.cadre-simple {
	width: 190px;
}
.cadre-double, .cadre-double-a  {
	width: 400px;
}
.cadre-triple {
	width: 610px;
}
.cadre-simple h4, .cadre-double h4, .cadre-double-a h4, .cadre-triple h4 {
	text-align:center;
	display: table-cell;
    vertical-align: middle;
	color: var(--bleuf);
	font-size: 0.7em;
	line-height: 1.4em;
	font-weight: 600;
}

.sous-dossier, .sous-dossier-2  {
	padding: 0px 18px 0px 10px;
	/*background-color: var(--gris1);*/
	text-align:left;
	display: grid;
	grid-template-columns: 1fr 100px;
	margin-top: 50px;
}

.sous-dossier h2, .sous-dossier-2 h2 {
	color: var(--bleuf);
	font-size: 1.3em;
	line-height: 1.4em;
	font-weight: 400;
	text-align: center;
}
.sous-dossier h2:before {
	content:'';
	display: block;
	height: 1px;
	margin: 10px;
	background-color:var(--bleuf);
}
.sous-dossier h2:after {
	content:'';
	display: block;
	height: 1px;
	margin: 10px;
	background-color:var(--bleuf);
}

.sous-dossier-1 {
	padding: 0px 18px 0px 10px;
	/*background-color: var(--gris1);*/
	text-align:left;
}
.sous-dossier-1 h2 {
	color: var(--bleuf);
	font-size: 1.3em;
	line-height: 1.4em;
	font-weight: 400;
	text-align: center;
}
.sous-dossier-1 h2:before {
	content:'';
	display: block;
	height: 1px;
	margin: 10px;
	background-color:var(--bleuf);
}
.sous-dossier-1 h2:after {
	content:'';
	display: block;
	height: 1px;
	margin: 10px;
	background-color:var(--bleuf);
}
.sous-dossier-2 h2:before {
	content:'';
	display: block;
	height: 1px;
	margin: 10px;
	background-color:var(--bleu);
}
.sous-dossier-2 h2:after {
	content:'';
	display: block;
	height: 1px;
	margin: 10px;
	background-color:var(--bleu);
}


}

/* --------------------------------------------------------------  + 1000px  -------------------------------------------------------------------------------  */

@media screen and (min-width: 1000px) {
	

/* --------------------------------------------------  PRESENTATION  -------------------------------------------------------- */


.texte p {
	font-size: 0.8em;

}	
.texte h3 {
	line-height: 1.1em;
}

/* --------------------------------------------- COLOR-BOX ---------------------------------------------------  */

/* ------------------------------------------------- PAGE ACCUEIL TBS ---------------------------------------------------  */

.nombre-t h3 {
	font-size: 0.75em;
	line-height: 0.5em;
}

/* ------------------------------------------------- PAGE SEGMENTS TBS ---------------------------------------------------  */

.CollorBoxThemes {
	padding-top: 40px;
}
.CollorBoxThemes h2 {
	font-size: 2.5em;
}

/* ---------------------------------------------------  COLLECTION  --------------------------------------------------------- */	

.fond-1 {
	margin: 30px 10px 20px 10px;
	grid-template-columns: 170px 170px 170px 170px 170px;
	grid-column-gap: 20px;
	padding-top: 35px;
}
.cadre-simple {
	width: 170px;
}
.cadre-double, .cadre-double-a {
	width: 360px;
}
.cadre-triple {
	width: 550px;
}
.segment-1 p {
	font-size: 0.65em;
}

/* --------------------------------------------- COLOR-BOX ---------------------------------------------------  */
/*
.cartouche  {
	height: 35px;
}
.cartouche h2 {
	font-size: 3.2em;
	line-height: 1.9em;
}*/

.sous-dossier-color-box {
	width: 98%;
	height: 70px;
	margin-top: 25px;
	margin-left: 1%;
	border-radius: 30px;
	text-align:center;
	opacity: 90%;
}
.sous-dossier-color-box h2 {
	color: #000;
	font-size: 3em;
	line-height: 1.5em;
	font-weight: 700;
}

}


/* --------------------------------------------------------------  + 1100px  -------------------------------------------------------------------------------  */

@media screen and (min-width: 1100px) {
	

/* --------------------------------------------------  PRESENTATION  -------------------------------------------------------- */


.texte p {
	font-size: 0.85em;
}

/* --------------------------------------------- COLOR-BOX ---------------------------------------------------  */

/* ------------------------------------------------- PAGE ACCUEIL TBS ---------------------------------------------------  */

.nombre-t h3 {
	font-size: 0.8em;
	line-height: 0.8em;
}

/* ------------------------------------------------- PAGE SEGMENTS TBS ---------------------------------------------------  */

.CollorBoxThemes h2 {
	font-size: 2.7em;
}
/* ---------------------------------------------------  COLLECTION  --------------------------------------------------------- */
	
.fond-1 {
	margin: 30px 10px 20px 10px;
	grid-template-columns: 200px 200px 200px 200px 200px;
	grid-column-gap: 30px;
	padding-top: 35px;
}
.cadre-simple {
	width: 200px;
	margin-bottom: 30px;
}
.cadre-double, .cadre-double-a {
	width: 430px;
	margin-bottom: 30px;
}
.cadre-triple {
	width: 650px;
	margin-bottom: 30px;
}
.name {
	height: 40px;
}
.cadre-simple h4 {
	font-size: 0.8em;
}

}

/* --------------------------------------------------------------  + 1200px  -------------------------------------------------------------------------------  */

@media screen and (min-width: 1200px) {
	


.infos{
	grid-template-columns: 1fr 350px;
}
.texte h2 {
	font-size: 2.5em;
}
.texte h3 {
	font-size: 2.6em;
	line-height: 1.2em;
}
.texte p {
	font-size: 0.9em;
	line-height: 1.5em;
	padding: 15px 80px 0px 0px;
}	


/* --------------------------------------------- COLOR-BOX ---------------------------------------------------  */


#the-phantom-menace-t h2 {
	padding-top: 0px;
}
#attack-of-the-clone-t h2 {
	padding-top: 0px;
}
#the-clone-wars-t h2 {
	padding-top: 0px;
}
#the-bad-batch-t h2 {
	padding-top: 0px;
}
#star-wars-rebels-t h2 {
	padding-top: 0px;
}
#rogue-one-t h2 {
	padding-top: 0px;
}
#a-new-hope-t h2{
	padding-top: 0px;
}
#the-empire-strikes-back-t h2 {
	padding-top: 0px;
}
#return-of-the-jedi-t h2 {
	padding-top: 0px;
}
#the-mandalorian-t h2 {
	padding-top: 0px;
}
#the-book-of-boba-fett-t h2 {
	padding-top: 0px;
}
#the-rise-of-skywalker-t h2 {
	padding-top: 0px;
}
#gaming-greats-t h2 {
	padding-top: 0px;
}

/* ------------------------------------------------- PAGE ACCUEIL TBS ---------------------------------------------------  */

.nombre-t h3 {
	font-size: 0.9em;
	line-height: 0.9em;
}

/* ------------------------------------------------- PAGE SEGMENTS TBS ---------------------------------------------------  */

.CollorBoxThemes h2 {
	font-size: 3em;
}

/* --------------------------------------------------------------  + 1300px  -------------------------------------------------------------------------------  */

@media screen and (min-width: 1300px) {
	

.infos{
	grid-template-columns: 1fr 380px;
}
.texte h2 {
	font-size: 2.7em;
}
.texte h3 {
	font-size: 2.8em;
}
.texte p {
	font-size: 1em;
}	
.liste h2 {
	font-size: 1em;
}

/* --------------------------------------------- COLOR-BOX ---------------------------------------------------  */

/* ------------------------------------------------- PAGE ACCUEIL TBS ---------------------------------------------------  */

.nombre-t h3 {
	font-size: 0.9em;
	line-height: 0.9em;
}

/* ------------------------------------------------- PAGE SEGMENTS TBS ---------------------------------------------------  */
.CollorBoxThemes h2 {
	font-size: 3.3em;
}

/* ---------------------------------------------  COLLECTION  -----------------------------------------------------  */

.fond-1 {
	margin: 30px 10px 20px 10px;
	grid-template-columns: 220px 220px 220px 220px 220px;
	grid-column-gap: 30px;
	padding-top: 35px;
}
.cadre-simple {
	width: 220px;
	margin-bottom: 30px;
}
.cadre-double, .cadre-double-a {
	width: 470px;
	margin-bottom: 30px;
}
.cadre-triple {
	width: 720px;
	margin-bottom: 30px;
}	

}


/* --------------------------------------------------------------  + 1400px  -------------------------------------------------------------------------------  */

@media screen and (min-width: 1400px) {
	

.infos{
	grid-template-columns: 1fr 420px;
}
.texte h2 {
	font-size: 3em;
}
.texte h3 {
	font-size: 3em;
}
.texte p {
	font-size: 1.1em;
	line-height: 1.6em;
}	

/* --------------------------------------------- COLOR-BOX ---------------------------------------------------  */

/* ------------------------------------------------- PAGE ACCUEIL TBS ---------------------------------------------------  */

.nombre-t h3 {
	font-size: 0.9em;
	line-height: 0.9em;
}

/* ------------------------------------------------- PAGE SEGMENTS TBS ---------------------------------------------------  */

/* ---------------------------------------------  COLLECTION  -----------------------------------------------------  */

.fond-1 {
	margin: 30px 10px 20px 10px;
	grid-template-columns: 200px 200px 200px 200px 200px 200px;
	grid-column-gap: 30px;
	padding-top: 35px;
}
.cadre-simple {
	width: 200px;
	margin-bottom: 30px;
}
.cadre-double, .cadre-double-a  {
	width: 435px;
	margin-bottom: 30px;
}
.cadre-triple {
	width: 650px;
	margin-bottom: 30px;
}	

.segment-1 p {
	font-size: 0.7em;
}

}

}