/* 
	Fichier de style principal 
	auteur : O. SCHRAVERUS 
*/

/* Pour les valeurs paramétrables */
:root {
	--primary-color: #000000;
	--bg-color: #ffffff;
	--menu-color: #eeeeee;
	--menu-text-color: #000000;
	--footer-color: #ff8c00;
	--main-font: 'Arial', sans-serif;
	--font-size: 16px;
}

/* Force le corps de page à prendre toute la hauteur */
html, body {
	height: 100%;
	margin: 0;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* Le contenu prend tout l'espace disponible et pousse le pied de page */
.site_content {
	flex: 1 0 auto;
}

.main_logo{
	width: 80%;
}
/* Logos pour les média sociaux dans le pied de page */
.ms_logos{
	width: 40px;
}

/* Mise en page en format "presse écrite" en colonnes (nombre paramétrable)
/* Classe pour affichage en 3 colonnes */
.colonnes-3 {
	column-count: 3;	/* Nombre de colonnes */
	column-gap: 30px;	/* Espace entre colonnes */
	column-rule: 1px solid #ddd; /* séparation */
	text-align: justify;
}

/* Classe pour affichage en 2 colonnes */
.colonnes-2 {
	column-count: 2;  
	column-gap: 30px; 
	column-rule: 1px solid #ddd; 
	text-align: justify;
}

/* Classe pour affichage en 1 colonne */
.colonnes-1 {
	column-count: 1;  
	column-gap: 30px; 
	column-rule: 1px solid #ddd;
	text-align: justify;
}

/* Conteneur des colonnes */
.journal-container {
	max-width: 1000px;
	margin: 20px auto;
	font-family: var(--main-font),sans-serif;
	color: var(--primary-color);
	font-size: var(--font-size, 16px);
	line-height: 1.5;
}

.hedder {
	text-align: center;
	border-bottom: 4px double #000;
	margin-bottom: 20px;
}

.hash_1 {
	font-size: 3rem;
	text-transform: uppercase;
	margin: 10px 0;
}

.gros-titre {
	column-span: all;/* Le titre traverse toutes les colonnes */
	text-align: center;
	font-size: 2rem;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	padding: 10px 0;
	margin: 20px 0;
}

.illustration {
	width: 100%;
	height: auto;
	margin-bottom: 10px;
	filter: grayscale(10%); /* Look vintage */
}
.image_inline {
	float: left;
	margin-right: 15px;
	margin-bottom: 5px;
	height: auto;	   /* Garde les proportions intactes */
	max-width: 100%;	/* Sécurité pour le responsive */
}

/* Lettrine */
.colonnes-1 > div::first-letter,
.colonnes-2 > div::first-letter,
.colonnes-3 > div::first-letter {
	float: left;
	font-size: 3rem;
	line-height: 1;
	padding-right: 8px;
	font-weight: bold;
}

.colonnes-1 > div, .colonnes-2 > div, .colonnes-3 > div {
	display: block;
	unicode-bidi: isolate;
}

/* Style minimal pour le rendu des boutons/logos de pied */

.bande_orange {
	flex-shrink: 0;
	background-color: var(--footer-color);
	padding: 20px;
	width: 100%;
}

.ms_reseaux { 
	display: flex; 
	gap: 15px; 
	justify-content: center; 
	margin-bottom: 20px; 
}

.ms_logos {
	width: 35px;
	height: 35px;
	border-radius: 8px;
	overflow: hidden;	/* Coupe tout ce qui dépasse du cercle (le blanc) */
	object-fit: cover;   /* Évite de déformer l'icône */
}

.ms_logos:hover { 
	opacity: 0.8; 
}

.ms_boutons {
	display: flex;		/* Aligne les enfants en ligne par défaut */
	flex-wrap: wrap;	/* Permet de revenir à la ligne si l'écran est trop petit */
	gap: 15px;			/* Ajoute un espace entre les boutons sans gérer de marges complexes */
	justify-content: center; /* Centre les boutons horizontalement */
}

.btn-site {
	display: inline-block;
	padding: 10px 25px;
	background-color: #fff;
	color: #333;
	text-decoration: none;
	border-radius: 25px;
	font-weight: bold;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	min-width: 180px;
	text-align: center; /* Pour centrer le texte à l'intérieur du bouton */
}

.btn-site:hover {
	background-color: #f8f8f8;
	transform: translateY(-2px);
}

	/* Style des images boutons */
.ms_bouton_img {
	max-width: 200px;
	height: auto;
}

@media (max-width: 600px) {
	.image_inline {
		float: none;			/* On annule l'habillage */
		display: block;	 		/* L'image prend sa propre ligne */
		margin: 0 auto 15px; 	/* On la centre et on met de l'espace en dessous */
		max-width: 100%;		/* Elle s'adapte à la largeur du téléphone */
	}
}