@import url('https://fonts.googleapis.com/css2?family=Arimo&family=Montserrat:wght@700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css');

html {
    font-family: 'Arimo', sans-serif;
    background-color: #ffffff;
    color: #383E4B;
    max-width:95%;
    margin:auto;
    scroll-behavior:smooth;
    line-height:1.45;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
}
body {
    max-width:1250px;
    margin:auto;
}
header {
    text-align:center;
}
header img {
    max-width:250px;
    margin:auto;
    display:inline-block;
}
header h1 {
	font-size: clamp(1.7em, 5vw, 3em);
}
header h2 {
	font-size: clamp(1.05em, 3.5vw, 1.6em);
}
header p {
	font-weight: bolder;
	font-size: clamp(1em, 2.5vw, 1.4em);
}
main h2 {
	display: inline-block;
	border-bottom: 4px solid #000;
	padding-bottom: .15em;
	margin-bottom: .75em;
}
.rs, footer nav {
	margin:auto;
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	flex-wrap:wrap;
	gap:1em;
}
.partenaires {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	gap:20px;
}
footer {
	margin-top:5em;
}
a {
    color:#0099d1;
    text-decoration:none;
    transition: color .15s ease-in-out;
}
a:hover {
	text-decoration:underline;
}
::selection {
	background:#000;
	color:#fff;
}
:focus-visible {
	outline:3px solid #0099d1;
	outline-offset:2px;
}
img {
	max-width: 100%;
	height: auto;
	border:0;
	vertical-align: middle;
}
.social {
    font-size:2em;
    color:#000;
    transition: color .15s ease-in-out, transform .15s ease-in-out;
}
.social:hover {
	color:#0099d1;
	transform:scale(1.15);
	text-decoration:none;
}
.professionfoi {
	display:grid;
	grid-template-columns: 40% 40%;
	grid-column-gap: 5%;
	grid-row-gap: 50px;
	margin-bottom:.5em;
}
.axes {
	max-width:900px;
	margin:auto;
}
.pfbox {
	display:inline-block;
	font-family: 'Montserrat', sans-serif;
	padding: 5%;
	text-align:center;
	border-radius:0.5em;
	color:#fff;
}
.pf { background:#000;}
.axe1 { background:#482344;}
.axe2 { background:#2B5166;}
.axe3 { background:#429867;}
.axe4 { background:#FAB243;}
.axe5 { background:#E02130;}
.axe6 { background:#F4BF3B;}
.axe7 { background:#34993F;}
.axe8 { background:#07616D;}

/* ===== Accordéons des axes ===== */
.axe {
	border:2px solid #000;
	border-radius:0.5em;
	overflow:hidden;
	margin-bottom:1.5em;
}
.axe summary {
	list-style:none;
	cursor:pointer;
	display:flex;
	align-items:center;
	gap:.75em;
	padding:1em 1.25em;
	color:#fff;
	font-family:'Montserrat', sans-serif;
	font-weight:700;
	font-size: clamp(1em, 2.5vw, 1.15em);
	line-height:1.3;
	user-select:none;
	transition:filter .15s ease-in-out;
}
.axe summary:hover {
	filter:brightness(1.15);
}
.axe summary::-webkit-details-marker {
	display:none;
}
.axe .num {
	flex:none;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:1.9em;
	height:1.9em;
	border:2px solid #fff;
	border-radius:50%;
	font-size:.9em;
}
.axe .chev {
	margin-left:auto;
	flex:none;
	width:.5em;
	height:.5em;
	border-right:.22em solid #fff;
	border-bottom:.22em solid #fff;
	transform:rotate(45deg);
	transition:transform .2s ease-in-out;
}
.axe[open] > summary .chev {
	transform:rotate(225deg);
}
.axe .axe-content {
	padding:1.25em 1.5em;
	background:#f3f3f3;
	border-top:2px solid #000;
	line-height:1.55;
}
.axe .axe-content p {
	margin-top:0;
}
.axe .axe-content ul {
	margin-bottom:0;
}
/* Texte lisible sur le fond jaune de l'axe 6 */
.axe .axe6 {
	color:#383E4B;
	border-color:#383E4B;
}
/* ===== Fin accordéons ===== */

.voter {
		color:#000;
	border:3px solid #000;
	padding: 10px 0;
	display:block;
	margin: 10px;

}
.buttonvote {
	color:#000;
	border:3px solid #000;
	padding: 10px 0;
	display:block;
	text-transform:uppercase;
	letter-spacing:.06em;
	font-size:1.15em;
	transition: color .2s ease-in-out, background .2s ease-in-out;
}
.buttonvote:hover {
	color:#fff;
	background:#000;
}

.communiques {
	border:2px solid #000;
	border-radius:0.5em;
	padding:1em;
	margin-top:1em;
	background:#f3f3f3;
}
/*
.professionfoi ul {
    column-count: 2;
}
.professionfoi li {
	display:inline-block;
	border: 1px solid #000;
	border-radius:1em;
	padding:0.75em;
	margin:0.5em;
}
*/

.partenaires a {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:.75em;
	width:min(210px, 100%);
	padding:1.5em 1em;
	background:#fff;
	border:1px solid #e0e0e0;
	border-radius:8px;
	box-shadow:0 2px 4px rgba(0,0,0,.1);
	color:#383E4B;
	text-align:center;
	transition:box-shadow .2s ease-in-out, transform .2s ease-in-out;
}
.partenaires a:hover {
	transform:translateY(-3px);
	box-shadow:0 4px 10px rgba(0,0,0,.15);
	text-decoration:none;
}
.partenaires img {
	height:80px;
	max-width:80%;
	object-fit:contain;
	display:block;
}
@media (max-width: 1000px) {
	header img {
	    max-width:100px;
	}
	.pfbox {
		display:block;
		margin:1em;
	}
	.partenaires img {
		height:50px;
	}
	.partenaires a {
		padding:1em .75em;
	}
	.axe summary {
		padding:1em .9em;
	}
	.axe .axe-content {
		padding:1.1em 1em;
	}
	.rs {
		justify-content:center;
	}
}