@charset "UTF-8";
/* -------------------------------------------------------------------------------- */
/* DEVELOPPEMENT x25
/* Fichier: css_2_desktop.css
/* Fonction: styles CSS pour le site public (définition subsidiaire pour écrans)
/* PGB, 12.02.2026
/* -------------------------------------------------------------------------------- */



/*		LAYOUT
/* wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww */

body {
	}

.conteneur {
	min-width: 800px;
	max-width: 1200px;
	}
.bloc-header-nav .conteneur { 
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	}
.bloc-contenu .conteneur {
	/* grid-template-columns: 2fr 1fr;  /* main + aside */
	}



/*		HEADER
/* wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww */

.bloc-header-bandeau .header-logo { 
	max-width: 25%;
	height: auto;
	width: auto;
	}
.bloc-header-bandeau .header-titre { 
	font-size: 1.2em;
	margin: 0px;
	padding: 0px;
	}
.bloc-header-bandeau .header-titre span { 
	/* color: #ffffff; */
	}





/*		FOOTER
/* wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww */

.bloc-footer .login-footer {
	display: none;
	}





/*		NAV (+ NAV-WIDGET)
/* wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww */

.nav-principal {
	/* float: right; */
	width: auto;
	height: auto;
	font-size: 1.1em;
	}
.bloc-widgets {
	/* float: right; */
	display: flex; 
	flex-direction: row-reverse; 
	gap: 25px; 
	font-size: 1.1em;
	}

/*		DECLENCHEURS
/* -------------------------------------------------- */
.nav-principal label.declencheur,
.nav-principal label.sous-declencheur {
    display: none; 
	}

/*		BALISES GENERALES
/* -------------------------------------------------- */
.nav-principal ul,
.nav-principal input[type=checkbox]:checked ~ ul {
    display: flex; 
	flex-direction: row; 
	gap: 15px; 
	}
.nav-principal li {
	/* display: inline-block; */
	}
.nav-principal li.accueil {
	/* Si on ne veut pas que l'option 'Accueil' apparaisse */
	/* display: none; */
	}
.nav-principal li.nav-option-recherche,
.nav-principal li.nav-option-login {
	/* Ces deux options, nécessaires dans le menu mobile, sont traitées en widget dans le mode desktop */
	display: none; 
	}

/*      LIENS DES OPTIONS DE NIVEAU 1
/*      (En principe alignées horizontalement)
/* -------------------------------------------------- */
.nav-principal li a,
.nav-widget a {
	display: block;
	padding: 4px 16px 3px 0px;
	color: var(--couleur-nav-text);
	background: var(--couleur-nav-fond);
    border-top: none;
	}
.nav-widget a {
	padding: 3px 0px 3px 16px;
	}
.nav-principal li.actif a {
	/* font-weight: bold; */
	background: var(--bleu);
	padding: 4px 8px 3px 8px;
	}
.nav-principal li a:hover,
.nav-widget a:hover {
	color: var(--couleur-nav-text);
	background: var(--couleur-nav-survol);
	/* padding: 3px 8px 3px 8px; */
	}

/*      DEROULEMENT DES OPTIONS DE NIVEAU 2 
/*      (Dans des menus déroulants) 
/* -------------------------------------------------- */
.nav-principal li ul,
.nav-principal li input[type=checkbox]:checked ~ ul, 
.nav-widget ul,
.nav-widget form {
	/* Par défaut, un sous-menu n'est pas déroulé */
	display: none;
	}
.nav-principal li:hover > a,
.nav-widget:hover > a {
	/* Apparence de la cellule-maître pendant que son sous-menu est déroulé (le signe > désigne le lien qui suit immédiatement) */
	color: var(--couleur-nav-text);
	background: var(--couleur-nav-fond);
	padding: 4px 8px 3px 8px;
	}
.nav-principal li.actif:hover > a {
	/* Apparence de la cellule-maître active pendant que son sous-menu est déroulé */
	padding: 4px 8px 3px 8px;
	background: var(--couleur-nav-fond-actif);
	}
.nav-principal li:hover > a:hover,
.nav-widget:hover > a:hover {
	/* Apparence de la cellule-maître pendant que son sous-menu est déroulé et qu'elle est elle-même survolée */
	color: var(--couleur-nav-text);
	background: var(--couleur-nav-survol);
	}
.nav-principal li:hover > ul,
.nav-principal li:hover input[type=checkbox]:checked ~ ul,
.nav-widget:hover > ul,
.nav-widget:hover > form {
	/* Apparence d'un sous-menu (ul) lorsqu'il est déroulé */
	display: block;
	position: absolute;
	list-style: none;
	min-width: 180px;  /* largeur arbitraire */
	border-left: 1px solid var(--couleur-nav-text);
	border-right: 1px solid var(--couleur-nav-text);
	border-bottom: 1px solid var(--couleur-nav-text);
	}
.nav-widget:hover > ul,
.nav-widget:hover > form {
	margin-left: -60px; 
    width: initial;
	background: var(--couleur-nav-fond);
	}
.nav-principal li ul li,
.nav-widget ul li {
	/* Apparence d'une cellule (li) dans un sous-menu déroulé */
	border-top: 1px solid var(--couleur-nav-text); 
	}
.nav-principal li ul li a,
.nav-widget ul li a,
.nav-widget:hover > form {
	/* Apparence d'une option (a) dans un sous-menu déroulé (si différence par rapport aux options de niveau 1) */
	display: block;
	padding: 4px 8px 3px 8px; 
	}
.nav-principal li:hover > ul li a:hover,
.nav-widget ul li a:hover {
	/* Apparence d'une option (a) survolée dans un sous-menu déroulé. */
	color: var(--couleur-nav-text);
	background: var(--couleur-nav-survol);
	}
.nav-widget span  {
	/* Les éléments .label et .input du widget. */
	width: 100%;
	}





/*		MAIN
/* wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww */

main {}
main h1 { 
	font-size: 2.2em; 
	}
main h2 { 
	}
main h3 { 
	}
main h4 { 
	}

main ul.bloc-links,
aside ul.bloc-links { 
	width: 70%;
	border-top: 1px solid #000000;
	padding: 20px 50px;
	}

main .intro-accueil {
	font-size: 2em;
	line-height: 1.2;
	}
main .chapeau {
	font-size: 1.1;
	font-weight: 600;
	line-height: 1.2;
	margin-top: 0px;
	margin-bottom: 30px;
	}
main .metadonnees {
	max-width: 650px;
	margin: 20px auto 40px auto;
	font-size: 0.9em;
	}


/* MISE EN PAGE
/* -------------------------------------------------- */

main .label {
	display: inline-block;
	width: 25%;
	}
main .input {
	display: inline-block;
	width: 60%;
	}

main .texte {
	max-width: 650px;
	margin: 30px auto;
	}

main .demi-gauche {
	float: left;
	max-width: 45%;
	}
main .demi-droite {
	float: right;
	max-width: 45%;
	}
main .deux-colonnes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
	}
main .deux-colonnes.centrer {
	align-items: center;
	}


/* IMAGES
/* -------------------------------------------------- */

main .main-img {
	float: right;
	max-width: 40%;
	}
main .texte .main-img {
	float: right;
	margin-right: -30%;
	max-width: 60%;
	}


/* A LA UNE
/* -------------------------------------------------- */

main .a-la-une {
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	}


/* LISTES
/* -------------------------------------------------- */

/* Header et Footer de la liste */
.db-liste header,
.db-liste footer {
	font-size: 0.85em;
	}

/* Items de la liste */
.db-liste .liste-table {
    display: table;
	font-size: 0.9em;
	}
.db-liste .liste-ligne {
    display: table-row;
	padding: none;
    border-bottom: none; 
	}
.db-liste .liste-item {
    display: table-cell;
    padding: 6px 10px 6px 0px;
	border-bottom: 1px dotted #000000;
    }
.db-liste .liste-item .reference {
	font-size: 0.9em;
    }





/*		ASIDE
/* wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww */

aside {
	display: none;
	}