:root {
	--main: #d80636;
	--mainDark: #AB0028;
	--mainSuperDark: #86001F;
	--mainLight: #E7335D;
	--mainSuperLight: #EE5C7E;
	--menu-bg: #d80636;
	--complemOrange: #EB5407;
	--complemGreen: #049D6B;
	--complemGreenLight: #50CE06;

	--header-height: 60px;
	--font-tile: "Momo Trust Display", sans-serif;
	--text-color: #FFF;
	--text-muted: rgba(255, 255, 255, .7);
	--text-active: #FFF;

	--news-gap: 40px;
	--news-gap-v: 60px;
	--news-radius: 0px;
	--news-txt color: #000;
	--news-muted:#000;

    --video-ratio-16-9: 56.25%; /* (9/16) * 100% */
    --video-ratio-9-16: 177.78%; /* (16/9) * 100% - pour Shorts */

}

body { 
	font-family: 'roboto', arial;
	font-size: 14px;
	margin:0;
	padding:0;

}
a { text-decoration:none; }
strong { font-weight: 700; }

div:not(.container) ul:not(.main-nav-list) {
    margin:0;
    padding:0;
}
div.container ul { margin:10px 0 20px 20px !important;}
div.container li { margin-bottom:7px !important; }

h1, h2, h3 {   font-family: "Momo Trust Display", sans-serif;  }
h1 { font-size:44px; font-weight: 800; margin:0 0 30px; padding:0; }
h2 { font-size:36px; font-weight: 800; margin:0 0 30px; padding:0; }
h3 { font-size:24px; font-weight: 800; margin:0; padding:0; }
* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.mobile, .mobile-flex, .mobile-inline { display:none; }

/* Screen reader only - SEO & Accessibility */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cta { margin:50px 0 0;  }
.tag, .tagNoclick {
    font-size: 14px;
    float: left;
    background: var(--mainSuperLight);
    color:#FFF;
    border-radius: 8px;
    padding: 2px 8px;
    margin: 2px 7px 3px 0px;
    display: inline-block;
    line-height: 19px;
}

#NavigArrow {
  display:none;
  position:fixed;
  bottom:20px;
  right:0px;
  text-align:right;
  padding:0px 20px 0px 0px;
  margin-top:-120px;
}

.container {
    max-width: 1310px !important;
    font-size: 18px;
    padding: 90px 30px 90px;
    margin: 0 auto;
}
section.pad { padding:50px 16px; }


@media (max-width:768px)  {
	.select2-container { max-width:100%; }
	.desktop, .desktop-flex, .desktop-inline { display:none !important; }
	.mobile { display:block !important }
	.mobile-flex { display:flex !important; }
	.mobile-inline { display:inline !important; }
	.select2-container { max-width:100%; }
	.justify { text-align:left; }
	.container { padding: 50px 30px 50px; }
}
@media (max-width:480px)  {
	.container { padding: 25px; }
	.cta { margin:35px 0;  }
	section.pad { padding:50px 0px; }
}




/***************************
	HEADER SCROLL EFFECT
****************************/
/* Par défaut: header avec fond. Ajouter .header-transparent au body pour l'effet */
body.header-transparent { padding-top: 0 !important; }
body.header-transparent .header-inner {
	background-color: transparent !important;
	transition: background-color 0.3s ease;
}
body.header-transparent .header-inner.scrolled {
	background-color: var(--mainDark) !important;
}


/***************************
	HEADER PARALAXE
****************************/
/* page content */
/*.parallax-window3 {
    height: 65vh;
    background: transparent;
    clear: both;
    position:relative;
}
*/
.parallax-banner {
	position: relative;
	width: 100%;
	height: 27vw;
	max-height: 750px;
	overflow: hidden;
	z-index: 1;
}

.parallax-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 130%; 
	background-size: cover;
	background-position: center;
	transform: translateY(0);
	transition: transform 0.05s ease-out;
	will-change: transform;
}


/***************************
	GALLERY
****************************/   
#gallery {
  position: relative;
  max-width: 100vw;
  padding: 32px 0;
  background: #000;
}

#gallery::before,
#gallery::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 28px;
  background: 
    radial-gradient(
      ellipse 10px 6px at center,
      #222 80%,
      transparent 80%
    );
  background-size: 40px 28px;
  background-position: 10px center;
}

#gallery::before { top: 2px; }
#gallery::after { bottom: 2px; }

/***************************
   MENU
   ****************************/
nav {
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	font-size: 14px;
}

.site-header {
	color: var(--text-color);
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 9998;
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-height);
	padding: 0 20px;
	/*border-bottom:1px solid rgba(0, 0, 0, 0.2);*/
	/*background-color: var(--mainDark);*/
}

.header-inner .logo {
	position:relative;
	top:-2px;
}

.header-inner .logo img {
	height: 36px;
}

.main-nav {
	display: flex;
	align-items: center;
}

.main-nav-list {
	display: flex;
	gap: 40px;
	list-style: none;
	margin: 0 20px 0 0;
	padding: 0;
	/*height:20px;*/
}

.main-nav-list li a {
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: color 0.2s;
}

.main-nav-list li a.active {
	color: var(--text-active) !important;
}

.main-nav-list li a:hover {
	color: var(--mainSuperLight);
}

header .social-div {
	border-left:1px solid rgba(255, 255, 255, 0.2);
	height:60px;
	display: flex;
	align-items: center;
	padding: 0 0 0 12px;
}

header .social-icons {
	display: flex;
	gap: 16px;
	list-style: none;
	margin: 0 8px;
	padding: 0;

}

header .social-icons li a {
	color: #FFF;
	font-size: 20px;
	transition: all 0.2s;
	opacity: 0.6;
}

header .social-icons li a:hover {
	opacity:1;
}

.menu-toggle {
	display: none;
	flex-direction: column;
	gap: 4px;
	border: none;
	background: none;
	cursor: pointer;
}

.menu-toggle span {
	width: 24px;
	height: 2px;
	background: var(--text-color);
	display: block;
}
@media (max-width: 1100px) {
	.main-nav-list {
		gap: 20px;
	}
}

/* Navigation mobile (hors header) - cachée par défaut */
.main-nav--mobile {
	display: none;
}

@media (max-width: 1024px) {
	.header-inner {
		padding-right: 10px;
		padding-left: 13px;
	}
	.menu-toggle {
		display: flex;
	}

	/* Cacher la nav desktop sur mobile */
	.main-nav--desktop {
		display: none !important;
	}

	/* Nav mobile fullscreen sous le header */
	.main-nav--mobile {
		display: none;
		flex-direction: column;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: var(--menu-bg);
		width: 100%;
		padding: calc(var(--header-height) + 20px) 24px 30px;
		overflow-y: auto;
		z-index: 9990; /* Sous le header (9998) */
	}

	.main-nav--mobile.open {
		display: flex;
	}

	.main-nav--mobile .main-nav-list {
		flex-direction: column;
		gap: 20px;
		flex: 1;
		justify-content: center;
		align-items: center;
        font-size: 7vw;
        font-family: var(--titleFont);
        letter-spacing: -0.3px;
        line-height: 1.3;
	}

	.main-nav--mobile .main-nav-list li {
		padding: 0.8vh 0;
		text-align: center;
	}

	.main-nav--mobile .social-div {
		border: 0;
		margin: 15px 0 0 0;
		display: flex;
		justify-content: center;
	}
	.main-nav--mobile .social-icons {
		display: flex;
		gap: 30px;
		list-style: none;
		margin: 0;
		padding: 0;
		justify-content: center;
	}
	.main-nav--mobile .social-icons li a {
		color: #FFF;
		font-size: 24px;
		transition: all 0.2s;
		opacity: 0.6;
	}
	.main-nav--mobile .social-icons li a:hover {
		opacity: 1;
	}

}


/***************************
   FOOOTER
****************************/
.footer {
	background-color: var(--menu-bg);
	padding: 40px 0 30px;
	width: 100%;
	color:#fff;
	font-size:13px;
}

.footer-container {
	width: calc(100% - 80px);
	padding: 0 40px;
}

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

.footer-brand {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-shrink: 0;
}
.footer-brand img { 
	height:160px;
	max-height: 160px; 
}

.footer-brand h1 {
	font-size: 2.5rem;
	font-weight: 300;
	letter-spacing: -0.02em;
}

.footer-brand .tagline {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1.1rem;
	color: #828282ccc;
}

.footer-brand .tagline::before {
	content: "🎵";
	font-size: 1.2rem;
}

.footer-links {
	display: grid;
	/*grid-template-columns: repeat(3, 1fr);*/
	grid-template-columns: auto auto;
	gap: 60px;
	margin-left: auto;
}

.footer-column {
	font-weight: 600;
	margin-bottom: 20px;
}
.footer-column:last-child { margin-right:10px; }
.footer-column h3 { 
	font-size:18px; 
	margin:22px 0 15px; 
	font-family: var(--titleFont);
	font-weight: var(--titleWeight);
	text-transform:none;
	line-height: 1.2;
    letter-spacing: -0.3px;

}
.footer-column ul {
	list-style: none;
}

.footer-column ul li {
	margin-bottom: 12px;
}

.footer-column ul li a {
	color:var(--text-muted);
	/*font-size: 0.95rem;
	transition: color 0.3s ease;*/
}

.footer-column ul li a:hover {
	color: var(--text-hover);
}

.footer-middle {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 15px;
}

.footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 30px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-bottom-left {
	display: flex;
	align-items: center;
	gap: 20px;
}

.certification-text {
	font-size: 16px;
	line-height: 1.3;
	color:var(--text-muted);
	margin:30px 0 20px;
}
.certification-text a { color:var(--jaune); }
.certification-text strong, .certification-text b { 
	color: #fff;
	display:inline-block;
	font-size:20px;
	font-family: var(--titleFont);
	font-weight: var(--titleWeight);
	line-height: 1.3em;
    letter-spacing: -0.3px;

}

.social-links {
	color:var(--text-color);
	font-size: 0.9rem;
}
.social-links a, .social-links a:visited  { color:var(--text-muted);}
.social-links a:hover { color: var(--text-hover); }
.social-links a.active, .social-links a:active { color: var(--text-active);}

.copyright {
	font-size: 0.9rem;
}
.footer-icons {
	display: flex;
	gap: 30px;
	/* couleur par défaut de tes icônes */
	color: #999;
}

.footer-icons li {
	list-style: none;
}

/* on cible le <a> pour lui donner un conteneur carré */
.footer-icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	transition: opacity .3s ease;
	color:var(--text-color);
}
.footer-icons a:hover i {
	color:var(--text-color);
}

/* on force la même taille pour tous les <i> */
.footer-icons a i {
	font-size: 1.8rem;
	line-height: 1;
	vertical-align: middle;
	color: var(--text-muted);
}

.footer-credit {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.7rem;
}

.footer-credit a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-credit a:hover {
    color: rgba(255, 255, 255, 0.9);
}



/* Footer responsive */
@media (max-width: 768px) {
	.footer-top {
		flex-direction: column;
		gap: 30px;
	}
	.footer-brand {
		align-items: center;
		text-align: center;
	}
	.footer-brand img {
		height: 170px;
		max-height: 170px;
		margin-bottom:10px;
	}
	.footer-links {
		margin-left: 0;
		width: 100%;
		justify-content: center;
	}
	.footer-bottom {
		flex-direction: column;
		gap: 20px;
		text-align: center;
	}
	.footer-bottom-left {
		flex-direction: column;
		gap: 10px;
	}
	.footer-icons {
		justify-content: center;
	}
	.certification-text {
		text-align: center;
	}

	.footer-credit {
	    text-align: center;
	    margin-top: 35px;
	}

}

@media (max-width: 480px) {
	.footer-container {
		width: calc(100% - 40px);
		padding: 0 20px;
	}
	.footer-links {
		grid-template-columns: 1fr;
		gap: 20px;
		text-align: center;
	}
	.footer-column ul {
		text-align: center;
	}
}

#page-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;  /* Force la largeur complète */
    height: 100vh; /* Force la hauteur complète */
    z-index: 9999;
    pointer-events: none;
    opacity: 1;
    visibility: visible;
}



/***************************
PAGE TRANSITIONS
****************************/   
.logo-wingmen { max-width: 20vh; max-height: 20vh;  fill: green;   overflow: visible;}
#page-transition .pt__panel {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: red;
	transform: translateY(100%); /* départ en bas de l'écran */
	will-change: transform;	
}

#page-transition .pt__logo {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	opacity: 0;
}

#page-transition .logo-svg {
    width: clamp(144px, 18vmin, 360px);
    height: auto;
}



/* État initial : tout invisible */
.logo-wingmen .point,
.logo-wingmen .sigle,
.logo-wingmen .text-group {
  opacity: 0;
}

/* Transform-origin pour le scale depuis le centre de chaque élément */
/*.logo-wingmen .point {
  transform-origin: 225px 15px;
}

.logo-wingmen .sigle {
  transform-origin: 137px 120px;
}
*/

.logo-wingmen .point {
	transform-box: fill-box;
	transform-origin: center;
}

.logo-wingmen .sigle {
	transform-box: fill-box;
	transform-origin: center;
}
/* ---- Animations au lancement ---- */
/* Ajoute la classe .animate pour déclencher */

.logo-wingmen.animate .point {
  animation: pulse-point 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.logo-wingmen.animate .sigle {
  animation: pulse-sigle 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
}

.logo-wingmen.animate .text-group {
  animation: pulse-text 0.4s ease-out 0.3s forwards;
}

/* ---- Keyframes ---- */

@keyframes pulse-point {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1.4);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse-sigle {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse-text {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}



/***************************
FILTRES OFFRES
****************************/   
.filters{
	display:flex;
	flex-wrap:wrap;
	gap:25px;
	align-items:center;
	margin: 0px;
	justify-content: center;
}
.filters label{
	display:inline-flex;
	align-items:center;
	cursor:pointer;
	user-select:none;
}
.filters input[type="radio"]{
	/* on garde l'input accessible, mais discret */
	accent-color: var(--rouge);
}
.filters span{
	font-weight:600;
}
.filters input[type="radio"] {
	display: none;
}
.filters label {
	cursor: pointer;
}

/***************************
VIDEO PLAYER YT
****************************/   

.videos-title {
    font-size: 2.5rem;
    margin-bottom: 30px;
    text-align: center;
    color: var(--jaune, #ffc107);
}

.videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.video-item {
    background: #fff;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    margin-bottom:12px;
}

.video-thumbnail {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    padding: 0px 0px var(--video-ratio-16-9) 0px;
}

.video-thumbnail img {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.video-item:hover .video-thumbnail img {
    transform: scale(1.06);
}

/* Support pour YouTube Shorts */
.video-item[data-ratio="9:16"] .video-thumbnail {
    padding-bottom: var(--video-ratio-9-16);
    max-width: 300px;
    margin: 0 auto;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 0, 0, 0.8);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all 0.3s ease;
    z-index: 2;
}

.video-item:hover .play-button {
    background: var(--main);
    transform: translate(-50%, -50%) scale(1.1);
}

.playlist-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    z-index: 2;
}

.video-info {
    padding: 10px 0 20px;
    text-align: center;
	font-family: var(--titleFont); 
	line-height: 1.2;
	letter-spacing: -0.5px;
	font-weight: var(--titleWeight); 
	-webkit-font-smoothing: antialiased; 

}

.video-info h3 {
    margin: 0;
    font-size: 23px;
    color: #333;
    line-height: 1.3;
    font-weight: 400;
    margin-bottom: 8px;
}

/* Modal styles */
.video-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
}

.video-modal-content {
    position: relative;
    margin: 5vh auto;
    width: 90%;
    max-width: 1280px;
    max-height: 90vh;
}

.video-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
}

.video-close:hover {
    color: #828282;
}

.video-wrapper {
    position: relative;
    padding-bottom: var(--video-ratio-16-9);
    /*padding-bottom: 56.25%; */
    height: 0;
    overflow: hidden;
    background: #000;
}

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

/* Ajustement de la modal pour différents ratios */
.video-wrapper.ratio-9-16 {
    padding-bottom: var(--video-ratio-9-16);
    max-width: 50vh;
    margin: 0 auto;
}

/* Responsive pour mobile */
@media (max-width: 768px) {
    .video-wrapper.ratio-9-16 {
        max-width: 90vw;
    
    }
    .video-info { padding: 0 !important; }
    .video-item { margin-bottom: 0 !important; }
}

/***************************
   PAGINATION (ACTUS)
****************************/

/* Conteneurs */
.pagesNum,
.liresuite {
	font-size: 0.95rem;
	line-height: 1;
}

/* Eléments (liens + actif) */
.pagesNum a,
.pagesNum strong,
.liresuite a,
.liresuite strong {
	display: inline-block !important;
	border: 1px solid var(--border, #e5e7eb) !important;
	text-decoration: none !important;
	color: var(--text, #666) !important;
	background: #fff !important;
	text-transform: none !important;              /* chiffres non forcés en uppercase */
	transition: background .2s, border-color .2s, color .2s, transform .05s !important;
	padding: 0.75rem 1.15rem;
	text-transform: uppercase;
	letter-spacing: 0.15rem;
	transition: all 0.3s;
}
/* Numéros (liens + actif) : largeur mini pour éviter le "tout rond" */
.pagesNum a,
.pagesNum strong {
  min-width: 40px;          /* ajuste: 34–44px selon ton design */
  text-align: center;
  box-sizing: border-box;    /* prend en compte le padding dans la largeur */
}

/* Optionnel: version responsive */
@media (max-width: 480px) {
  .pagesNum a,
  .pagesNum strong {
    min-width: 34px;
  }
}


/* Hover / focus sur liens */
.pagesNum a:hover,
.liresuite a:hover,
.pagesNum a:focus,
.liresuite a:focus {
  border-color: var(--main) !important;
  color: var(--main, #000) !important;
  outline: none !important;
}

/* Active press */
.pagesNum a:active,
.liresuite a:active {
  transform: translateY(1px);
}

/* Page active (le <strong>) */
.pagesNum strong,
.liresuite strong {
  background: var(--main, #000) !important;
  border-color: var(--main, #000) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* Espacement si rendu en liste */
.pagesNum li,
.liresuite li {
  display: inline;
  margin: 0 4px;
}

/* "..." reste du texte brut, on ajoute juste un petit espacement global */
.pagesNum { word-spacing: 2px; }

/* Icônes / images éventuelles à l'intérieur */
.pagesNum img,
.liresuite img {
  vertical-align: middle;
  margin: 0 0 -2px 6px; /* léger alignement et espace à gauche */
  padding: 0;
}


/***************************
   EDITINLINE
****************************/
.editArea {
	padding:1px;
	display:inline-block;
}
.btn_editText {
	background: url('../../img/edit.png') 0px 0px no-repeat ;
	height:16px;
	width:16px;
	margin-left:7px;
	display:inline-block;
	background-size: contain;
}


/***************************
   BUTTONS
   ****************************/
.contentIn a.button { color:#fff; }
.btn, .button {
	 display: inline-block;
	 padding: 0.75rem 1.15rem;
	 text-transform: uppercase;
	 font-size: 0.95rem;
	 letter-spacing: 0.15rem;
	 transition: all 0.3s;
	 border:0;
	 color: #fff !important;
	 position: relative;
	 overflow: hidden;
	 z-index: 1;
}
.btnSmall {
	 display: inline-block;
	 padding: 0.50rem 0.8rem;
	 border:0;
	 color: #fff !important;
	 text-transform: uppercase;
	 font-size: 0.75rem;
	 letter-spacing: 0.05rem;
	 transition: all 0.3s;
	 position: relative;
	 overflow: hidden;
	 z-index: 1;
}
.btnXSmall {
	 display: inline-block;
	 padding: 0.35rem 0.6rem 0.28rem;
	 border:0;
	 color: #fff !important;
	 text-transform: uppercase;
	 font-size: 0.73rem;
	 letter-spacing: 0.05rem;
	 transition: all 0.3s;
	 position: relative;
	 overflow: hidden;
	 z-index: 1;
}
 .btn:after, .btnSmall:after, .btnXSmall:after, .button:after {
	 content: '';
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 background-color: #000;
	 z-index: -2;
}
 .btn:before, .btnSmall:before, .btnXSmall:before, .button:before {
	 content: '';
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 width: 0%;
	 height: 100%;
	 background-color: var(--main);
	 transition: all 0.3s;
	 z-index: -1;
}

.btn.rouge:after, .btnSmall.rouge:after, .btnXSmall.rouge:after, .button.rouge:after {
	 background-color: var(--main) !important;
}
.btn.rouge:before {
	 background-color: var(--mainDark);
}

.btn:hover, .btnSmall:hover, .btnXSmall:hover, .button:hover {
	 color: #fff;
}
.btn:hover:before, .btnSmall:hover:before, .btnXSmall:hover:before, .button:hover:before {
	 width: 100%;
}

.btn:hover, .btnSmall:hover, .btnXSmall:hover, .button:hover {
	color: #fff;
}

.btn:hover::before, .btnSmall:hover::before, .btnXSmall:hover::before, .button:hover::before {
	width: 100%;
}

/* Bouton ghost */
.btn-ghost:not(.blanc) {
	color: var(--main) !important;
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--main);
}
.btn-ghost.blanc {
	color: #FFF !important;
	box-shadow: inset 0 0 0 2px #FFF;
}

.btn-ghost:after {
	background: transparent;
}

.btn-ghost:before {
	background: var(--main);
}

.btn-ghost:hover {
	color: #fff !important;
	box-shadow: inset 0 0 0 2px var(--main);

}

/***************************
   LOGIN BOX
****************************/
#loginBox {
	max-width:280px;
	width:100%;
	margin-top:20px;
	padding-top: 175px !important;
	padding-bottom:30px;
  	box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21); 
    border-radius: 2px;
	background-image: url('../../img/logo_full.svg') !important; 
	background-position: 50% 40px !important;
	background-size: 210px 92px !important;
  
}
#loginBox input {
	width:210px;
	height:30px;
	margin:5px 0;
	font-size:14px;
	padding:0px 5px;
	background-color:#fff;
}
#loginBox ul {
	margin-left:2px;
}	
#loginBox li {
	list-style:none;
	margin:0;
	padding:0;
}
#loginBox a {
	color:#FFFFFF;
	width:220px;
}
#loginBox input[type="submit"] {
	width:105px;
	background-color:#202246;
	font-weight:bold;
	color:#FFFFFF;
	border:0;
    transition: background 0.15s linear;
}	
#loginBox input[type="submit"]:hover, #loginBox li a:hover {
	background-color:#1084c0;
}

#loginBox input[type="submit"]:active, #loginBox li a:active {
	position:relative;
	top:1px;
	left:1px;
}

/***************************
   MATERIALIZE
****************************/
.materialize {
  /* background-color: transparent; */
  border: none;
  border-bottom: 1px solid #9e9e9e;
  border-radius: 0;
  outline: none;
  /* height: 3rem; */
  width: 100%;
  /* font-size: 1rem; */
  margin: 0 0 15px 0;
  padding: 0;
  box-shadow: none;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  transition: all .3s;
  }
  input.materialize:disabled, input.materialize[readonly="readonly"]{
    color: rgba(0, 0, 0, 0.26);
    border-bottom: 1px dotted rgba(0, 0, 0, 0.26); }
  input.materialize:disabled + label, input.materialize[readonly="readonly"] + label{
    color: rgba(0, 0, 0, 0.26); }
  input.materialize:focus:not([readonly]){
    border-bottom: 1px solid #69b9e8;
    box-shadow: 0 1px 0 0 #69b9e8; }
  input.materialize:focus:not([readonly]) + label{
    color: #ff4081; }
  input.materialize.valid, input:focus.materialize.valid {
    border-bottom: 1px solid #4CAF50;
    box-shadow: 0 1px 0 0 #4CAF50; }
  input.materialize.valid + label:after, input:focus.materialize.valid + label:after {
    content: attr(data-success);
    color: #4CAF50;
    opacity: 1; }
  input.materialize.invalid, input:focus.materialize.invalid {
    border-bottom: 1px solid #F44336;
    box-shadow: 0 1px 0 0 #F44336; }
  input.materialize.invalid + label:after, input:focus.materialize.invalid + label:after {
    content: attr(data-error);
    color: #F44336;
    opacity: 1; }
  input.materialize + label:after {
    display: block;
    content: "";
    position: absolute;
    top: 65px;
    opacity: 0;
    transition: .2s opacity ease-out, .2s color ease-out; }



/***********/
/* CROPIT  */
/***********/
.cropit-preview {
	background-color: #f8f8f8;
	background-size: cover;
	border: 1px solid #828282;
	border-radius: 3px;
	margin-top: 7px;
}
/* Show move cursor when image has been loaded */
.cropit-preview.cropit-image-loaded .cropit-preview-image-container {
  cursor: move;
}
/* Hide default file input button if you want to use a custom button */
input.cropit-image-input {
  visibility: hidden;
  position:absolute;
  width:1px;
}
.croplabel {
	display: inline-block;
	padding: 6px 12px !important;
	cursor: pointer;
	border-radius: 3px;
	color:#fff;
	margin-top:6px;
	border:initial;
	font-size:12px;
	line-height: 19px;
}

/* Gray out zoom slider when the image cannot be zoomed */
.cropit-image-zoom-input[disabled] {
  opacity: .2;
}
.image-size-label {
	margin-top: 10px;
}
.image-editor button[type="submit"] {
	margin-top: 10px;
}

span.image-empty {
	display:none;
	color:red !important;
}	
span.image-empty.error {
	display:block;
	background:inherit;
	margin-left:0;
}


/***********/
/* SWITCH  */
/***********/
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border:1px solid #aaa;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 3px;
  background-color: #aaa;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: lightgrey;
}

input:focus + .slider {
  box-shadow: 0 0 1px lightgrey;
}

input:checked + .slider:before {
  -webkit-transform: translateX(22px);
  -ms-transform: translateX(22px);
  transform: translateX(22px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 30px;
}

.slider.round:before {
  border-radius: 50%;
}



@media (max-width: 768px) {
	h1 { font-size:32px; /*padding:0 25px;*/ margin-top:2px; margin-bottom:15px;}
	h2 { font-size: 26px !important; }
	h3 { font-size: 16px;} 
	.logo img { height:40px; }
	.contentIn { width: calc(100% - 20px) !important; padding:0 10px;}
	body:not(#tinymce) { background-color:#fff !important }
	#wrap:not(#tinymce)::before {
		content: none !important;
		background: none !important;
	}	
	.footer-column ul li { margin-bottom: 2px;}
	.footer-container { padding: 0 20px; margin:0 auto;}
	.footer-brand { width:100%; }
	.certification-text { margin-top:0px;  }
	.certification-text strong, .certification-text b { margin-top:20px; }

	.footer-top {
		flex-direction: column;
		gap: 10px;
		text-align: center;
		margin-bottom:30px;
	}

	.footer-brand h1 {
		font-size: 2rem;
	}

	.footer-links {
		grid-template-columns: repeat(1, 1fr);
		gap: 30px;
		width: 100%;
		margin-left: 0;
	}

	.footer-column {
		max-width: none;
		margin:0;
	}

	.footer-bottom {
		flex-direction: column;
		gap: 20px;
		text-align: center;
	}

	.footer-bottom-left {
		flex-direction: column;
		gap: 15px;
	}
	.footer-middle {
		flex-direction: column;
		text-align: center;
		gap: 10px;
	}

	header .social-div { border:0; }
	header .social-icons { gap: 40px; }
	.parallax-banner { height: 33vw; }
}

@media (max-width: 480px) {
	h1 { font-size:24px;/*  line-height: 29px; */}
	.footer-brand img { height:100px; max-height:100px; }
	.footer-top { gap:15px; }
	.footer { padding: 40px 0 30px;	}

	.footer-links {
		grid-template-columns: 1fr;
		gap: 15px;
	}

	.footer-column h3 {
		font-size: 16px;
		margin-bottom:10px;
	}
	.certification-text strong, .certification-text b {
		font-size: 18px;
	}

	.footer-column ul li a {
		font-size: 0.9rem;
	}


	.b-corp-badge {
		width: 50px;
		height: 50px;
		font-size: 1.2rem;
	}
	#page-transition .pt__logo { margin-bottom:50px; }
	.parallax-banner {	height: 45vw; }

	.btn, .button { font-size: 0.8rem; padding:0.55rem .8rem; letter-spacing: 0.08rem; }
}