* {
	color: #0f0f0f;
	font-family: "Heebo", "Helvetica";
	margin: 0;
}

.bloc_entete__titre--lo {
	color: #da3d22;
}

html {
	overflow-y: scroll;
	scroll-behavior: smooth;
}
@media(max-width:640px) {
	body {
		column-gap: 16px;
		display: grid;
		grid-template-columns: repeat(13, 1fr);
		grid-template-rows: auto;
		row-gap: 16px;
	}
	body[data-menu] .nav__liste {
		background: #da3d22;
		display: flex;
		flex-direction: column;
		height: 100vh;
		left: 0;
		list-style-type: none;
		position: fixed;
		top: 0;
		width: 100vw;
		z-index: 10;
	}
	body[data-menu] .nav__liste .nav__el--actif {
		color: #0f0f0f;
	}
	body[data-menu] .nav__liste li {
		margin-left: -25px;
		margin-top: 10px;
	}
	body[data-menu] .nav__liste li a {
		bottom: 100px;
		color: white;
		font-size: 40px;
		font-variant: small-caps;
		font-weight: bolder;
		text-decoration: none;
		top: 100px;
	}
	body[data-menu] .nav__liste li a:active {
		color: #0f0f0f;
	}
	body[data-menu] .nav__liste li:first-child {
		margin-top: 350px;
	}
	h1 {
		font-size: 27px;
		font-variant-caps: small-caps;
	}
	header {
		background-color: #0f0f0f;
		display: flex;
		grid-column: span 13;
		justify-content: flex-end;
		padding: 10px 0;
	}
	p {
		font-size: 16px;
		line-height: 200%;
	}
	.année_js{
		color:white;
	}
	.beyond_tellerand {
		grid-column-end: 13;
		grid-column-start: 2;
		margin: 10px 0px;
	}
	.beyond_tellerand h2 {
		margin: 10px 0;
	}
	.beyond_tellerand h2:after {
		border-bottom: solid 5px #da3d22;
		content: "";
		display: block;
		padding-top: 5px;
		transform: scaleX(0.1);
		transform-origin: 0 0;
	}
	.beyond_tellerand h2:before {
		content: "(QQOQCCP)";
		display: block;
		font-size: 10px;
		font-style: italic;
		font-weight: lighter;
		margin-left: 130px;
		margin-top: 25px;
		position: absolute;
	}
	.beyond_tellerand h3 {
		font-size: 19px;
		font-weight: bolder;
		padding: 10px;
		white-space: nowrap;
	}
	.beyond_tellerand li {
		margin-top: 10px;
	}
	.beyond_tellerand p {
		font-size: 16px;
		line-height: 200%;
	}
	.beyond_tellerand ul li {
		list-style-type: square;
	}
	.beyond_tellerand__imp {
		font-weight: bolder;
	}
	.bloc_entete {
		background-color: rgba(15, 15, 15, 0.8);
		grid-column-end: 13;
		grid-column-start: 2;
		padding: 10px;
		position: absolute;
	}
	.bloc_entete__texte--mobile {
		color: white;
	}
	.bloc_entete__titre {
		color: white;
		font-size: 27px;
		font-variant-caps: small-caps;
	}
	.bouton {
		background-color: #da3d22;
		border: none;
		color: white;
		font-size: 16px;
		font-variant-caps: small-caps;
		margin: 5px 0;
		outline: 0;
		padding: 10px 30px;
		text-align: center;
		text-decoration: none;
	}
	.bouton:hover {
		background-color: #ff2600;
	}
	.bouton_uk {
		align-items: center;
		display: flex;
		flex-direction: column;
		text-align: center;
	}
	.bouton_uk__base {
		background-color: #da3d22;
		border: none;
		color: white;
		font-size: 16px;
		margin: 8px 0;
		outline: 0;
		padding: 10px;
		transition: 100ms ease-in;
	}
	.bouton_uk__base--active:active {
		transform: scale(0.8);
		transition: 100ms ease-in;
	}
	.boutons_teamwork {
		display: flex;
		flex-direction: column;
		grid-column-end: 11;
		grid-column-start: 4;
		justify-content: space-around;
		margin-bottom: 16px;
		text-align: center;
	}
	.boutons_teamwork_id {
		display: flex;
		flex-direction: column;
		grid-column-end: 13;
		grid-column-start: 2;
		justify-content: space-around;
		margin: 20px 0;
		text-align: center;
		width: 100%;
	}
	.cadre_couleur_container {
		align-items: center;
		display: flex;
		justify-content: space-between;
	}
	.cadre_couleur_container div {
		align-items: flex-end;
		border: solid 2px #0f0f0f;
		color: white;
		display: flex;
		font-size: 11px;
		height: 50px;
		width: 50px;
	}
	.cadre_couleur_container .cadre_couleur_container__blanc {
		background-color: white;
		color: black;
	}
	.cadre_couleur_container__faux_noir {
		background-color: #0f0f0f;
	}
	.cadre_couleur_container__noir {
		background-color: black;
	}
	.cadre_couleur_container__orange {
		background-color: #da3d22;
	}
	.cadre_couleur_container__orange_clair {
		background-color: #ff2600;
	}
	.close {
		display: flex;
		grid-column-end: 14;
		grid-column-start: 1;
		justify-content: center;
		margin: 30px 0;
	}
	.close__dots {
		display: flex;
		justify-content: space-around;
		width: 30%;
	}
	.collectif_boutons {
		grid-column-end: 13;
		grid-column-start: 2;
	}
	.collectif_boutons h2 {
		margin: 10px 0;
	}
	.collectif_boutons h2:after {
		border-bottom: solid 5px #da3d22;
		content: "";
		display: block;
		padding-top: 5px;
		transform: scaleX(0.1);
		transform-origin: 0 0;
	}
	.collectif_items {
		grid-column-end: 13;
		grid-column-start: 2;
		margin: 10px 0;
	}
	.collectif_items h2 {
		font-size: 23px;
		margin: 10px 0;
	}
	.collectif_items h2:after {
		border-bottom: solid 5px #da3d22;
		content: "";
		display: block;
		padding-top: 5px;
		transform: scaleX(0.1);
		transform-origin: 0 0;
	}
	.container_all {
		grid-column-end: 13;
		grid-column-start: 2;
	}
	.container_all h2 {
		border-bottom: solid 3px #da3d22;
	}
	.container_all_grid {
		display: flex;
		flex-direction: column;
		grid-column-end: 13;
		grid-column-start: 2;
		margin: 16px 0;
	}
	.container_all_grid__text {
		color: white;
		font-size: 16px;
		margin: 16px 0;
	}
	.container_all_grid__title {
		color: white;
	}
	.container_all_grid__title:after {
		border-bottom: solid 5px #da3d22;
		content: "";
		display: block;
		padding-top: 5px;
		transform: scaleX(0.1);
		transform-origin: 0 0;
	}
	.container_credits {
		display: flex;
		flex-direction: column;
		grid-column-end: 13;
		grid-column-start: 2;
		justify-content: center;
		margin: 100px 0;
		text-align: center;
	}
	.container_credits div {
		margin-top: 16px;
	}
	.container_title_text_right,
	.container_title_text_left {
		display: grid;
		grid-column-start: span 13;
		grid-template-columns: repeat(13, 1fr);
	}
	.cs_bloc_image {
		grid-column-end: 13;
		grid-column-start: 2;
		margin-bottom: 16px;
	}
	.cs_bloc_image__caption {
		border-bottom: solid 2px #da3d22;
		color: #da3d22;
		font-size: 16px;
		font-variant-caps: small-caps;
		font-weight: bold;
		text-decoration: none;
	}
	.cs_bloc_image__width {
		width: 100%;
	}
	.cs_bloc_text {
		grid-column-end: 13;
		grid-column-start: 2;
	}
	.cs_bloc_text__title {
		font-size: 19px;
		margin-bottom: 16px;
	}
	.cs_bloc_text__title:after {
		border-bottom: solid 5px #da3d22;
		content: "";
		display: block;
		padding-top: 5px;
		transform: scaleX(0.1);
		transform-origin: 0 0;
	}
	.cs_bloc_text__title_grid {
		margin-bottom: 16px;
	}
	.cs_bloc_title {
		background-color: #da3d22;
		display: flex;
		grid-column: span 13;
		justify-content: center;
		margin-bottom: 16px;
		padding: 16px;
	}
	.cs_bloc_title__title {
		color: white;
		font-size: 23px;
	}
	.darkmode_btn {
		background-color: transparent;
		border: none;
		outline: 0;
	}
	.darkmode_btn--image {
		cursor: pointer;
		height: 30px;
	}
	.darkmode_btn--image:active {
		transform: scale(0.8);
		transition: 20ms ease-in-out;
	}
	.div_all {
		margin-bottom: 8px;
		margin-top: 8px;
		padding: 16px 0;
	}
	.div_grid_all {
		background-color: #0f0f0f;
		display: grid;
		grid-column-end: 13;
		grid-column-start: 2;
		grid-template-columns: repeat(13, 1fr);
	}
	.dots {
		background-color: #0f0f0f;
		border-radius: 100%;
		display: inline-block;
		height: 7px;
		width: 7px;
	}
	.entete_page {
		align-items: center;
		display: flex;
		grid-column: span 13;
		justify-content: center;
		margin-top: -16px;
		position: relative;
		text-align: center;
	}
	.footer {
		align-items: center;
		background-color: #0f0f0f;
		display: flex;
		grid-column: span 13;
		justify-content: center;
	}
	.header__container {
		align-items: flex-end;
		display: flex;
		justify-content: flex-end;
		width: 50%;
	}
	.img_grid_all {
		margin-top: 24px;
		width: 100%;
	}
	.img_pres_page {
		opacity: .6;
		width: 100%;
	}
	.lien {
		align-items: center;
		display: flex;
		flex-direction: column;
		text-align: center;
	}
	.lien {
		background-color: #0f0f0f;
	}
	.lien a {
		margin-top: 16px;
	}
	.lien small {
		margin-top: 8px;
	}
	.lien small {
		color: white;
	}
	.lien__actif {
		border-bottom: solid 3px #da3d22;
		color: white;
	}
	.lien__active {
		border-bottom: solid 3px #da3d22;
		color: #da3d22;
		font-weight: bolder;
	}
	.lien__active:active {
		color: white;
	}
	.lien__normal {
		border-bottom: solid 3px #da3d22;
		color: #da3d22;
		font-weight: bolder;
	}
	.link_id {
		border-bottom: solid 2px #da3d22;
		color: #da3d22;
		font-size: 16px;
		font-variant-caps: small-caps;
		text-decoration: none;
	}
	.link_tw {
		background-color: #da3d22;
		border: none;
		color: white;
		cursor: pointer;
		font-size: 16px;
		font-variant-caps: small-caps;
		margin: 10px 0;
		outline: 0;
		padding: 10px 20px;
		text-decoration: none;
	}
	.link_tw:hover {
		background-color: #ff2600;
	}
	.logo {
		background-color: #0f0f0f;
		display: flex;
		justify-content: center;
	}
	.logo__ui-kit {
		width: 80%;
	}
	.logo_tbyw {
		width: 100%;
	}
	.merci h1 {
		color: #da3d22;
		font-variant-caps: all-small-caps;
	}
	.merci:after {
		border-bottom: solid 5px #da3d22;
		content: "";
		display: block;
		padding-top: 10px;
		transform: scaleX(0.5);
	}
	.mobile_none {
		display: none;
	}
	.nav__liste {
		display: none;
	}
	.nav_button {
		background-color: #da3d22;
		border: none;
		color: white;
		font-weight: bolder;
		left: 30px;
		outline: 0;
		padding: 5px;
		position: fixed;
		top: 15px;
		z-index: 20;
	}
	.nav_button:active {
		color: #0f0f0f;
	}
	.nav_footer {
		color: white;
		font-size: 16px;
		margin-top: 10px;
		text-align: center;
	}
	.nav_footer p {
		color: white;
		font-size: 16px;
		white-space: nowrap;
	}
	.nav_footer__el {
		color: #da3d22;
		display: inline-flex;
		padding: 0 10px;
	}
	.nav_footer__el--clr {
		border-bottom: solid 2px #da3d22;
		color: #da3d22;
		font-size: 16px;
		white-space: nowrap;
		border: none;
		margin-right: 5px;
	}
	.nav_footer__el--clr:hover {
		color: white;
	}
	.nav_footer__el--clr--actif {
		border-bottom: solid 2px #da3d22;
		color: white;
		font-size: 16px;
		white-space: nowrap;
	}
	.nav_footer__liste {
		display: flex;
		justify-content: center;
		padding: 0;
	}
	.nav_ui-kit {
		align-items: center;
		display: flex;
		flex-direction: column;
		text-align: center;
	}
	.nav_ui-kit__el__actif {
		color: #da3d22;
	}
	.nav_ui-kit__el__hover:hover {
		color: #da3d22;
	}
	.nav_ui-kit__liste {
		padding: 0;
	}
	.nav_ui-kit__liste li {
		font-size: 27px;
		font-variant: small-caps;
		list-style-type: none;
		margin-top: 16px;
	}
	.nav_ui-kit__liste li a {
		text-decoration: none;
	}
	.nav_ui-kit__liste li small {
		font-variant-caps: normal;
	}
	.pres_desktop {
		align-items: center;
		display: flex;
		grid-column: span 13;
		justify-content: center;
		position: relative;
		text-align: center;
	}
	.pres_mobile {
		position: absolute;
	}
	.pres_mobile__bouton {
		padding-top: 20px;
	}
	.pres_mobile__titre {
		background-color: rgba(15, 15, 15, 0.8);
		color: white;
		font-size: 27px;
		font-variant-caps: small-caps;
		line-height: 27px;
		padding: 10px;
	}
	.ress_desktop {
		align-items: center;
		display: flex;
		grid-column: span 13;
		justify-content: center;
		position: relative;
		text-align: center;
	}
	.text_conclusion {
		grid-column-end: 13;
		grid-column-start: 2;
	}
	.text_group {
		display: flex;
		grid-column-end: 13;
		grid-column-start: 2;
		justify-content: space-around;
		margin-bottom: 32px;
	}
	.text_group a {
		font-size: 16px;
		text-decoration: none;
		transition: 100ms ease-in;
	}
	.text_group a:active {
		transform: scale(0.8);
		transition: 100ms ease-in;
	}
	.text_htd {
		grid-column-end: 11;
		grid-column-start: 2;
	}
	.text_me {
		grid-column-end: 13;
		grid-column-start: 2;
	}
	.text_mobile {
		color: white;
		font-size: 16px;
	}
	.text_rs {
		grid-column-end: 13;
		grid-column-start: 4;
	}
	.text_ux {
		grid-column-end: 13;
		grid-column-start: 2;
	}
	.text_web {
		grid-column-end: 13;
		grid-column-start: 2;
	}
	.title:after {
		border-bottom: solid 5px #da3d22;
		content: "";
		display: block;
		margin-top: 5px;
		transform: scaleX(0.2);
		transform-origin: 0 0;
	}
	.title_conclusion {
		grid-column-end: 13;
		grid-column-start: 2;
	}
	.title_conclusion h2 {
		background-color: #da3d22;
		color: #da3d22;
		color: white;
		font-size: 23px;
		font-variant-caps: small-caps;
		padding-right: 10px;
		text-align: right;
	}
	.title_experience {
		color: #da3d22;
		grid-column-end: 14;
		grid-column-start: 2;
		margin: 16px 16px;
	}
	.title_experience--deco:after {
		border-bottom: solid 5px #da3d22;
		content: "";
		display: block;
		margin-top: 5px;
		transform: scaleX(0.2);
		transform-origin: 0 0;
	}
	.title_htd {
		grid-column-end: 13;
		grid-column-start: 12;
	}
	.title_htd h2 {
		background-color: #da3d22;
		color: white;
		font-size: 23px;
		font-variant-caps: small-caps;
		height: 170px;
		padding-top: 10px;
		position: absolute;
		writing-mode: vertical-lr;
	}
	.title_me {
		grid-column-end: 7;
		grid-column-start: 1;
	}
	.title_me h2 {
		background-color: #da3d22;
		color: #da3d22;
		color: white;
		font-size: 23px;
		font-variant-caps: small-caps;
		padding-left: 10px;
	}
	.title_rs {
		grid-column-end: 2;
		grid-column-start: 2;
	}
	.title_rs h2 {
		background-color: #da3d22;
		color: white;
		font-size: 23px;
		font-variant-caps: small-caps;
		height: 250px;
		padding-top: 10px;
		transform: rotate(180deg);
		writing-mode: vertical-lr;
	}
	.title_tantek {
		grid-column-end: 13;
		grid-column-start: 2;
	}
	.title_tantek:after {
		border-bottom: solid 5px #da3d22;
		content: "";
		display: block;
		padding-top: 5px;
		transform: scaleX(0.1);
		transform-origin: 0 0;
	}
	.title_ux {
		grid-column-end: 13;
		grid-column-start: 7;
	}
	.title_ux h2 {
		background-color: #da3d22;
		color: #da3d22;
		color: white;
		font-size: 23px;
		font-variant-caps: small-caps;
		padding-right: 16px;
		text-align: right;
	}
	.title_web {
		grid-column-end: 14;
		grid-column-start: 2;
	}
	.title_web h2 {
		background-color: #da3d22;
		color: white;
		font-size: 23px;
		font-variant-caps: small-caps;
		padding-left: 10px;
	}
	.container_all .titre h2{
		border:none;
	}
	.titre__uk {
		margin-top: 16px;
	}
	.ui_kit:after {
		border-bottom: solid 5px #da3d22;
		content: "";
		display: block;
		transform: scaleX(0.15);
		transform-origin: 0 0;
	}
}

@media(Min-width:641px) and (max-width:960px) {
	body {
		column-gap: 18px;
		display: grid;
		grid-template-columns: 1fr 30% 10% 45% 1fr;
		grid-template-rows: auto;
		row-gap: 18px;
	}
	h1 {
		font-size: 33px;
		font-variant-caps: small-caps;
	}
	h2 {
		font-size: 27px;
		font-variant-caps: small-caps;
	}
	header {
		background-color: #0f0f0f;
		grid-column: span 5;
	}
	p {
		font-size: 18px;
		line-height: 200%;
	}
	.année_js{
		color:white;
	}
	.beyond_tellerand {
		grid-column-end: 5;
		grid-column-start: 2;
		margin: 10px 0;
	}
	.beyond_tellerand h2 {
		margin: 10px 0;
	}
	.beyond_tellerand h2:after {
		border-bottom: solid 5px #da3d22;
		content: "";
		display: block;
		padding-top: 5px;
		transform: scaleX(0.1);
		transform-origin: 0 0;
	}
	.beyond_tellerand h2:before {
		content: "(QQOQCCP)";
		display: block;
		font-size: 10px;
		font-style: italic;
		font-weight: lighter;
		margin-left: 180px;
		margin-top: 30px;
		position: absolute;
	}
	.beyond_tellerand h3 {
		font-size: 22px;
		font-weight: bolder;
		margin: 18px;
		padding: 10px;
		white-space: nowrap;
	}
	.beyond_tellerand li {
		margin-top: 10px;
	}
	.beyond_tellerand p {
		font-size: 18px;
		line-height: 200%;
		margin: 36px;
		margin-top: 0;
	}
	.beyond_tellerand ul li {
		list-style-type: square;
	}
	.beyond_tellerand__imp {
		font-weight: bolder;
	}
	.bg_orange3 {
		background-color: #da3d22;
		grid-column-end: 3;
		grid-column-start: 2;
		grid-row: span 1;
	}
	.bloc_entete {
		background-color: rgba(15, 15, 15, 0.8);
		padding: 15px 30px 15px 30px;
		position: absolute;
		width: 50%;
	}
	.bloc_entete__texte--mobile {
		color: white;
	}
	.bloc_entete__titre {
		color: white;
		font-size: 33px;
		font-variant-caps: small-caps;
	}
	.bouton {
		background-color: #da3d22;
		border: none;
		color: white;
		display: inline-block;
		font-size: 18px;
		margin-top: 5px;
		outline: 0;
		padding: 10px;
		text-align: center;
		text-decoration: none;
		transform-origin: left;
		white-space: nowrap;
	}
	.bouton:active {
		background-color: #ff2600;
	}
	.bouton_uk {
		align-items: center;
		display: flex;
		flex-direction: column;
		text-align: center;
	}
	.bouton_uk__base {
		background-color: #da3d22;
		border: none;
		color: white;
		font-size: 18px;
		margin: 8px 0;
		outline: 0;
		padding: 10px;
		transition: 100ms ease-in;
	}
	.bouton_uk__base--active:active {
		transform: scale(0.8);
		transition: 100ms ease-in;
	}
	.boutons_teamwork_id {
		display: inline-flex;
		flex-direction: column;
		grid-column-end: 5;
		grid-column-start: 2;
		margin-top: 18px;
		text-align: center;
	}
	.cadre_couleur_container {
		align-items: center;
		display: flex;
		justify-content: space-around;
	}
	.cadre_couleur_container div {
		align-items: flex-end;
		border: solid 2px #0f0f0f;
		color: white;
		display: flex;
		font-size: 11px;
		height: 50px;
		width: 50px;
	}
	.cadre_couleur_container .cadre_couleur_container__blanc {
		background-color: white;
		color: black;
	}
	.cadre_couleur_container__faux_noir {
		background-color: #0f0f0f;
	}
	.cadre_couleur_container__noir {
		background-color: black;
	}
	.cadre_couleur_container__orange {
		background-color: #da3d22;
	}
	.cadre_couleur_container__orange_clair {
		background-color: #ff2600;
	}
	.collectif_boutons {
		grid-column-end: 3;
		grid-column-start: 2;
		margin: 20px 0;
	}
	.collectif_boutons h2 {
		margin: 20px 0;
	}
	.collectif_boutons h2:after {
		border-bottom: solid 5px #da3d22;
		content: "";
		display: flex;
		padding-top: 5px;
		transform: scaleX(0.15);
		transform-origin: 0 0;
	}
	.collectif_boutons p {
		font-size: 18px;
		line-height: 200%;
	}
	.collectif_items {
		grid-column-end: 5;
		grid-column-start: 2;
		margin: 20px 0;
	}
	.collectif_items h2 {
		margin: 20px 0;
		white-space: nowrap;
	}
	.collectif_items h2:after {
		border-bottom: solid 5px #da3d22;
		content: "";
		display: block;
		padding-top: 5px;
		transform: scaleX(0.1);
		transform-origin: 0 0;
	}
	.collectif_items--imp {
		font-weight: bolder;
	}
	.container_all {
		grid-column-end: 5;
		grid-column-start: 2;
	}
	.container_all h2 {
		border-bottom: solid 3px #da3d22;
	}
	.container_all_grid {
		display: flex;
		flex-direction: column;
		grid-column-end: 13;
		grid-column-start: 2;
		padding: 20px;
	}
	.container_all_grid__text {
		color: white;
		font-size: 18px;
		margin: 16px 0;
	}
	.container_all_grid__title {
		color: white;
	}
	.container_all_grid__title:after {
		border-bottom: solid 5px #da3d22;
		content: "";
		display: block;
		padding-top: 5px;
		transform: scaleX(0.1);
		transform-origin: 0 0;
	}
	.container_credits {
		display: flex;
		flex-direction: column;
		grid-column-end: 5;
		grid-column-start: 2;
		grid-row-end: 8;
		grid-row-start: 2;
		justify-content: center;
		margin: 305px 0;
		text-align: center;
	}
	.container_credits div {
		margin-top: 16px;
	}
	.container_title_text_left {
		background-color: rgba(218, 61, 34, 0.9);
		padding: 18px;
	}
	.container_title_text_left1 {
		grid-column-end: 6;
		grid-column-start: 1;
		grid-row: span 1;
	}
	.container_title_text_left3 {
		grid-column-end: 6;
		grid-column-start: 4;
		grid-row: span 1;
	}
	.container_title_text_left5 {
		grid-column-end: 6;
		grid-column-start: 4;
		grid-row: span 1;
	}
	.container_title_text_right {
		background-color: #0f0f0f;
		padding: 18px;
	}
	.container_title_text_right2 {
		grid-column-end: 4;
		grid-column-start: 1;
		grid-row: span 1;
	}
	.container_title_text_right4 {
		grid-column-end: 4;
		grid-column-start: 1;
		grid-row: span 1;
	}
	.container_title_text_right6 {
		grid-column-end: 6;
		grid-column-start: 1;
		grid-row: span 1;
	}
	.cs_bloc_image {
		grid-column-end: 5;
		grid-column-start: 2;
		margin: 18px 0;
	}
	.cs_bloc_image__caption {
		border-bottom: solid 2px #da3d22;
		color: #da3d22;
		font-size: 18px;
		font-variant-caps: small-caps;
		font-weight: bold;
		text-decoration: none;
	}
	.cs_bloc_image__caption:hover {
		color: #da3d22;
	}
	.cs_bloc_image__width {
		width: 100%;
	}
	.cs_bloc_text {
		grid-column-end: 5;
		grid-column-start: 2;
	}
	.cs_bloc_text__title {
		font-size: 22px;
		margin-bottom: 18px;
	}
	.cs_bloc_text__title:after {
		border-bottom: solid 5px #da3d22;
		content: "";
		display: block;
		padding-top: 5px;
		transform: scaleX(0.1);
		transform-origin: 0 0;
	}
	.cs_bloc_text__title_exp--deco {
		color: white;
		font-size: 30px;
		padding-top: 20px;
	}
	.cs_bloc_text_exp__deco {
		color: white;
		padding: 20px 0;
	}
	.cs_bloc_title {
		background-color: #da3d22;
		display: flex;
		grid-column: span 5;
		justify-content: center;
		margin-bottom: 18px;
		padding: 18px;
	}
	.cs_bloc_title__title {
		color: white;
		font-size: 27px;
	}
	.darkmode_btn {
		background-color: transparent;
		border: none;
		outline: 0;
		padding: 0;
	}
	.darkmode_btn--image {
		cursor: pointer;
		transition: 1s 1s;
		width: 3.5em;
	}
	.darkmode_btn--image:active {
		transform: rotate(180deg) scale(0.8);
		transition: 50ms ease-in;
	}
	.div_all {
		margin-bottom: 8px;
		margin-top: 8px;
		padding: 16px 0;
	}
	.div_grid_all {
		background-color: #0f0f0f;
	}
	.entete_page {
		align-items: center;
		display: flex;
		grid-column: span 5;
		justify-content: center;
		margin-top: -18px;
		position: relative;
		text-align: center;
	}
	.footer {
		align-items: center;
		background-color: #0f0f0f;
		display: flex;
		grid-column: span 5;
		justify-content: center;
	}
	.header__container {
		align-items: center;
		display: flex;
		height: 70px;
		justify-content: space-around;
		margin: auto;
		width: 90%;
	}
	.icon_container {
		display: flex;
		justify-content: space-around;
		margin-top: 32px;
		width: 100%;
	}
	.icon_container__icon {
		fill: white;
	}
	.icon_container__link {
		align-items: center;
		display: flex;
		flex-direction: column;
		text-decoration: none;
	}
	.icon_container__link p {
		color: white;
		font-size: 15px;
		margin-top: 10px;
		text-align: center;
		text-decoration: none;
	}
	.icon_container__link:active path,
	.icon_container__link:active p {
		color: #da3d22;
		fill: #da3d22;
	}
	.img_grid_all {
		margin-top: 24px;
		width: 100%;
	}
	.img_pres_page {
		opacity: .6;
		width: 100%;
	}
	.lien {
		align-items: center;
		display: flex;
		flex-direction: column;
		text-align: center;
	}
	.lien {
		background-color: #0f0f0f;
	}
	.lien a {
		font-size: 18px;
		margin-top: 16px;
	}
	.lien small {
		margin-top: 8px;
	}
	.lien small {
		color: white;
	}
	.lien__actif {
		border-bottom: solid 3px #da3d22;
		color: white;
	}
	.lien__active {
		border-bottom: solid 3px #da3d22;
		color: #da3d22;
		font-weight: bolder;
	}
	.lien__active:active {
		color: white;
	}
	.lien__normal {
		border-bottom: solid 3px #da3d22;
		color: #da3d22;
		font-weight: bolder;
	}
	.link_id {
		border-bottom: solid 2px #da3d22;
		color: #da3d22;
		cursor: pointer;
		font-size: 18px;
		font-variant-caps: small-caps;
		text-decoration: none;
		transition: 200ms;
	}
	.link_id:hover {
		color: white;
	}
	.link_tw {
		background-color: #da3d22;
		color: white;
		cursor: pointer;
		font-size: 18px;
		font-variant-caps: small-caps;
		font-weight: bolder;
		margin-top: 18px;
		outline: 0;
		padding: 10px 20px;
		text-decoration: none;
	}
	.link_tw:hover {
		background-color: #ff2600;
	}
	.logo {
		background-color: #0f0f0f;
		display: flex;
		justify-content: center;
	}
	.logo__ui-kit {
		width: 80%;
	}
	.logo_tbyw {
		width: 18%;
	}
	.merci h1 {
		color: #da3d22;
		font-variant-caps: all-small-caps;
	}
	.merci:after {
		border-bottom: solid 5px #da3d22;
		content: "";
		display: block;
		padding-top: 10px;
		transform: scaleX(0.5);
	}
	.nav {
		width: 80%;
	}
	.nav__el {
		color: white;
		display: inline-block;
		font-size: 18px;
		outline: 0;
		text-decoration: none;
		transition: 100ms ease-out;
	}
	.nav__el:hover {
		color: #da3d22;
	}
	.nav__el--actif {
		color: #da3d22;
		font-size: 18px;
		outline: 0;
		text-decoration: none;
	}
	.nav__el--actif:after {
		border-bottom: solid 3px #da3d22;
		content: "";
		display: block;
	}
	.nav__liste {
		display: flex;
		justify-content: space-around;
		list-style-type: none;
		margin: auto;
		padding: 0;
		width: 70%;
	}
	.nav_footer {
		color: white;
		font-size: 18px;
		margin-top: 10px;
		text-align: center;
	}
	.nav_footer p {
		color: white;
		font-size: 18px;
		white-space: nowrap;
	}
	.nav_footer__el {
		color: #da3d22;
		display: inline-flex;
		padding: 0 10px;
	}
	.nav_footer__el a {
		text-decoration: none;
	}
	.nav_footer__el--clr {
		border-bottom: solid 2px #da3d22;
		color: #da3d22;
		font-size: 18px;
		font-weight: bold;
		text-decoration: none;
		transition: 200ms;
		border: none;
		margin-right: 5px;
	}
	.nav_footer__el--clr:hover {
		color: white;
	}
	.nav_footer__el--clr--actif {
		border-bottom: solid 2px #da3d22;
		color: white;
		font-size: 18px;
		white-space: nowrap;
	}
	.nav_footer__liste {
		display: flex;
		justify-content: center;
		padding: 0;
	}
	.nav_ui-kit {
		align-items: center;
		display: flex;
		flex-direction: column;
		text-align: center;
	}
	.nav_ui-kit__el__actif {
		color: #da3d22;
	}
	.nav_ui-kit__el__hover:hover {
		color: #da3d22;
	}
	.nav_ui-kit__liste {
		padding: 0;
	}
	.nav_ui-kit__liste li {
		font-size: 27px;
		font-variant: small-caps;
		list-style-type: none;
		margin-top: 16px;
	}
	.nav_ui-kit__liste li a {
		text-decoration: none;
	}
	.nav_ui-kit__liste li small {
		font-variant-caps: normal;
	}
	.nav-button {
		display: none;
	}
	.pres_desktop {
		background-color: #0f0f0f;
		grid-column-end: 4;
		grid-column-start: 4;
		margin: 40px 0;
		padding: 15px;
	}
	.pres_desktop__bouton {
		background-color: #da3d22;
		border: none;
		color: white;
		cursor: pointer;
		font-size: 18px;
		font-variant-caps: small-caps;
		margin-top: 20px;
		outline: 0;
		padding: 5px 20px;
		position: relative;
		text-decoration: none;
		transition: 200ms ease-out;
	}
	.pres_desktop__bouton:hover {
		background-color: #ff2600;
	}
	.pres_desktop__text {
		color: white;
		font-size: 18px;
		line-height: 200%;
		margin-bottom: 40px;
		margin-top: 20px;
	}
	.pres_desktop__title {
		color: white;
	}
	.pres_desktop__title:after {
		border-bottom: solid 5px #da3d22;
		content: "";
		display: block;
		padding-top: 5px;
		transform: scaleX(0.18);
		transform-origin: 0 0;
	}
	.pres_desktop--margin {
		margin-top: 20px;
	}
	.ress_desktop {
		grid-column-end: 5;
		grid-column-start: 2;
	}
	.summary {
		align-items: center;
		display: flex;
		grid-column: span 5;
		justify-content: center;
		margin-top: -18px;
		position: relative;
		text-align: center;
	}
	.summary__container {
		background-color: rgba(15, 15, 15, 0.8);
		padding: 50px 30px;
		position: absolute;
		width: 80%;
	}
	.summary__container--title {
		border-bottom: solid 3px #da3d22;
		color: white;
		font-size: 33px;
	}
	.summary_link {
		margin-bottom: 10px;
	}
	.tablet_none,
	.nav_button {
		display: none;
	}
	.tantek_book {
		display: grid;
		grid-column-end: 5;
		grid-column-start: 3;
		grid-row: span 2;
		grid-template-columns: repeat(13, 1fr);
	}
	.tantek_github {
		display: grid;
		grid-column-end: 3;
		grid-column-start: 2;
		grid-row: span 1;
		grid-template-columns: repeat(13, 1fr);
	}
	.tantek_media {
		display: grid;
		grid-column-end: 5;
		grid-column-start: 2;
		grid-row: span 1;
		grid-template-columns: repeat(13, 1fr);
	}
	.tantek_rs {
		display: grid;
		grid-column-end: 5;
		grid-column-start: 4;
		grid-template-columns: repeat(13, 1fr);
	}
	.tantek_tantek {
		display: grid;
		grid-column-end: 4;
		grid-column-start: 2;
		grid-template-columns: repeat(13, 1fr);
	}
	.TBYW {
		color: white;
		font-size: 18px;
		font-variant-caps: all-small-caps;
		font-weight: bolder;
	}
	.text_left {
		text-shadow: #0f0f0f 1px 1px;
	}
	.text_mobile {
		color: white;
		font-size: 18px;
	}
	.text_right {
		text-shadow: #da3d22 1px 1px;
	}
	.title_experience {
		display: flex;
		grid-column-end: 6;
		grid-column-start: 1;
		justify-content: center;
		margin-top: 20px;
	}
	.title_experience--deco:after {
		border-bottom: solid 5px #da3d22;
		content: "";
		display: block;
		margin-top: 5px;
		transform: scaleX(0.3);
	}
	.title_left__deco {
		text-shadow: #0f0f0f 3px 3px;
	}
	.title_right__deco {
		text-shadow: #da3d22 -3px 3px;
	}
	.title_tantek {
		grid-column-end: 6;
		grid-column-start: 2;
	}
	.title_tantek:after {
		border-bottom: solid 5px #da3d22;
		content: "";
		display: block;
		padding-top: 5px;
		transform: scaleX(0.1);
		transform-origin: 0 0;
	}
	.container_all .titre h2 {
		border: none;
	}
	.titre__uk {
		margin-top: 16px;
	}
	.ui_kit {
		margin: 20px 0;
	}
	.ui_kit:after {
		border-bottom: solid 5px #da3d22;
		content: "";
		display: block;
		transform: scaleX(0.15);
		transform-origin: 0 0;
	}
}

@media(Min-width:961px) {
	body {
		column-gap: 20px;
		display: grid;
		grid-template-columns: repeat(13, 1fr);
		grid-template-rows: auto;
		row-gap: 20px;
	}
	h1 {
		font-size: 39px;
		font-variant-caps: small-caps;
	}
	h2 {
		font-size: 31px;
		font-variant-caps: small-caps;
	}
	header {
		background-color: #0f0f0f;
		grid-column: span 13;
	}
	p {
		font-size: 20px;
		line-height: 200%;
	}
	.année_js{
		color:white;
	}
	.beyond_tellerand {
		grid-column-end: 11;
		grid-column-start: 4;
		margin: 10px 0;
	}
	.beyond_tellerand h2 {
		margin: 10px 0;
	}
	.beyond_tellerand h2:after {
		border-bottom: solid 5px #da3d22;
		content: "";
		display: block;
		padding-top: 5px;
		transform: scaleX(0.05);
		transform-origin: 0 0;
	}
	.beyond_tellerand h2:before {
		content: "(QQOQCCP)";
		display: block;
		font-size: 10px;
		font-style: italic;
		font-weight: lighter;
		margin-left: 220px;
		margin-top: 30px;
		position: absolute;
	}
	.beyond_tellerand h3 {
		color: black;
		font-size: 25px;
		font-weight: bolder;
		margin: 20px 0;
		padding: 10px;
		white-space: nowrap;
	}
	.beyond_tellerand li {
		font-size: 20px;
		margin-top: 10px;
	}
	.beyond_tellerand p {
		font-size: 20px;
		line-height: 200%;
		margin: 40px;
		margin-top: 0;
	}
	.beyond_tellerand ul li {
		list-style-type: square;
	}
	.beyond_tellerand__imp {
		font-weight: bolder;
	}
	.beyond_tellerand__lieux {
		margin: 40px;
	}
	.bg_orange1 {
		background-color: #da3d22;
		grid-column-end: 5;
		grid-column-start: 2;
		grid-row: span 1;
	}
	.bg_orange2 {
		background-color: #da3d22;
		grid-column-end: 13;
		grid-column-start: 10;
		grid-row: span 1;
	}
	.bloc_entete {
		background-color: rgba(15, 15, 15, 0.8);
		padding: 15px 30px 50px 30px;
		position: absolute;
		width: 50%;
	}
	.bloc_entete__texte--desktop {
		color: white;
		font-size: 20px;
	}
	.bloc_entete__titre {
		color: white;
		font-size: 90px;
		font-variant-caps: small-caps;
		padding: 10px;
	}
	.bouton {
		background-color: #da3d22;
		border: solid 2px #0f0f0f;
		color: white;
		cursor: pointer;
		display: inline-block;
		font-size: 20px;
		font-variant-caps: small-caps;
		outline: 0;
		padding: 5px 20px;
		position: relative;
		text-decoration: none;
		transition: 200ms ease-out;
	}
	.bouton:after {
		bottom: 0;
		content: "	\00BB";
		font-size: 23px;
		font-weight: 800;
		left: 87%;
		opacity: 0;
		position: absolute;
		right: 0;
		top: 12%;
		transition: 200ms ease-out;
	}
	.bouton:hover {
		background: #fd2600;
		padding: 5px 40px 5px 20px;
		transition: 200ms ease-in;
	}
	.bouton:hover:after {
		opacity: 1;
		transition: 500ms;
	}
	.bouton_uk {
		align-items: center;
		display: flex;
		flex-direction: column;
		text-align: center;
	}
	.bouton_uk__base {
		background-color: #da3d22;
		border: none;
		color: white;
		cursor: pointer;
		display: inline-block;
		font-size: 20px;
		font-variant-caps: small-caps;
		margin: 8px 0;
		outline: 0;
		padding: 10px;
		position: relative;
		transition: 100ms ease-in;
	}
	.bouton_uk__base--active:active:after {
		left: 100%;
		opacity: 0;
		transition: 50ms ease-in;
	}
	.bouton_uk__base--desktop:after,
	.bouton_uk__base--active:after {
		bottom: 0;
		content: "	\00BB";
		font-size: 23px;
		font-weight: 800;
		left: 87%;
		opacity: 0;
		position: absolute;
		right: 0;
		top: 20%;
		transition: 200ms ease-out;
	}
	.bouton_uk__base--desktop:hover,
	.bouton_uk__base--active:hover {
		background: #fd2600;
		padding: 10px 40px 10px 10px;
		transition: 200ms ease-in;
	}
	.bouton_uk__base--desktop:hover:after,
	.bouton_uk__base--active:hover:after {
		opacity: 1;
		transition: 500ms;
	}
	.boutons_teamwork p {
		background-color: #0f0f0f;
		border: solid 2px white;
		margin: 20px 0;
		padding: 5px 15px;
	}
	.boutons_teamwork_id {
		display: flex;
		grid-column-end: 12;
		grid-column-start: 3;
		justify-content: space-between;
		margin: 60px 0;
	}
	.button_rs {
		margin-bottom: 20px;
	}
	.button_tantek {
		margin-bottom: 20px;
	}
	.cadre_couleur_container {
		align-items: center;
		display: flex;
		justify-content: space-between;
	}
	.cadre_couleur_container div {
		align-items: flex-end;
		border: solid 2px #0f0f0f;
		color: white;
		display: flex;
		font-size: 11px;
		height: 65px;
		width: 65px;
	}
	.cadre_couleur_container .cadre_couleur_container__blanc {
		background-color: white;
		color: black;
	}
	.cadre_couleur_container__faux_noir {
		background-color: #0f0f0f;
	}
	.cadre_couleur_container__noir {
		background-color: black;
	}
	.cadre_couleur_container__orange {
		background-color: #da3d22;
	}
	.cadre_couleur_container__orange_clair {
		background-color: #ff2600;
	}
	.collectif_boutons {
		grid-column-end: 11;
		grid-column-start: 4;
	}
	.collectif_boutons h2 {
		margin: 20px 0;
	}
	.collectif_boutons h2:after {
		border-bottom: solid 5px #da3d22;
		content: "";
		display: block;
		padding-top: 5px;
		transform: scaleX(0.1);
		transform-origin: 0 0;
	}
	.collectif_items {
		grid-column-end: 11;
		grid-column-start: 4;
		margin: 20px 0;
	}
	.collectif_items h2 {
		margin: 20px 0;
	}
	.collectif_items h2:after {
		border-bottom: solid 5px #da3d22;
		content: "";
		display: block;
		padding-top: 5px;
		transform: scaleX(0.1);
		transform-origin: 0 0;
	}
	.container_all {
		grid-column-end: 10;
		grid-column-start: 5;
	}
	.container_all h2 {
		border-bottom: solid 5px #da3d22;
	}
	.container_all_grid {
		grid-column-end: 13;
		grid-column-start: 2;
		padding: 20px;
	}
	.container_all_grid__text {
		color: white;
		font-size: 20px;
		margin: 20px 0;
	}
	.container_all_grid__title {
		color: white;
	}
	.container_all_grid__title:after {
		border-bottom: solid 5px #da3d22;
		content: "";
		display: block;
		padding-top: 5px;
		transform: scaleX(0.1);
		transform-origin: 0 0;
	}
	.container_credits {
		display: flex;
		flex-direction: column;
		grid-column-end: 13;
		grid-column-start: 2;
		grid-row-end: 8;
		grid-row-start: 2;
		justify-content: center;
		margin: 305px 0;
		text-align: center;
	}
	.container_credits div {
		margin-top: 16px;
	}
	.container_title_text_left {
		background-color: rgba(218, 61, 34, 0.9);
		display: grid;
		grid-column-end: 8;
		grid-column-start: 3;
		grid-template-columns: repeat(13, 1fr);
		margin-right: -20px;
	}
	.container_title_text_right {
		background-color: #0f0f0f;
		display: grid;
		grid-column-end: 12;
		grid-column-start: 8;
		grid-template-columns: repeat(13, 1fr);
		margin-left: -20px;
	}
	.cs_bloc_image {
		grid-column-end: 11;
		grid-column-start: 4;
		margin: 20px 0;
	}
	.cs_bloc_image__caption {
		border-bottom: solid 2px #da3d22;
		color: #0f0f0f;
		font-weight: bold;
		text-decoration: none;
		transition: 200ms;
	}
	.cs_bloc_image__caption:hover {
		color: #da3d22;
	}
	.cs_bloc_image__width {
		width: 100%;
	}
	.cs_bloc_text {
		grid-column-end: 11;
		grid-column-start: 4;
	}
	.cs_bloc_text__title {
		font-size: 25px;
		margin-bottom: 20px;
	}
	.cs_bloc_text__title:after {
		border-bottom: solid 5px #da3d22;
		content: "";
		display: block;
		padding-top: 5px;
		transform: scaleX(0.1);
		transform-origin: 0 0;
	}
	.cs_bloc_text__title_exp--deco {
		color: white;
		font-size: 60px;
		padding-top: 40px;
	}
	.cs_bloc_text__title_grid {
		grid-column-end: 13;
		grid-column-start: 2;
	}
	.cs_bloc_text_exp {
		grid-column-end: 13;
		grid-column-start: 2;
	}
	.cs_bloc_text_exp__deco {
		color: white;
		padding: 40px 0;
	}
	.cs_bloc_title {
		background-color: #da3d22;
		display: flex;
		grid-column-end: 11;
		grid-column-start: 4;
		justify-content: center;
		margin-bottom: 20px;
		padding: 20px;
	}
	.cs_bloc_title__title {
		color: white;
		font-size: 31px;
	}
	.darkmode_btn {
		background-color: transparent;
		border: none;
		outline: 0;
		padding: 0;
	}
	.darkmode_btn {
		background-color: transparent;
		border: none;
		outline: 0;
		padding: 0;
	}
	.darkmode_btn--image {
		cursor: pointer;
		transition: 1s 1s;
		width: 3.5em;
	}
	.darkmode_btn--image:hover {
		transform: rotate(180deg);
		transition: 200ms ease-out;
	}
	.darkmode_btn--image:active {
		transform: rotate(180deg) scale(0.8);
		transition: 30ms ease-in;
	}
	.div_all {
		margin-bottom: 8px;
		margin-top: 8px;
		padding: 16px 0;
	}
	.div_grid_all {
		background-color: #0f0f0f;
	}
	.entete_page {
		align-items: center;
		display: flex;
		grid-column: span 13;
		justify-content: center;
		margin-top: -20px;
		position: relative;
		text-align: center;
	}
	.footer {
		align-items: center;
		background-color: #0f0f0f;
		display: flex;
		grid-column: span 13;
		justify-content: center;
	}
	.header__container {
		align-items: center;
		display: flex;
		height: 70px;
		justify-content: space-around;
		margin: auto;
		width: 70%;
	}
	.icon_container {
		display: flex;
		justify-content: space-around;
		margin-top: 32px;
		width: 100%;
	}
	.icon_container__icon {
		fill: white;
		scroll-behavior: smooth;
	}
	.icon_container__link {
		align-items: center;
		display: flex;
		flex-direction: column;
		text-decoration: none;
	}
	.icon_container__link p {
		color: white;
		font-size: 15px;
		margin-top: 10px;
		text-align: center;
		text-decoration: none;
	}
	.icon_container__link:hover path,
	.icon_container__link:hover p {
		color: #da3d22;
		fill: #da3d22;
	}
	.img_conclusion {
		background: url('../images/conclusion.jpg')center;
		background-size: cover;
	}
	.img_grid_all {
		margin-top: 24px;
		width: 100%;
	}
	.img_grid_all {
		margin-top: 24px;
		width: 100%;
	}
	.img_htd {
		background: url('../images/htd.jpg')center;
		background-size: cover;
	}
	.img_left {
		grid-column-end: 8;
		grid-column-start: 3;
		opacity: .9;
	}
	.img_me {
		background: url('../images/me.jpg')center;
		background-size: cover;
	}
	.img_pres_page {
		opacity: .6;
		width: 100%;
	}
	.img_right {
		grid-column-end: 12;
		grid-column-start: 8;
		opacity: .9;
	}
	.img_rs {
		background: url('../images/fb.jpg')center;
		background-size: cover;
	}
	.img_ux {
		background: url('../images/ux.jpg')center;
		background-size: cover;
	}
	.img_web {
		background: url('../images/web.jpg')center;
		background-size: cover;
	}
	.lien {
		background-color: #0f0f0f;
	}
	.lien {
		align-items: center;
		display: flex;
		flex-direction: column;
		text-align: center;
	}
	.lien a {
		border-bottom: solid 3px #da3d22;
		color: white;
		font-size: 20px;
		font-weight: bolder;
		margin-top: 16px;
	}
	.lien small {
		color: white;
		margin-top: 8px;
	}
	.lien .lien__actif {
		color: #da3d22;
		cursor: pointer;
	}
	.lien .lien__active {
		border-bottom: solid 3px #da3d22;
		color: #da3d22;
		cursor: pointer;
	}
	.lien .lien__active:active {
		color: white;
		transition: 0ms;
	}
	.lien__desktop:hover,
	.lien__active:hover {
		color: #da3d22;
		cursor: pointer;
		transition: 200ms ease-in;
	}
	.lien__normal {
		border-bottom: solid 3px #da3d22;
		color: #da3d22;
		cursor: pointer;
		font-weight: bolder;
	}
	.link_id {
		border-bottom: solid 2px #da3d22;
		color: white;
		font-size: 20px;
		text-decoration: none;
		transition: 200ms;
	}
	.link_id:hover {
		color: #da3d22;
		cursor: pointer;
	}
	.link_tw {
		border-bottom: solid 3px #da3d22;
		font-size: 20px;
		font-weight: bold;
		font-weight: bolder;
		margin: 20px 0;
		text-decoration: none;
		transition: 200ms;
	}
	.link_tw:hover {
		color: #da3d22;
		cursor: pointer;
	}
	.logo {
		background-color: #0f0f0f;
		display: flex;
		justify-content: center;
	}
	.logo__ui-kit {
		width: 80%;
	}
	.logo_tbyw {
		width: 18%;
	}
	.merci h1 {
		color: #da3d22;
		font-variant-caps: all-small-caps;
	}
	.merci:after {
		border-bottom: solid 5px #da3d22;
		content: "";
		display: block;
		padding-top: 10px;
		transform: scaleX(0.2);
	}
	.nav {
		width: 60%;
	}
	.nav__el {
		color: white;
		display: inline-block;
		font-size: 20px;
		outline: 0;
		text-decoration: none;
		transition: 100ms ease-out;
	}
	.nav__el:hover {
		color: #da3d22;
		transform: translate(0, -5px);
	}
	.nav__el--actif {
		color: #da3d22;
		font-size: 20px;
		outline: 0;
		text-decoration: none;
	}
	.nav__el--actif:after {
		border-bottom: solid 3px #da3d22;
		content: "";
		display: block;
	}
	.nav__liste {
		display: flex;
		justify-content: space-around;
		list-style-type: none;
		margin: auto;
		padding: 0;
	}
	.nav_button,
	.desktop_none {
		display: none;
	}
	.nav_footer {
		color: white;
		font-size: 20px;
		margin-top: 10px;
		text-align: center;
	}
	.nav_footer p {
		color: white;
		font-size: 20px;
		white-space: nowrap;
	}
	.nav_footer__el {
		color: #da3d22;
		display: inline-flex;
		padding: 0 10px;
	}
	.nav_footer__el--clr {
		border-bottom: solid 2px #da3d22;
		color: white;
		font-size: 20px;
		font-weight: bold;
		text-decoration: none;
		transition: 200ms;
	}
	.nav_footer__el--clr:hover {
		color: #da3d22;
		cursor: pointer;
	}
	.nav_footer__el--clr--actif {
		border-bottom: solid 2px #da3d22;
		color: #da3d22;
		font-size: 20px;
		font-weight: bold;
		text-decoration: none;
		transition: 200ms;
	}
	.nav_footer__liste {
		display: flex;
		justify-content: center;
		padding: 0;
	}
	.nav_ui-kit {
		align-items: center;
		display: flex;
		flex-direction: column;
		text-align: center;
	}
	.nav_ui-kit__el__actif {
		border-bottom: solid 3px #da3d22;
		color: #da3d22;
	}
	.nav_ui-kit__el__hover:hover {
		color: #da3d22;
		transform: translate(0, -5px);
		transition: 100ms ease-in;
	}
	.nav_ui-kit__liste {
		padding: 0;
	}
	.nav_ui-kit__liste li {
		cursor: pointer;
		font-size: 27px;
		list-style-type: none;
		margin-top: 16px;
	}
	.nav_ui-kit__liste li a {
		display: inline-block;
		text-decoration: none;
		transition: 200ms ease-in;
	}
	.nav_ui-kit__liste li small {
		font-variant-caps: normal;
	}
	.pres_desktop {
		background-color: #0f0f0f;
		grid-column-end: 7;
		grid-column-start: 2;
		margin: 40px 0;
		padding: 15px;
	}
	.pres_desktop__bouton {
		background-color: #da3d22;
		border: none;
		color: white;
		cursor: pointer;
		font-size: 20px;
		font-variant-caps: small-caps;
		margin-top: 20px;
		outline: 0;
		padding: 5px 20px;
		position: relative;
		text-decoration: none;
		transition: 200ms ease-out;
	}
	.pres_desktop__bouton:active:after {
		opacity: 0;
		transform: translateX(5px);
		transition: 50ms ease-in;
	}
	.pres_desktop__bouton:after {
		bottom: 0;
		content: "	\00BB";
		font-size: 23px;
		font-weight: 800;
		left: 93%;
		opacity: 0;
		position: absolute;
		right: 0;
		top: 10%;
		transition: 200ms ease-out;
	}
	.pres_desktop__bouton:hover {
		background: #fd2600;
		padding: 5px 40px 5px 20px;
		transition: 200ms ease-in;
	}
	.pres_desktop__bouton:hover:after {
		opacity: 1;
		transition: 500ms;
	}
	.pres_desktop__text {
		color: white;
		font-size: 20px;
		line-height: 200%;
		margin-bottom: 40px;
		margin-top: 20px;
	}
	.pres_desktop__title {
		color: white;
	}
	.pres_desktop__title:after {
		border-bottom: solid 5px #da3d22;
		content: "";
		display: block;
		padding-top: 5px;
		transform: scaleX(0.18);
		transform-origin: 0 0;
	}
	.pres_desktop--margin {
		margin-top: 20px;
	}
	.ress_desktop {
		grid-column-end: 13;
		grid-column-start: 8;
	}
	.ress_desktop__bouton:after {
		left: 88%;
	}
	.ress_desktop__bouton:hover {
		background: #fd2600;
		padding: 5px 40px 5px 20px;
		transition: 200ms ease-in;
	}
	.summary {
		align-items: center;
		display: flex;
		grid-column: span 13;
		justify-content: center;
		margin-top: -20px;
		position: relative;
		text-align: center;
	}
	.summary__container {
		background-color: rgba(15, 15, 15, 0.8);
		margin: 200px 0;
		padding: 50px 30px;
		position: absolute;
		width: 80%;
	}
	.summary__container--title {
		border-bottom: solid 3px #da3d22;
		color: white;
		font-size: 39px;
	}
	.summary_link {
		margin-bottom: 10px;
	}
	.tantek_book {
		display: grid;
		grid-column-end: 10;
		grid-column-start: 5;
		grid-row: span 2;
		grid-template-columns: repeat(13, 1fr);
	}
	.tantek_github {
		display: grid;
		grid-column-end: 5;
		grid-column-start: 2;
		grid-row: span 1;
		grid-template-columns: repeat(13, 1fr);
	}
	.tantek_media {
		display: grid;
		grid-column-end: 13;
		grid-column-start: 10;
		grid-row: span 1;
		grid-template-columns: repeat(13, 1fr);
	}
	.tantek_rs {
		display: grid;
		grid-column-end: 13;
		grid-column-start: 6;
		grid-template-columns: repeat(13, 1fr);
	}
	.tantek_tantek {
		display: grid;
		grid-column-end: 6;
		grid-column-start: 2;
		grid-template-columns: repeat(13, 1fr);
	}
	.TBYW {
		color: white;
		font-weight: bolder;
	}
	.text_left {
		text-align: right;
		text-shadow: #0f0f0f 1px 1px;
	}
	.text_right {
		text-align: left;
		text-shadow: #da3d22 1px 1px;
	}
	.title_experience {
		background-color: #da3d22;
		display: flex;
		grid-column-end: 12;
		grid-column-start: 3;
		justify-content: center;
		margin-top: 20px;
		padding: 5px 0;
	}
	.title_experience--deco {
		color: white;
	}
	.title_left {
		text-align: right;
	}
	.title_left__deco {
		text-shadow: #0f0f0f 3px 3px;
	}
	.title_right {
		text-align: left;
	}
	.title_right__deco {
		text-shadow: #da3d22 -3px 3px;
	}
	.title_tantek {
		font-size: 20px;
		grid-column-end: 13;
		grid-column-start: 2;
	}
	.title_tantek:after {
		border-bottom: solid 5px #da3d22;
		content: "";
		display: block;
		padding-top: 5px;
		transform: scaleX(0.1);
		transform-origin: 0 0;
	}
	.container_all .titre h2 {
		border: none;
	}
	.titre h3,
	h2 {
		margin: 10px 0px;
	}
	.titre__uk {
		display: inline;
	}
	.titre__uk {
		margin-top: 16px;
	}
	.ui_kit:after {
		border-bottom: solid 5px #da3d22;
		content: "";
		display: block;
		transform: scaleX(0.1);
		transform-origin: 0 0;
	}
	.ui-kit {
		margin: 20px 0;
	}
}

@media(-webkit-min-device-pixel-ratio:2),
(min-resolution:192dpi) {
	.img_conclusion {
		background: url('../images/conclusion@2x.jpg')center;
		background-size: cover;
	}
	.img_htd {
		background: url('../images/htd@2x.jpg')center;
		background-size: cover;
	}
	.img_me {
		background: url('../images/me@2x.jpg')center;
		background-size: cover;
	}
	.img_rs {
		background: url('../images/fb@2x.jpg') center;
		background-size: cover;
	}
	.img_ux {
		background: url('../images/ux@2x.jpg')center;
		background-size: cover;
	}
	.img_web {
		background: url('../images/web@2x.jpg') center;
		background-size: cover;
	}
}