@charset "UTF-8";

/*		FONTS
/* ************************************************************ */
/* Font: Grey
/* Cuts: Light, Light Italic, Regular, Italic, Book, Book Italic, Medium, Medium Italic, Bold, Bold Italic
/* Format: woff, woff2, eot
/* Purchase Date: July 8, 2020
/* Legal Disclaimer for Web licence
/* Licence to use self-hosted webfonts for displaying dynamic text on specified website domains. Our package includes WOFF and WOFF2 font formats.
/* Should the license page views limit be exceeded the license holder will be required to contact Lineto.com for an upgrade.
/* It is strictly prohibited to rename the font and to download or use these fonts in any other media. 
/* These Web fonts are licensed exclusively for the use on the following domain(s) and their subdomains:
/* ligue-vaudoise.ch (monthly pageviews: max 50K) */
@font-face {
    font-family: "GreyLLWeb";
    font-weight: normal;
    font-style: normal;
    src: url("/site_20/styles/fonts/GreyLLWeb-Regular.woff2") format("woff2");
    }
@font-face {
    font-family: "GreyLLWeb";
    font-weight: normal;
    font-style: italic;
    src: url("/site_20/styles/fonts/GreyLLWeb-Italic.woff2") format("woff2");
    }
@font-face {
    font-family: "GreyLLWeb";
    font-weight: 100 300;
    font-style: normal;
    src: url("/site_20/styles/fonts/GreyLLWeb-Light.woff2") format("woff2");
    }
@font-face {
    font-family: "GreyLLWeb";
    font-weight: 100 300;
    font-style: italic;
    src: url("/site_20/styles/fonts/GreyLLWeb-LightItalic.woff2") format("woff2");
    }
@font-face {
    font-family: "GreyLLWeb";
    font-weight: 500 600;
    font-style: normal;
    src: url("/site_20/styles/fonts/GreyLLWeb-Book.woff2") format("woff2");
    }
@font-face {
    font-family: "GreyLLWeb";
    font-weight: 500 600;
    font-style: italic;
    src: url("/site_20/styles/fonts/GreyLLWeb-BookItalic.woff2") format("woff2");
    }
@font-face {
    font-family: "GreyLLWeb";
    font-weight: bold;
    font-style: normal;
    src: url("/site_20/styles/fonts/GreyLLWeb-Medium.woff2") format("woff2");
    }
@font-face {
    font-family: "GreyLLWeb";
    font-weight: bold;
    font-style: italic;
    src: url("/site_20/styles/fonts/GreyLLWeb-MediumItalic.woff2") format("woff2");
    }
@font-face {
    font-family: "GreyLLWeb";
    font-weight: 900;
    font-style: normal;
    src: url("/site_20/styles/fonts/GreyLLWeb-Bold.woff2") format("woff2");
    }
@font-face {
    font-family: "GreyLLWeb";
    font-weight: 900;
    font-style: italic;
    src: url("/site_20/styles/fonts/GreyLLWeb-BoldItalic.woff2") format("woff2");
    }








/* ******************************************************************************************************************** */
/*
/*		(A) - BLOCS PRINCIPAUX - BALISES PRINCIPALES
/*
/* ******************************************************************************************************************** */

* {
    box-sizing: border-box;
    }
body {
	margin: 0px;
	padding: 0px;
	background: #333333;
    font-family: "GreyLLWeb", Arial, sans-serif;
	/* font-family: Arial, Helvetica, sans-serif; */
	/* font-family: Arial Narrow, Helvetica Narrow, sans-serif; */
	/* font-family: Verdana, Arial, Helvetica, sans-serif; */
	/* font-family: Impact, Arial, Helvetica, sans-serif; */
	/* font-family: "Myriad Pro", "Trebuchet MS", Arial, Helvetica, sans-serif; */
	/* font-family: "Times New Roman", Times, serif; */
	font-size: 1.2em;
	}
a:link,
a:visited { 
	color: #3c974c;
	}
a:hover {
	color: #990000; 
	/* background-color: #3c974c; */
	/* text-decoration: underline; */
	}
#bloc-contenu a:hover {
	}
#bloc-footer a:hover {
	}

img { 
	border: 0px; 
	}
input[type=text],
select {
	max-width: 70%;
	}
.erreur,
.faux { 
	color: #ff0000;
	font-weight: bold;
	}
.succes,
.juste { 
	color: #00cc00;
	font-weight: bold;
	}
.demande-confirmation { 
	color: #00cc00;
	font-weight: bold;
	}
li.puce-link { list-style-image: url("/site_20/images/puces/puce_link.png"); }
li.puce-excel { list-style-image: url("/site_20/images/puces/puce_excel.gif"); }
li.puce-pdf { list-style-image: url("/site_20/images/puces/puce_pdf.gif"); }
li.puce-powerpoint { list-style-image: url("/site_20/images/puces/puce_powerpoint.gif"); }
li.puce-txt { list-style-image: url("/site_20/images/puces/puce_txt.gif"); }
li.puce-word { list-style-image: url("/site_20/images/puces/puce_word.gif"); }



/* ************************************************************ */
/*		BLOCS
/* ************************************************************ */
.conteneur {
	width: 98%;
	margin: 0px auto;
	}

#bloc-header {
	/* N'est pas défini pour ce site, où le header est composé de trois blocs: bloc-header-sup; bloc-header-image; bloc-header-nav. */
	}
#bloc-header-sup {
	display: block;
    position: sticky;  /* Quand on scrolle la page, le header-sup reste bloqué... */
    top: 0px; 
	z-index: 100;
	width: 100%;
	height: 70px;
	background-color: #ffffff;
	}
#bloc-header-image {
	/* Un espace pour l'image d'entête, avec un logo ('titre') cliquable pour revenir à l'accueil. */
	/* height: 180px;  /* Pas nécessaire car le slider va lui-même définir la hauteur. */
	background-color: #ffffff;
	/* background-image: url("/site_20/images/header/fond_header_mobile.jpg"); */
	/* background-position: center 0px; */
	/* background-repeat: no-repeat; */
	/* background-attachment: fixed; */
	}
#bloc-header-image .conteneur {
	width: 100%;
	}

#bloc-header-nav {
	/* Le menu principal, déroulable en mode mobile et a priori horizontal et déroulant en mode écran. */
    position: sticky;  /* Quand on scrolle la page, le menu se bloque... */
    top: 70px;  /* ... juste en dessous du bloc-header-sup. */
	width: 100%; 
    /* position: fixed; */
    /* top: 0px; */
    /* height: 50px; /* hauteur minimale. */
    z-index: 150; 
	/* Ne pas indiquer ici de hauteur fixe, sinon le menu mobile se deroule sans couleur de fond par-dessus le texte au-dessous. */
	/* Le bouton du menu mobile fait de toute facon 50x50px. */
	background: #3c974c; /* Peut être désactivé si le picto déclencheur doit apparaître directement sur le fond de la page. */
	}
#bloc-header-annonce-speciale {
	/* Bandeau d'annonce pour offre spéciale. */
    position: sticky;  /* Quand on scrolle la page, le menu se bloque... */
    top: 118px;  /* ... juste en dessous du bloc-header-nav. */
	background: #386d7e;
	color: #ffffff;
	font-size: 1em;
	text-align: center;
	}
#bloc-header-annonce-speciale .conteneur {
	width: 98%;
	margin: 0px auto;
	}

#bloc-footer {
	/* Espace de bas de page, avec coordonnées, liens vers les réseaux sociaux, etc. */
	clear: both;
	}
#bloc-footer-espace {
	/* Espace facultatif d'image entre la fin du contenu et le bas de page. */
	display: none; 
	}

#bloc-contenu {
	/* Contenu principal, central (y compris les infos complémentaires ou actualités (colonne de droite/aside). */
	background: #ffffff;
	padding: 30px 0px 60px 0px;
	}
#bloc-contenu .conteneur {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    }
#bloc-main {
	/* Contenu propre de la page. */
	}
#bloc-aside {
	/* Contenu aside). */
	border-top: 1px solid #000000;
	}





/* ******************************************************************************************************************** */
/*
/*		(B) - HEADER - FOOTER
/*
/* ******************************************************************************************************************** */


/* ************************************************************ */
/*		MODULE: HEADER
/* ************************************************************ */
#header-sup {
	}
#header {
	}
#header-logo {
	}
#header-logo a {
	/* Le 'titre' ou 'logo' propre au site, cliquable pour aller à l'accueil. */
	/* display: block; */
	/* position: relative; */
	/* top: 5px; */
	/* left: 0px; */
	/* height: 60px; */
	/* width: 170px; */
	/* background-image: url("/site_20/images/header/logo.png"); */
    /* background-size: contain; */
    /* background-position: center; */
    /* background-repeat: no-repeat; */
    }
#header-logo img {
	position: relative; 
	top: 5px; 
	left: 0px; 
    max-width: 160px;
    /* max-height: px; */
	}

/* SLIDER */
/* ================================================== */
#header-slider {
	position: relative; 
    width: 100%;
	height: 180px;
    margin: 0px;
    padding: 0px;
	}
#header-slider .slider-item {
    width: 100%;  /* Nécessaire pour que le bloc a occupe toute la place. */
    margin: 0px;
    /* La propriété background-image est définie dans une balise style, dans le html du slider. */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
	}
#header-slider .slider-item a {
    display: block;
    width: 100%;
	height: 180px;
    margin: 0px;
    background: #eeeeee;
    opacity: 0.7;
    padding-top: 100px; 
    font-size: 1.1em; /* ou 1.2 */
    font-weight: 700;
    line-height: 1.2em;
    /* letter-spacing: 10px; */
    color: #000000;
    text-align: center;
    text-decoration: none;
	}
#header-slider .selecteur {
    display: none;
	}


/* ************************************************************ */
/*		MODULE: FOOTER
/* ************************************************************ */
#bloc-footer footer {
	margin: 20px 0px;
	font-size: 0.8em;
	color: #ffffff;
	}
#bloc-footer footer a:link,
#bloc-footer footer a:visited {
	color: #ffffff;
	text-decoration: none;
	}
#bloc-footer footer a:hover {
	text-decoration: underline;
	}
#bloc-footer footer .footer-nav {
	float: right;
    max-width: 40%;
    margin: 0px 10px 0px 0px;
	}
#bloc-footer footer nav {
    margin: 0px 0px 20px 0px;
    text-align: right;
	}
#bloc-footer footer nav.reseaux {
    margin: 0px;
	}
#bloc-footer footer nav.reseaux a {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 1px solid #ffffff;
    margin: 0px 0px 10px 10px;
    background-size: cover;
	}
#bloc-footer footer nav.reseaux a.facebook {
	background-image: url("/site_20/images/reseaux_sociaux/facebook.png");
    }
#bloc-footer footer nav.reseaux a.twitter {
	background-image: url("/site_20/images/reseaux_sociaux/twitter.png");
    }
#bloc-footer footer nav.reseaux a.xcom {
	background-image: url("/site_20/images/reseaux_sociaux/x.png");
    }
#bloc-footer footer nav.reseaux a.youtube {
	background-image: url("/site_20/images/reseaux_sociaux/youtube.png");
    }
#bloc-footer footer nav.reseaux a.instagram {
	background-image: url("/site_20/images/reseaux_sociaux/instagram.png");
    }
#bloc-footer footer nav.reseaux a.linkedin {
	background-image: url("/site_20/images/reseaux_sociaux/linkedin.png");
    }
#bloc-footer footer nav.reseaux a.rss {
	background-image: url("/site_20/images/reseaux_sociaux/rss.png");
    }
#bloc-footer footer address {
    font-style: normal;
	}
#bloc-footer footer .copyright {
	margin: 30px 0px 0px 0px;
	color: #999999;
	font-size: 0.7em;
	text-align: center; 
	}





/* ******************************************************************************************************************** */
/*
/*		(C) - NAVIGATION
/*
/* ******************************************************************************************************************** */


/* ************************************************************ */
/*		MODULE: NAV-PRINCIPAL
/* ************************************************************ */
nav.principal {
    /* z-index: 200; */
	margin: 0px;
	padding: 0px;
	font-size: 1.2em;
	}

/* DECLENCHEURS */
/* ================================================== */
nav.principal input[type=checkbox] {
	/* La checkbox sert de bascule on/off pour chaque sous-menu, mais seul son label doit apparaître. */
    display: none;
}
nav.principal label.declencheur {
	/* Zone de déclenchement du menu déroulant. */
	display: block;
	/* position: fixed;  /* Si le menu déroulé doit se dérouler en lui-même*/
	width: 50px; 
	height: 50px;
	background-image: url("/site_20/images/header/menu_mobile.png"); 
	background-repeat: no-repeat;
	}
nav.principal label.sous-declencheur {
	/* Zone de déclenchement d'un sous-menu déroulant. */
    display: block;
    position: absolute;
    margin: -40px 0px 0px 80%; 
	width: 20%; 
	height: 40px; 
	background-image: url("/site_20/images/header/menu_mobile_bas.png"); 
	background-position: center; 
	background-repeat: no-repeat;
	}
nav.principal input[type=checkbox]:checked + label.sous-declencheur {
	background-image: url("/site_20/images/header/menu_mobile_haut.png"); 
	}

/* BALISES GENERALES */
/* ================================================== */
nav.principal a:link,
nav.principal a:visited {
	display: block;
	color: #ffffff;
	text-decoration: none;
	}
nav.principal ul {
	/* Lorsque le menu n'est pas déroulé. */
	display: none; 
	list-style: none;
	margin: 0px;
	padding: 0px;
	/* margin-top: 50px; */
	}
nav.principal input[type=checkbox]:checked ~ ul {
	/* Lorsque le menu est déroulé. */
    display: block;
	}
nav.principal li {
	display: block;
	margin: 0px;
	padding: 0px;
	}
nav.principal li.actif {
	}
nav.principal .erreur {
	font-weight: normal;
	color: #ff0000;
	}

/* LIENS DES OPTIONS DE NIVEAU 1 */
/* ================================================== */
nav.principal li a:link,
nav.principal li a:visited {
	/* Apparence des options (a). */
	margin: 0px;
	padding: 8px;
	/* background: none; */
	background: #3c974c;
	border-top: 1px solid #ffffff; 
	color: #ffffff;
	}
nav.principal li a:hover {
	/* Apparence des options (a) survolées. */
	color: #ffffff;
	background: #990000;
	}
nav.principal li+li a:link,
nav.principal li+li a:visited {
	}
nav.principal li.actif a:link,
nav.principal li.actif a:visited {
	color: #;
	/* font-weight: bold; */
	}
nav.principal li.actif a:hover {
	/* Apparence des options (a) survolées (section active). */
	color: #ffffff;
	background: #990000;
	}

/* DEROULEMENT DES OPTIONS DE NIVEAU 2 */
/* ================================================== */
nav.principal li ul {
	/* Dérouler (=afficher) ou non les options de 2e niveau. */
	/* display: none; */
	}
nav.principal li:hover > ul {
	}
nav.principal li ul li {
	}
nav.principal li ul li a:link,
nav.principal li ul li a:visited {
	padding-left: 10%;
	font-size: 0.9em;
	}
nav li:hover > ul li a:link,
nav li:hover > ul li a:visited {
	}

/* DEROULEMENT DES OPTIONS DE NIVEAU 3 */
/* ================================================== */
nav.principal li ul li ul {
	}
nav.principal li ul li ul li a:link,
nav.principal li ul li ul li a:visited {
	padding-left: 20%;
	}

/* DEROULEMENT DES OPTIONS DE NIVEAU 4 */
/* ================================================== */
nav.principal li ul li ul li ul {
	}
nav.principal li ul li ul li ul li a:link,
nav.principal li ul li ul li ul li a:visited {
	padding-left: 30%;
	}

/* SURVOL */
/* ================================================== */
nav.principal li:hover a:hover,
nav.principal li:hover > ul li a:hover {
	color: #ffffff;
	background: #990000;
	/* text-decoration: underline; */
	}


/* ************************************************************ */
/*		MODULE: NAV-ARIANE
/* ************************************************************ */
nav.ariane {
	display: none; 
	/* float: right; */
	margin: 0px 0px 40px 40px;
	/* padding-left: 15px; */
	/* border-left: 1px solid #000000; */
	}


/* ************************************************************ */
/*		MODULE: NAV-ANCRES
/* ************************************************************ */
main nav.ancres {
	/* display: block; */
	/* float: right; */
	margin: 0px 0px 40px 40px;
	/* padding-left: 15px; */
	/* border-left: 1px solid #000000; */
	}
main nav.ancres ul {
	/* list-style: none; */
	/* margin: 0px; */
	/* padding: 0px; */
	}
main nav.ancres li {
	margin-bottom: 2px;
	list-style-image: url("/site_20/images/puces/puce_ancre.png"); 
	}
main nav.ancres a {
	text-decoration: none; 
	}


/* ************************************************************ */
/*		MODULE: WIDGET-SUP
/* ************************************************************ */
.widget-sup {
	display: none; 
	}





/* ******************************************************************************************************************** */
/*
/*		(D) - CONTENU ( MAIN - ASIDE )
/*
/* ******************************************************************************************************************** */


/* ************************************************************ */
/*		MODULE: MAIN (ex-ARTICLE)
/* ************************************************************ */
main {
	margin: 0px 8px;
	}

/* TITRES */
/* ================================================== */
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
    font-weight: bold;
    line-height: 1.1em; 
	}
main h1 {
	font-size: 1.8em;
	padding-bottom: 5px;
	border-bottom: 1px solid #000000;
	margin-bottom: 30px;
	}
main h1.t1 { font-size: 1.8em; }
main h1.t2 { font-size: 1.6em; }
main h1.t3 { font-size: 1.4em; }
main h1.actu1 { font-size: 1.8em; }
main h1.actu2 { font-size: 1.6em; }
main h1.actu3 { font-size: 1.4em; }
main h2 {
	font-size: 1.8em;
	margin: 20px 0px 10px 0px;
	padding: 0px;
	}
main h3 {
    font-weight: 500;
	font-size: 1.4em;
	}
main h4 {
    font-weight: 700;
	font-size: 1.1em;
	margin: 0px 0px 10px 0px;
	}
main h5 {
    font-weight: 700;
	font-size: 1.1em;
	margin: 30px 0px 0px 0px;
	padding: 0px;
	}
main h5+p {
	margin-top: 10px;
	padding-top: 0px;
	}
main h6 {
    font-weight: 700;
	font-size: 1.1em;
	}
main p+h2,
main p+h3,
main p+h4 {
	margin-top: 35px;
	}
main .surtitre {
	display: none;
	/* font-size: 1em; */
	/* text-transform: uppercase; */
	/* border-bottom: 6px solid #3c974c; */
	}

/* TEXTES */
/* ================================================== */
main p {
	}
main a:link,
main a:visited {
    font-weight: 600;  /* Les liens en léger gras. */
	}
main ul {
	margin-bottom: 30px;
	}
main li {
	margin: auto;
	padding: initial;
	margin-bottom: 8px;
	}
main blockquote {
	border: 1px solid #000000;
	margin: 0px 0px 20px 0px;
	padding: 10px 20px;
	}
main .texte {
	}
main .actu-date-1 {
	margin: 0px 0px 20px 0px;
	text-align: right; 
	/* font-style: italic; */
	font-size: 0.9em;
	text-transform: lowercase; 
	}
main .actu-date-1::before {
    content: "Publié: ";
	}
main .actu-date-1::first-letter {
	text-transform: uppercase; 
	}
main .actu-date-2 {
	display: none;
	}

/* ARTICLES NATION */
/* ================================================== */
main.nation-article .nation-ref {
    font-size: 0.8em;
    text-align: right;
	}
main.nation-article .nation-ref .auteur,
main.nation-article .nation-ref .rubrique,
main.nation-article .nation-ref .edition,
main.nation-article .nation-ref .date, 
main.nation-article .nation-ref .audio {
    display: inline-block;
	}
main.nation-article .nation-ref .audio a {
	font-weight: bold;
	}
main.nation-article .nation-ref span+span::before {
    content: ", ";
	}
main.nation-article blockquote {
    margin: 30px 0px 30px 15px;
    padding: 0px;
    border: none;
    /* text-align: right; */
	font-style: italic;
	}
main.nation-article blockquote p {
    margin: 4px;
    padding: 4px;
    line-height: 1.2em;
	}
main.nation-article #ancrage-podcast {
	/* Sert à placer l'ancre suffisamment haut pour que l'on voie encore la fin du texte. */
	display: block;
	margin-top: -250px;
	height: 250px;
	width: 0px;
	}
main.nation-article div.podcast {
	margin: 50px 0px;
    background: #eeeeee; 
    padding: 30px 30px;
	font-size: 1em; 
	font-weight: bold;
	}
main.nation-article span.abrege {
	position: relative;
	top: 8px;
	left: 8px;
	line-height: 0.8em; 
	font-size: 1.2em;
	font-weight: bold;
	/* font-style: italic; */
	letter-spacing: 2px;
	}
main.nation-article div.abrege {
	margin: 40px 0px;
    background: #eeeeee; 
    padding: 20px 30px;
	font-size: 1em; 
	font-weight: bold;
	/* font-style: italic; */
	}
main.nation-article div.sommaire {
	margin: 50px 0px 30px 0px;
    background: #eeeeee; 
    padding: 10px 15px;
	font-size: 0.85em; 
	}
main.nation-article div.sommaire h6 {
	margin: 10px 0px 0px 0px;
	padding: 0px;
	}
main.nation-article div.sommaire ul {
	margin: 10px 0px;
	padding: 0px;
	list-style-type: none;
	}
main.nation-article div.sommaire li {
	margin: 3px 0px 0px 0px;
	padding: 0px;
	}

/* PRESENTATIONS CRV */
/* ================================================== */
main.crv-article header {
	/* font-size: 1.8em; */
	padding-bottom: 5px;
	border-bottom: 1px solid #000000;
	margin-bottom: 30px;
	}
main.crv-article h1 {
	padding-bottom: 0px;
	border-bottom: none;
	margin-bottom: 0px;
	}
main.crv-article .sous-titre,
main.crv-article .auteur {
    margin: 15px 0px 0px 0px;
    padding: 0px;
    font-size: 1.2em;
    font-weight: 700;
    line-height: 1.2em;
	}
main.crv-article .crv-ref {
    float: right;
    max-width: 40%;
    margin: 10px 0px 30px 30px;
    font-size: 0.8em;
    text-align: left;
	}
main.crv-article .crv-ref ul {
    padding-left: 20px;
	}
main.crv-article .crv-ref img {
    max-width: 100%;
    border: 1px solid #666666;
	}
.prix-barre {
    color: #888888;
	text-decoration: wavy line-through #ff0000;
	}
.prix-action {
	font-size: 1.1em;
    font-weight: 700;
    color: #ff0000;
	}
.crv-image {
    display: none;
	}

/* IMAGES GÉRÉES PAR LE MODULE ARTICLE */
/* ================================================== */
main .image-gauche,
main .image-droite,
main .image-basse {
	display: none;
	}
main .image-mobile {
	margin: 50px 0px;
	text-align: center;
	}
/* IMAGES PLACÉES MANUELLEMENT */
/* ================================================== */
main .img-droite {
	float: right;
	margin: 0px 0px 20px 10px;
	max-width: 50%;
	}
main .img-gauche {
	float: left;
	margin: 0px 10px 20px 0px;
	max-width: 50%;
	}
main .img-droite.vertical,
main .img-gauche.vertical {
	max-width: 35%;
	}
main .img-alignee {
	margin: 30px 0px;
	max-width: 90%;
	}
main .img-alignee.vertical {
	max-width: 50%;
	}
main .img-serie {
	margin: 30px 0px 0px 0px;
	max-width: 90%;
	border: 0px;
	}
main .carte-geo {
	width: 100%;
	height: 350px;
	border: 1px solid #000000;
	}

/* SECTIONS DEROULANTES */
/* (avec le module page_deroulante.module.php */
/* ================================================== */
main section.deroulant {
    margin-bottom: 20px; 
    }
main section .declencheur {
    /* élément servant uniquement à afficher le "+" ou le "-" */
    /* Le véritable déclencheur technique est la balise label, qui englobe aussi le titre h3, et qui actionne la case à cocher invisible */
    float: right;
    width: 40px;
    height: 40px;
    margin: -6px 0px 15px 15px;
    font-size: 38px;
    text-align: center;
    }
main section.deroulant .declencheur::after {
    content: "+";
    font-weight: 500;
    }
main section.deroulant input[type=checkbox]:checked ~ label .declencheur::after {
    content: "–";
    font-weight: 500;
    }
main section.deroulant h3 {
    background: #eeeeee; 
    padding: 6px 5px;
    }
main section.deroulant div {
    /* Texte invisible par défaut */
    clear: both;
    display: none; 
    }
main section.deroulant input[type=checkbox]:checked ~ div {
    /* Texte affiché lorsque la case à cocher (invisible) est activée */
    display: block; 
    }
main section.deroulant input[type=checkbox]:checked ~ label h3 {
    /* Changement d'apparence du titre lorsque la case à cocher (invisible) est activée */
    background: none; 
    padding: 6px 0px;
    border-bottom: 1px solid;
    }

/* SLIDER */
/* ================================================== */
.actu-slider {
	position: relative; 
    width: 100%;
	overflow: scroll; 
	border-top: 1px solid #000000; 
	border-bottom: 1px solid #000000; 
	}
.actu-slider:hover {
	border-bottom: 3px solid #000000; 
	}
.actu-slider ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
	height: 400px;
	}
.actu-slider li {
    display: block;
    width: 100%;
    background: #ffffff;
	}
.actu-slider .item-image {
    }
.actu-slider .item-texte,
.actu-slider .item-texte-25,
.actu-slider .item-texte-45 {
    padding: 10px;
    }
.actu-slider .item-image img {
	height: 250px;
	}
.actu-slider .item-image iframe {
	width: 100%;
	height: 250px;
	}
.actu-slider .selecteur {
    display: none;
	}


/* MODULES 'LISTE'
/* ================================================== */
main .liste {
	}
/* ===== Header et Footer de la liste ===== */
main .liste header,
main .liste footer {
	margin: 10px 0px 10px 0px; 
    background: #f3f3f3;
    padding: 5px;
	font-size: 0.8em;
    text-align: center;
	color: #999999;
	}
main .liste header p {
    margin: 0px;
    padding: 0px;
    line-height: 1.2em;
	}
/* ===== Nav de la liste ===== */
main .liste nav {
    margin: 5px 0px;
	}
main .liste nav span,
main .liste nav a:link,
main .liste nav a:visited {
	display: inline-block;
	margin: 0px 2px;
	/* border: 1px solid #3c974c; */
	/* border-radius: 0%; */
    background: #ffffff;
	padding: 1px 6px;
	color: #999999;
	font-weight: normal;
	text-decoration: none;
	}
main .liste nav a:hover {
	/* border: 1px solid #990000; */
	color: #990000;
	text-decoration: none;
	}
main .liste nav span.page-courante {
	/* background: #dddddd; */
	color: #666666;
	font-weight: 900;
	}
main .liste nav span.intervalle {
	margin: 0px;
	padding: 0px;
	border: none;
    background: none;
	}
/* ===== Items de la liste ===== */
main .liste ul {
    clear: both; 
    /* border-top: 1px solid #000000; */
    list-style: none;
    margin: 0px;
    padding: 20px 0px 0px 0px;
	}
main .liste li {
	padding: 2px 0px 10px 0px;
    line-height: 1.1em;
	}
main .liste .liste-date {
	display: block;  /* Pour la liste des actualites, date et titre l'un en dessous de l'autre. */
	}
main .liste .liste-titre {
	display: block;  /* Pour la liste des actualites, date et titre l'un en dessous de l'autre. */
	}
main .liste .liste-infos {
	font-size: 0.8em;
	color: #999999;  /* couleur_reference */
	}


/* MODULES 'LISTE-MEDIAS'
/* ================================================== */
main .liste-medias {
	}
/* ===== Header et Footer de la liste ===== */
main .liste-medias header,
main .liste-medias footer {
	margin: 10px 0px 10px 0px; 
    background: #f3f3f3;
    padding: 5px;
	font-size: 0.8em;
    text-align: center;
	color: #999999;
	}
main .liste-medias header p {
    margin: 0px;
    padding: 0px;
    line-height: 1.2em;
	}
/* ===== Nav de la liste ===== */
main .liste-medias nav {
    margin: 5px 0px;
	}
main .liste-medias nav span,
main .liste-medias nav a:link,
main .liste-medias nav a:visited {
	display: inline-block;
	margin: 0px 2px;
	/* border: 1px solid #3c974c; */
	/* border-radius: 0%; */
    background: #ffffff;
	padding: 1px 6px;
	color: #999999;
	font-weight: normal;
	text-decoration: none;
	}
main .liste-medias nav a:hover {
	/* border: 1px solid #990000; */
	color: #990000;
	text-decoration: none;
	}
main .liste-medias nav span.page-courante {
	/* background: #dddddd; */
	color: #666666;
	font-weight: 900;
	}
main .liste-medias nav span.intervalle {
	margin: 0px;
	padding: 0px;
	border: none;
    background: none;
	}
/* ===== Items de la liste ===== */
main .liste-medias .item-video,
main .liste-medias .item-video-uno,
main .liste-medias .item-audio {
    display: inline-block;
    width: 100%;
    margin: 0px 0px 30px 0px;
    font-size: 0.9em;
	line-height: 1.2em; 
	}
main .liste-medias iframe {
    border:none; 
    overflow:visible; 
    width: 340px;
    height: 200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
	}
main .liste-medias audio {
    border:none; 
    /* overflow:visible; */
    width: 340px;
    height: 200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
	}
main .item-audio.nation audio {
	background-image: url("/site_20/images/vignettes/nation.jpg"); 
	}


/* MODULE 'PANIER'
/* ================================================== */
main .panier {
	display: grid;
	grid-template-columns: auto auto auto auto auto;
	font-size: 0.9em;
	}
main .panier .header,
main .panier .item,
main .panier .footer {
	padding: 4px 5px 3px 5px;
	}
main .panier .header {
	background: #eeeeee;
	border-bottom: 1px solid #444444;
	font-weight: 700;
	}
main .panier .header.produit {
	display: none;
	}
main .panier .footer {
	background: #eeeeee;
	font-weight: 700;
	}
main .panier .item {
	border-bottom: 1px solid #444444;
	}
main .panier .produit {
	grid-column: 1/6;
	border: none;
	}
main .panier .prix {
	}
main .panier .quantite {
	text-align: center;
	}
main .panier .modif {
	grid-column: 3/5;
	}
main .panier .montant {
	text-align: right;
	}
main .panier a.bouton, 
main .panier a.bouton-suppr {
	margin: 0px 2px;
	border: 1px solid #999999;
	border-radius: 4px;
	background: #eeeeee;
	padding: 0px 5px;
	color: #000000;
	/* font-weight: bold; */
	font-size: 0.85em;
	text-decoration: none;
	}
main .panier a.bouton-suppr {
	display: none;
	background: #ffdddd;
	border: 1px solid #990000;
	color: #000000;
	}
/* ===== Bouton en dessous du bloc 'panier' ===== */
a.bouton-vider-panier {
	border: 1px solid #990000;
	border-radius: 4px;
	background: #ffdddd;
	padding: 0px 5px;
	color: #000000;
	font-size: 0.85em;
	text-decoration: none;
	}
/* ===== Elément aside associé au panier ===== */
.section-panier aside {
	border: 1px solid #999999;
	background: #eeeeee;
	padding: 15px;
	}
.section-panier aside h2 {
	font-size: 1.2em;
	}
.section-panier aside div {
	clear: both;
	margin: 10px 0px;
	font-size: 0.85em;
	line-height: normal;
	}
.section-panier aside img {
	float: right;
	max-width: 30%;
	border: 1px solid #999999;
	margin-bottom: 10px;
	}



/* ************************************************************ */
/*		MODULE: VIGNETTES (MAIN ou ASIDE)
/* ************************************************************ */
.vignettes {
    display: flex;
    flex-flow: row wrap;
    /* justify-content: flex-start; */
    /* align-items: space-around; */
    }
.vignettes section {
    flex: 1 1 100%;  /* En mode mobile: en principe 1 vignette par ligne. */
    margin: 0px 0px 25px 0px; 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    }

/* LIEN COUVRANT TOUTE LA SURFACE D'UNE VIGNETTE */
/* ================================================== */
.vignettes section a {
    display: flex;  /* Chaque tuile organise son contenu (= la balise a qui occupe toute la surface) en flex. */
    flex-flow: column nowrap;
    padding: 0px;
    height: 100%; 
    color: #ffffff;
    text-decoration: none;
    }
.vignettes section.actualites a {
	background-image: url("/site_20/images/transparents/rouge_20.png"); 
    }
.vignettes section.articles a {
	background-image: url("/site_20/images/transparents/beige_40.png"); 
    }
.vignettes section.ligue a {
	background-image: url("/site_20/images/transparents/vert_20.png"); 
    }
.vignettes section.nation a {
	background-image: url("/site_20/images/transparents/beige_40.png"); 
    }
.vignettes section.crv a {
	/* background-image: url("/site_20/images/transparents/vert_20.png"); */
	/* Nouvelle couleur 12/2024: */
	/* background-image: url("/site_20/images/transparents/crv-rot_20.png"); */
	/* Nouvelle couleur 01/2025: */
	background-image: url("/site_20/images/transparents/bleu-crv_20.png"); 
	/* border: 1px solid #999999; */
    }
aside .vignettes section.crv a {
	background-image: none;
	border: 1px solid #999999; 
    }
aside .vignettes section.crv:hover a {
	background-image: url("/site_20/images/transparents/bleu-crv_20.png"); 
    }
.vignettes section.mercredis a {
	background-image: url("/site_20/images/transparents/orange_20.png"); 
    }
.vignettes section.rdv a {
	background-image: url("/site_20/images/transparents/orange_20.png"); 
    }
.vignettes section.woke a {
	background-image: url("/site_20/images/transparents/violet_20.png"); 
    }

/* CONTENU DES VIGNETTES */
/* ================================================== */
.vignettes section div.superieur {
    display: initial;
    flex: 1;  /* Permet d'occuper tout l'espace non occupé par le div-inferieur. */
    min-height: 160px;  /* La hauteur minimale permet de voir suffisamment l'image. */
    text-align: right;
    }
.vignettes section div.superieur span {
    /* Le 'label' supérieur (optionnel) des vignettes. La couleur de fond est définie plus bas. */
    padding: 0px 8px;
    font-size: 1.2em;
    font-weight: 100;
    }
.vignettes section div.inferieur {
    display: initial;
    padding: 8px;
    }
.vignettes section.actualites div.superieur span,
.vignettes section.actualites div.inferieur {
	background-image: url("/site_20/images/transparents/rouge_70.png"); 
    }
.vignettes section.articles div.superieur span,
.vignettes section.articles div.inferieur {
	background-image: url("/site_20/images/transparents/beige_70.png"); 
    color: #000000;  /* Pour les vignettes articles, le texte apparaît en noir, c'est plus joli. */
    }
.vignettes section.ligue div.superieur span,
.vignettes section.ligue div.inferieur {
	background-image: url("/site_20/images/transparents/vert_70.png"); 
    }
.vignettes section.nation div.superieur span,
.vignettes section.nation div.inferieur {
	background-image: url("/site_20/images/transparents/beige_70.png"); 
    color: #000000;  /* Pour les vignettes Nation, le texte apparaît en noir, c'est plus joli. */
    }
.vignettes section.crv div.superieur span,
.vignettes section.crv div.inferieur {
	/* background-image: url("/site_20/images/transparents/vert_70.png"); */
	/* Nouvelle couleur 12/2024: */
	/* background-image: url("/site_20/images/transparents/crv-rot_70.png"); */
	/* Nouvelle couleur 01/2025: */
	background-image: url("/site_20/images/transparents/bleu-crv_70.png"); 
    }
aside .vignettes section.crv div.superieur span,
aside .vignettes section.crv div.inferieur {
	background-image: none;
    }
aside .vignettes section.crv:hover div.superieur span,
aside .vignettes section.crv:hover div.inferieur {
	background-image: url("/site_20/images/transparents/bleu-crv_70.png"); 
    }
.vignettes section.mercredis div.superieur span,
.vignettes section.mercredis div.inferieur {
	background-image: url("/site_20/images/transparents/orange_50.png"); 
    }
.vignettes section.rdv div.superieur span,
.vignettes section.rdv div.inferieur {
	background-image: url("/site_20/images/transparents/orange_50.png"); 
    }
.vignettes section.woke div.superieur span,
.vignettes section.woke div.inferieur {
	background-image: url("/site_20/images/transparents/violet_60.png"); 
    }
.vignettes section.video div.superieur,
.vignettes section.video div.inferieur {
	background-image: url("/site_20/images/transparents/rouge_70.png"); 
    }
.vignettes section h2 {
    font-size: 1.5em;
    font-weight: 500;
    line-heignt: 1.1em;
    margin: 0px;
    padding: 0px;
    }
aside .vignettes section.nation h2 {
    font-size: 1.4em;  /* Sur l'accueil de la section Nation, en colonne aside, les titres souvent longs méritent d'être un poil plus petits. */
    }
aside .vignettes section.crv h2 {
	opacity: 0;
    }
aside .vignettes section.crv:hover h2 {
	opacity: 1;
	color: #ffffff;
    }
.vignettes section p {
    font-size: 0.85em;
    line-heignt: 1.1em;
    margin: 0px;
    padding: 0px;
    }
aside .vignettes section.crv p {
	opacity: 0;
    }
aside .vignettes section.crv:hover p {
	opacity: 1;
	color: #ffffff;
    }
.vignettes section iframe {
    width: 100%;
    height: 100%;
    }



/* ************************************************************ */
/*		MODULE: ASIDE
/* ************************************************************ */
aside {
	margin: 50px 8px;
    font-size: 1em;
	}
aside h1,
aside h2,
aside h3,
aside h4,
aside h5,
aside h6 {
    font-weight: bold;
    line-height: 1.3em; 
	}
aside h1 {
	font-size: 1.6em;
	}
aside h2 {
	font-size: 1.6em;
	}
aside h3 {
    font-weight: 500;
	font-size: 1.5em;
	}
aside h4 {
    font-weight: 500;
	font-size: 1.3em;
	}
aside h5 {
    font-weight: 500;
	font-size: 1em;
	}
aside h6 {
    font-weight: 500;
	font-size: 1em;
	}
aside a:link,
aside a:visited {
    font-weight: 600;  /* Les liens en léger gras. */
	}
aside a:hover {
    color: #990000;
	}
aside li {
    margin-bottom: 10px;
    }


/* ************************************************************ */
/*		MODULE: TOPBOX (ACTU-TOP-LISTE)
/* ************************************************************ */
.topbox {
	margin: 30px 8px 20px 8px;
	padding: 0px;
	font-size: 1em;
	}
.topbox h1,
.topbox h2,
.topbox h3,
.topbox h4,
.topbox h5,
.topbox h6 {
	margin: 0px 0px 10px 0px;
	}
.topbox h1 {
	font-size: 1.4em;
	}
.topbox h2 {
	font-size: 1.3em;
	}
.topbox h3 {
    background: #3c974c;
    color: #ffffff;
	font-size: 1.2em;
    margin-bottom: 0px;
    padding: 10px 0px;
    text-align: center;
	}
.topbox h4 {
	font-size: 1.1em;
	}
.topbox h5 {
	font-size: 1em;
	font-weight: bold; 
	}
.topbox h6 {
	font-size: 1em;
	font-weight: bold; 
	}
.topbox a:link,
.topbox a:visited {
	color: #3c974c;
	text-decoration: none;
    font-weight: 600;  /* Les liens en léger gras. */
	}
.topbox a:hover {
    color: #990000;
	}
.topbox h3 a:link,
.topbox h3 a:visited {
	color: #ffffff;
	}
.topbox h3 a:hover {
    color: #990000;
	}
.topbox ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
.topbox li {
    padding: 10px 0px;
	/* margin-bottom: 10px; */
    border-bottom: 1px dashed #999999;
	}
.topbox .date {
	display: none;
	}


/* ************************************************************ */
/*     MODULES FORMULAIRES:
/* ************************************************************ */
/* Aussi pour les formulaires situés en dehors du bloc main (par exemple dans aside ou des widgets-sups) */
/* S'applique aux formulaires eux-mêmes, mais aussi aux écrans de confirmation, */
/* raison pour laquelle on définit une classe et pas seulement la balise form. */
.formulaire {
	}
.formulaire fieldset {
	margin: 0px 0px 20px 0px;
    border:none;
	border-bottom: 1px solid #cccccc;;
	padding: 0px 0px 20px 0px;
	}
.formulaire fieldset+fieldset {
	/* margin-top: 10px; */
	/* border-top: 1px solid #cccccc; */
	/* padding-top: 20px; */
	}
.formulaire .fieldset-box {
	margin: 10px 0px 0px 0px;
	border-bottom: 1px solid #cccccc;
	padding: 10px 0px 0px 0px;
	}
.formulaire .fieldset-box+.rubrique-bouton {
	margin-top: 25px;
	}
.formulaire legend,
.formulaire .fieldset-legend {
	margin: 0px 0px 15px 0px;
	padding: 0px;
	font-size: 1.2em;
	font-weight: bold;
	}
.formulaire .rubrique {
	padding: 0px 0px 10px 0px;
	}
.formulaire .rubrique-bouton {
	margin-top: 0px;
	}
.formulaire .label,
.formulaire .label-confirm {  /* Pour les span qui contiennent le label d'une rubrique text. */
	}
.formulaire .label-confirm {  
	color: #aaaaaa;
	}
.formulaire .asterisque {  /* Pour les span qui contiennent l'asterisque d'une rubrique text. */
	color: #ff0000;
	}
.formulaire .input {  /* Pour les span qui contiennent une rubrique text. */
	display: block;
	}
.formulaire .coche {  /* Pour les span qui contiennent une rubrique coche (radio/checkbox). */
	display: inline-block;
	width: 5%;
	vertical-align: top;
	}
.formulaire .coche-label {  /* Pour les span qui contiennent le label d'une rubrique coche. */
	display: inline-block;
	width: 90%;
	vertical-align: top;
	}
.formulaire input[type=text],
.formulaire input[type=password] {
	font-size: 0.9em;
	}
.formulaire input[type=file] {
	font-size: 0.95em;
	background: #eeeeee;
	padding: 2px 4px;
	margin-bottom: 5px;
	}
.formulaire textarea {
	width: 98%;
	padding: 3px;
	font-size: 1.2em;
	}
.formulaire input[type=text],
.formulaire input[type=password],
.formulaire textarea {
	background: #ffffff;
	border: 1px solid #000000;
	}
.formulaire input[type=text]:focus,
.formulaire input[type=password]:focus,
.formulaire textarea:focus {
	background: #eeeedd;
	}
.formulaire select {
	font-size: 0.9em;
	}
.formulaire input[type=checkbox] {
	display: inline-block;
	width: 5%;
	vertical-align: top;
	margin-top: 6px;
	}
.formulaire input[type=checkbox] + label {
	display: inline-block;
	width: 92%;
	vertical-align: top;
	margin-bottom: 4px;
	}
.formulaire input[type=checkbox]:checked {
	}
.formulaire input[type=radio]:checked + label,
.formulaire input[type=checkbox]:checked + label {
    font-weight: 700;
	color: #990000;
	/* color: #cc4400; */
	}
.formulaire input[type=submit] {
	margin: 5px 5px 5px 0px;
	padding: 4px;
	font-size: 1em;
	font-weight: bold;
	color: #ffffff;
	background: #3c974c;
	border: 1px solid #000000;
	}
.formulaire input[type=submit][name=retour] {
	font-size: small;
	font-weight: normal;
	}
#fieldset-contact-commande {
    font-size: 0.9em;
    }
#fieldset-contact-message {
    }
#fieldset-contact-message .label,
#fieldset-crv-message .label {
    display: none;
    }
#fieldset-contact-coordonnees {
    }
.demande-confirmation { 
    background: #ffff00;
    padding: 2px 6px;
	color: #000000;
	font-weight: bold;
	}


/* ************************************************************ */
/*		MODULE FORM-SELECT:
/* ************************************************************ */
#bloc-aside .form-select {
    margin-top: 0px;
    background: #f3f3f3;
    padding: 15px;
    color: #666666;
	}
#bloc-aside .form-select h2 {
    font-size: 1.1em;
    line-height: 1.1em;
    margin: 0px;
    padding: 0px;
	}
#bloc-aside .form-select div {
    /* Pour des blocs séparés par un filet. */
    margin: 15px 0px;
    padding: 15px 0px 0px 0px;
	}
#bloc-aside .form-select div+div {
    border-top: 1px solid #999999;
	}
#bloc-aside .form-select span {
    /* Pour des blocs non séparés par un filet. */
    display: block;
    margin: 15px 0px;
    padding: 0px;
	}
#bloc-aside .form-select input[type=text] {
	background: #ffffff;
	border: 1px solid #999999;
	font-size: 0.9em;
    color: #666666;
	}
#bloc-aside .form-select input[type=text]:focus {
	background: #eeeedd;
	}
#bloc-aside .form-select select {
    max-width: 95%;
	font-size: 0.9em;
    color: #666666;
	}
#bloc-aside .form-select input[type=submit] {
	margin: 0px;
	padding: 4px;
	font-size: 1em;
	font-weight: bold;
	color: #ffffff;
	background: #999999;
	border: 1px solid #000000;
	}
#bloc-aside .form-select a:link,
#bloc-aside .form.select a:visited {
    text-decoration: none;
    }


/* ---------------------------------------------------------------------------------------------------- */
/*		ADAPTATION POUR MOBILES EN PAYSAGE
/* ---------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 800px) and (orientation: landscape)
{


}

/* ---------------------------------------------------------------------------------------------------- */
/*		ADAPTATION POUR ECRANS STANDARDS
/* ---------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 800px)
{





/* ******************************************************************************************************************** */
/*
/*		(A) - BLOCS PRINCIPAUX - BALISES PRINCIPALES
/*
/* ******************************************************************************************************************** */

body {
	}

input[type=text],
select {
	max-width: 100%;
	}


/* ************************************************************ */
/*		BLOCS
/* ************************************************************ */
.conteneur {
	min-width: 800px;
	max-width: 1200px;
	}

#bloc-header {
	/* N'est pas défini pour ce site, où le header est composé de trois blocs: bloc-header-sup; bloc-header-image; bloc-header-nav. */
	}
#bloc-header-sup {
	/* display: block;  /* Annule un éventuel display: none du menu mobile. */
	height: 100px;
    z-index: 150;
	}
#bloc-header-sup .conteneur {
	/* min-width: none; */
	/* max-width: none; */
	}
#bloc-header-image {
	/* height: 300px;  /* Pas nécessaire car le slider va lui-même définir la hauteur. */
	/* background: url("/site_20/images/header/fond_bleu.png") repeat; */
	background-image: url("/site_20/images/header/fond_header_ecran.jpg"); 
	/* background-image: url("/site_20/images/header/transparent_50.png"), url("/site_20/images/header/fond_header_ecran.jpg"); */ 
	/* background-position: right 0px; */
	/* background-repeat: repeat; */
	/* background-repeat: repeat, no-repeat; */
	background-position: 0px -100px;
	/* background-attachment: fixed; */
    background-size: cover;
    opacity: 1;
	}
#bloc-header-image .conteneur {
	min-width: none; 
	max-width: none; 
    width: 100%;
	}
#bloc-header-nav {
    position: sticky; 
    top: 100px; 
	z-index: 100;
	/* position: static;  /* Annule la position fixe du mode mobile. */
	width: 100%;
	/* border-top: 1px solid #ffffff; */
	/* border-bottom: 1px solid #ffffff; */
	background: #3c974c; 
	}
#bloc-header-nav .conteneur {
	/* min-width: none; */
	/* max-width: none; */
	}
#bloc-header-annonce-speciale {
    position: sticky;  /* Quand on scrolle la page, le menu se bloque... */
    top: 138px;  /* ... juste en dessous du bloc-header-nav. */
	font-size: 1.6em;
	}
#bloc-header-annonce-speciale .conteneur {
	min-width: none;
	max-width: none;
	}

#bloc-footer {
	}
#bloc-footer-espace {
	display: none;
	/* display: block; */
	/* height: 300px; */
	/* background-color: #; */
	/* background-image: url("/site_20/images/logo_footer.png"); */
	/* background-position: center bottom; */
	/* background-repeat: no-repeat; */
	/* background-attachment: fixed; */
	}

#bloc-contenu {
	padding: 40px 0px 90px 0px;
	}
#bloc-contenu .conteneur {
    /* Conteneur flex horizontal pour le contenu principal. */
    flex-flow: row nowrap;
	}
#bloc-main {
    /* Disposition standard: main 2x plus large que aside. */
    flex: 2;
    /* width: auto; */
	}
#bloc-aside {
    flex: 1;
    margin-left: 5%;  /* Marge d'espacement par rapport au main. */
	border-top: none;  /* On annule le filet supérieur du mode mobile. */
	}
#bloc-aside.large {
    /* Disposition spéciale pour les landing-pages: aside occupe la même largeur que le main. */
    flex: 2;
	}





/* ******************************************************************************************************************** */
/*
/*		(B) - HEADER - FOOTER
/*
/* ******************************************************************************************************************** */


/* ************************************************************ */
/*		MODULE: HEADER
/* ************************************************************ */
#header-sup {
	}
#header {
	}
#header-logo {
	}
#header-logo a {
	/* top: 10px; */
	/* left: 10px; */
	/* width: 225px; */
	/* height: 80px; */
	}
#header-logo img {
	top: 10px; 
	left: 10px; 
    max-width: 225px;
    /* max-height: px; */
	}

/* SLIDER */
/* ================================================== */
#header-slider {
	height: 250px;  /* Modifier aussi cette valeur ci-dessous dans #header-slider .slider-item a */
	}
#header-slider:hover {
	}
#header-slider .slider-item {
	}
#header-slider .slider-item a {
	height: 250px;  /* Modifier aussi cette valeur ci-dessus dans #header-slider | Attention aussi au padding-top ci-dessous. */
    background: #eeeeee;
    opacity: 0.6;
    padding-top: 120px;  /* Ajuster en fonction de la hauteur du slider. */
    font-size: 0em;
    /* font-weight: 200; */
	}
#header-slider .slider-item a:hover {
    /* background: none; */
    opacity: 0.8;
    font-size: 2em;
    font-weight: 200;
	}
#header-slider .selecteur {
    display: block;
    width: 100%;
    position: absolute;
    bottom: 0px;
	z-index: 20;
    padding: 0px;
    text-align: center;
	}
#header-slider .selecteur a {
    display: inline-block;
    width: 20px;
    height: 20px;
	background-image: url("/site_20/images/boutons/slider_selecteur_passif.png");
    background-size: contain;
	/* background-position: center 0px; */
	/* background-repeat: no-repeat; */
    /* text-decoration: none; */
	}
#header-slider .selecteur a.actif {
	background-image: url("/site_20/images/boutons/slider_selecteur_actif.png");
	}


/* ************************************************************ */
/*		MODULE: FOOTER
/* ************************************************************ */
#bloc-footer footer {
	margin: 50px 0px;
	font-size: 0.9em;
	}
#bloc-footer footer .footer-nav {
    margin: 0px;
    max-width: 50%;
	}
#bloc-footer footer nav {
	}
#bloc-footer footer nav.reseaux {
	}
#bloc-footer footer nav.reseaux a {
	}
#bloc-footer footer-copyright {
	margin: 20px 0px 0px 0px;
	}





/* ******************************************************************************************************************** */
/*
/*		(C) - NAVIGATION
/*
/* ******************************************************************************************************************** */


/* ************************************************************ */
/*		MODULE: NAV-PRINCIPAL
/* ************************************************************ */
nav.principal {
	width: auto;
	height: auto;
	margin: 0px;
	font-size: 1.1em; 
	}
nav.principal label.declencheur,
nav.principal label.sous-declencheur {
    display: none;
	}

nav.principal ul {
    display: block;
	}
nav.principal li {
	display: inline-block;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	}
nav.principal li.accueil {
	/* display: none; */
	}
nav.principal li.panier,
nav.principal li.recherche,
nav.principal li.login {
	display: none; 
	}

/* LIENS DES OPTIONS DE NIVEAU 1 */
/* (En principe alignées horizontalement) */
/* ================================================== */
nav.principal li a:link,
nav.principal li a:visited {
	display: block;
	padding: 3px 15px;
	color: #ffffff;
	background: #3c974c; 
	/* border: none; */
    border-top: none;
	/* border-top: 1px solid #ffffff; */
	/* border-left: 1px solid #ffffff; */
	/* border-right: 1px solid #ffffff; */
	}
nav.principal li.actif a:link,
nav.principal li.actif a:visited {
	color: #;
	background: #; 
	/* font-weight: bold; */
	}
nav.principal li a:hover,
nav.principal li.actif a:hover {
	color: #ffffff;
	background: #990000; 
	/* font-weight: bold; */
	}
nav.principal li.actif a:hover {
	}

/* DEROULEMENT DES OPTIONS DE NIVEAU 2 */
/* (Dans des menus déroulants) */
/* ================================================== */
nav.principal li ul,
nav.principal li input[type=checkbox]:checked ~ ul {
	/* Par défaut, un sous-menu n'est pas déroulé. */
	display: none;
	}
nav.principal li:hover > a:link,
nav.principal li:hover > a:visited {
	/* 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: #ffffff; 
	background: #3c974c; 
	/* border-top: 1px solid #ffffff; */
	border-left: 1px solid #ffffff; 
	border-right: 1px solid #ffffff; 
	}
nav.principal li: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: #ffffff; 
	background: #990000;
	}
nav.principal li:hover > ul,
nav.principal li:hover input[type=checkbox]:checked ~ ul {
	/* Apparence d'un sous-menu (ul) lorsqu'il est déroulé. */
	display: block;
	position: absolute;
	list-style: none;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	width: 300px;  /* largeur arbitraire */
	border-left: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
	}
nav.principal li ul li {
	/* Apparence d'une cellule (li) dans un sous-menu déroulé. */
	clear: both;
	/* display: list-item; */
	width: 100%;
	padding: 0px;
	border-top: 1px solid #ffffff;
	}
nav.principal li ul li a:link,
nav.principal li ul li a:visited {
	/* Apparence d'une option (a) dans un sous-menu déroulé (si différence par rapport aux options de niveau 1). */
	display: block;
	border: none;
	color: #ffffff; 
	background: #3c974c; 
	/* background: transparent url("/site_20/images/header/fond_trsp.png") repeat; */
	padding: 6px 15px;
	font-size: 1em;
	}
nav.principal li:hover > ul li a:hover {
	/* Apparence d'une option (a) survolée dans un sous-menu déroulé. */
	color: #ffffff;
	background: #990000; 
	}

/* DEROULEMENT DES OPTIONS DE NIVEAU 3 */
/* ================================================== */
nav.principal li ul li ul {
	display: none; 
	}
nav.principal li ul li:hover > ul {
	display: none; 
	/* display: block; */
	position: absolute;
	margin: 0px 0px 0px 60px;
	border: 8px solid #ffffff;
	}
nav.principal li ul li ul li a:link,
nav.principal li ul li ul li a:visited {
	padding: 6px 15px;
	}

/* DEROULEMENT DES OPTIONS DE NIVEAU 4 */
/* ================================================== */
/* La plupart des éléments peuvent être identiques au niveau 3. */
/* Mais il faut peut-être corriger/annuler les indentations définies dans le CSS mobile. */
nav.principal li ul li ul li ul li a:link,
nav.principal li ul li ul li ul li a:visited {
	padding: 6px 15px;
	}



/* ************************************************************ */
/*		MODULE: NAV-ARIANE
/* ************************************************************ */
nav.ariane {
	display: none; 
	}



/* ************************************************************ */
/*		MODULE: NAV-ANCRES
/* ************************************************************ */
main nav.ancres {
	display: block;
	float: right;
	margin: 0px 20px 40px 40px;
	padding: 0px 0px 20px 40px;
	border-left: 1px solid #000000;
	}
main nav.ancres ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
main nav.ancres a {
	text-decoration: none; 
	}



/* ************************************************************ */
/*		MODULE: WIDGET-SUP
/* ************************************************************ */
.widget-sup {
	display: block;
	float: right;
	margin: 50px 0px 0px 0px;
	font-size: 1em; 
	}
.widget-sup a:link,
.widget-sup a:visited {
	display: block;
	padding: 10px 20px;
	color: #3c974c;
	background: #; 
	border: none;
	text-decoration: none;
	}
.widget-sup a:hover {
	color: #ffffff;
	background: #990000; 
	/* font-weight: bold; */
	}
.widget-sup a.panier {
	color: #990000;
	background: #eeefee; 
	font-weight: bold;
	}
/* DEROULEMENT */
/* ================================================== */
.widget-sup ul,
.widget-sup form {
	/* Par défaut, un sous-menu n'est pas déroulé. */
	display: none;
	}
.widget-sup:hover > a:link,
.widget-sup:hover > a:visited {
	/* 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: #ffffff; 
	background: #990000; 
	}
.widget-sup:hover > ul,
.widget-sup:hover > form {
	/* Apparence d'un sous-menu (ul) lorsqu'il est déroulé. */
	display: block;
	position: absolute;
	/* right: 10px; */
	color: #3c974c; 
	background: #eeefee; 
	list-style: none;
	margin: 0px 0px 0px -50px;
	padding: 0px;
	/* width: 350px; */
	border-left: 1px solid #3c974c;
	border-right: 1px solid #3c974c;
	border-bottom: 1px solid #3c974c;
	}
.widget-sup ul li,
.widget-sup form {
	/* Apparence d'une cellule (li) dans un sous-menu déroulé. */
	clear: both;
	/* display: list-item; */
	/* width: 100%; */
	padding: 0px;
	border-top: 1px solid #3c974c;
	}
.widget-sup ul li a:link,
.widget-sup ul li a:visited,
.widget-sup form span {
	/* Apparence d'une option (a) dans un sous-menu déroulé (si différence par rapport aux options de niveau 1). */
	display: block;
	border: none;
	color: #3c974c; 
	background: #eeefee; 
	/* background: transparent url("/site_20/images/header/fond_trsp.png") repeat; */
	padding: 10px 15px; 
	/* color: #3c974c; */
	font-size: 1em;
	}
.widget-sup form a:link,
.widget-sup form a:visited {
	/* Apparence d'un lien (a) dans un formulaire déroulé. */
	margin: 0px;
	padding: 0px;
	background: none; 
	font-size: 0.85em;
	}
.widget-sup:hover > ul li a:hover,
.widget-sup:hover > form a:hover {
	/* Apparence d'une option (a) survolée dans un sous-menu déroulé. */
	color: #ffffff;
	background: #990000; 
	}





/* ******************************************************************************************************************** */
/*
/*		(D) - CONTENU ( MAIN - ASIDE )
/*
/* ******************************************************************************************************************** */


/* ************************************************************ */
/*		MODULE: MAIN (ex-ARTICLE)
/* ************************************************************ */
main {
	}

/* TITRES */
/* ================================================== */
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
    }
main h1 {
	font-size: 2.4em;
	padding-bottom: 20px;
	margin-bottom: 45px;
	}
main h1.t1 { font-size: 2.6em; }
main h1.t2 { font-size: 2.4em; }
main h1.t3 { font-size: 2.2em; }
main h1.actu1 { font-size: 2.5em; }
main h1.actu2 { font-size: 2.0em; }
main h1.actu3 { font-size: 1.5em; }
main h2 {
	font-size: 2em;
	}
main h3 {
	font-size: 1.8em;
	}
main h4 {
	font-size: 1.6em;
	}
main h5 {
	font-size: 1.4em;
	}
main h6 {
	font-size: 1.2em;
	}
main .surtitre {
	/* font-size: 1.2em; */
	}

/* TEXTES */
/* ================================================== */
main li {
	margin-bottom: 8px;
	}

main .texte {
	/* width: 80%; */
	}
main .actu-date-1 {
	text-align: center; 
	}

/* ARTICLES NATION */
/* ================================================== */
main.nation-article .nation-ref {
    float: left;
    margin: 20px 90px 45px 0px;
    font-size: 0.85em;
    text-align: left;
	}
main.nation-article .nation-ref div+div {
    margin-top: 10px;
	}
main.nation-article .nation-ref .auteur,
main.nation-article .nation-ref .rubrique,
main.nation-article .nation-ref .edition,
main.nation-article .nation-ref .date {
    display: block;
	}
main.nation-article .nation-ref .audio {
	margin-top: 20px;
	/* background: #eeeeee; */
	/* padding: 4px 8px; */
	}
main.nation-article .nation-ref span+span::before {
    content: "";
	}
main.nation-article blockquote {
    margin: 0px 10px 40px 0px;
    /*text-align: right;*/
    }
main.nation-article #ancrage-podcast {
	/* Sert à placer l'ancre suffisamment haut pour que l'on voie encore la fin du texte. */
	display: block;
	margin-top: -350px;
	height: 350px;
	width: 0px;
	}
main.nation-article div.sommaire {
	margin: 80px 0px 0px 0px;
	}

/* PRESENTATIONS CRV */
/* ================================================== */
main.crv-article header {
    padding-bottom: 20px;
	margin-bottom: 45px;
	}
main.crv-article .crv-ref {
    float: right;
    max-width: 32%;
    margin: 10px 0px 30px 80px;
    font-size: 0.85em;
    text-align: left;
	}
main.crv-article .crv-ref img {
    display: none;
	}
.crv-image {
    display: block;
    margin-top: 80px;
    text-align: center;
	}
.crv-image img {
    max-width: 100%;
    border: 1px solid #666666;
	}

/* INCRUSTATIONS */
/* ================================================== */
main .demi-gauche {
	float: left;
	width: 45%;
	}
main .demi-droite {
	float: right;
	width: 45%;
	}
main .un-tiers-gauche {
	float: left;
	width: 30%;
	}
main .un-tiers-droite {
	float: right;
	width: 30%;
	}
main .deux-tiers-gauche {
	float: left;
	width: 60%;
	}
main .deux-tiers-droite {
	float: right;
	width: 60%;
	}

/* IMAGES GÉRÉES PAR LE MODULE ARTICLE */
/* ================================================== */
main .image-gauche,
main .image-droite,
main .image-basse {
	display: block;
	}
main .image-gauche {
	float: left;
	margin: 0px 20px 20px 0px;
	}
main .image-droite {
	float: right;
	margin: 0px 0px 20px 20px;
	}
main .image-basse {
	margin: 30px 0px;
	text-align: center;
	}
main .image-mobile {
	display: none;
	}
/* IMAGES PLACÉES MANUELLEMENT */
/* ================================================== */
main .img-droite {
	width: 50%;
	max-width: 600px;
	}
main .img-gauche {
	width: 50%;
	max-width: 600px;
	}
main .img-droite.vertical,
main .img-gauche.vertical {
	width: 35%;
	max-width: 420px;
	}
main .img-alignee {
	width: 90%;
	max-width: 1000px;
	}
main .img-alignee.vertical {
	width: 50%;
	max-width: 600px;
	}
main .img-serie {
	margin: 30px 10px 0px 0px;
	width: 40%;
	max-width: 480px;
	border: 0px;
	}
main .carte-geo {
	width: 100%;
	max-width: 1000px;
	height: 400px;
	}

/* SECTIONS DEROULANTES */
/* (avec le module page_deroulante.module.php */
/* ================================================== */
main section .declencheur {
    margin: -4px 0px 15px 15px;
    font-size: 40px; 
    }

/* SLIDER */
/* ================================================== */
.actu-slider {
	width: 90%;
	overflow: hidden; 
	}
.actu-slider:hover {
	border-bottom: 3px solid #000000; 
	}
.actu-slider ul {
	height: 350px;
	}
.actu-slider li {
    display: table-row;
    width: 100%;
	height: 350px;
    background: #ffffff;
	}
.actu-slider .item-image {
    display: table-cell;
    vertical-align: top;
    }
.actu-slider .item-texte,
.actu-slider .item-texte-25,
.actu-slider .item-texte-45 {
    display: table-cell;
    vertical-align: top;
    width: 35%;
    padding: 10px;
    }
.actu-slider .item-texte-25 {
    width: 25%;
    }
.actu-slider .item-texte-45 {
    width: 45%;
    }
.actu-slider .item-image img {
	height: 350px;
	}
.actu-slider .item-image iframe {
	width: 100%;
	height: 350px;
	}
.actu-slider .selecteur {
    display: block;
    margin: 10px 0px 0px 0px;
    padding: 0px;
    text-align: center;
	}
.actu-slider .selecteur a {
    display: inline-block;
    width: 20px;
    height: 20px;
	background-image: url("/site_20/images/boutons/slider_selecteur_passif.png");
	background-position: center 0px;
	background-repeat: no-repeat;
    text-decoration: none;
	}
.actu-slider .selecteur a.actif {
	background-image: url("/site_20/images/boutons/slider_selecteur_actif.png");
	}

/* MODULES 'LISTE'
/* ================================================== */
main .liste {
	}
main .liste header,
main .liste footer {
	margin: 25px 0px;
	}
main .liste nav {
	}
main .liste nav span,
main .liste nav a:link,
main .liste nav a:visited {
	margin: 0px 5px;
	padding: 1px 8px;
	/* border-radius: 10%; */
	}
main .liste span.liste-date {
	display: inline-block;  /* Pour la liste des actualites, avec la date et le titre cote a cote. */
	width: 20%; 
	vertical-align: top;
	}
main .liste span.liste-titre {
	display: inline-block;  /* Pour la liste des actualites, avec la date et le titre cote a cote. */
	width: 75%; 
	vertical-align: top;
	}

/* MODULES 'LISTE-MEDIAS'
/* ================================================== */
main .liste-medias {
	}
main .liste-medias header,
main .liste-medias footer {
	margin: 25px 0px;
	}
main .liste-medias nav {
	}
main .liste-medias nav span,
main .liste-medias nav a:link,
main .liste-medias nav a:visited {
	margin: 0px 5px;
	padding: 1px 8px;
	/* border-radius: 10%; */
	}
/* ===== Items de la liste ===== */
main .liste-medias .item-video,
main .liste-medias .item-video-uno,
main .liste-medias .item-audio {
    display: inline-block;
	vertical-align: top;
    /* width: auto; */
	width: 320px;
    margin: 0px 40px 40px 0px;
    font-size: 0.9em;
	}
main .liste-medias iframe {
	}
main .liste-medias .item-video-uno {
	width: 100%;
    margin: 0px 0px 40px 0px;
	}
main .liste-medias .item-video-uno iframe {
    width: 100%;
    height: 440px;
	}
main .liste-medias .accueil-videos {
	float: left;
	width: 48%;
	}
main .liste-medias .accueil-audios {
	float: right;
	width: 48%;
	}


/* MODULE 'PANIER'
/* ================================================== */
main .panier {
	grid-template-columns: auto auto auto auto auto;
	}
main .panier .header,
main .panier .item,
main .panier .footer {
	padding: 4px 15px 3px 15px;
	}
main .panier .header.produit {
	display: inline;
	}
main .panier .produit {
	grid-column: 1/2;
	border-bottom: 1px solid #444444;
	}
main .panier .prix {
	text-align: right;
	}
main .panier .quantite {
	text-align: right;
	}
main .panier .modif {
	grid-column: 4/5;
	}
main .panier a.bouton-suppr {
	display: inline;
	}



/* ************************************************************ */
/*		MODULE: VIGNETTES (MAIN ou ASIDE)
/* ************************************************************ */
.vignettes {
    /* justify-content: space-between; */
    }
main .vignettes section {
    flex: 0 0 31%;  /* En principe 3 vignettes par ligne (sur la page d'accueil). */
    margin: 0px 2% 2% 0px; 
    }
aside .vignettes section {
    flex: 1 1 40%;  /* Sur un accueil de section, en colonne aside, on restreint à 2 vignettes par ligne. */
    margin: 0px 15px 15px 0px; 
    background-position: top;
    }
.vignettes section div.superieur {
    min-height: 180px;  /* La hauteur minimale permet de voir suffisamment l'image. */
    }
.vignettes section h2 {
    font-size: 1.8em;  /* Un peu plus grand qu'en mode mobile. */
    }
.vignettes section p {
    font-size: 0.9em;
    }



/* ************************************************************ */
/*		MODULES: ASIDE
/* ************************************************************ */
aside {
	margin: 60px 0px;
	/* padding: 15px; */
	/* border: 1px solid #000000; */
	font-size: 1em;
	}


/* ************************************************************ */
/*		MODULE: TOPBOX (ACTU-TOP-LISTE)
/* ************************************************************ */
.topbox {
	margin: 60px 0px;
	font-size: 1em;
	}


/* ************************************************************ */
/*		MODULES FORMULAIRE:
/* ************************************************************ */
.formulaire .label,
.formulaire .label-confirm {  /* Pour les span qui contiennent le label d'une rubrique text. */
	display: inline-block;
	width: 20%;
	vertical-align: top;
	}
.formulaire .asterisque {  /* Pour les span qui contiennent l'asterisque d'une rubrique text. */
	display: inline-block;
	width: 3%;
	vertical-align: top;
	}
.formulaire .input {  /* Pour les span qui contiennent une rubrique text. */
	display: inline-block;
	width: 72%;
	vertical-align: top;
	}
#fieldset-contact-commande {
    float: right;
    width: 48%;
    }
#fieldset-contact-message {
    float: left;
    width: 48%;
    }
#fieldset-contact-coordonnees {
    clear: both;
    }


/* ************************************************************ */
/*		MODULE FORM-SELECT:
/* ************************************************************ */
#bloc-aside .form-select {
    margin-top: 100px;
	}
#bloc-aside .form-select h2 {
    font-size: 1.4em;
	}

}

/* ---------------------------------------------------------------------------------------------------- */
/*		ADAPTATION POUR PRINT
/* ---------------------------------------------------------------------------------------------------- */
@media print 
{

body {
    left: 1cm;
    right: 1cm;
    background: #ffffff;
    color: #000000;
    font-size: 11pt;
    }

/* BLOCS */
/* ================================================== */
#bloc-header-sup, 
#bloc-header-image, 
#bloc-header-nav, 
#bloc-footer {
    display: none;
    }

#bloc-contenu {
    }
#bloc-contenu .conteneur {
    display: block;
    }
#bloc-main {
    }
#bloc-aside {
    display: none;
    }

/* BALISES */
/* ================================================== */
a:link,
a:visited {
    color: #000000;
    text-decoration: none;
    }
form {
    display: none;
    }

}