@import url("arphybat.css");




/* ///////////////////////////////////////////////////// */
/* // Typography /////////////////////////////////////// */


/* - - font-size - - - - - - - - - - - - - - - - - - - - */
h1.plusPlus { font-size: var(--size5); }
h1.plus 	{ font-size: var(--size4); }


/* - - font-weight - - - - - - - - - - - - - - - - - - - */
h1.plusPlus { font-weight: 500; }
h1.plus 	{ font-weight: 500; }

dt { font-weight: 500; }


/* - - line-height - - - - - - - - - - - - - - - - - - - */
.plusPlus { line-height: 1; }







/* ///////////////////////////////////////////////////// */
/* // Geometry ///////////////////////////////////////// */

:root {
	--Hpadding: calc(var(--spacer, 1rem) * 2);
	--HwidthLimit: 70rem;
	--logoWidth: 256px;
}


h1, h2, h3, h4, h5, h6, p, blockquote, li, dl {
	margin-block-end: calc(var(--spacer, 1rem) / 2);
}
h1, h2, h3, h4, h5, h6 {
	margin-block-start: calc(var(--spacer, 1rem) * 2);

}
*:first-child {
	margin-block-start: 0;
}






/* ///////////////////////////////////////////////////// */
/* // Style & Design /////////////////////////////////// */


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - backgrounds - - - - - - - - - - - - - - - - - - - */

footer section{ background: var(--grad-left-blue); }







/* ///////////////////////////////////////////////////// */
/* // Layout /////////////////////////////////////////// */



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - Main content column - - - - - - - - - - - - - - - */

/* virtual max-width on a child .container using padding */
header, section {
	 padding-left: max( calc( (100vw - ( var(--HwidthLimit) - (var(--Hpadding) * 2) ) ) / 2 ), var(--Hpadding) );
	padding-right: max( calc( (100vw - ( var(--HwidthLimit) - (var(--Hpadding) * 2) ) ) / 2 ), var(--Hpadding) );
}

section {
	padding-top: calc(var(--spacer, 1rem) * 2);
	padding-bottom: calc(var(--spacer, 1rem) * 2);
}




/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - Header - - - - - - - - - - - - - - - - - - - - - - */

header {
	display: flex;
	gap: calc( var(--spacer, 1rem) * 1);
	justify-content: space-between;
	align-items: flex-end;
	padding-top: calc(var(--spacer, 1rem) * 2);
	padding-bottom: calc(var(--spacer, 1rem) * 2);
}


header #Logo{
	width: var(--logoWidth);
}

header nav {
	display: flex;
	/* gap: calc(var(--spacer, 1rem) * 1); */
	gap: 3vw;

	align-items: flex-end;

	font-size: var(--size1);

	a { text-decoration: none; }
	text-wrap-mode: nowrap;
}

section + section {
	margin-top:	calc(var(--spacer, 1rem) * 4);
}


/* header alignment */
header #Logo { transform: translateY( calc( var(--logoWidth) /19.5 ) ); }
header nav a { transform: translateY( 0.18em );}
header nav { align-items: flex-end; }
header nav * { margin:0; padding:0; line-height:1; }





/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - Footer  - - - - - - - - - - - - - - - - - - - - - */

/* footer on the bottom */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

:has(+footer){
	margin-bottom: calc(var(--spacer, 1rem) * 8);
}

footer {
	margin-top: auto;
}










/* ///////////////////////////////////////////////////// */
/* // Mobile /////////////////////////////////////////// */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - Nav - - - - - - - - - - - - - - - - - - - - - - - */
header {
	flex-wrap: wrap;
}

@media (max-width: 640px){
	header { align-items: flex-start; }
	header nav { flex-direction: column; }
	.framed.float {
		float: unset !important;
	}
}





/* ///////////////////////////////////////////////////// */
/* // Forms //////////////////////////////////////////// */



/* ///////////////////////////////////////////////////// */
/* // Search /////////////////////////////////////////// */

header .search {
	position: relative;

	
	button.search-toggle {
		background: none;
		border: none;
		cursor: pointer;
		padding: 0rem;
		height: unset;
		color: var(--blue);
	}

	input[type="search"] {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-45%);
		width: 0;
		opacity: 0;
		padding: 0.4em 0.6em;
		border: 1px solid var(--blue);
/* 		border-radius: 2em; */
		font: inherit;
		font-size: var(--size1);
		background: #fff;
		transition: width 0.25s ease, opacity 0.25s ease;
		pointer-events: none;
	}

}

header .search.open input[type="search"] {
	width: min(60vw, 25rem);
	opacity: 1;
	pointer-events: auto;
}



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - Form input  - - - - - - - - - - - - - - - - - - - */

form *:has(> input){
	/* outline: 1px solid pink; */
	margin-block-end: 1rem;
}


form *:has( > input[type="radio"]),
form *:has( > input[type="checkbox"]) {
	display: block;
	margin-block-end: 0.56rem;
}

textarea{
	margin-block-start: 1rem;
	width: 100%;
}


input, textarea {
	font-family: "noigrotesk", system-ui, sans-serif;
	font-size: var(--size1);
	color: var(--blue);
	padding: 0.25em;
/* 
	background: linear-gradient(
		90deg,
		hsl(from var(--yellow) h s l / 0.3),
		hsl(from var(--yellow) h s l / 0.0)
	);
 */
	background: #FFF;
	border: none;
	border: 1px solid hsl(from currentColor h s l / 0.5);
	border-radius: 0.25em;
}
::placeholder{
	color: hsl(from currentColor h s l / 0.5);
}


/* Summary button */
details[open] summary.button, 
details[open] summary.button:hover{
	/* all: unset; */
	background-color: unset;
	color: unset;
	box-shadow: unset;
}







/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - .formGrid layout  - - - - - - - - - - - - - - - - */

.formGrid {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 1rem;
	align-items: baseline;
}

.formGrid .grid-row {
	display: contents;
}

.formGrid .grid-row > :first-child {
	text-align: right;
}





/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - Honeypot  - - - - - - - - - - - - - - - - - - - - */
.uniform__potty {
	position: absolute;
	left: -9999px;
}



/* ///////////////////////////////////////////////////// */
/* // Modules ////////////////////////////////////////// */


/* Actualités */

#Actualites{}

#Actualites article, 
#Actualites > * {
	margin-block-start: calc(var(--spacer, 1rem) * 4);
}

#Actualites article .date {
	font-size: var(--size-2);
}




















/* ///////////////////////////////////////////////////// */
/* // TEMP ///////////////////////////////////////////// */

/* header > * { outline: 1px solid magenta; } */