/* Import des polices */
:root {
	/* === COULEURS PRINCIPALES === */
	--navy: #201B61; 
	--pink: #DC3D67;
	--cyan: #86d6d9; 
	--cyanB: #0db3c4; 
	--cyanF: #82E6EB;
	/*--gray: #E1E9EE;*/
	--gray: #ebeff6;
	--light-gray: #F0F6FA;

	--dark: #002B39;
	--blue: #006FB9;
	--white: #FFFFFF;

	/* === COULEURS D'ACCENTUATION === */
	--accent-dark-teal: #002B39;
	--accent-blue: #006FB9;
	--accent-orange: #F9B233;
	--purple: #954090;

	/* === DÉGRADÉS === */
	--gradient-image: center/100% 100% no-repeat url('img/codef-bg.svg');
	--gradient-light: linear-gradient(135deg, var(--cyan) 0%, var(--cyan) 40%, var(--cyan) 100%);
	--gradient-dark: linear-gradient(135deg, #006FB9 0%, var(--navy) 50%, var(--purple) 100%);
	--gradient-dark-inverse: linear-gradient(135deg, var(--purple) 10%, var(--navy) 45%, var(--navy) 70%, #006FB9 96%, var(--cyanF) 120%);

	--gradient-corners:
		radial-gradient(100% 300% at top left, var(--purple) 0%, transparent 65%),
    	radial-gradient(74% 120% at top right, var(--blue) -10%, transparent 50%),
    	linear-gradient(70deg, var(--navy) 70%, var(--blue) 130%);

	--gradient-navy-purple: linear-gradient(135deg, var(--navy) 0%, var(--purple) 100%);
	/*--gradient-purple-pink: linear-gradient(135deg, var(--pink) -30%, var(--navy) 35%, var(--purple) 100%);
	--gradient-navy-pink: linear-gradient(135deg, var(--navy) 0%, var(--purple) 50%, var(--pink) 100%);
	--gradient: linear-gradient(255deg, var(--purple) 0%, var(--pink) 100%);
	--gradient2: linear-gradient(135deg, var(--navy) 60%, var(--blue) 80%, var(--cyan) 108%);*/

	--shadow-sm: 0 2px 8px rgba(32, 27, 97, 0.08);


	/* === ESPACEMENTS === */
	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.8rem;
	--spacing-xl: 2.5rem;
	--spacing-2xl: 4rem;
	--spacing-3xl: 4.5rem;

	/* === TYPOGRAPHIE === */
	--font-family: 'rotunda-variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	--font-weight-light: 400;
	--font-weight-titles: 800;
	--font-weight-extra-bold: 800;
	/* === TRANSITIONS === */
	--transition-base: 250ms ease-in-out;

	/* === TRANSITIONS === */
	--font-size-xs: 0.875rem;
	--font-size-sm: 1rem;
	--font-size-base: 1.15rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.25rem;
	--font-size-2xl: 1.5rem;
	--font-size-3xl: 1.875rem;
	--font-size-4xl: 2.25rem;
	--font-size-5xl: 2.75rem;

	--news-txt:#0a0a0a;
	--news-muted:#7b7f86;
	--news-gap:28px;
	--news-radius:15px;

}

body {
	min-width: 250px;
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	line-height: 1.6;
	color: var(--navy);
	margin: 0;
	padding: 0;
	/* Forcer un rendu cohérent */
	font-feature-settings: normal;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

}
ul {
    margin: 0 0 0 15px;
    padding: 2px 2px 0px 2px !important;
}

h1, h2, h3, h4 {  
	margin:0;
	padding:0;
	line-height: 1;
	font-weight: var(--font-weight-titles);
}
h1 {
	margin:0;
}
h2, h3, h4 {  
	margin:0 0 8px;
}

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

/* reset */
:focus { outline: none; }
[contenteditable="false"] {	user-select: none;	cursor: default; }
div, span {	cursor: default; }
button, a {	user-select: none; cursor:pointer;	}

a.animate{
	color:inherit;
	text-decoration:none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
	transition: color 0.2s, background-size 0.3s ease;
}
a:hover.animate{
	background-size:100% 2px;
}

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

.desktop { display:block; }
.desktop-flex { display:block; }
.desktop-inline { display:inline; }
.mobile, .mobile-flex, .mobile-inline { display:none; }


/***************************
   CODE F LAYOUT
****************************/
.container {
	max-width: 1230px;
	margin: 0 auto;
    padding: 0 var(--spacing-lg);
}
section {
	padding: var(--spacing-xl) 0 var(--spacing-2xl);
}
/*@media screen and (max-aspect-ratio: 16/9) {
	section {
		padding: var(--spacing-2xl) 0;
	}
}*/
section.head { 
    background:var(--gradient-dark); 
    margin:0; 
    display: flex;
    align-items: center;
    justify-content: center;
	color:#FFF; 
    font-size:1.1rem;  
    padding: var(--spacing-lg) 0 var(--spacing-xl) !important;
}
section.head h1 { 
	font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-extra-bold);
    color:#FFF;
    text-align: center;
    position:relative;
    top: -4px;
}
section.head .intro { 
	margin-top:20px; color:rgba(255,255,255,0.9);
    font-size: var(--font-size-lg);
}


.footer {
	background-color: var(--navy);
	color: var(--white);
	padding: var(--spacing-2xl) 0;
	text-align: center;
	position:relative; 
	z-index:2;
}
}
.footer .container { margin-bottom:0; }
.footer h4 { font-weight: 700; margin: 22px 0 10px; color: var(--cyan); }
.footer li { font-size:var(--font-size-xs); margin-bottom: var(--spacing-sm);}
.footer a {  color: var(--white); text-decoration: none; opacity: 0.8; }
.footer a:hover { opacity: 1; }
.footer a:active { color: var(--cyan); opacity: 1; }
footer .partners { display:flex; margin-bottom:20px; gap:25px; justify-content: flex-end; align-items: center; }
footer .partners img { max-height: 45px; max-width: 150px; opacity:.7; transition: opacity var(--transition-base); }
footer .partners a:hover img { opacity:1;}
footer .logo { display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); min-width: 300px;  }
footer .logo img { margin:0 auto;width: 100%; max-width: 300px; }

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

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

/* Eléments (liens + actif) */
.pagesNum a,
.pagesNum strong,
.liresuite a,
.liresuite strong {
  display: inline-block !important;
  padding: 8px 12px !important;
  margin: 0 4px !important;
  border: 1px solid var(--border, #e5e7eb) !important;
  border-radius: 9999px !important;             /* arrondi délicat type "pilule" */
  text-decoration: none !important;
  font-weight: 600 !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;
}
/* 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 {
  background: var(--hover, #f3f4f6) !important;
  border-color: #d1d5db !important;
  color: var(--navy, #e95321) !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(--blue, #e95321) !important;
  border-color: var(--blue, #e95321) !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;
}

/***************************
   FILTRES (NEWS/ACTEURS)
****************************/
section.search-bar { 
	flex-direction: column; 
	height:inherit !important; 
	padding:var(--spacing-lg) 0 !important 
}
.filters {
	margin-top:20px;
	display: flex;
	gap: 20px;
	align-items: flex-end;
}
.filters .col { color:rgba(255,255,255,0.8); }
.filters label {     
	display: block;
	font-weight: 500;
	font-size: 14px;
	float: none;
	line-height: 1.3;
	margin: 0 0 4px 0;
	padding: 0;
}

.head input::placeholder {
  font-weight: bold;
  opacity: 0.5;
  color: #FFF;
}
.head input {
	color: #FFF;
}

.select2-container .select2-selection--single {  height:36px !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered { 
	font-size:16px !important; 
	font-weight: 300 !important; 
	line-height: 31px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b { 
	margin-top:3px !important; 
}

.filters .col {
	flex: 1 !important;
}
.filters select, .filters .col {
	padding: 8px 0 !important;
}
.select2-container {
	flex: 1 !important;
}

.filters .col.search, .filters .col.reset-col {
	flex: 0 0 150px !important;
	text-align: center;
}


/***************************
   NEWS
****************************/
#news{
	color:var(--news-txt);
}

/* Grille */
#news .news-grid{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:var(--news-gap);
	align-items:start;
	margin: 0 auto;
}

/* Carte */
#news .card{
	display:flex;
	flex-direction:column;
	margin-bottom: 20px;
}

/* Image + effet */
#news .card .cover{
	position:relative;
	overflow:hidden;
	border-radius:0 var(--news-radius) 0 0;
	isolation:isolate;
	border-left: 10px solid var(--cyan);
}
#news .card .cover::after{
	content:"";
	position:absolute;
	inset:0;
	box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
	pointer-events:none;
}
#news .card .cover img{
	width:100%;
	aspect-ratio:16/9;
	object-fit:cover;
	transition:transform .5s ease;
	display:block;
}
#news .card:hover .cover img{
	transform:scale(1.03);
}

#news .card .news-title a { 
	color:var(--navy);
}

/* Option : place le bouton en bas de la carte sans le rendre full width */
#news .card .btnXS{
	margin-top:auto;
}
#news .news-title { 
	font-weight: var(--font-weight-titles); 
    color: var(--navy);
    line-height: 1.35;
    font-size: 1.3rem;
    margin: 5px 0;
}
#news .news-chapeau {
	 font-size:var(--font-size-base);
	 font-weight: 300;
	 margin:20px 0 20px;
}

#news .tag {
    color: #fff;
    margin: 0px 7px 3px 0px;
    padding: 7px 11px 8px;
    background: var(--cyan);
    /*background: var(--gradient-light);*/
    display: inline-block;
    font-weight: 400;
    line-height: 1.1;

}
/* Meta (catégorie + date) */
#news .meta{
	display:table;
	align-items:center;
	gap:16px;
	margin:0px 0 8px;
	font-size:.85rem;
	letter-spacing:.02em;
	text-transform:uppercase;
}
#news .meta .rule{
	flex:0 0 28px;
	height:1px;
	background:rgba(0,0,0,.15);
}
#news .meta .date{
	color:var(--news-muted);
	font-weight:600;
	white-space:nowrap;
	float:right;
	display: block;
	margin-top:8px;
}

/* Titre */
#news .card h3 {
	font-size:1.6rem;
	line-height:1.1;
	margin:9px 0 10px;
	letter-spacing:-.03em;
}
#news a.animate{
	color:inherit;
	text-decoration:none;
	background:
		linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
	transition:background-size .3s ease;
}
#news .card:hover a.animate{
	background-size:100% 2px;
}

/* Extrait */
#news .excerpt{
	color:#3b3f45;
	line-height:1.55;
	font-size:1rem;
	margin-top:5px;
	font-weight: 400;
}
/* SOLUTION: Les boutons dans un conteneur flex column s'étirent par défaut */
.card .btnSmall {
    align-self: flex-start; /* Empêche l'étirement dans le flex container */
    width: auto;
}

/* Alternative 1: Changer l'alignement global du conteneur */
#news .card {
    align-items: flex-start; /* Tous les enfants ne s'étirent plus */
}

/* Alternative 2: Si tu veux garder certains éléments étirés */
.card .excerpt,
.card .news-title {
    align-self: stretch; /* Re-étire les éléments que tu veux larges */
}
/*article .btnSmall { width: 90px; }*/

.source {
	color:#333;
    font-size:0.75rem !important;
    font-style: italic;
}
.citation {
    width:calc(100% - 55px);
	padding: 18px 15px 15px 30px;
    font-size:1.2rem !important;
    line-height: 1.5;
    font-weight: 200;
    border-radius: 0 var(--news-radius) 0 0;
    background-color: rgba(255, 255, 255, .8);
    border-left: 10px solid var(--cyan);
	/*box-shadow: 10px 0 0 var(--cyan);*/
}
.citation strong { font-weight: 500 }
.citation p { margin:20px 0 15px; }
.citation p:first-of-type  { margin-top:10px !important; }
.citation:after {
	content: '';
	position: relative;
	left:-40px;
	top:25px;
	display:block;
	width:70px;
	height:10px;
	background: var(--cyan);
}

@media (max-width:1100px){
	#news .news-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:1024px){
	.search-bar .container { 
		left: inherit !important;
		position: initial !important;
	}
	footer .grid { 
		display:flex !important; 
		flex-direction:column !important; 
		gap: var(--spacing-sm) !important;
	}
	.footer h4 {  margin:15px 0 6px;}
	.footer li { margin-bottom:0px; }
	footer p { padding:0 20px; }
	footer .partners { margin-top:60px; }
	footer .partners img { max-width: 130px; }
	footer .logo { min-width: inherit !important; justify-content: center; }
	footer .logo img { max-width: 250px !important; }

	footer .partners { 
        justify-content: center;
	}

}
	

@media (max-width:680px){
	/*#news{ padding:24px auto; }*/
	#news .news-grid{ grid-template-columns:1fr; gap:22px; }
	#news .card h3{ font-size:1.4rem; }


}

@media (max-width:500px){
	footer .partners { 
		gap:15px;
        margin-top: 60px;
        display: grid !important;
        align-items: center;
        justify-content: center;
	}
	#news .excerpt{
		margin-top:0px;
	}
}

@media (max-width:768px)  {
	body { line-height: 1.5; }
	:root {
	--font-size-xs: 0.80rem;
	--font-size-sm: 0.875rem;
	--font-size-base: 0.875rem;
	--font-size-lg: 1rem;
	--font-size-xl: 1.125rem;
	--font-size-2xl: 1.20rem;
	--font-size-3xl: 1.65rem;
	--font-size-4xl: 1.875rem;
	--font-size-5xl: 2.25rem;

	--spacing-md: 1rem;
	--spacing-lg: 1.4rem;
	--spacing-xl: 2.0rem;
	--spacing-2xl: 2.5rem;
	--spacing-3xl: 3.5rem;
	}

  	.select2-container { max-width:100%; }
	.contentIn { width: calc(100% - 30px) !important; margin:0 15px; padding:25px 0 0; }

	.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; }

	.btnXL {
		font-size: var(--font-size-lg);
		padding: calc(26px - 2px) 25px !important; /* 12px - 2px border = 10px effectif */
		min-height: inherit;
	}

	.btn {
		font-size: 13px;
		padding: calc(10px - 2px) 15px !important; /* 12px - 2px border = 10px effectif */
		min-height: inherit;
	}

	.btnSmall {
		font-size: 11px;
		padding: calc(6px - 2px) 12px; /* 8px - 2px border = 6px effectif */
		min-height: inherit;
	}

	.btnXS {
		font-size: 9px;
		padding: calc(4px - 2px) 8px; /* 6px - 2px border = 4px effectif */
		min-height: inherit;
	}


}

/***************************
   HOME PAGE
****************************/
/* Hero Zone */
.header {
	background: var(--gradient-dark);
	color: var(--white);
	padding: var(--spacing-xl) 0;
	position: relative;
	overflow: hidden;
}

.forme, .forme2, .forme3, .forme4, .forme4a, .forme5 {
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.forme::before,
.forme2::before,
.forme3::before,
.forme4::before,
.forme4a::after,
.forme5::before
{
	content: '';
	aspect-ratio:1/1;
	position: absolute;
	border-radius: 50%;

}

.forme::before {
	top: 0;
	right: 0;
	width: 90%;
	max-width: 600px;
	background: rgba(130, 230, 235, 0.1);
	transform: translate(50%, -50%);
}
.forme2::before {
	bottom: 0;
	left: 0;
	width: 60%;
	max-width: 350px;
	background: var(--pink);
	opacity:.1;
	transform: translate(-20%, 60%);
}
.forme3::before {
	bottom: 0;
	left: 0;
	width: 50%;
	max-width: 250px;
	background: var(--cyan);
	opacity:.1;
	transform: translate(-60%, 45%);
}
.forme3-bg {
	content: '';
	position: absolute;
	top: -10px;
	right: -10px;
	width: 50%;
	max-width: 250px;
	opacity:.12;
	z-index:1;
	/*transform: translate(-60%, 45%);*/
}
.forme4::before {
	bottom: 0;
	left: 0;
	width: 70%;
	max-width: 350px;
	box-sizing: border-box;
	border: 40px solid #FFF;
	background: transparent;
	opacity: .08;
	transform: translate(72%, -50%);
}
.forme4a::after {
	bottom: -20px;
    right: 25vw;
	width: 70%;
	max-width: 350px;
	box-sizing: border-box;
	border: 40px solid #FFF;
	background: transparent;
	opacity: .08;
	transform: translate(72%, -50%);
}
.forme5::before {
	bottom: -20%;
	left: -40%;
	width:88%;
	/*max-width: 340px;*/
	box-sizing: border-box;
	border: 60px solid var(--cyan);
	background: transparent;
	opacity:.2;
	transform: translate(52%, 48%);
}


.header .logo {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-lg);
}
.header .logo img {
	max-width: 80vw;
}
footer .partners { color:rgba(255, 255, 255, .8); font-size:var(--font-size-xs); line-height: 12px;}
footer .partners div { display:flex; gap:13px; align-items: center;  }

footer .logo img {
	max-width: 50vw;
}

.logo-text {
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-extra-bold);
	letter-spacing: -0.02em;
}

.logo-accent {
	color: var(--cyan);
}

.hero-title {
	font-size: 2.5rem;
	font-weight: var(--font-weight-extra-bold);
	line-height: 1.1;
	margin-bottom: var(--spacing-lg);
	position: relative;
	z-index: 1;
	max-width: 800px;
}

.hero-subtitle {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-light);
	opacity: 0.9;
	max-width: 800px;
	position: relative;
	z-index: 1;
}

@media (max-width: 768px) {
	.before-logo {line-height: 2}
	.hero-title {
		font-size: var(--font-size-4xl);
		line-height: 1.2;
	}
	section.head h1 { 
		font-size: var(--font-size-4xl);
		font-weight: 800;
		left: inherit !important;
		position: initial !important;
	}
	.filters {
		/*flex-direction: column;*/
		display:block;
	}

	/*.filters button, .filters select {
		flex: unset; /* reprend la largeur auto */
		width: 100%;
	}*/
}


/***************************
   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;
	color: var(--white);
}
.back-button-container {
    text-align: center;
    margin-top: 20px;
}
/***************************
   BUTTONS
****************************/
.button, .btn, .btnL, .btnXL, .btnSmall, .btnXS {
  	/* Layout & Display */
	display: inline-block; 
	font-family: "rotunda-variable";
	margin: 8px 0 0;

	/* Box Model */
	border-radius: 999px;
	border: 2px solid transparent; /* Border par défaut pour tous */
	outline: 0;
	box-sizing: border-box; /* Important pour la cohérence */

	/* Typography */
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .5px;
	line-height: 1.3; 

	/* Colors */
	color: #fff;
	background-color: var(--pink);
	
	/* Visual Effects */
	transition: .2s ease-out;
	
	/* Interactions */
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
/* TAILLES - min-height + padding pour flexibilité */
.btnXL {
	font-size: var(--font-size-xl);
	padding: calc(30px - 2px) 30px !important; /* 12px - 2px border = 10px effectif */
	min-height: 90px;
}

.btn {
	font-size: 14px;
	padding: calc(12px - 2px) 20px !important; /* 12px - 2px border = 10px effectif */
	min-height: 45px;
}

.btnSmall {
	font-size: 12px;
	padding: calc(8px - 2px) 16px; /* 8px - 2px border = 6px effectif */
	min-height: 32px;
}

.btnXS {
	font-size: 10px;
	padding: calc(6px - 2px) 10px; /* 6px - 2px border = 4px effectif */
	min-height: 25px;
}
.btn:hover, .btnL:hover, .btnXL:hover, .btnSmall:hover, .btnXS:hover { background: color-mix(in srgb, var(--pink) 90%, black);}
.btn-secondary { background-color: var(--gray); color:var(--news-muted); }
.btn-secondary:hover { background: color-mix(in srgb, var(--gray) 90%, black); color:#333 !important}
.btn-cyan { background-color: var(--cyan); color:#FFF !important; }
.btn-cyan:hover { background: color-mix(in srgb, var(--cyan) 90%, black); }
.btn-cyanB { background-color: var(--cyanB); color:#FFF !important; }1
.btn-cyanB:hover { background: color-mix(in srgb, var(--cyanB) 90%, black); }
.btn-purple { background-color: var(--purple); color:#FFF !important; }
.btn-purple:hover {	background: color-mix(in srgb, var(--purple) 90%, black);}
.btn-blue { background-color: var(--navy); color:#FFF !important; }
.btn-blue:hover { background: color-mix(in srgb, var(--navy) 90%, black); }

/* GHOST BUTTONS - compensation padding pour même hauteur */
.ghost { 
	color: var(--pink); 
	background-color: transparent; 
	border: 2px solid currentColor;
	/* Pas de compensation de padding ici, les borders font partie du design */
}
.ghost:hover { 
	background-color: var(--pink) !important; 
	color: #FFF; 
	border: 2px solid var(--pink); /* Garde la border, change juste la couleur */
}
.ghost.purple { color: var(--purple);}
.ghost.purple:hover { 
	background-color: var(--purple) !important; 
	color: #FFF;
	border: 2px solid var(--purple);
}
.ghost.white { color: #FFF; }
.ghost.white:hover { 
	background-color: #FFF !important;	
	color: var(--purple) !important;
	border: 2px solid #FFF;
}
.ghost.grey { color: #CCC;}
.ghost.grey:hover { 
	background-color: var(--gray) !important;	
	color: #666;
	border: 2px solid var(--gray);
}


/***************************
   LOGIN BOX
   ****************************/
   #loginBox {
   	width:280px;
   	margin-top:20px;
   	padding-top: 150px !important;
   	padding-bottom:30px;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
   	border-radius: 2px;
   	background: url('../../img/logo_couleur.svg') no-repeat center 40px #fff;
   	background-size: 200px 100px !important;

   }
   #loginBox input:not([type="button"]):not([type="submit"]) {
   	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:188px;
   }
   /*#loginBox input[type="submit"] {
   	margin-top:20px;
   	width:105px;
   	border-radius:4px;
   	background-color:var(--pink);
   	font-weight:bold;
   	color:#FFFFFF;
   	border:0;
   	transition: background 0.15s linear;
   }	
   #loginBox input[type="submit"]:hover, #loginBox li a:hover {
   	background-color:var(--pink);
   }

   #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 var(--purple);
    box-shadow: 0 1px 0 0 var(--purple); }
  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 #ccc;
	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%;
}