html, body {
		overflow-x: hidden;
	}
	/* partie banner */
	body{
		font-family: "Chiron GoRound TC", sans-serif;
		font-optical-sizing: auto;
		font-style: normal;
		margin: 0;
		padding: 0;
	}
	
	
	nav {
		padding: 0ex 0ex 2rem 0ex;
		position: relative;
		width: 100%;
		overflow: hidden;
	}

	.topSpace {
		width: 50%;
		height: 100px;
		background: #ffffff;
		display: flex;
		flex-direction : row-reverse;
		justify-content: center;
		flex-direction: column;
	}
	.s2 {
		display: flex;
		justify-content: center;
		background: #0c4c74;
		width: 100%;
		align-items: center;
		height: 80px;
	}
	.s3 {
		background: #1e74a5;
		width: 100%;
		height: 40px;
	
	}

	.content {
		width: 100%;		
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 18px;
		height: 100%;
	}

	.textRow {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.title_logo {
		background-image: url('../img/Banner_Title.svg');
  		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		height: 3rem;
		width: 30rem;
	}

	.logo {
		background-image: url('../img/Banner_logo.svg');
  		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		width: 12rem;
		margin: 0rem 6rem 4rem 0rem;
		height: 11rem;
    	transform: scale(2) translateY(0) rotate(0deg);
    	transition: transform 0.25s ease-out;
	}

	.logo:hover {
		animation: logoShake 0.5s ease-in-out 1;
	}

	@keyframes logoShake {
		0% {
			transform: scale(2) translateY(0px) rotate(0deg);
		}
		20% {
			transform: scale(2.1) translateY(-15px) rotate(-6deg);
		}
		40% {
			transform: scale(2.1) translateY(-15px) rotate(6deg);
		}
		60% {
			transform: scale(2.1) translateY(-15px) rotate(-4deg);
		}
		80% {
			transform: scale(2.1) translateY(-15px) rotate(4deg);
		}
		100% {
			transform: scale(2) translateY(0px) rotate(0deg);
		}
	}

	.cornerFlower {
		background-image: url('../img/Banner_Corner_flower.svg');
  		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		margin: -6rem 0rem 0rem 0rem;
		width: 1rem;
		height: 1.5rem;
    	transform: scale(2.0);
	    animation: rotate 6s ease-in-out infinite;
	}

	@keyframes rotate {
		0% {
			transform: scale(2) rotateZ(0);
		}

		50% {
			transform: scale(2) rotateZ(-180deg);
		}

		100% {
			transform: scale(2) rotateZ(0);
		}
	}
	.cornerFlower2 {
		background-image: url('../img/Banner_Corner_flower2.svg');
  		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		margin: -9rem -3rem 0rem 0rem;
		width: 2rem;
		height: 2rem;
    	transform: scale(2.0);
	    animation: rotate_reverse 6s ease-in-out infinite;
	}

	@keyframes rotate_reverse {
		0% {
			transform: scale(2) rotateZ(0);
		}

		50% {
			transform: scale(2) rotateZ(180deg);
		}

		100% {
			transform: scale(2) rotateZ(0);
		}
	}

	h1, h2 {
		font-size: 1.2rem;
		text-align: right;
		margin: 0;
		color: #ec6e3b;
	}

	.topLink, .separator {
		text-decoration: none;
		color: #0c4c74;
		font-family: "Chiron GoRound TC", sans-serif;
		font-optical-sizing: auto;
		font-weight: 800;
		font-style: normal;
	}
	.separator {
		margin: 0 10px;
	}

	.space {
		display: flex;
		justify-content: right;
		flex-direction: end;
		width: 50%;
		padding : 10px;
		font-size: 1.1rem;
	}
	.blank {
		display: flex;
		justify-content: right;
		width: 11rem;
	}
	/* partie présentation */
	section {
		margin: 1rem 0rem 0rem 0rem;
		padding: 2.5rem 0rem 2.5rem 0rem;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.blue_background{
		background: #1e74a5;
	}
	.stripe_blue {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		background: #1e74a5;
	}
	.stripe_white {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		background: #ffffff;
		color: #000000;
	}
	.main_row_x1 {
		width: 55%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 1rem 0rem 2rem 0rem;
	}
	.main_row_x2 {
		width: 55%;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.presP {
		color: #ffffff;
		font-family: "Chiron GoRound TC", sans-serif;
		font-optical-sizing: auto;
		font-size: 1.25rem;
		font-weight: 300;
		font-style: regular;
		margin: 0.5rem 0rem 0.5rem 0rem;
	}
	.center {
		text-align: center;
	}
	.bold {
		font-weight: 600;
	}
	.yellowType {
		color: #f8b133;
	}
	.col {
		width: 55%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.corner_low_right {
		display: flex;
		margin: 0rem -20rem 0rem 0rem;
		justify-content: right;
	}
	.bouquet {
		background-image: url('/img/Presentation_bouquet.svg');
  		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		width: 2.5rem;
		height: 2.5rem;
		transform: scale(6.0);
		object-fit: contain;
		animation: grow 2s ease-in-out 1;
	}
	@keyframes grow {
		0% {
			opacity: 0;
			transform: scale(6) rotateZ(0deg);
		}

		50% {
			opacity: 1;
			transform: scale(10) rotateZ(40deg);
		}

		100% {
			transform: scale(6) rotateZ(0deg);
		}
	}
	

	/* Partie vendre vos livres*/
	.sellYourBooks {
		margin: 1rem 0rem 0.5rem 0rem;
		color: #0c4c74;;
		font-size: 2.3em;
	}
	.white-text {
		color: #ffffff;
		font-size: 1.5rem;
		margin: 2rem 0rem 1rem 0rem;
	}
	.greenLight {
		color: #5e8f5e;
	}
	.redLight {
		color: #ff0000;
	}
	.main_row_x3 {
		width: 55%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 1rem 0rem 1rem 0rem;
		background: #ffffff;
	}
	.main_row_xx {
		width: 60%;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
		align-items: center;
	}
	.notice_img_1 {
		background-image: url('/img/notice/notice_steps_VF-01.svg');
	}
	.notice_img_2 {
		background-image: url('/img/notice/notice_steps_VF-02.svg');
	}
	.notice_img_3 {
		background-image: url('/img/notice/notice_steps_VF-03.svg');
	}
	.notice_img_4 {
		background-image: url('/img/notice/notice_steps_VF-04.svg');
	}
	.notice_img_5 {
		background-image: url('/img/notice/notice_steps_VF-05.svg');
	}
	.notice_img_6 {
		background-image: url('/img/notice/notice_steps_VF-06.svg');
	}
	.notice_img_1, .notice_img_2, .notice_img_3, .notice_img_4, .notice_img_5, .notice_img_6 {
  		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		width: 20rem;
		height: 20rem;
		object-fit: contain;
		margin: 0.5rem 1rem 0.5rem 1rem;
		transition: transform 0.3s ease-in-out;
	}
	.notice_img_1:hover, .notice_img_2:hover, .notice_img_3:hover,	.notice_img_4:hover, .notice_img_5:hover, .notice_img_6:hover {
		transform: scale(1.2);
	}
	/*Partie Contact*/
	.contactLink {
		text-decoration: none;
		color: #ffffff;
		font-family: "Chiron GoRound TC", sans-serif;
		font-optical-sizing: auto;
		font-style: normal;
	}
	.col_contact {
		display: flex;
		flex-direction: column;
		align-items: left;
		margin: 1rem;
	}
	.map{
		width: 55%;
	}
	.main_row_x4 {
		width: 55%;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin: 2rem 0rem 2rem 0rem;
	}
	.bouquet_top {
		background-image: url('/img/Contact_TopFlowers.svg');
  		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		margin: 0rem 0rem 0rem 17rem;
		width: 3rem;
		height: 3rem;
		transform: scale(6.0);
		object-fit: contain;
		animation: grow 2s ease-in-out 1;
	}
	.bouquet_down {
		background-image: url('/img/Contact_BottomFlowers.svg');
  		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		width: 3.5rem;
		height: 3.5rem;
		margin: 0rem 0rem 0rem -50rem;
		transform: scale(6.0);
		object-fit: contain;
		animation: grow 2s ease-in-out 1;
	}
	.findUs {
		margin: 0rem 0rem 0.5rem 0rem;
		color: #0c4c74;;
		font-size: 2.3em;
	}

	/*Partie Footer*/
	.logoIG, .logoBB, .logoFB {
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		margin: 0rem 0.5rem 0rem 0.5rem;
		width: 4rem;
		height: 4rem;
	}
	.logoFB {
		background-image: url('/img/L_FB.svg');
	}
	.logoIG {
		background-image: url('/img/L_IG.svg');
	}
	.logoBB {
		background-image: url('/img/L_BB.svg');
	}
	.main_row_xfoot {
		width: 55%;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: end;
		margin: 2rem 0rem 2rem 0rem;
	}
	.stripe_dark_blue {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 10rem;
		width: 100%;
		background: #0c4c74;
	}
	.legals {
		color: #0c4c74;
		font-size: 1rem;
		margin: 1rem 0rem 1rem 0rem;
	}

/*###################################################################################*/
@media (min-width: 1561px) {
	.photo1 {
		width: 11ex;
    	transform: scale(6.4);
		object-fit: contain;
		margin: 2.5rem 0rem 0rem 0rem;
		opacity: 0;
		animation: appears 2s ease-in-out 1;
		animation-fill-mode: forwards;
	}
	.photo2 {
		width: 11ex;
    	transform: scale(6.4);
		object-fit: contain;
		margin: 2.5rem 0rem 0rem 0rem;
		opacity: 0;
		animation: appears 2s ease-in-out 1;
		animation-delay: 0.3s;
		animation-fill-mode: forwards;
	}
	.photo3 {
		width: 11ex;
    	transform: scale(6.4);
		object-fit: contain;
		margin: 2.5rem 0rem 0rem 0rem;
		opacity: 0;
		animation: appears 2s ease-in-out 1;
		animation-delay: 0.6s;
		animation-fill-mode: forwards;
	}

	@keyframes appears {
		0% {
			opacity: 0;
			transform: scale(6.4) translateX(-100px) ;
		}

		50% {
			opacity: 1;
			transform: scale(6.4) translateX(0px);
		}

		100% {
			opacity: 1;
			transform: scale(6.4) translateX(0);
		}
	}
}


/*-----------------------------------------------------------------------------------*/
/*-------------------------------------------------------TELEPHONE-------------------*/
/*-----------------------------------------------------------------------------------*/


@media (max-width: 768px) {

    /* ---------- Général ---------- */
	section {
		margin: 0;
		padding: 0;
	}
	
    h1 {
		margin: 0rem 1rem 0rem 1rem;
        font-size: 1.3rem;
        text-align: center;
    }

    h2 {
		margin: 0rem 1rem 0rem 1rem;
        font-size: 1.3rem;
        text-align: center;
    }

    .presP {
        font-size: 1.2rem;
        text-align: center;
    }

    /* ---------- Bandeau supérieur ---------- */
	nav {
		padding: 0;
	}
    .topSpace {
        width: 100%;
        height: auto;
        padding: 1rem 0;
    }

    .space {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        text-align: center;
        font-size: 1rem;
    }


    /* ---------- Bannière ---------- */

	.s2 {
		height: 50%;
		flex-direction: column;
	}
	.content {
        flex-direction: column;
        gap: 2rem;
        padding: 2rem 0;
    }

 	.logo {
		scale: 0%;
		display: none;
	}

    .title_logo {
		background-image: url('/img/Banner_logo_resp.svg');
  		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		height: 11rem;
		/* transform: scale(4.0); */
		margin: 2rem 0rem 2rem 0rem;
	    animation: none;
	}
	.topLink, .separator {
		font-size: 1.5rem;
	}

    /* ---------- Largeurs générales ---------- */

    .main_row_x1,
    .main_row_x2,
    .main_row_x3,
    .main_row_x4,
    .main_row_xfoot,
    .map {
        width: 92%;
    }

    /* ---------- Colonnes ---------- */

    .main_row_x2,
    .main_row_x4 {
        flex-direction: column;
        gap: 2rem;
    }

	.col {
		width: 90%;
		padding-bottom: 2rem;
		margin-top: -2rem;
	}
    /* ---------- Photos ---------- */

    .photo1, .photo2, .photo3 {
		display: hidden;
        width: 0rem;
		height: 0rem;
        transform: scale(0);
        margin-top: 1rem;
		animation: none;
    }

    /* ---------- Notice ---------- */

    .main_row_xx {
        width: 100%;
        justify-content: center;
    }


    /* ---------- Contact ---------- */

    .col_contact {
        align-items: center;
        text-align: center;
    }

    .map {
        width: 100%;
    }

    /* ---------- Footer ---------- */

    .main_row_xfoot {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 1rem;
    }

    .logoFB,
    .logoIG,
    .logoBB {
        width: 4rem;
        height: 4rem;
    }

    .legals {
        text-align: center;
        font-size: .9rem;
    }
	.stripe_dark_blue {
		width: 100%;
		height: 5rem;
	}

    /* ---------- Titres ---------- */

    .sellYourBooks,
    .findUs {
        font-size: 1.8rem;
        text-align: center;
    }

    /* ---------- Décorations ---------- */
	.blank {
		width: 10%;
		margin: -5rem -8rem 4rem 0rem;
	}
	.corner_low_right {
		margin: 0rem -15rem 0rem 0rem;
	}	
    .bouquet {
		scale: 0.8;
	}
    .bouquet_top,
    .bouquet_down {
        display: none;
    }
}


/*-----------------------------------------------------------------------------------*/
/*-------------------------------------------------------CAS SPECIFIQUE-------------------*/
/*-----------------------------------------------------------------------------------*/



@media (max-width: 1560px){

	.col {
		width: 45%;
	}
	.photo1 {
		width: 11ex;
    	transform: scale(5);
		object-fit: contain;
		margin: 2.5rem 0rem 0rem 0rem;
		opacity: 0;
		animation: appears 2s ease-in-out 1;
		animation-fill-mode: forwards;
	}
	.photo2 {
		width: 11ex;
    	transform: scale(5);
		object-fit: contain;
		margin: 2.5rem 0rem 0rem 0rem;
		opacity: 0;
		animation: appears 2s ease-in-out 1;
		animation-delay: 0.3s;
		animation-fill-mode: forwards;
	}
	.photo3 {
		width: 11ex;
    	transform: scale(5);
		object-fit: contain;
		margin: 2.5rem 0rem 0rem 0rem;
		opacity: 0;
		animation: appears 2s ease-in-out 1;
		animation-delay: 0.6s;
		animation-fill-mode: forwards;
	}

	@keyframes appears {
		0% {
			opacity: 0;
			transform: scale(5) translateX(-100px) ;
		}

		50% {
			opacity: 1;
			transform: scale(5) translateX(0px);
		}

		100% {
			opacity: 1;
			transform: scale(5) translateX(0);
		}
	}

}

/*-----------------------------------------------------------------------------------*/
/*-------------------------------------------------------TABLETTE-------------------*/
/*-----------------------------------------------------------------------------------*/

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

    /* =========================
       GLOBAL
    ========================= */

    h1, h2 {
        font-size: 1.4rem;
        text-align: center;
    }

    .presP {
        font-size: 1.5rem;
        text-align: center;
    }

    section {
        padding: 0;
    }

    /* =========================
       NAV / BANNER
    ========================= */

    nav {
        padding: 0 0 0 0;
    }

    .topSpace {
        width: 100%;
        height: auto;
		margin: 1rem 0rem 1rem 0rem;
    }

    .space {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        text-align: center;
    }

    .s2 {
        flex-direction: column;
        height: auto;
        padding: 1.5rem 0;
    }

    .content {
        flex-direction: column;
        gap: 2rem;
    }
	.logo {
		scale: 0%;
		display: none;
	}

    .title_logo {
		background-image: url('/img/Banner_logo_resp.svg');
  		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		height: 15rem;
		/* transform: scale(4.0); */
		margin: -1rem 0rem 2rem 0rem;
	    animation: none;
	}
   
	.blank {
		width: 10%;
		margin: -10rem -8rem 8rem 0rem;
	}
	.topLink, .separator {
		font-size: 1.5rem;
	}
	.blue_background {
		padding: 0;
		margin: 0;
	}

    /* =========================
       STRUCTURE GÉNÉRALE
    ========================= */

    .main_row_x1,
    .main_row_x2,
    .main_row_x3,
    .main_row_x4,
    .main_row_xfoot,
    .map {
        width: 85%;
    }

    /* Colonnes → plus respirant mais encore en row */
    .main_row_x2,
    .main_row_x4 {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2rem;
    }

    .col {
        width: 90%;
    }

    /* =========================
       IMAGES / ILLUSTRATIONS
    ========================= */

    .photo1, 
	.photo2,
	.photo3 {
		display: hidden;
        width: 0rem;
		height: 0rem;
        transform: scale(0);
        margin-top: 0.5rem;
		animation: none;
    }

    .corner_low_right {
        margin: 4rem -30rem 0 0;

    }
	.bouquet {
		scale: 1.2;
		margin: -8rem 0rem 0rem 0rem;
	}
	.bouquet_top,
    .bouquet_down {
        display: none;
    }

    /* =========================
       NOTICE GRID
    ========================= */

    .main_row_xx {
        width: 100%;
        justify-content: center;
    }


    /* =========================
       CONTACT
    ========================= */

    .map {
        width: 90%;
    }

    .col_contact {
        align-items: center;
        text-align: center;
    }

    /* =========================
       FOOTER
    ========================= */

    .main_row_xfoot {
        justify-content: center;
        flex-wrap: wrap;
    }

    .logoFB,
    .logoIG,
    .logoBB {
        width: 5rem;
        height: 5rem;
    }

    /* =========================
       DÉCORATIONS (allégées)
    ========================= */

    .cornerFlower,
    .cornerFlower2 {
        transform: scale(1.5);
    }

    .bouquet_top,
    .bouquet_down {
        transform: scale(4);
    }
	.stripe_dark_blue {
		height: 5rem;
	}
}