/* --- Réinitialisation et variables 19-8-2026 --- */
:root {
    --bleu-cisa: #0056b3; /* Bleu générique, modifiable */
    --anthracite: #333333;
    --blanc: #ffffff;
		--primary-color: #005A9E; /* Bleu Windows */
    --secondary-color: #F3F2F1;
    --text-color: #333333;
    --light-bg: #FFFFFF;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

body {
    font-family: Arial, sans-serif;
    background-color: var(--blanc);
    color: var(--anthracite);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
		line-height: 1.6;
}
#map {
        height: 400px; 
        width: 100%; 
        border-radius: 8px; 
        margin-top: 15px; 
        margin-bottom: 30px;
        border: 2px solid #ccc;
        z-index: 1; /* Pour ne pas passer au-dessus du menu mobile */
    }
.galeriephotos {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 1vh 1vw;
}
.photo {
		cursor: pointer;
}
.photo a img {width: 100%; height: 200px; object-fit: cover; border-radius: 8px; border: 1px solid #777;}
/* --- 1. HEADER (Titre) --- */
.header {
    background-color: var(--bleu-cisa);
    color: var(--blanc);
    width: 100%;
    height: 10vh;
    display: grid;
    grid-template-columns: 150px 1fr auto;
    align-items: center;
    padding: 0 20px;
}
#tbliens a {font-size: 1.3rem;}
#tbliens img {width: 10rem;}
#supports img {width: 10rem; height: 6rem;}
.logo {
    width: 150px;
    height: 6vh;
    object-fit: contain;
}

.header-col2 {
    text-align: center;
}

.header-col2 h1 {
    font-size: 1.5rem;
    margin: 0;
}
.nav-list {
    list-style: none;
    display: flex;
    gap: 15px;
}

.nav-list li a {
    color: var(--blanc);
    text-decoration: none;
    font-weight: bold;
		font-size:1.2vw;
}

.menu-toggle {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 4px;
}

.menu-toggle .bar {
    width: 25px;
    height: 3px;
    background-color: var(--blanc);
}

/* --- 2. CONTENU --- */
main { max-width: 1200px; margin: 2rem auto; padding: 20px; background: var(--light-bg); border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.content {
    flex: 1; /* Permet au contenu de pousser le footer en bas */
    padding: 20px;
    display: grid;
    grid-template-rows: auto auto auto auto;
    gap: 30px;
}

.content-row1 h2 {
    text-align: left;
}

.content-row2 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 1vw; /* 1% de la largeur de la page */
}

.content-row2 img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.content-row3 h3 {
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.content-row3 p {
    margin-bottom: 10px;
    line-height: 1.5;
		text-align: justify;
}

/* Grille 4 : Tableau Actualités */
.content-row4-table {
    display: grid;
    grid-template-columns: 9% 18% 1fr;
    border: 1px solid #ccc;
}

.table-title {
    grid-column: 1 / -1; /* Prend toute la largeur (Ligne 4.1) */
    background-color: #eee;
    padding: 10px;
    font-size: 1.2rem;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
}
/*
.table-header {
    background-color: var(--bleu-cisa);
    color: var(--blanc);
    padding: 10px;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

.table-cell {
    background-color: var(--blanc);
    color: var(--anthracite);
    height: 250px;
    padding: 15px;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    overflow-y: auto;
}
*/
/* Tableaux */
table { width: 100%; border-collapse: collapse; margin-bottom: 2rem; }
th, td { border: 1px solid #ddd444; padding: 12px; text-align: left; }
th { background-color: var(--primary-color); color: white; }
/*
.date-cell {
    text-align: center;
    font-weight: bold;
}

.source-cell {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.source-cell img {
    max-width: 80%;
    height: auto;
}

.article-title {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.article-summary {
    margin-bottom: 15px;
}
*/
.article-link a {
    color: var(--bleu-cisa);
    text-decoration: underline;
    font-weight: bold;
}

/* --- 3. PIED DE PAGE --- */
.footer {
    background-color: var(--anthracite);
    height: 12vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-container {
    display: grid;
    grid-template-columns: 60px auto 60px;
    gap: 20px;
    align-items: center;
}

.footer-col1 img, .footer-col3 img {
    width: 45px;
    height: 45px;
    object-fit: cover;
}

.footer-col2 {
    /*background-color: var(--blanc);*/
    color: white;  /*var(--anthracite); */
    padding: 5px 15px;
    border-radius: 4px;
    text-align: center;
    font-size: 0.75rem;
}
#articles{
		display:grid;
		grid-template-columns:2fr 3fr 15fr;
		/* grid-template-rows: repeat(5, 1fr);*/
		grid-auto-rows: minmax(100px, auto);
}

#old_articles {
		display:grid;
		grid-template-columns:2fr 3fr 15fr;
		/* grid-template-rows: repeat(5, 1fr);*/
		grid-auto-rows: minmax(100px, auto);
}
#oldart {
	background-color: #444;
  border: 2px solid #04AA6D;
	border-radius: 8px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 3vh;
  cursor: pointer;
}
/*
.cacher {
		display:none;
}

.coltitre {
		grid-column: 1/3; 
		grid-row: auto;
		text-align:left;
		padding-top:43px;
}
*/
.coldate {
		grid-column: 1; 
		grid-row: auto;
		text-align:center;
		padding-top:43px;
		border: 1px solid black;
}
.colsource {
		grid-column: 2; 
		grid-row: auto;
		text-align:center;
		border: 1px solid black;
		padding-top:6px;
}
.coltexte {
		grid-column: 3; 
		grid-row: auto;
		border: 1px solid black;
		text-align:justify;
		padding: 9px;
}
.conteneur {
	display: grid;
	grid-template-columns: 3fr 2fr 10fr;
	grid-auto-rows: minmax(100px, auto);
	align-items: center;
}
.sites {
	display: grid;
	grid-template-columns: 6fr 4fr 11fr;
	grid-auto-rows: auto);
	align-items: center;
}

.logibox1, .sitebox1 {
		grid-column: 1;
		text-align: center;
}
.logibox2, .sitebox2 {
		grid-column: 2;
		text-align: center;
}
.logibox3 {
		grid-column: 3;
		text-align: justify;
		font-size: 2.5vh;
}

.sitebox3 {
		grid-column: 3;
		text-align: justify;
		font-size: 3.3vh;
}

.logibox {
	border: 1px solid black;
	padding: .6em;
	height: auto; /* 15vh;*/
	min-height:16vh;
	/* Le combo Flexbox pour centrer parfaitement le contenu */
	display: flex;
	justify-content: center; /* Centre horizontalement */
	align-items: center;     /* Centre verticalement */
}
.sitebox {
	border: 1px solid black;
	padding: .6em;
	height: auto; /* 15vh;*/
	min-height:10vh;
	/* Le combo Flexbox pour centrer parfaitement le contenu */
	display: flex;
	justify-content: center; /* Centre horizontalement */
	align-items: center;     /* Centre verticalement */
}
.taille30 {
		font-size: 1.9vh;
}
.taille50 {
		font-size: 2.2vh;
}
.taille75 {
	font-size: 3vh;
}
.titre1{
	color: sienna;
}
    /* --- MEDIA QUERIES (Responsive < 756px) --- */
@media (max-width: 755px) {
	/* On affiche le bouton */
    .menu-toggle {
        display: block;
    }
		/* On masque et transforme la liste en menu vertical flottant */
    .nav-list {
        display: none; /* Caché par défaut */
        flex-direction: column; /* Affichage vertical */
        position: absolute;
        top: 10vh; /* Se place juste sous le header */
  			right:0;
        width: 30%; 
        background-color: var(--bleu-cisa); /* Même couleur que le header */
        padding: 1rem 0;
        text-align: center;
        z-index: 1000; /* Passe par-dessus le reste du site */
        box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Petite ombre pour détacher le menu */
    }
		/* Classe qui sera ajoutée par Javascript lors du clic */
    .nav-list.active {
        display: flex;
    }
/* On annule le format 'vw' pour garder un texte lisible sur mobile */
    .nav-list li a {
        font-size: 1.2rem;
        display: block;
        padding: 10px 0; /* Élargit la zone de clic pour les doigts */
    }		

    /* Ajustement Tableau pour Mobile */
    .content-row4-table {
        grid-template-columns: 1fr; /* On passe sur 1 seule colonne pour que ce soit lisible */
    }
    
    .table-title {
        text-align: center;
    }

    .table-header {
        display: none; /* Masque les en-têtes sur mobile pour simplifier l'affichage */
    }

    .table-cell {
        height: auto;
        border-right: none;
    }
		 .conteneur, sites {
		/* Passe la grille sur 1 seule colonne */
		grid-template-columns: 1fr; 
	}
	
	.logibox1, .logibox2, .logibox3, sitebox1, .sitebox2, .sitebox3 {
		/* Force les éléments à s'empiler sur la première (et unique) colonne */
		grid-column: 1; 
	}

}