* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html{
	scroll-behavior: smooth;
}

@font-face {
  font-family: "HelloRoti";
  src:
    local("HelloRoti"),
    url("fonts/HelloRoti.otf") format("opentype");
}

body{
/*	overflow-x: hidden;*/
}

/*****--**-----*****--|ACCUEIL|-*****-----**--*****/
  	#sectionaccueil {
    		background: white;
  	}

	 .accueil-container {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    margin: 0 auto;
	    flex-wrap: wrap;
	 }

  .accueil-left {
  	/*  flex: 1;*/
	    width: 60%;
	    padding: 54px;
	    align-items: center;
	    justify-content: center;
	    display: flex;
	    flex-direction: column;
  	}

  	.logo {
    		max-width: 360px;
    		margin-bottom: 20px;
  	}

  	.slogan {
	    font-size: 1.8rem;
	    font-weight: 800;
	    margin: 0;
	    color: black;
	    text-align: center;
	    font-family: "loew-variable", sans-serif;
  	}

  	.baseline {
	    font-size: 1.2rem;
	    margin-bottom: 30px;
	    color: black;
	    text-align: center;
	    font-family: "loew-variable", sans-serif;
  	}

  	.badges {
	    display: flex;
	    flex-wrap: wrap;
	    gap: 15px;
	    margin-bottom: 30px;
	    justify-content: center;
	    max-width: 490px;
  	}

  	.badge {
	    padding: 12px 20px;
  	}

  	.badge p, .badge h1{
  		font-weight: bold;
	    	color: white;
	    	font-size: 1.1rem;
	    	font-family: "loew-variable", sans-serif;
  	}

  	.badge-violet {
	    background-color: #a284be;
	    color: #000;
	    padding: 14px 30px;
	    font-weight: bold;
	    font-size: 1.1rem;
	    display: inline-block;
	    clip-path: polygon(4% 0%, 100% 12%, 100% 100%, 2% 100%);
	    animation: morphClip1 2s infinite linear;
	    transform: rotate(-2deg);
  	}

  	@keyframes morphClip1 {
		0% {
		  clip-path: polygon(4% 0%, 100% 12%, 100% 100%, 2% 100%);
		}
		5%, 25% {
		  clip-path: polygon(3% 2%, 97% 1%, 98% 98%, 1% 97%);
		}
		30%, 50% {
		  clip-path: polygon(6% 0%, 94% 0%, 96% 100%, 4% 100%);
		}
		55%, 75% {
		  clip-path: polygon(4% 1%, 96% 2%, 99% 99%, 2% 98%);
		}
		80%, 100% {
		  clip-path: polygon(4% 0%, 100% 12%, 100% 100%, 2% 100%);
		}
	}



  	.badge-vert {
	    background-color: #2a7c6f;
	    color: #000;
	    padding: 16px 30px;
	    font-weight: bold;
	    font-size: 1.1rem;
	    display: inline-block;
	    animation: morphClip2 2s infinite linear;
	    animation-delay: 1.8s;
	    clip-path: polygon(0% 0%, 100% 5%, 95% 100%, 3% 95%);
  	}

  	@keyframes morphClip2 {
		0% {
		  clip-path: polygon(0% 0%, 100% 5%, 95% 100%, 3% 95%);
		}
		5%, 25% {
		  clip-path: polygon(3% 2%, 97% 1%, 98% 98%, 1% 97%);
		}
		30%, 50% {
		  clip-path: polygon(6% 0%, 94% 0%, 96% 100%, 4% 100%);
		}
		55%, 75% {
		  clip-path: polygon(4% 1%, 96% 2%, 99% 99%, 2% 98%);
		}
		80%, 100% {
		  clip-path: polygon(0% 0%, 100% 5%, 95% 100%, 3% 95%);
		}
	}

  	.badge-orange {
	    background-color: #f26622;
	    color: #000;
	    padding: 14px 30px;
	    font-weight: bold;
	    font-size: 1.1rem;
	    display: inline-block;
	    clip-path: polygon(3% 0%, 100% 3%, 95% 100%, 6% 95%);
	    animation: morphClip3 2s infinite linear;
	    animation-delay: 2.1s;
	    transform: rotate(-1deg);
  	}

  	@keyframes morphClip3 {
		0% {
		  clip-path: polygon(3% 0%, 100% 3%, 95% 100%, 6% 95%);
		}
		5%, 25% {
		  clip-path: polygon(3% 2%, 97% 1%, 98% 98%, 1% 97%);
		}
		30%, 50% {
		  clip-path: polygon(6% 0%, 94% 0%, 96% 100%, 4% 100%);
		}
		55%, 75% {
		  clip-path: polygon(4% 1%, 96% 2%, 99% 99%, 2% 98%);
		}
		80%, 100% {
		  clip-path: polygon(3% 0%, 100% 3%, 95% 100%, 6% 95%);
		}
	}

  	.contact {
	    margin: auto;
	    font-size: 1.1rem;
	    color: #000;
	    align-self: center;
	    padding: 21px;
	    animation: fade-in 4s cubic-bezier(0.390, 0.575, 0.565, 1.000) 2s both;
  	}

	@keyframes fade-in {
	  	0% {opacity: 0;}
	  	100% {opacity: 1;}
	}

  	.contact a{
	    display: block;
	    padding: 2px;
	    font-size: 1.4em;
	    text-decoration: none;
	    font-family: "HelloRoti";
	    color: black;
	    text-align: center;
	    transition: 0.3s;
  	}

  	.contact a:hover{
	    transform: scale(1.1);
	    color: #a284be;
  	}

  	.accueil-right {
	  /*  flex: 1;*/
	    width: 40%;
	    text-align: center;
  	}

  	.photo-chien {
	    width: 100%;
	    object-fit: cover;
	    height: 100vh;
  	}

	/*****--**-----*****--|RESPONSIVE|-*****-----**--*****/
		@media (max-width: 900px) {
		  	.accueil-container {
		    		flex-direction: column-reverse;
		    		align-items: center;
		    		text-align: center;
		    		justify-content: center;
		    		min-height: 100vh;
		  	}

		  	.accueil-right{
		  		display: none;
		  	}

			.badges {
			    justify-content: center;
			}

  			.slogan {
    				font-size: 1.8rem;
    				padding: 19px 0 31px 0;
  			}

		  	.baseline {
		    		font-size: 1rem;
		  	}

		  	.badge {
		    		font-size: 0.95rem;
		  	}
		}

		@media (max-width: 600px) {
		  	#sectionaccueil {
		    		padding: 0;
		  	}

		  	.accueil-left{
		  		width: 100vw;
		  		padding: 8vw;
		  	}

  			.logo {
  				width: 100%;
    				max-width: none;
  			}

  			.slogan {
    				font-size: 1.5rem;
  			}

  			.baseline{
  				margin-top: 21px;
  			}

  			.badge p, .badge h1 {
    				font-size: 1.3rem;
			}

  			.photo-chien {
    				max-width: 100%;
  			}
		}
	/*****--**-----*****--|RESPONSIVE|-*****-----**--*****/
/*****--**-----*****--|ACCUEIL|-*****-----**--*****/

/*****--**-----*****--|POUR L'AMOUR DU CHIEN|-*****-----**--*****/
	#sectionpresentation {
	  	background-color: #a284be;
	  	padding: 60px 30px;
	  	color: #111;
	  	text-align: center;
	  	overflow-x: hidden;
	  	position: relative;
	}

		.decor-image {
  position: absolute;
  top: 25%;
  transform: translateY(-50%);
  opacity: 1;
  z-index: 99;
}

.decor-left {
  left: -3vw;
  max-height: 30vw;
  margin-bottom: 20vw;
  margin-right: 70%;
}

.decor-right {
  right: -3vw;
  max-height: 26vw;
  margin-left: 70%;
}

	.presentation-wrapper {
  		max-width: 1100px;
  		margin: 0 auto;
	}

	.presentation-titre {
  		font-size: 2.2rem;
  		font-weight: 800;
  		margin-bottom: 40px;
  		font-family: "HelloRoti";
	}

	.presentation-texte-bloc {
  		background-color: #c3a6d3;
  		padding: 30px;
  		margin: auto;
  		transform: skewX(-3deg);
  		display: flex;
  		justify-content: space-between;
  		gap: 30px;
  		width: 60%;
  		flex-wrap: wrap;
  		font-family: "loew-variable", sans-serif;
	}

	.presentation-paragraphe {
  		transform: skewX(3deg);
  		flex: 1 1 45%;
  		text-align: left;
  		font-size: 1rem;
  		line-height: 1.1;
	}

	.presentation-images {
  		display: flex;
  		justify-content: center;
  		gap: 30px;
  		margin-bottom: 40px;
	}

	.presentation-image {
  		width: 200px;
  		height: auto;
  		box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  		transition: transform 0.3s ease;
	}

	.image-1 {
  		transform: rotate(-5deg);
	}
	.image-2 {
  		transform: rotate(0deg);
	}
	.image-3 {
  		transform: rotate(5deg);
	}

	.presentation-bouton-container {
  		margin-top: 30px;
	}

	.presentation-bouton {
  		font-family: HelloRoti;
  		display: inline-block;
  		background-color: white;
  		color: #a284be;
  		font-weight: normal;
  		padding: 14px 28px 21px 28px;
  		font-size: 1.3rem;
  		text-decoration: none;
  		clip-path: polygon(5% -10px, 100% -1px, 98% 98%, 3% 88%);
  		transform: scale(1) rotate(3deg);
  		transition: 0.3s;
	}

	.presentation-bouton:hover {
  		transform: scale(1.4) rotate(1deg);
	}

	/*****--**-----*****--|RESPONSIVE|-*****-----**--*****/
		@media (max-width: 850px) {
				.decor-image{
    			top: 10%;
				}
				.presentation-bouton{
					font-size: 2rem;
				}
  			.presentation-texte-bloc {
    				flex-direction: column;
    				transform: none;
    				padding: 20px;
  			}

  			.presentation-paragraphe {
    				transform: none;
    				text-align: center;
  			}

  			.presentation-image {
    				width: 45%;
    				max-width: 250px;
  			}
		}

		@media (max-width: 500px) {
				.decor-image{
					display: none;
				}
  			.presentation-image {
    				max-width: 25vw;
  			}

  			.presentation-titre {
    				font-size: 1.6rem;
  			}

  			.presentation-texte-bloc{
  				width: auto;
  			}

  			.presentation-bouton {
    				font-size: 1.9rem;
    				padding: 16px 20px 30px 20px;
  			}
		}
	/*****--**-----*****--|RESPONSIVE|-*****-----**--*****/
/*****--**-----*****--|POUR L'AMOUR DU CHIEN|-*****-----**--*****/

/*****--**-----*****--|BANDEAU|-*****-----**--*****/
	#sectionbandeau {
	  	background-color: white; /* orange vif */
	  	overflow: hidden;
	  	padding: 21px 0;
	}

	.bandeau-defilement {
	  	position: relative;
	  	width: 100%;
	  	overflow: hidden;
	  	white-space: nowrap;
	}

	.bandeau-contenu {
	  	display: inline-block;
	  	font-weight: 900;
	  	font-size: 2.5rem;
	  	color: black;
	  	animation: defilement 20s linear infinite;
	  	font-family: HelloRoti;
	}

	@keyframes defilement {
	  	0% {transform: translateX(0%);}
	  	100% {transform: translateX(-50%);}
	}

	/*****--**-----*****--|RESPONSIVE|-*****-----**--*****/
		@media (max-width: 600px) {
		  	.bandeau-contenu {
		    		font-size: 1.1rem;
		  	}
		}
	/*****--**-----*****--|RESPONSIVE|-*****-----**--*****/
/*****--**-----*****--|BANDEAU|-*****-----**--*****/

/*****--**-----*****--|POUR QUI ?|-*****-----**--*****/
	#sectionpourqui {
	  	padding: 60px 30px 0 30px;
	  	background: white;
	  	text-align: center;
	}

	.pourqui-wrapper {
	  	max-width: 760px;
	  	margin: 0 auto;
	  	width: 60%;
	}

	.pourqui-titre {
	  	font-size: 5rem;
	  	font-family: HelloRoti;
	  	color: #a284be;
	  	font-weight: 900;
	  	margin-bottom: 40px;
	}

	.pourqui-colonnes {
	  	display: flex;
	  	justify-content: space-between;
	  	gap: 40px;
	  	flex-wrap: wrap;
	  	margin-bottom: 60px;
	}

	.pourqui-colonne {
	  	flex: 1 1 45%;
	  	text-align: left;
	}

	.pourqui-sous-titre {
	     font-size: 1.2rem;
	     font-weight: 800;
	     text-align: center;
	     margin-bottom: 20px;
	     color: #000;
	     text-transform: uppercase;
	     font-family: HelloRoti;
	}

	.pourqui-liste {
	  	list-style: none;
	  	padding: 0;
	  	font-family: "loew-variable", sans-serif;
	  	font-weight: 600;
	  	text-align: center;
	}

	.pourqui-liste li {
	  	margin-bottom: 15px;
	  	font-size: 1rem;
	  	line-height: 1;
	  	display: flex;
	  	align-items: center;
	  	justify-content: center;
	}

	.pourqui-liste img {
  		width: 20px;
  		height: auto;
  		margin-right: 10px;
  		margin-top: 4px;
  		/*animation: rotateBone 4s linear infinite;*/
	}

	@keyframes rotateBone {
	  	from {transform: rotate(0deg);}
	  	to {transform: rotate(360deg);}
	}

	.pourqui-footer {
  		position: relative;
  		display: flex;
  		justify-content: center;
  		align-items: flex-end;
  		gap: 20px;
	}

	.pourqui-dessin {
  		width: 120px;
  		height: auto;
  		display: none;
	}

	.pourqui-bulle {
  		display: inline-block;
  		background-color: #a284be;
  		color: white;
  		padding: 25px 48px 54px 48px;
  		font-family: HelloRoti;
  		font-weight: normal;
  		font-size: 1.6rem;
  		text-decoration: none;
  		clip-path: polygon(
    			2% 4%, 97% 3%, 96% 80%, 28% 71%, 10% 97%, 18% 70%, 1% 70%);
  		transition: background 0.3s;
  		margin-bottom: 54px;
	     animation: pulsate-fwd 2s ease-in-out infinite both;
	}

	@keyframes pulsate-fwd {
	  	0% {transform: scale(1);}
	  	50% {transform: scale(1.1);}
	  	100% {transform: scale(1);}
	}


	.pourqui-bulle:hover {
  		background-color: #8d6fad;
	}

	/*****--**-----*****--|RESPONSIVE|-*****-----**--*****/
		@media (max-width: 850px) {
	  		.pourqui-colonnes {
	    			flex-direction: column;
	    			align-items: center;
	  		}

	  		.pourqui-colonne {
	    			flex: 1 1 100%;
	  		}
		}

		@media (max-width: 600px) {
		  	.pourqui-titre {
    				font-size: 2rem;
    			}

    			.pourqui-wrapper {
    				max-width: none;
    				width: 90%;
    			}

    			.pourqui-bulle {
    				padding: 16px 16px 47px 16px;
    				font-size: 1.3rem;
			}
		}
	/*****--**-----*****--|RESPONSIVE|-*****-----**--*****/
/*****--**-----*****--|POUR QUI ?|-*****-----**--*****/

/*****--**-----*****--|POURQUOI MOI ?|-*****-----**--*****/
	#sectionpourquoimoi {
	  	background-color: #2a7c6f;
	  	color: white;
	  	padding: 80px 0 11px 80px;
	}

	.pourquoimoi-container {
	  	display: flex;
	  	justify-content: space-between;
	  	align-items: flex-start;
	  	margin: auto;
	  	gap: 60px;
	}

	.pourquoimoi-texte {
	  	flex: 1 1 55%;
	}

	.pourquoimoi-svg {
	  	flex: 1 1 40%;
	  	display: flex;
	  	justify-content: flex-end;
	  	align-items: center;
	  	overflow: visible;
	}

	.chien-svg {
	  	max-width: 340px;
		  height: auto;
		  object-fit: contain;
		  padding-right: 7vw;
		  overflow: visible;
		  transition: 0.3s;
	}

	.chien-svg:hover{
		cursor: grab;
	}

	#queuechiensvg {
  	animation: remueQueue 2s ease-in-out infinite alternate;
  	transform-origin: 80% 90%; /* adapte si besoin pour coller au pivot naturel */
	}

	.chien-svg:hover #queuechiensvg{
		animation: remueQueue 0.2s ease-in-out infinite alternate;
	}

	@keyframes remueQueue {
	  0% {
	    transform: rotate(10deg);
	  }
	  100% {
	    transform: rotate(-15deg);
	  }
	}



	.pourquoimoi-titre {
	  	font-size: 2rem;
	  	font-family: HelloRoti;
	  	font-weight: 900;
	  	margin-bottom: 20px;
	  	transform: rotate(-2deg);
	}

	.pourquoimoi-soustitre {
	  	font-size: 1.4rem;
	  	font-family: HelloRoti;
	  	font-weight: 900;
	  	margin-top: 40px;
	  	margin-bottom: 10px;
	  	transform: rotate(-1deg);
	}

	.pourquoimoi-paragraphe {
	  	font-size: 1rem;
	  	font-family: "loew-variable", sans-serif;
	  	line-height: 1;
	  	margin: 20px;
	  	color: black;
	}

	.pourquoimoi-baseline {
	  	text-align: center;
	  	font-size: 1rem;
	  	font-family: "loew-variable", sans-serif;
	  	max-width: 720px;
	  	padding: 36px;
	  	margin: auto;
	  	color: white;
	}

	.chien-svg{

	}
	/*****--**-----*****--|RESPONSIVE|-*****-----**--*****/
		@media (max-width: 850px) {
				#sectionpourquoimoi{
					padding: 80px 80px 11px 80px;
				}
		  	.pourquoimoi-container {
		    		flex-direction: column;
		    		align-items: center;
		    		text-align: center;
		  	}

		  	.pourquoimoi-texte {
		    		text-align: center;
		  	}

		  	.pourquoimoi-svg {
		    		justify-content: center;
		    		margin-top: 40px;
		  	}
		}

		@media (max-width: 600px) {
		    #sectionpourquoimoi {
		        padding: 46px 12px;
		    }
		}
	/*****--**-----*****--|RESPONSIVE|-*****-----**--*****/
/*****--**-----*****--|POURQUOI MOI ?|-*****-----**--*****/

/*****--**-----*****--|SERVICES|-*****-----**--*****/
	.sectionservice1 {
	  	background-color: #f26622; /* orange Cynolove */
	  	padding: 80px 30px;
	  	color: white;
	  	font-family: "loew-variable", sans-serif;
	}

	.service1-container {
  		display: flex;
  		justify-content: space-between;
  		max-width: 1200px;
  		margin: 0 auto;
  		flex-wrap: wrap;
  		align-items: center;
	}

	.service1-illustration {
  		flex: 1 1 30%;
  		display: flex;
  		justify-content: center;
  		align-items: center;
	}

	.service1-illustration img {
  		width: 100%;
  		max-width: 250px;
  		height: auto;
	}

	.service1-illustration #servicecomportementalistecanin,
	.service1-illustration #servicechiot{
		max-width: 190px;
	}

	.service1-contenu {
  		flex: 1 1 65%;
	}

	.service1-titre {
  		font-size: 3rem;
  		font-family: HelloRoti;
  		font-weight: 900;
	}

	.service1-accroche {
  		font-size: 1.5rem;
  		font-family: HelloRoti;
  		margin-bottom: 30px;
  		font-style: italic;
  		color: #fff9f3;
	}

	.service1-etapes{
		background-color: white;
	  	padding: 21px;
	  	max-width: 520px;
	}

	.service1-etapes .etape {
  		margin-bottom: 25px;
	}

	.service1-etapes .etape ul li{
		margin: 8px;
	}

	.service1-etapes h3 {
  		font-size: 1.1rem;
  		margin-bottom: 8px;
  		color: white;
	}

	.service1-etapes p {
  		font-size: 1rem;
  		line-height: 1.2;
  		color: black;
	}

	.service1-objectifs h3 {
  		font-size: 1.1rem;
  		margin-bottom: 10px;
	}

	.service1-objectifs ul {
  		padding-left: 0;
  		margin: 29px 21px 36px 21px;
  		padding-left: 20px;

	}

	.service1-objectifs li {
  		margin-bottom: 8px;
  		position: relative;
  		align-items: center;
  		list-style: disc;
	}


	/*****--**-----*****--|RESPONSIVE|-*****-----**--*****/
		@media (max-width: 850px) {
				.service1-etapes{
					margin: auto;
				}
				.service1-titre, .service1-accroche{
					text-align: center;
				}
	  		.service1-container {
	    			flex-direction: column;
	    			align-items: center;
	    			text-align: center;
	  		}

	  		.service1-illustration {
	    			margin-bottom: 30px;
	  		}

	  		.service1-contenu {
	    			text-align: left;
	  		}

	  		.service1-objectifs li {
	    			text-align: left;
	  		}
		}

		@media (max-width: 600px) {
			.sectionservice1{
				padding: 40px 30px;
			}

			.service1-illustration img{
				max-width: 50vw;
			}

			.service1-titre {
    		font-size: 1.5rem;
    	}

    	.service1-accroche {
    		margin-top: 12px;
    		font-size: 1rem;
    	}
		}
	/*****--**-----*****--|RESPONSIVE|-*****-----**--*****/	
/*****--**-----*****--|SERVICES|-*****-----**--*****/





/*****--**-----*****--|PRESENTATION LUCIE|-*****-----**--*****/
	#sectionpresentationlucie {
	  	padding: 80px 0 0 0;
	  	background: white;
	  	color: #000;
	  	overflow-x: hidden;
	}

	#sectionpresentationlucie img{
		width: 40%;
		object-fit: cover;
	}

	.presentationlucie-bloc{
		display: flex;
	}

	.lucie-colonne{
		padding: 0 40px 80px 0;
		width: 60%;
		font-family: "loew-variable", sans-serif;
		display: flex;
    flex-direction: column;
    align-items: center;
	}

	.lucie-texte{
		padding: 56px;
    max-width: 640px;
    margin: auto;
	}

	.lucie-texte p{
		padding-bottom: 14px;
	}

	.presentationlucie-titre {
	  	font-size: 2.4rem;
	  	transform: rotate(-2deg);
	  	font-weight: 900;
	  	text-align: center;
	  	margin-bottom: 60px;
	  	font-family: HelloRoti;
	}

	.btn-presentationlucie {
	  	display: inline-block;
	  	background-color: #a284be;
	  	font-family: HelloRoti;
	  	color: white;
	  	padding: 16px 41px 16px 28px;
	  	transform: rotate(-2deg);
	  	font-weight: normal;
	  	font-size: 2rem;
	  	text-decoration: none;
	  	clip-path: polygon(0% 6%, 95% 3%, 92% 90%, 4% 100%);
	  	transition: background-color 0.3s ease;
	}

	.btn-presentationlucie:hover {
	  	background-color: #8b6aac;
	}

	.tooltip {
	  position: fixed;
	  background-color: #4e8165;
	  color: white;
	  padding: 8px 12px;
	  font-size: 1rem;
	  font-family: HelloRoti;
	  pointer-events: none;
	  white-space: nowrap;
	  z-index: 9999;
	  clip-path: polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%)
	  transform: translate(10px, 10px) rotate(-40deg);
	  opacity: 0;
	  transition: opacity 0.1s ease;
	}

	/*****--**-----*****--|RESPONSIVE|-*****-----**--*****/
		@media (max-width: 850px) {
		  	.presentationlucie-bloc {
		    		flex-direction: column;
		    		align-items: center;
		  	}

		  	.lucie-colonne {
			    padding: 0 40px 80px 40px;
			    width: 100%;
			  }

			  #sectionpresentationlucie img{
    			width: 60%;
    		}
    		#sectionpresentationlucie img:nth-child(2) {
    			width: 100%;
    		}

		  	.annotation-lucie, .annotation-bungle {
		    		position: static;
		    		margin-top: 10px;
		    		text-align: center;
		  	}

		  	.lucie-colonne, .bungle-colonne {
		    		flex: 1 1 100%;
		    		text-align: center;
		  	}

		  	.lucie-texte {
		    		text-align: left;
		    		margin-top: 30px;
		  	}
		}

		@media (max-width: 600px) {
			#sectionpresentationlucie {
    		padding: 0 0;
    		overflow-x: hidden;
    	}

    	#sectionpresentationlucie img {
        width: 100%;
        padding: 21px 0;
    	}

    	.lucie-colonne {
        padding: 0 21px 21px 21px;
      }

			.presentationlucie-titre {
    		font-size: 1.5rem;
    		width: 80%;
    		margin: auto;
    		padding-top: 21px;
			}

			.lucie-colonne, .bungle-colonne {
        flex: auto;
    	}

    	.lucie-texte {
        margin-top: 0;
        padding: 0;
    	}

    	#sectionpresentationlucie img:nth-child(2) {
        display: none;
    	}
		}
	/*****--**-----*****--|RESPONSIVE|-*****-----**--*****/
/*****--**-----*****--|PRESENTATION LUCIE|-*****-----**--*****/











/*****--**-----*****--|FORMATION|-*****-----**--*****/
	#sectionformation {
  		background-color: #2a7c6f;
  		color: white;
  		padding: 80px 30px;
	}

	.formation-wrapper {
	  	max-width: 960px;
	  	margin: 0 auto;
	  	width: 60%;
	}
	
	.formation-titre {
	  	font-size: 3rem;
 		font-weight: 900;
 		text-align: left;
 		margin-bottom: 50px;
 		font-family: HelloRoti;
 		width: 28vw;
 		transform: rotate(-2deg);
 		margin-left: -10vw;
	}
	
	.formation-cartes {
	  	display: flex;
	  	flex-direction: column;
	  	gap: 30px;
	}
	
	.carte-formation {
	  	background-color: #1f6154;
	  	font-family: "loew-variable", sans-serif;
	  	padding: 60px;
	  	z-index: 99;
	}

	.carte-formation:nth-child(1){ clip-path: polygon(6% 14%, 99% 2%, 95% 94%, 8% 90%); }
	.carte-formation:nth-child(2){ clip-path: polygon(4% 3%, 95% 0%, 99% 100%, 1% 98%); }
	.carte-formation:nth-child(3){ clip-path: polygon(9% 4%, 95% 10%, 100% 97%, 7% 97%); }

	.formation-cartes img{
		width: 120px;
	}

	.formation-cartes img:nth-child(1){
		margin-left: 60%;
		margin-bottom: -90px;
	}
	.formation-cartes img:nth-child(3){
		margin-left: 15%;
		margin-bottom: -40px;
	}
	.formation-cartes img:nth-child(5){
		margin-left: 40%;
		margin-bottom: -50px;
	}

	.carte-formation h3 {
	  	font-size: 1.6rem;
	  	width: 80%;
	  	margin: auto;
	  	text-align: center;
	  	font-weight: 700;
	  	margin-bottom: 8px;
	}

	.carte-formation .infos {
	  	font-size: 0.85rem;
	  	font-style: italic;
	  	margin-bottom: 12px;
	  	color: #c6f5ec;
	  	text-align: right;
	}
	
	.carte-formation .desc {
	  	font-size: 1rem;
	  	text-align: center;
	  	line-height: 1.2;
	  	width: 80%;
	  	margin: auto;
	}
	/*****--**-----*****--|RESPONSIVE|-*****-----**--*****/
		@media (max-width: 850px) {
				.formation-wrapper{
					width: 80%;
				}
		  	.formation-titre {
		  		width: 50vw;
		  		margin-left: -5vw;
		  	}

		  	.carte-formation:nth-child(4){ clip-path: polygon(6% 4%, 95% 13%, 99% 94%, 1% 98%); }
				.carte-formation:nth-child(6){ clip-path: polygon(9% 4%, 95% 10%, 100% 97%, 7% 97%); }

				.formation-cartes img:nth-child(1){
		margin-bottom: -80px;
	}

				.formation-cartes img:nth-child(3){
		margin-bottom: -60px;
	}
	.formation-cartes img:nth-child(5){
		margin-bottom: -60px;
	}

  			.carte-formation {
    				text-align: left;
  			}
		}




	@media (max-width: 600px) {
		#sectionformation {
	    background-color: #2a7c6f;
	    color: white;
	    padding: 41px 11px;
	  }

	  .formation-cartes{
	  	gap: 0;
	  }

	  .carte-formation h3 {
    	font-size: 1.2rem;
    }
	  .formation-cartes img{
	  	display: none;
	  }

		.formation-titre {
        width: 100%;
        margin-left: 0;
        font-size: 1.5rem;
    }
    .carte-formation {
		    padding: 51px 0px;
		}

		.carte-formation .infos {
    	text-align: center;
    	max-width: 80%;
    	margin:auto;
		}

    .formation-wrapper {
        width: 98%;
    }

	}
	/*****--**-----*****--|RESPONSIVE|-*****-----**--*****/	
/*****--**-----*****--|FORMATION|-*****-----**--*****/

/*****--**-----*****--|ADHESION ANNUELLE|-*****-----**--*****/
	#sectionadhesion {
	  	background-color: #a284be;
	  	color: white;
	  	padding: 80px 30px 120px;
	  	position: relative;
	}

	.adhesion-wrapper {
	  	max-width: 1000px;
	  	margin: 0 auto;
	}

	.adhesion-titre-wrapper{
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.adhesion-titre-wrapper img:nth-child(1){
		width: 30%;
		animation: rotateBone 15s linear infinite;
	}
	.adhesion-titre-wrapper img:nth-child(3){
		width: 30%;
		animation: rotateBone 14s linear infinite;
	}

	.adhesion-titre {
	  	font-size: 3rem;
	  	font-weight: 900;
	  	text-align: center;
	  	margin-bottom: 20px;
	  	font-family: HelloRoti;
	  	padding: 0 54px;
	}

	.adhesion-intro {
	  	text-align: center;
	  	font-size: 1.1rem;
	  	margin-bottom: 30px;
	  	font-family: "loew-variable", sans-serif;
	}

	.adhesion-texte {
	  	font-size: 1rem;
	  	line-height: 1.2;
	  	text-align: center;
	  	max-width: 640px;
	  	margin: 0 auto 60px;
	  	color: #fff9f9;
	  	font-family: "loew-variable", sans-serif;
	}

	.adhesion-texte p{
		padding: 12px 0;
	}

	.adhesion-oui-zone {
	  	position: relative;
	  	display: flex;
	  	flex-wrap: wrap;
	  	justify-content: center;
	  	gap: 35px;
	}

	.oui {
	  	font-size: var(--s, 3rem);
	  	font-weight: 900;
	  	transform: rotate(calc(-10deg + 20deg * var(--r)));
	  	animation: float 3s ease-in-out infinite;
	  	transition: transform 0.3s ease, scale 0.3s ease, color 0.3s ease;
	  	cursor: pointer;
	  	color: white;
	  	text-decoration: none;
	  	display: inline-block;
	}

	.oui:hover {
  		transform: scale(1.25) rotate(0deg);
  		color: black;
	}

	@keyframes float {
  		0%, 100% {
    			transform: translateY(0) rotate(calc(-10deg + 20deg * var(--r)));
  		}
  		50% {
    			transform: translateY(-10px) rotate(calc(-10deg + 20deg * var(--r)));
  		}
	}

	.adhesion-tags {
  		display: flex;
  		flex-wrap: wrap;
  		justify-content: center;
  		gap: 20px 30px;
  		margin-bottom: 60px;
	}		

	.adhesion-tag {
  		background-color: white;
  		color: #a284be;
  		font-weight: 100;
  		font-family: HelloRoti;
  		font-size: 1.3rem;
  		padding: 16px 24px;
  		transform: rotate(var(--angle, 2deg));
  		display: inline-block;
  		text-align: center;
  		clip-path: polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%);
	}		

	.adhesion-tag:nth-child(1) { --angle: -2deg; animation: morphClip4 2s infinite linear;}
	.adhesion-tag:nth-child(2) { --angle: 1.5deg; animation: morphClip5 2.3s infinite linear;}
	.adhesion-tag:nth-child(3) { --angle: -1.2deg; animation: morphClip6 1.9s infinite linear;}
	.adhesion-tag:nth-child(4) { --angle: 2.5deg; max-width: 320px; animation: morphClip7 2.1s infinite linear;}
	.adhesion-tag:nth-child(5) { --angle: -2.8deg; animation: morphClip8 2.6s infinite linear;}

	@keyframes morphClip4 {
		0% {clip-path: polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%);}
		5%, 25% {clip-path: polygon(3% 2%, 97% 1%, 98% 98%, 1% 97%);}
		30%, 50% {clip-path: polygon(6% 0%, 94% 0%, 96% 100%, 4% 100%);}
		55%, 75% {clip-path: polygon(4% 1%, 96% 2%, 99% 99%, 2% 98%);}
		80%, 100% {clip-path: polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%);}
	}
	@keyframes morphClip5 {
		0% {clip-path: polygon(2% 9%, 96% 17%, 93% 95%, 5% 100%);}
		5%, 25% {clip-path: polygon(3% 2%, 97% 1%, 98% 98%, 1% 97%);}
		30%, 50% {clip-path: polygon(6% 0%, 94% 0%, 96% 100%, 4% 100%);}
		55%, 75% {clip-path: polygon(0% 10%, 96% 2%, 99% 86%, 2% 98%);}
		80%, 100% {clip-path: polygon(2% 9%, 96% 17%, 93% 95%, 5% 100%);}
	}
	@keyframes morphClip6 {
		0% {clip-path: polygon(2% 3%, 100% 17%, 97% 91%, 3% 100%);}
		5%, 25% {clip-path: polygon(3% 2%, 97% 1%, 98% 98%, 1% 97%);}
		30%, 50% {clip-path: polygon(6% 0%, 94% 0%, 96% 100%, 4% 100%);}
		55%, 75% {clip-path: polygon(0% 10%, 96% 2%, 99% 86%, 2% 98%);}
		80%, 100% {clip-path: polygon(2% 3%, 100% 17%, 97% 91%, 3% 100%);}
	}
	@keyframes morphClip7 {
		0% {clip-path: polygon(0% 10%, 97% 0%, 93% 100%, 2% 100%);}
		5%, 25% {clip-path: polygon(3% 2%, 97% 1%, 98% 98%, 1% 97%);}
		30%, 50% {clip-path: polygon(6% 0%, 94% 0%, 96% 100%, 4% 100%);}
		55%, 75% {clip-path: polygon(0% 10%, 96% 2%, 99% 86%, 2% 98%);}
		80%, 100% {clip-path: polygon(0% 10%, 97% 0%, 93% 100%, 2% 100%);}
	}
	@keyframes morphClip8 {
		0% {clip-path: polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%);}
		5%, 25% {clip-path: polygon(3% 2%, 97% 1%, 98% 98%, 1% 97%);}
		30%, 50% {clip-path: polygon(6% 0%, 94% 0%, 96% 100%, 4% 100%);}
		55%, 75% {clip-path: polygon(4% 1%, 96% 2%, 99% 99%, 2% 98%);}
		80%, 100% {clip-path: polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%);}
	}






	.tag-sous {
  		font-size: 1rem;
  		font-weight: 500;
  		display: block;
  		margin-top: 5px;
	}

	/*****--**-----*****--|RESPONSIVE|-*****-----**--*****/
		@media (max-width: 850px) {
				.adhesion-titre-wrapper img:nth-child(1){
				width: 20%;
			}
			.adhesion-titre-wrapper img:nth-child(3){
				width: 20%;
			}
  			.oui {
    				font-size: calc(var(--s, 3rem) * 0.8);
  			}
		}

		@media (max-width: 600px) {
			#sectionadhesion {
	    background-color: #a284be;
	    color: white;
	    padding: 36px 30px 1px
	  	}

	  	.adhesion-titre {
    		font-size: 1.4rem;
     		padding: 0;
  		}

  		.adhesion-titre-wrapper img:nth-child(1),
  		.adhesion-titre-wrapper img:nth-child(3) {
        width: 15%;
    	}
  	}
	/*****--**-----*****--|RESPONSIVE|-*****-----**--****
/*****--**-----*****--|ADHESION ANNUELLE|-*****-----**--*****/

/*****--**-----*****--|INFOS ESSENTIELLES|-*****-----**--*****/
	#sectioninfosessentielles {
  		background-color: white;
  		color: black;
  		padding: 80px 30px;
  		text-align: center;
	}

	.infosessentielles-wrapper {
  		max-width: 900px;
  		margin: 0 auto;
	}

	.infosessentielles-titre {
  		font-size: 3rem;
  		font-weight: 900;
  		margin-bottom: 40px;
  		font-family: HelloRoti;
	}		

	.infosessentielles-paragraphes p {
  		margin-bottom: 20px;
  		font-size: 1rem;
  		line-height: 1.2;
  		font-family: "loew-variable", sans-serif;
	}

	.infosessentielles-paragraphes h2 {
  		margin-bottom: 20px;
  		font-size: 1.8rem;
  		line-height: 1.2;
  		font-family: "loew-variable", sans-serif;
	}

	.infosessentielles-tag {
  		display: inline-block;
  		background-color: #a284be;
  		color: white;
  		font-family: HelloRoti;
  		font-weight: 900;
  		font-size: 2rem;
  		padding: 21px 42px;
  		margin: 40px auto;
  		transform: rotate(-3deg);
  		clip-path: polygon(2% 6%, 100% 0%, 97% 99%, 3% 90%);
  		transition: 0.2s;
	}

	.infosessentielles-tag a{
		text-decoration: none;
		color: white;
	}

	.infosessentielles-tag:hover{
		transform: scale(1.4) rotate(-1deg);
		background-color: #f26e1c;
	}

	.infosessentielles-manifeste {
  		margin-top: 60px;
  		font-family: "loew-variable", sans-serif;
  		text-transform: uppercase;
  		font-weight: 900;
  		letter-spacing: 1px;
  		line-height: 1.1;
  		font-size: 2rem;
  		word-spacing: 0.2rem;
	}

	.infosessentielles-manifeste p:nth-child(1) {
  		font-size: 3rem;
  		text-align: left;
  		color: #f26e1c;
	}

	.infosessentielles-manifeste p:nth-child(2) {
  		font-size: 4rem;
  		color: #000;
	}

	.infosessentielles-manifeste p:nth-child(3) {
		text-align: right;
  		font-size: 2rem;
  		color: #a284be;
	}
	/*****--**-----*****--|RESPONSIVE|-*****-----**--*****/
		@media (max-width: 850px) {
				#sectioninfosessentielles {
			    padding: 80px 60px;
			  }
  			.infosessentielles-manifeste {
    				font-size: 1.4rem;
  			}

  			.infosessentielles-manifeste p:nth-child(2) {
    				font-size: 2rem;
  			}

  			.infosessentielles-manifeste p:nth-child(3) {
    				font-size: 1.8rem;
  			}
		}

		@media (max-width: 600px) {
			#sectioninfosessentielles {
	        padding: 36px 21px;
	    }
	    .infosessentielles-titre {
    		font-size: 2rem;
    	}
    	.infosessentielles-tag {
    		font-size: 1.6rem;
    	}
    	.infosessentielles-manifeste p:nth-child(1){
    		font-size: 2rem;
    	}
	  }
	/*****--**-----*****--|RESPONSIVE|-*****-----**--*****/
/*****--**-----*****--|INFOS ESSENTIELLES|-*****-----**--*****/



/*****--**-----*****--|FOOTER|-*****-----**--*****/
	#sectionfooter {
  		background-color: #f26e1c;
  		color: white;
  		padding: 80px 30px 40px;
  		text-align: center;
	}		

	.footer-wrapper {
  		max-width: 1000px;
  		margin: 0 auto;
	}

	.footer-titre {
  		font-size: 2rem;
  		font-weight: 900;
  		margin-bottom: 5px;
  		font-family: HelloRoti;
	}

	.footer-soustitre {
  		font-size: 1rem;
  		font-weight: 400;
  		margin-bottom: 40px;
  		font-family: HelloRoti;
	}

	.footer-content {
  		display: flex;
  		flex-wrap: wrap;
  		align-items: center;
  		justify-content: center;
  		gap: 40px;
	}

	.footer-chien img {
  		width: 24vw;
	}

	.footer-info {
  		text-align: left;
  		display: flex;
  		flex-direction: column;
  		gap: 20px;
  		color: white;
  		font-weight: 700;
	}

	.footer-adresse {
  		font-size: 1.1rem;
  		color: white;
  		font-weight: normal;
  		font-family: HelloRoti;
	}		

	.footer-socials a {
		text-decoration: none;
  		display: flex;
  		align-items: center;
  		gap: 10px;
  		font-size: 1.2rem;
  		color: black;
  		font-family: HelloRoti;
  		font-weight: 100;
	}

	.footer-socials a span{
		transition: 0.2s;
	}

	.footer-socials a:hover span{
		color: white;
		letter-spacing: 1px;
		font-size: 1.3rem;
	}

	.footer-socials img.icon {
  		height: 45px;
		  width: 45px;
		  margin: 6px;
	}

	.footer-contact {
  		display: flex;
  		align-items: center;
  		gap: 15px;
  		flex-wrap: wrap;
  		font-family: HelloRoti;
  		font-weight: 100;
  		transition: 0.2s;
	}

	.footer-contact:hover{
		transform: scale(1.1);
	}

	.footer-contact a{
		text-decoration: none;
	}

	.footer-btn {
  		font-weight: 100;
  		font-size: 1rem;
  		color: white;
  		text-decoration: none;
  		padding: 10px 20px;
  		display: inline-block;
  		transform: rotate(var(--angle, -2deg));
  		clip-path: polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%);
	}

	.footer-btn.violet {
  		background-color: #a284be;
  		--angle: -2deg;
	}

	.footer-btn.vert {
  		background-color: #218369;
  		--angle: 2deg;
	}

	.footer-phone, .footer-mail {
  		font-size: 1.7rem;
  		font-weight: 100;
  		color: white;
	}

	.footer-bottom {
  		margin-top: 40px;
  		font-size: 0.9rem;
	}

	.footer-bottom a {
  		color: white;
  		text-decoration: none;
	}
	/*****--**-----*****--|RESPONSIVE|-*****-----**--*****/
	@media (max-width: 850px) {
		#sectionfooter {
	    padding: 80px 30px 80px;
	    margin-bottom: -1px;
	  }
	}

	@media (max-width: 600px) {
	  #sectionfooter {
        padding: 40px 30px 60px;
    }
    .footer-info {
    	text-align: center;
    }
    .footer-socials a {
    	justify-content: center;
    }
    .footer-contact .footer-btn.violet,
    .footer-contact .footer-btn.vert{
    	display: none;
    }
    .footer-info div:nth-child(3) a:nth-child(2){
    	text-align: center;
    }
    .footer-contact{
    	margin:auto;
    }
  }
	/*****--**-----*****--|RESPONSIVE|-*****-----**--*****/
/*****--**-----*****--|FOOTER|-*****-----**--*****/

/*****--**-----*****--|MENTIONS LEGALES|-*****-----**--*****/
		#mentionslegales{
        background-color: #f26e1c;
        padding: 9px 21px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    #mentionslegales a{
        text-decoration: none;
        font-family: 'loew', sans-serif;
        color: white;
        font-size: 12px;
    }
    #mentionslegales a span{
        background-color: white;
        color: #f26e1c;
        font-weight: 700;
        padding: 4px 6px 2px 6px;
        border: 1px white solid;
        transition: 0.3s;
    }
    #mentionslegales a:hover span{
        background-color: black;
        color: white;
    }
/*****--**-----*****--|MENTIONS LEGALES|-*****-----**--*****/