/* TOUJOURS DÉCLARER LA TYPO AU DÉBUT DE LA FEUILLE CSS POUR POUVOIR L'UTILSER */

/* <<<<<<<<<<<<<<<<<< DECLARATIONS DE TYPOGRAPHIES >>>>>>>>>>>>>>>>>>>> */

 @import url('https://fonts.googleapis.com/css2?family=SUSE:wght@100..800&display=swap'); /*code à recopier pour insérer une font en ligne depuis google font*/

@font-face { /*code à recopier pour insérer une font en local*/
    font-family: 'Gotham Book';
    src: url('fonts/Gotham-Book.otf') format('otf'),
         url('fonts/Gotham-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham Light';
    src: url('fonts/Gotham-Light.otf') format('otf'),
         url('fonts/Gotham-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham Medium';
    src: url('fonts/Gotham-Medium.otf') format('otf'),
         url('fonts/Gotham-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham Thin';
    src: url('fonts/Gotham-Thin.otf') format('otf'),
         url('fonts/Gotham-Thin.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'Gotham Ultra';
    src: url('fonts/Gotham-Ultra.otf') format('otf'),
         url('fonts/Gotham-Ultra.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Dazzle Unicase';
    src: url('fonts/Dazzle-Unicase.ttf') format('ttf'),
         url('fonts/Dazzle-Unicase.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* <<<<<<<<<<<<<<<<<< DÉBUT DE LA MISE EN FORME ET DES PARAMÈTRES >>>>>>>>>>>>>>>>>>>> */

		body { 
		background-color: #190c10;
		 }


/************************************ CONGIF DU SITE SUR MOBILE (par défaut) *************************************/

@media (max-width: 768px) {

		/* >>>>>>>>>>>>>>>>> STYLES DE BLOCS DE TEXTES <<<<<<<<<<<<<<<<< */

		.element {
			display: none;
		}	


		h1{ 	/* TITRE DES PROJETS */
			color : #ffffff;
			font-size: 28px;
			font-weight: regular;
			margin: 10px;
			font-family: "Dazzle Unicase", sans-serif;
			text-transform: uppercase;
			white-space: normal;
			word-wrap: break-word
		}


		h2 {  /* TITRE DES VIGNETTES PAGE HOME */
			font-size: 20px;
			font-weight: normal;
			margin-top: 10px;
			margin-bottom: 0px;
			font-family: "Dazzle Unicase", sans-serif;
			color: #D86487;
		}

		h3 { 	/* SOUS-TITRE DU SITE */
			font-size: 12px;
			font-weight: normal;
			margin: 0px;
			margin-top: 0px;
			font-family: "Gotham Medium", sans-serif;
			color: #f1dfdd;
		}


		h4 {
			font-size: 12px;
			font-weight: normal;
			margin-top: 5px;
			font-family: "Gotham Book", sans-serif;
			color: #f1dfdd;
		}

		h6{ 	/* TITRE DU SITE */
			color: #D86487;
			font-size: 25px;
			font-weight: regular;
			margin: 0px;
			margin-bottom: 7px;
			font-family: "Dazzle Unicase", sans-serif;
			text-transform: uppercase;
		}


		p{
			color: white;
			line-height: 1.2;
			font-size: 13px;
			font-family: "Gotham Book", sans-serif;

		}

		header {
			padding: 0.5rem;
			margin-bottom: 30px;
			position: sticky;
 			top: 0;
  			z-index: 1000; /* pour qu’il passe au-dessus du contenu */
  			background: #190c10; /* garder le fond sinon il devient transparent */
    	}

    	.top-row {
	      display: flex;
	      justify-content: space-between;
	      align-items: flex-start;
	     }

	    nav {
	        display: flex;
	        flex-direction: column;
	        align-items: flex-end;
	        gap: 0.2rem;
	        margin-top: 5px;
	    }

	    nav a {
	     	text-decoration: none;
	     	color: white;
	   	}


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

		.a_link{
			text-decoration: underline;
			color: yellowgreen;
		}

		/*  >>>>>>>>>>>>>>> STYLES DE TEXTES <<<<<<<<<<<<<<<<<< */


		.left-aligned {
		    text-align: left;
		}

		.center-aligned {
		    text-align: center;
		}

		.right-aligned {
		    text-align: right;
		}

		.justified {
		    text-align: justify;
		}

		.menu { 
			font-size: 12px;
			font-family: "Gotham Book", sans-serif;
			text-decoration: none;
			color: #f1dfdd;
			flex-direction: row;
       		align-items: flex-start;
		 }

		.website_title { 
			color : #ffffff;
			font-size: 20px;
			font-weight: regular;
			margin: 10px;
			margin-bottom: 5px;
			font-family: "Dazzle Unicase", sans-serif;
			text-transform: uppercase;
			text-align: center;
		 }

		.typing-text {
			color: #d86487;
		    font-size: 22px;
		    font-weight: regular;
		    font-family: "Dazzle Unicase", sans-serif;
		    text-transform: uppercase;
		    display: inline-block;
		    padding-right: 5px;
		    white-space: nowrap;
		    overflow: hidden;
		    text-align: center;
		    margin-left: 50px;
		    margin-bottom: 10px;
		}

		.cursor {
		    animation: blink 0.75s step-end infinite;
		}

		@keyframes blink {
		    50% {
		        opacity: 0;
		    }
		}


		/* >>>>>>>>>>>>>>>>> STYLES DE MEDIAS <<<<<<<<<<<<<<<<< */

		img {
			max-width : 100%;
			max-height: 100%;
			width: auto;
			height: auto;
		}


		video {
			max-width: 100%;
			max-height: 100%;
			width: 100vw;
			height: auto;
		}

		.menu_icon { 
		 	align-items: center; /* Centre verticalement */
		 	justify-content: center; /* Centre horizontalement */
			color: white;
		 }

		 /*  >>>>>>>>>>>>>>> STYLES DES BLOCS <<<<<<<<<<<<<<<< */

		.nav_box {
      		display: flex;
     		gap: 2rem;
     		margin: 10px;
    	}

		.box {
		    display: grid;
		    grid-template-columns: 1fr;
		    border: 0px solid red; /* à retirer une fois que les blocs sont construits*/
		    padding : 10px;
		    gap:10px;
		}

		.about_box{
			display: grid;
			grid-template-columns: 1fr;
			gap: 10px;
			padding: 10px 10px 10px 10px;
			margin : 10px;
		}

		.about_box_bis{
			display: grid;
		    grid-template-columns: 1fr;
		    gap: 10px;
		    padding : 10px 10px 10px 10px;
		    margin : 10px;
		}


		.foot_box{
			display: grid;
			grid-template-columns: 1.5fr 1fr 1fr;
			margin: 10px;
			gap: 10px;
		}


		.nav_pocket {
		    padding: 0px;
		    margin: 0px;
		}

		.pocket {
		    padding: 0px;
		    margin : 0px;
		}

		.about_pocket {
			border: 0px solid grey;
			padding: 10px;
		}


		.foot_pocket{
		    display: flex;
		 	align-items: center; /* Centre verticalement */
		 	justify-content: auto; /* Centre horizontalement */
		}

		.work {
				display: grid;
				grid-template-columns: 1fr;
				padding : 25px;
				padding-top : 10px;
				border: 0px solid red;
				gap : 0px
		}

		.mobiledesc {
				display: grid;
				grid-template-columns: 0.5fr 2fr 1fr 0.5fr;
				border: 0px solid blue;
		}

		.description {
				border: 0px solid blue;
		}

}

/************************************ CONGIF DU SITE SUR ORDINATEUR *************************************/

@media (min-width: 769px) {

		/* >>>>>>>>>>>>>>>>> STYLES DE BLOCS DE TEXTES <<<<<<<<<<<<<<<<< */

		.element_web {
			display: none;
		}

		body { 
		background-color: #190c10;
		 }

		h1{ 	
			color : #ffffff;
			font-size: 50px;
			font-weight: regular;
			margin: 10px;
			padding-bottom: 0px;
			font-family: "Dazzle Unicase", sans-serif;
			text-transform: uppercase;
			white-space: nowrap;
		}

		h6{ 	
			color: #D86487;
			font-size: 30px;
			font-weight: regular;
			margin: 10px;
			margin-bottom: 5px;
			font-family: "Dazzle Unicase", sans-serif;
			text-transform: uppercase;
		}

		h6:hover{ 
			color: #f1dfdd;
			font-size: 30px;
			font-weight: regular;
			margin: 10px;
			margin-bottom: 5px;
			font-family: "Dazzle Unicase", sans-serif;
			text-transform: uppercase;
			text-decoration: none;
		}

		h2 {
			font-size: 20px;
			font-weight: normal;
			margin-top: 10px;
			margin-bottom: 0px;
			margin-left: 0px;
			margin-right: 0px;
			font-family: "Dazzle Unicase", sans-serif;
			color: #D86487;
			white-space: nowrap;
		}

		h3 {
			font-size: 15px;
			font-weight: normal;
			margin: 10px;
			margin-top: 0px;
			font-family: "Gotham Medium", sans-serif;
			color: #f1dfdd;
		}

		h3:hover {
			font-size: 15px;
			font-weight: normal;
			margin: 10px;
			margin-top: 0px;
			font-family: "Gotham Medium", sans-serif;
			color : #D86487;
		}

		h4 {
			font-size: 15px;
			font-weight: normal;
			margin-top: 5px;
			font-family: "Gotham Book", sans-serif;
			color: #f1dfdd;
		}


		p{
			color: white;
			line-height: 1.2;
			font-size: 15px;
			font-family: "Gotham Book", sans-serif;
		}

	    header {
	      padding: 1rem;
	    }

	    .top-row {
	      display: flex;
	      justify-content: space-between;
	      align-items: center;
	    }

	    nav {
	      display: flex;
	      gap: 2rem;
	      margin-right: 15px;
	    }

	    nav a {
	      text-decoration: none;
	      color: white;
	      font-size: 1rem;
	    }


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

		.a_link{
			text-decoration: underline;
			color: yellowgreen;
		}

		/*  >>>>>>>>>>>>>>> STYLES DE TEXTES <<<<<<<<<<<<<<<<<< */


		.left-aligned {
		    text-align: left;
		}

		.center-aligned {
		    text-align: center;
		}

		.right-aligned {
		    text-align: right;
		}

		.justified {
		    text-align: justify;
		}

		.menu { 
			font-size: 15px;
			font-family: "Gotham Book", sans-serif;
			text-decoration: none;
			color: #f1dfdd;
		 }

		.menu:hover {
			font-size: 15px;
			font-family: "Gotham Book", sans-serif;
			color : #D86487;
		}

		.website_title { 
			color : #ffffff;
			font-size: 30px;
			font-weight: regular;
			margin: 10px;
			margin-bottom: 5px;
			font-family: "Dazzle Unicase", sans-serif;
			text-transform: uppercase;
		 }

		.website_title:hover {
			color : #FFFFF0;
			font-size: 30px;
			font-weight: regular;
			margin: 10px;
			margin-bottom: 5px;
			font-family: "Dazzle Unicase", sans-serif;
			text-transform: uppercase;
		}


		.typing-text {
			color: #d86487;
		    font-size: 50px;
		    font-weight: regular;
		    font-family: "Dazzle Unicase", sans-serif;
		    text-transform: uppercase;
		    display: inline-block;
		    padding-right: 5px;
		    white-space: nowrap;
		    overflow: hidden;
		    text-align: center;
		    margin-left: 10px;
		}

		.cursor {
		    animation: blink 0.75s step-end infinite;
		}

		@keyframes blink {
		    50% {
		        opacity: 0;
		    }
		}

		/* >>>>>>>>>>>>>>>>> STYLES DE MEDIAS <<<<<<<<<<<<<<<<< */

		img {
			max-width : 100%;
			max-height: 100%;
			width: auto;
			height: auto;
			margin: 10px;
		}


		video {
			max-width: 100%;
			max-height: 100%;
			width: auto;
			height: auto;
			margin: 10px;
		}

		.menu_icon { 
		 	align-items: center; /* Centre verticalement */
		 	justify-content: center; /* Centre horizontalement */
			color: white;
		 }

		/*  >>>>>>>>>>>>>>> STYLES DES BLOCS <<<<<<<<<<<<<<<< */

			.media-block {
			  display: flex;
			  flex-direction: column;
			  justify-content: flex-start;
			  height: 100%;
			  min-height: 200px; /* Ajuste selon le design */
			  overflow: hidden;
			}

			.nav_box {
				display: grid;
				grid-template-columns: 7fr 14fr 7fr;
				gap: 10px;
				margin: 10px;
				margin-left: 30px;
				min-width: 0;
				}


			.box {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 10px;
				margin: 30px;
				margin-left: 15px;
				min-width: 0;
			}

			.about_box{
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				gap: 30px;
				padding: 0px;
				margin: 0px;
			}

			.about_box_bis{
				display: grid;
			    grid-template-columns: 1fr 2fr; /* Colonnes adaptables */
			    gap: 15px; /* Espacement entre les colonnes */
			    padding : 0px;
			    margin: -20px;
			}


			.foot_box{
				display: grid;
				grid-template-columns: 10fr 12fr 7fr;
				gap: 0px;
				padding: 10px;
			}

			.pocket {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				background-color: #190c10;
				min-width: 0;
			}

			.pocket video,
			.pocket img {
				width: 100%;
				aspect-ratio: 16 / 9;
				object-fit: cover;
				display: block;
				margin: 10px;
			}

			.pocket h2,
			.pocket h4 {
				margin: 0 10px 5px 10px;
			}

			.about_pocket{
			 	border: 0px solid grey;
			 	padding: 40px 40px 0px 40px;
			}

			.detailpocket {
			    align-items: left;
			 	justify-content: top

			}

			.foot_pocket{
				border: 0px solid blue; /* à retirer une fois que les blocs sont construits*/
			    display: flex;
			 	align-items: center; /* Centre verticalement */
			 	gap: 7px;
			 	padding-right:0px;
			}

			.work {
				display: grid;
				grid-template-columns: 1fr;
				gap: 0px;
				padding: 0px;
				margin-left: 30px;
			}

			.description {
				display: grid;
				grid-template-columns: 0.5fr 8fr 3fr 3fr 8fr 0.5fr;
				border: 0px solid blue;
				gap : 10px;
				margin-top: 20px;
			}

			.left_description {
				grid-column: 1;
				text-align: left;
			}

			.right_description {
				grid-column: 2;
				text-align: right;
			}


}