@font-face
{
	font-family: Ancizar;
	src: url(Police/Ancizar/AncizarSerif-Italic-VariableFont_wght.ttf);
}
@font-face
{
	font-family: friends;
	src: url(Police/friends/GABRWFFR.TTF);
}
@font-face
{
	font-family: Lora;
	src: url(Police/Lora/Lora-VariableFont_wght.ttf);
}
body
{
	font-family: Ancizar, Lora, friends, sans-serif;
	color: black;
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #F7F8F3;
}

/* Le contenu ne colle pas aux bords (le body n'a plus de marge) */
header, nav, section
{
	padding-left: 15px;
	padding-right: 15px;
}

.container
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.centre
{
	width: 40%;
	height: auto;
}
.element
{
	color: black;
	background-color: rgb(3, 140, 140);
	opacity: 0.9;
	padding: 10px;
	border-radius: 50px;
	margin: 10px;
}
.ensemble
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.objet
{
	color: black;
	padding: 10px;
	border-radius: 50px;
	margin: 10px;
}
/* En-tête : colonne vide | titres | logo.
   Les deux colonnes de côté ont la même largeur,
   donc les titres sont centrés sur la page, comme le menu. */
header > div
{
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}
header h1, header h2
{
	grid-column: 2;
	text-align: center;
}
.image
{
	grid-column: 3;
	grid-row: 1 / 3;
	justify-self: end;
}
.image img
{
    border-radius: 25% 10%;
    display: block;
}
footer
{
	background-color: rgb(3, 140, 140);
	opacity: 0.9;
	margin-top: auto; /* pousse le footer en bas quand la page est courte */
	padding: 10px 15px;
}

span
{
	text-align: right;
}

a
{
	color: black;
	text-decoration: none;
}

nav
{
	clear: both;
	margin: 40px 0;
}

/* Espacement des blocs de contenu (remplace les <br/> en série) */
section article
{
	margin-bottom: 60px;
	clear: both;
}
section
{
	margin-bottom: 80px;
}

img
{
	max-width: 100%;
	height: auto;
}
header img
{
	width: 200px;
	height: 210px;
}
/* Cartes Google Maps fluides */
iframe
{
	width: 100%;
	max-width: 600px;
	aspect-ratio: 4 / 3;
	height: auto;
	border: 0;
}
h1
{
	font-size: 500%;
}
h2
{
	text-decoration: underline;
}
.neuropediatre
{
	font-size: 30px;
}
.conteneur
{
	display: grid;
	gap: 40px;
}

/* Page Contact : liste, cartes alternées gauche / droite / gauche */
.contact::after
{
	content: "";
	display: block;
	clear: both;
}
.olea, .hopitalHUDERF, .hopitalTivoli
{
	width: 45%;
	max-width: 600px;
}
.olea, .hopitalTivoli
{
	float: left;
	margin: 0 20px 10px 0;
}
.hopitalHUDERF
{
	float: right;
	margin: 0 0 10px 20px;
}
.conteneur h3
{
	text-align: center;
}
.publication
{
	border: 1px solid;
	text-align: center;
}
.diagnostique
{
	border-bottom: 1px solid;
}

a:hover
{
	color: purple;
}
@media screen and (max-width: 712px)
{
	h1
	{
		font-size: 100%;
	}
	body
	{
		font-family: Lora, Arial, friends, sans-serif;
	}
	/* Le menu s'empile verticalement (c'est .container qui est en flex, pas nav) */
	.container
	{
		flex-direction: column;
		align-items: center;
	}

	.accueil
	{
		text-align: center;
	}

	header img
	{
		width: 120px;
		height: auto;
	}

	/* Sur smartphone : adresses du footer empilées et alignées à gauche
	   (sinon le bloc le plus court, Tivoli, est centré et paraît décalé) */
	.ensemble
	{
		flex-direction: column;
	}

	/* Sur smartphone : logo centré au-dessus des titres */
	header > div
	{
		grid-template-columns: 1fr;
	}
	header h1, header h2, .image
	{
		grid-column: 1;
	}
	.image
	{
		grid-row: auto;
		justify-self: center;
	}

	#boutonTheme
	{
		padding: 6px 10px;
		font-size: 16px;
	}

	/* Sur smartphone : carte au-dessus du texte, pleine largeur */
	.olea, .hopitalHUDERF, .hopitalTivoli
	{
		float: none;
		width: 100%;
		margin: 0 0 15px 0;
	}

	.cas
	{
		text-align: left;
		float: left;
		padding-right: 60%;
		position: sticky;
		top: 0;
		flex-shrink: 0;
		width: 150px; /* largeur fixe */
		background: white;
	}
	.conteneur p
	{
		padding-left: 40%;
	}
}
/* Thème suivant la préférence du système (si JavaScript désactivé) */
@media (prefers-color-scheme: dark)
{
	body
	{
		background-color: #121212;
		color: #ffffff;
	}
	.cas
	{
		background: #121212;
	}
}

/* Bouton mode sombre / clair (en haut à droite) */
#boutonTheme
{
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 1000;
	padding: 8px 14px;
	border: 1px solid;
	border-radius: 50px;
	background-color: rgb(3, 140, 140);
	color: black;
	font-family: inherit;
	font-size: 14px;
	cursor: pointer;
}

/* Thème choisi par le visiteur (classe posée par script.js) */
html.dark body
{
	background-color: #121212;
	color: #ffffff;
}
html.dark a
{
	color: #ffffff;
}
html.dark a:hover
{
	color: #ce93d8;
}
html.dark .element a
{
	color: black;
}
html.dark .cas
{
	background: #121212;
}
html.dark #boutonTheme
{
	color: black;
}
html.light body
{
	background-color: #F7F8F3;
	color: black;
}
html.light a
{
	color: black;
}
html.light a:hover
{
	color: purple;
}
html.light .cas
{
	background-color: #F7F8F3;
}