/* =========================================================
   SNES-FSU MAYOTTE — PAGE D'ACCUEIL
   ========================================================= */


/* =========================================================
   CARTES D'ACTUALITÉ
   ========================================================= */

cartearticle {
	display:block;

	flex:0 0 290px;
	min-width:290px;

	scroll-snap-align:start;
	box-sizing:border-box;

	background:#f2f2f2;
	border-top:7px solid #2f63ac;

	padding:17px;
}


/* =========================================================
   TYPOGRAPHIE DES CARTES
   ========================================================= */

/* Catégorie : MOBILISATION / CSA / ÉLECTIONS PRO */

cartecategorie {
	display:block;

	margin-bottom:5px;

	font-size:0.95em;
	line-height:1.2;
	font-weight:bold;

	color:#2f63ac;
	text-transform:uppercase;
}

cartecategorie:empty {
	display:none;
}


/* Titre de l'article */

cartearticle > div:first-of-type {
	margin-bottom:14px;

	color:#2f63ac;

	font-size:1.25em;
	line-height:1.25;
	font-weight:bold;
}


/* Descriptif */

cartearticle > div:nth-of-type(2) {
	color:#333333;

	font-size:0.92em;
	line-height:1.45;
}


/* "Lire l'article →" */

cartearticle > div:last-of-type {
	margin-top:16px;

	font-size:0.95em;
	line-height:1.25;
	font-weight:bold;
}

cartearticle > div:last-of-type a {
	color:#2f63ac;
	text-decoration:none;
}

cartearticle > div:last-of-type a:hover {
	text-decoration:underline;
}


/* =========================================================
   COULEURS DES 3 CARTES D'ACTUALITÉ
   ========================================================= */

/* 1 — rose */

cartearticle:nth-of-type(1) {
	border-top-color:#e40747;
}

cartearticle:nth-of-type(1) cartecategorie,
cartearticle:nth-of-type(1) > div:first-of-type,
cartearticle:nth-of-type(1) > div:last-of-type a {
	color:#e40747;
}


/* 2 — orange */

cartearticle:nth-of-type(2) {
	border-top-color:#f39206;
}

cartearticle:nth-of-type(2) cartecategorie,
cartearticle:nth-of-type(2) > div:first-of-type,
cartearticle:nth-of-type(2) > div:last-of-type a {
	color:#f39206;
}


/* 3 — vert */

cartearticle:nth-of-type(3) {
	border-top-color:#0aa353;
}

cartearticle:nth-of-type(3) cartecategorie,
cartearticle:nth-of-type(3) > div:first-of-type,
cartearticle:nth-of-type(3) > div:last-of-type a {
	color:#0aa353;
}


/* =========================================================
   ARTICLE À LA UNE
   ========================================================= */

uneaccueil {
	display:block;
	margin:0 0 8px 0;
}

uneaccueil cartearticle {
	display:block;
	width:100%;
	min-width:0;
	box-sizing:border-box;

	background:#f2f2f2;

	border:2px solid #0167af;
	border-top:9px solid #0167af;

	padding:20px;
}

/* Étiquette À LA UNE */
uneaccueil cartecategorie {
	display:inline-block;

	margin-bottom:8px;
	padding:4px 8px;

	background:#0167af;
	color:#ffffff;

	font-size:0.90em;
	line-height:1.2;
	font-weight:bold;
	text-transform:uppercase;
}

/* Titre */
uneaccueil cartearticle > div:first-of-type {
	color:#0167af;

	font-size:1.50em;
	line-height:1.2;
	font-weight:bold;

	margin-bottom:12px;
}

/* Descriptif */
uneaccueil cartearticle > div:nth-of-type(2) {
	color:#333333;

	font-size:0.98em;
	line-height:1.48;
}

/* Lire l'article */
uneaccueil cartearticle > div:last-of-type {
	margin-top:14px;

	font-size:0.95em;
	line-height:1.25;
	font-weight:bold;
}

uneaccueil cartearticle > div:last-of-type a {
	color:#0167af;
	text-decoration:none;
}

/* =========================================================
   TITRES DE SECTIONS
   ========================================================= */

titreaccueil {
	display:block;

	margin:8px 0 5px 0;
	padding-bottom:3px;

	border-bottom:2px solid #0167af;

	color:#0167af;

	font-size:1.08em;
	line-height:1.2;
	font-weight:bold;
	text-transform:uppercase;
}


/* =========================================================
   LIENS
   ========================================================= */

/* Transition très légère sur les liens des blocs dynamiques */

cartearticle a {
	transition:opacity 0.15s ease;
}

cartearticle a:hover {
	opacity:0.75;
}


/* =========================================================
   ADAPTATION PETITS ÉCRANS
   ========================================================= */

@media (max-width:640px) {

	cartearticle {
		flex-basis:260px;
		min-width:260px;
		padding:15px;
	}

	cartearticle > div:first-of-type {
		font-size:1.15em;
	}

	cartearticle > div:nth-of-type(2) {
		font-size:0.90em;
	}

	uneaccueil cartearticle {
		width:100%;
		min-width:0;
		padding:17px;
	}

	uneaccueil cartearticle > div:first-of-type {
		font-size:1.35em;
	}

	uneaccueil cartearticle > div:nth-of-type(2) {
		font-size:0.94em;
	}

	titreaccueil {
		font-size:1.08em;
	}
}

/* =========================================================
   À LA UNE — bleu SNES
   ========================================================= */

#uneaccueil cartearticle {
	border:none !important;
	border-top:7px solid #0167af !important;
	background:#f2f2f2;
	width:100%;
	min-width:0;
	box-sizing:border-box;
}

#uneaccueil cartecategorie {
	display:inline-block;
	background:#0167af !important;
	color:#ffffff !important;
	padding:4px 8px;
	margin-bottom:8px;
}

#uneaccueil cartearticle > div:first-of-type {
	color:#0167af !important;
}

#uneaccueil cartearticle > div:last-of-type a {
	color:#0167af !important;
}