@font-face {
    font-family: 'AvenirRoman';
    src: url('Polices\avenir-font\AvenirLTStd-Roman.otf') format('opentype');
}

@font-face {
    font-family: 'AvenirLight';
    src: url('Polices\avenir-font\AvenirLTStd-Light.otf') format('opentype');
}

.fontAvenirBlack
{
	font-family: 'AvenirBlack';
    src: url('Polices/avenir-font/AvenirLTStd-Black.otf') format('opentype');
	font-weight: bold;
}
.fontAvenirRoman
{
	font-family: 'AvenirRoman';
    src: url('Polices/avenir-font/AvenirLTStd-Roman.otf') format('opentype');
}


.titleSize

.zoeBox
{
position:relative;
/*background-image:url(../images/background_section.jpg);*/
background-image:url("../images/slider3.png");
height:480px; /*313px ancien 550px = pleine page*/

/*ajout*/
background-repeat: no-repeat;
	background-size: cover;
	 -webkit-background-size: cover; /* pour anciens Chrome et Safari */
	background-position: center center;
width: 100%;
}	
.zoeBox span
{
	position:absolute;
	font-family:AvenirMedium;
	font-size:26px;
}
.phrase1
{
	top:21px;
	left:27px;
}
.phrase2
{
	top:30px;
	left:292px;
}
.phrase3, .phrase6
{
	top:11px;
	right:290px;
	line-height:22px;
	text-align:center;
}
.phrase4
{
	top:6px;
	right:5px;
}
.phrase5
{
	top:180px;
	right:346px;
	line-height:22px;
	text-align:center;
}
.phrase6
{
	top:195px;
	right:48px;
}
.phrase7
{
	top:195px;
	left:281px;
}
.phrase8
{
	top:261px;
	left:6px;
}
.zoe,.box,.btDecouvre, .accroche
{
position:absolute;
} 
.zoe
{
bottom:0px;
left:98px;
}
.box
{
top:13px;
right:40px;
}
.accroche
{
	font-family:AvenirMedium;
	font-size:79px;
	margin:0;
	text-align:center;
	top:32px;
	left:310px;
	line-height:70px;
	transform:rotate(-5deg);
	letter-spacing:4px;
}
.accrocheMobile
{
	display:none;
}
.btDecouvreMobile
{
	display:none;
}
.btDecouvreMobile2
{
	display:none;
}

.accroche span
{
	position:relative;
	font-size:79px;
}
.accroche2
{
	position:absolute;
	bottom:10px;
	width:100%;
	font-family: 'AvenirRoman' !important;
	font-size:24px;
	text-align:center;
	font-weight:normal;
	line-height:24px;
}
.btDecouvre
{
right:40px; /*86px*/
bottom:0px;
background-image:url(../images/deco_fleche_vert.png);
width:192px;
height:61px;
color:#ffffff;
font-family:AvenirMedium;
font-size:30px;
padding-left:55px;
line-height:50px;
cursor:pointer;
text-align:left;
}
.btDecouvre:hover
{
background-image:url(../images/deco_fleche_vert_over.png);
color:#ffffff;	
}
.btDecouvre a
{
color:inherit;
text-decoration:none;
}
.btTop
{
top:287px; /*250px*/
}
.bgZoe
{
/*display:none; desac 13/08/2024*/ 
width:100%;
}

/*Axel change: Color black for the text*/
.rond1,.rond2,.rond3
{
	/*left:144px;*/
	position:relative !important;
	margin:0 auto 5px;
	color: black !important;
	
}

.newsletter-section {
    background-color: #fbd4c8;
    text-align: center;
    color: rgb(0, 0, 0);
}

.newsletter-container {
    max-width: 800px;
    margin: 0 auto;
}

.h2News {
    font-size: 28px;
    font-weight: bold;
}

.h2NewsSpan {
    font-size: 30px;
}

.pNews {
    font-size: 20px;
    margin-bottom: 20px;
}

.newsletter-form {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

.newsletter-form input {
    padding: 12px;
    font-size: 16px;
    border: none;
    border-radius: 5px 0 0 5px;
    outline: none;
    width: 300px;
}

.newsletter-form button {
    background-color: #fff;
    color: #000000;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
}

.newsletter-info {
    font-size: 13px; /*14px*/
    opacity: 0.8;
    margin-top: 15px;
    font-style: italic;
}

.roseBg {
	background-color: #fbd4c8;
}

/*Axel change: Center the element on the page*/
.center
{
	display: grid; /*flex*/
	align-items: center;
	justify-content: center;
}

.center_blog
{
	display: flex;

	justify-content: center;
}

.etapes
{
	position:flex;
	height:auto;
	padding-top:10px;
	font-family: 'AvenirLight';
	display: flex;
    flex-wrap: wrap; /* Allows wrapping when space is insufficient */
    justify-content: center; /* Centers items if there's extra space */
    gap: 15px; /* Adjust space between items */
    src: url('Polices/avenir-font/AvenirLTStd-Roman.otf') format('opentype');
	
}

.etapes div[class*='etape'], .blogueuse div[class*='etape']
{
	position:relative;
	width:300px;
	/*height: 100%;*/
	margin:0 32px 0px;
	padding:7px;
}
.boxTextinfluence {
	text-align:center;
	color:#F7B9B0;
	font-family:AvenirMedium;
	font-size:15px;
	font-weight:bold;
}

.etape3 {
    position: relative; /* Ensures absolute positioning works */
	z-index: 0;
}

.video-container {
    width: 100%;
    position: relative;
    padding-bottom: 40%; /* Adjust aspect ratio (16:9 = 56.25%, 4:3 = 75%) */
    height: 0;
}

.video-container iframe {
    position: absolute;
	width:300px;
    height: 100%;
    top: 0;
    left: 0;
}

.video-container-influence {
    width: 100%;
    position: relative;
    padding-bottom: 40%; /* Adjust aspect ratio (16:9 = 56.25%, 4:3 = 75%) */
    height: 0;
}

.video-container-influence  iframe {
    position: absolute;
	width:300px;
    height: 450px;
    top: 0;
    left: 0;
}

.top-right {
    position: absolute;
    top: -50px; /* Adjust to fine-tune placement */
    right: -50px; /* Adjust to fine-tune placement */
    z-index: 10; /* Ensures it appears above */
}
.quote {
    width: 23px;
   	height: 17px;
}

.etape2
{
	width:280px !important;
	margin:0 17px !important;
}
.blogueuse .etape2
{
	width:300px !important; /*270px*/
}
.etapes h2
{
	text-align:center;
	line-height:20px;
	margin:0 0 25px;
}
.etapes span
{
	font-size:14px;
	font-weight:normal;
}

/* CARRE MARRON sous bloc vert */
/*Axel change: remove the shadow and change the height*/
.etapes div[class*='etape'] div:not([id*='rond'])
{
	border:solid 1px #5a4a4a;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:0px;
	-ms-border-radius:10px;
	-o-border-radius:10px;
	width:100%;
	height:190px; /*200px*/
	overflow:hidden;
}
.etapes div[class*='etape'] div:not([id*='rond']) img[src*="abonnement-v3"]
	{
	height: 100% !important;
	}
.etapes div[class*='etape'] a
{
	color:inherit;
	text-decoration:none;
}
/* BLOC VERT */
/*Axel change: remove the border*/
.etapes div[class*='etape'] div h3
{
	display:block;
	position:absolute;
	height:26px;
	line-height:26px;
	border-radius:13px;
	-moz-border-radius:10px;
	-webkit-border-radius:5px;
	-ms-border-radius:10px;
	-o-border-radius:10px;
	width:80%;
	left:50%;
	top:108px;
	margin:0 -40%;
	text-align:center;
	color:#ffffff;
}
.h3Over
{
	background-color:#f7b9b0 !important;
	color:#ffffff !important;
}
.etapes div[class*='etape'] div ul
{
	list-style-image:url(../images/puce_new.gif);
	padding-left:15px;
	margin-top: 24px;
}
.etapes div[class*='etape'] div ul li
{
	margin:10px; /*5px*/ 
}
.etapes div[class*='etape']:nth-child(1) div ul
{
	margin-top:28px; /*18px*/
}
.etapes div[class*='etape']:nth-child(2) div
{
	text-align:left; /*center*/
}
.etapes div[class*='etape']:nth-child(2) div img
{
	min-width:280px;
}
.etapes div[class*='etape']:nth-child(3) div ul
{
	margin-top:28px; /*18px*/
}
img[src*='vueTV']
{
	display:block;
	position:absolute;
	top:1px;
	right:270px;
}

.derAccroche
{
	font-family:AvenirMedium;
	font-size:25px;
	font-weight:bold;
	text-align:left;
	padding:15px 0 25px;
}
.derAccroche div:nth-child(1)
{
	padding-left:80px;
}
.derAccroche .btDecouvre
{
	right:30px;
	top:5px;
	font-weight:normal;
}
.avantages
{
	overflow:hidden;
	height:auto;
}
/*BLOGUEUSE*/
/*Axel change: color to fbd4c8*/
.h2Gris {
  background-color: #fbd4c8;
  font-family: AvenirMedium; 
  font-size: 26px;
  margin: 0;
  padding:8px 0; 
  text-align: center;
  width: 100%;
}
.h2Gris .h2Text {
	display: inline-block;
	max-width: 90%; /* Adjust as needed */
	margin: 0 auto;
  }
.blogueuse
{
	margin-top:20px !important;
}
.blogueuse div[class*='etape']
{
	margin-top:15px !important;
	margin-bottom:15px !important;
}
.blogueuse > div
{
	font-family: 'AvenirRoman';
    src: url('Polices/avenir-font/AvenirLTStd-Roman.otf') format('opentype');
	border-radius:10px;
	border:dashed 2px #fbd4c8;
	font-size:14px;	
}
.blogueuse .nomSite, .blogueuse .lien
{
	font-family:AvenirMedium;
	font-size:30px;
	text-align:center;
	margin-top:-1px; /*new*/
}

.blogueuse .lien
{
	font-size:14px;
	color:#000000;
}
img[src*='merciJaune']
{
	display:block;
	position:absolute;
	bottom:515px; /*215px*/
	right:100px; /*10px*/
}
img[src*='quoteD']
{
	display:block;
}
.reffooter
{
	font-family: 'AvenirRoman';
    src: url('Polices/avenir-font/AvenirLTStd-Black.otf') format('opentype');
	font-size:12px;	
	padding: 30px 30px 10px 30px;
	text-align: justify;
}
.reffooter a
{
	color:inherit;
	text-decoration:none;
}
.reffooter:hover
{
	color:inherit;
	text-decoration:none;
}
.refblog
{
	font-family: 'AvenirBlack';
	font-size:12px;	
	padding: 5px 25px 5px 5px;
	text-align: justify;
}
.refblog a
{
	color:inherit;
	text-decoration:none;
}
.refblog:hover
{
	color:inherit;
	text-decoration:none;
}
.feed
{
	width: 100%;
}
.feed_img
{
	width: 4%;
	text-align: justify;
	vertical-align: text-top;
}
.feed_text
{
	width: 96%;
	text-align: justify;
	vertical-align: text-top;
}
.feed_img_new
{
	width: 100%;
	text-align: justify;
	vertical-align: text-top;
}
.feed_text_new
{
	text-align: justify;
	vertical-align: text-top;	
	margin-right:45px;
	color:#000000;
	font-family:AvenirLight;
	font-size:14px;
}
.feed_text_new a 
{
	color:#F7B9B0;
	font-size:17px;
	text-decoration:none;
}	
.espace
{
	height:24.5px;
}
.refaccueil
{
	font-family: 'AvenirRoman';
    src: url('Polices/avenir-font/AvenirLTStd-Roman.otf') format('opentype');
	font-size:14px;	
	padding: 0px 30px 0px 30px;
	text-align: justify;
}
.refaccueil2
{
	font-family: 'AvenirRoman';
	font-size: 21px;
	padding: 15px 0px 0px 0px;
	text-align: justify;
}
.18px
{
	font-size:18px;
	font-weight:normal;
}
/*Ajout Arthur Abo 3m*/
/*Axel change: remove border*/
div[class*='3m']
{
	
	width:285px;
	padding:7px;
	margin:10px 10px 0;
}
/*Axel change: add border*/
.imgBorder 
{
	border: solid 1px #fbd4c8;
}

.imgCenter {
    display: flex;
    flex-wrap: wrap; /* Ensures wrapping after 3 items */
    justify-content: center; /* Centers the images */
    gap: 20px; /* Adds space between images */
    max-width: 1200px; /* Adjusts width */
    margin: 0 auto; /* Centers the container */
  }

div[class*='3m'] img
{
	width:285px;
}			
.image-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	justify-content: center;
	padding: 20px;
	max-width: 1200px; /* Allows images to expand up to a reasonable limit */
	margin: auto;
}
.image-container img {
	width: 100%;
	height: auto;
	border-radius: 15px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.image-container img:hover {
	transform: scale(1.05);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
@media (min-width: 1300px) {
	.image-container {
		max-width: 1400px;
		grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Images grow on wider screens */
	}
}
@media (max-width: 900px) {
	.image-container {
		grid-template-columns: repeat(2, 1fr); /* 2 images per row on smaller screens */
	}
}
@media (max-width: 600px) {
	.image-container {
		grid-template-columns: repeat(1, 1fr); /* 1 image per row on mobile */
	}
}
.logoTV {
	margin-top:20px;
	margin-right:15px;
}