/* Couleur des liens */
a:link,a:visited {color: #042878;}
a:hover, a:active,a:focus {color: #1E78C8;}
 

* {margin:0;padding:0;box-sizing:border-box;}
body {background:#ffffff;color:#000000;line-height:1.2;}


/* *********************************************************************************************** */
/* ----- Zone d'entête avec le chemin en haut, l'icône à droite et la barre jaune en dessous ----- */
.header {
    display: flex;
    align-items: center;
    padding: 4px 10px;
    background: white;
    font-family: Arial, Helvetica, sans-serif;
    border-bottom: 3px solid #FFFF80;
    box-sizing: border-box;
}

/* Entête gauche avec logo Campi */
.header-left {
    width: 100px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-left img {
    height: 97px;
    height: auto;
}

/* Entête centrale avec chemin */

.header-center {
    display: flex;
    align-items: center;
    flex: 1; /* prend tout l’espace disponible */
}

.header-center h1 {
    margin-left: 4px;
    font-size: 0.8rem;
    font-weight: normal;
    color: #000000;
}

/* Entête à droite avec l'icône de catégorie  */
.header-right {
    width: 80px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-right img {
    width: 68px;
    height: auto;
}

/* entête : barre zone de dessous */

.topbar {font-family: Arial, Helvetica, sans-serif;background:#FFFF80;color:#000000;padding:2px 20px;font-size:1.1rem;font-weight:bold;}


/* *********************************************************************************************** */
/* Zone image bannière */
.banniere {
	text-align: center;
	margin-top: 10px;
    border-bottom: 2px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.banniere img {
    width: 836px;
    height: auto;
    border: 1px solid #000;
    box-sizing: border-box;
    max-width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 4px;	  
    box-sizing: border-box;
}
/* *********************************************************************************************** */
/* Zone des icônes  */

.nav-icons { margin: 10px 0px 0px 0px;
             display: grid;
			 grid-template-columns:
			 repeat(auto-fit, minmax(0px, 1fr));
			 gap: clamp(4px, 1vw, 8px);
			 justify-items: center; 
			 border-bottom: 2px solid #ccc;
			 padding-bottom: 10px;
			 margin-bottom: 10px;   }
			 
.nav-icon-116, .nav-icon-225, .nav-icon-258
   { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;}

.nav-icon-116 img {
    width: clamp(0px, calc(116 * 100vw / 1100), 116px);
    height: auto;
}

.nav-icon-225 img {
    width: clamp(0px, calc(225 * 100vw / 1100), 225px);
    height: auto;
}

.nav-icon-258 img {
    width: clamp(0px, calc(225 * 100vw / 1100), 225px);
    height: auto;
}

/* *********************************************************************************************** */
/* Zone des images de pièces */

.image-pieces { text-align: center; 
					 margin-top: 10px;
					 border-bottom: 2px solid #ccc;
					 padding-bottom: 10px;
					 margin-bottom: 10px;}

#photo {
    max-width: 1100px;   /* largeur max de l’image */
    width: 100%;         /* prend toute la largeur disponible */
    height: auto;        /* conserve les proportions */
    display: block;      /* évite les espaces parasites */
    margin: 0 auto;      /* centrage horizontal */
}

/* *********************************************************************************************** */
/* Zone de texte */
.texte {font-size:0.8rem;
		font-family: Arial, Helvetica, sans-serif;
		margin-top: 10px;
		padding-left: 30px;
		padding-right: 30px;
		border-bottom: 2px solid #ccc;
		padding-bottom: 10px;
		margin-bottom: 10px;
	   }

.texte ul {
  margin-left: 0.5em;
  padding-left: 1.5em;
}

.texte a{font-weight: bold;}

/* *********************************************************************************************** */
/* Zone des catégories avec ligne de séparation en bas */
.categorie-2-col,
.categorie-1-col {
	margin-top: 10px;
    padding-left: 30px;
    padding-right: 30px;
    border-bottom: 2px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

/* ----- Styles pour "categorie-1-col" (1 colonne) ----- */
.categorie-1-col ul {
    list-style-type: disc;
    padding-left: 20px;
}
.categorie-1-col li {
    margin-bottom: 0px;
    text-align: left;
}

/* ----- Styles pour "categorie-2-col" (2 colonnes) ----- */
.categorie-2-col ul {
    list-style-type: disc;      /* Affiche des puces */
    padding-left: 20px;         /* Indentation normale */
    column-count: 2;            /* Deux colonnes */
    column-gap: 40px;           /* Espace entre colonnes */
}

.categorie-2-col li {
    break-inside: avoid;        /* Évite que des éléments soient coupés entre colonnes */
    margin-bottom: 0px;
    text-align: left;
}

/* ----- Styles communs aux 2 catégories ----- */

.categorie-1-col a,
.categorie-2-col a {
    font-weight: bold;          /* Liens en gras */
}

.categorie-1-col img,
.categorie-2-col img {
	margin-left: 2px;
    margin-right: 4px;   /* Espace entre l'image et le texte */
    vertical-align: middle;
}

/* ----- Styles des sous-catégorie : pas de gras ----- */

.petit-texte {font-size: 90%;}

.petit-texte a {font-weight: normal;
                display: inline-block;
                white-space: nowrap;
               }


/* *********************************************************************************************** */
/* Styles de la zone des sites */
.sites {margin-top: 10px;
		padding-left: 20px;
		padding-right: 20px;
		border-bottom: 2px solid #ccc;
		padding-bottom: 10px;
		margin-bottom: 10px;
	   }

.sites ul {
  margin-left: 0.3em;
  padding-left: 1.5em;
}

.sites li {
    margin-bottom: 12px; /* ajuste la valeur selon ton besoin */
}

/* Styles de la zone des institutions */
.institutions {margin-top: 10px;
		padding-left: 20px;
		padding-right: 20px;
		border-bottom: 2px solid #ccc;
		padding-bottom: 10px;
		margin-bottom: 10px;
	   }

.institutions ul {
  margin-left: 0.3em;
  padding-left: 1.5em;
}

.institutions li {
    margin-bottom: 12px; /* ajuste la valeur selon ton besoin */
}

.institutions img {
    width: 16px;
    height: 16px;
    margin-right: 4px; 
    vertical-align: middle;
}

/* *********************************************************************************************** */
/* Pied de page */

.footer {font-family: Arial, Helvetica, sans-serif;text-align:center;color:#000000;font-size:0.6rem;margin:15px 0 10px 0;}

.footer a,

.footer a:visited {
    color: #000;
    text-decoration: none;
}

.footer a:hover,
.footer a:focus {
    text-decoration: underline;
}



/* *********************************************************************************************** */
/* sur les écrans étroits, une seule colonne au lieu de 2, pas de bannière et reduction de la police du chemin*/
@media screen and (max-width: 512px)
	{	.categorie-2-col ul {column-count: 1;}
		.banniere {display: none;}
		.header-center h1 {font-size: 0.5rem;}
		.nav-icons {display: none;}
	}