/*! HTML5 Boilerplate v6.1.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
	color:       #222;
	font-size:   1em;
	line-height: 1.4;
	}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
	background:  #b3d4fc;
	text-shadow: none;
	}

::selection {
	background:  #b3d4fc;
	text-shadow: none;
	}

/*
 * A better looking default horizontal rule
 */

hr {
	display:    block;
	height:     1px;
	border:     0;
	border-top: 1px solid #ccc;
	margin:     1em 0;
	padding:    0;
	}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
	vertical-align: middle;
	}

/*
 * Remove default fieldset styles.
 */

fieldset {
	border:  0;
	margin:  0;
	padding: 0;
	}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
	resize: vertical;
	}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
	margin:     0.2em 0;
	background: #ccc;
	color:      #000;
	padding:    0.2em 0;
	}

/* ==========================================================================
   FONTS
   ========================================================================== */

@font-face {
	font-family: 'ReplicaBold';
	src:         url('../fonts/ReplicaStdBold.otf') format('truetype');
	font-weight: normal;
	font-style:  normal;
	}

@font-face {
	font-family: 'ReplicaStdRegular';
	src:         url('../fonts/ReplicaStdRegular.otf') format('truetype');
	font-weight: normal;
	font-style:  normal;
	}

@font-face {
	font-family: 'NimbusSanNov-Reg';
	src:         url('../fonts/NimbusSanNovT.ttf');
	}

@font-face {
	font-family: 'NimbusSanNov-Bol';
	src:         url('../fonts/NimbusSanNovT_Bold.ttf');
	}

/* ==========================================================================
   GVK
   ========================================================================== */

body {
	color:       #000;
	/*font-size:   1vw;*/
	font-family: 'NimbusSanNov-Reg', sans-serif;
	}

a {
	color:           #E62A35;
	text-decoration: none;
	}

strong {
	font-family: 'NimbusSanNov-Bol';
}
#header {
	height:           80px;
	background-color: #fafafa;
	position:         fixed;
	top:              0;
	width:            100vw;
	z-index:          1000;
	box-shadow:       0px 4px 10px rgba(0, 0, 0, 0.1);
	
	}

#container_accueil {
	margin-top:      80px;
	width:           100vw;
	background-size: 100% 100%;
	}

#container {
	width: 100vw;
	}

.float_left {
	float: left;
	}

.align_center {
	align-self: center;
	text-align: center;
	width:      100%;
	}

#footer {
	width:            100%;
	background-color: #efefef;
	color:            #E62A35;
	text-align:       left;
	font-family:      'NimbusSanNov-Reg';
	min-height:       100px;
	height:auto;
	position:         absolute;
	padding-top:      40px;
	
	}

.footer_accueil {
	top: calc(87.5vw + 80px);
	}

#footer_zone_0 {
	width:      6.5vw;
	float:      left;
	text-align: left;
	}

#footer_zone_0 img {
	width:       50px;
	margin-left: 20px;
	}

#footer_zone_1 {
	width:         17.5vw;
	float:         left;
	text-align:    right;
	padding-right: 1vw;
	}

#footer_zone_2, #footer_zone_3, #footer_zone_4 {
	width:      24vw;
	float:      left;
	text-align: right;
	/*padding-right:1vw;*/
	}

#footer_zone_4 img {
	width:       50px;
	margin-left: 20px;
	}

#menu {
	background-color: rgba(0, 0, 0, 0.7);
	width:            100vw;
	height:           calc(100vh - 60px);
	position:         fixed;
	z-index:          9999;
	text-align:       center;
	display:          none;
	margin:           0 0 0 0;
	top:              80px;
	color:            #fff;
	}

#navigation .small_link {
	font-family:     "ReplicaBold", "Gill Sans", "sans-serif";
	padding:         0.3vw 0.5vw 0.2vw 0.5vw;
	text-transform:  lowercase;
	font-weight:     normal;
	text-decoration: none;
	color:           #fff;
	font-size:       1.1vw;
	}

#nav_secondaire a {
	color:       #E62A35;
	font-family: "ReplicaStdRegular", "Gill Sans", "sans-serif";
	}

#nav_secondaire a.active {
	
	font-family: "ReplicaBold", "Gill Sans", "sans-serif";
	}

#nav_secondaire a:hover {
	text-decoration: underline;
	}

#menu ul {
	list-style: none;
	margin-top: 8vh;
	}

#menu ul li {
	margin-top: 2vh;
	}

#menu li a {
	color:           #fff;
	text-decoration: none;
	text-transform:  uppercase;
	font-family:     'ReplicaBold', sans-serif;
	font-size:       3vh;
	}

#menu li a:hover {
	color: #E62A35;
	}

#menu_logo {
	float:        right;
	margin-top:   20px;
	margin-right: 1.7vw;
	width:        100px;
	}

#menu_logo img {
	margin-left: 20px;
	}

#recherche #menu_logo {
	cursor: pointer;
	}

#recherche span, #menu_logo span, .header_text h1 {
	font-size: 14px;
	}

#logo {
	float:       left;
	margin-left: calc(3vw + 10px);
	margin-top:  15px;
	position:    absolute;
	}

#recherche {
	float:        right;
	margin-top:   20px;
	margin-right: 1.7vw;
	width:        140px;
	
	}

#recherche img {
	margin-left: 17px;
	}

#search_bar {
	position:   absolute;
	top:        0;
	right:      30vw;
	margin-top: 10px;
	height:     70px;
	width:      300px;
	
	z-index:    999;
	}

.texte_recherche {
	font-family:    "ReplicaBold", "Gill Sans", "sans-serif";
	font-size:      2vw;
	color:          #E62A35;
	height:         2vw;
	margin:         1vw 0.5vw 0.5vw 0.5vw;
	outline:        none !important;
	box-shadow:     none;
	border:         none;
	text-align:     right;
	padding-bottom: .5vh;
	}

input {
	background-color: #fafafa;
	}

#barre_recherche {
	border-bottom: 1px solid #e52935;
	opacity:       0;
	}

.red {
	color: #E62A35;
	}

.header_text {
	color:       #e52935;
	font-size:   1vw;
	font-family: 'NimbusSanNov-Reg', sans-serif;
	}

#header h1 {
	float:    left;
	position: absolute;
	top:      2px;
	left:     76px;
	width:    20vw;
	}

/* ==========================================================================
   Page de contenu
   ========================================================================== */

.cols_1_width {
	width: 12.5vw;
	}

.cols_2_width {
	width: 25vw;
	}

.cols_3_width {
	width: 37.5vw;
	margin-top:28px;
	}

.cols_4_width {
	width: 50vw;
	}

.cols_8_width {
	width: 75vw;
	}

#left_col {
	float:    left;
	position: fixed;
	}

#left_col ul {
	list-style:    none;
	text-align:    right;
	font-family:   'ReplicaBold', sans-serif;
	padding-top:   245px;
	padding-right: 40px;
	}

#left_col ul li a {
	/*font-family:     'Replica-Bold', sans-serif;*/
	text-decoration: none;
	color:#52935;
	}

#left_col li {
	padding-top: 11px;
	}

#contenu_liste {
	float:         left;
	margin-top:    150px;
	margin-left:   10vw;
	min-height:    calc(100vh - 140px);
	margin-bottom: 50px;
	}

#contenu {
	float:         left;
	margin-top:    150px;
	margin-left:   25vw;
	min-height:    calc(150vh - 300px);
	margin-bottom: 50px;
	}

#categorie {
	
	}

#titre {
	font-size:      2vw;
	text-transform: uppercase;
	font-family:    'ReplicaBold', sans-serif;
	max-width:      70%;
	}

#pictos {
	margin-bottom: 20px;
	display:       flex;
	}

#pictos img {
	width:  30px;
	height: 30px;
	}

#chapeau {
	font-size:      1.5vw;
	font-family:    "NimbusSanNov-Bol", sans-serif;
	padding-bottom: 20px;
	color:          #000;
	padding-right:  40px;
	}

#texte_courant, .texte_courant p, .texte_courant li {
	font-family:    "NimbusSanNov-Reg", sans-serif;
	padding-bottom: 0.5em;
	color:          #000;
	padding-right:  40px;
	font-size: 1.2vw;
	}

.texte_courant ul {
	padding-right: 40px;
	}

#right_col {
	right:    0;
	position: absolute;
	
	}

#image_entete {
	width:    37.5vw;
	height:   37.5vw;
	overflow: hidden;
	}

#calls_right_column {
	float:      none;
	width:      37.5vw;
	/*top:        37.5vw;*/
	/*min-height:12.5vw;*/
	min-height: 7vw;
	margin-top: 0;
	margin-bottom:20px;
	}

.call_to_action_SQUARE {
	width:            12.5vw;
	height:           6.25vw;
	background-color: #e52935;
	color:            #fff;
	font-size:        1.1vw;
	font-family:      'NimbusSanNov-Reg', sans-serif;
	position:         absolute;
	display:          flex;
	transition:       opacity ease 0.5s;
	}

.call_to_action_SQUARE:hover {
	opacity: 0.7;
	cursor:  pointer;
	}

.call_to_action_SQUARE a {
	color:           #fff;
	text-decoration: none;
	align-self:      center;
	margin-left:     auto;
	margin-right:    auto;
	}

.call_to_action_SQUARE h3 {
	text-align: center;
	}

.call_pos_01 {
	/*top:        37.5vw;*/
	align-self: center;
	}

.call_pos_02 {
	margin-top: 12.5vw;
	left:       12.5vw;
	}

.call_pos_03 {
	left: 25vw;
	}

.call_pos_04 {
	top: 50vw;
	
	}

.call_pos_05 {
	background-color:rgba(7, 48, 92, 1);
	left: 12.5vw;
	}

.call_pos_06 {
	top:  50vw;
	left: 25vw;
	}

#image_article {
	overflow:   hidden;
	/*height:   37.5vw;*/
	width:      auto;
	/*min-height: 80px;*/
	}

#btn-back {
	width:   100%;
	display: block;
	margin:  150px 0 50px 3vw;
	}

#btn-back img {
	width: 40px;
	}

.picto {
	margin-top: 150px;
	}

.liens-personnes {
	position: absolute;
	top:      150px;
	
	}

/* ==========================================================================
   LISTES
   ========================================================================== */

.element_liste {
	float:      none;
	margin-top: 40px;
	}

.element_liste.list {
	width: 37vw;
	float: left;
	}

.element_liste img {
	width:        7vw;
	float:        left;
	margin-right: 1vw;
	}

.avatar {
	width:         30vw;
	height:        30vw;
	margin:    100px auto 0;
	overflow:      hidden;
	border-radius: 100%;
	border:        3px solid #e52935;
	}

.avatar img {
	width: 100%;
	
	}


.avatar.list {
	width:         7vw;
	height:        7vw;
	overflow:      hidden;
	border-radius: 100%;
	border:        3px solid #e52935;
	float:         left;
	margin:        0 1vw 0 0;
	}

.list_personnes  h3 {
	font-family:    "ReplicaBold", "Gill Sans", "sans-serif";
	color:#000;
	margin:20px 0 0 0 ;
}



.circle {
	
	overflow: hidden;
	
	}

.list_personnes {
	float: left;

	}

.liste-titre {
	font-family:    "ReplicaBold", "Gill Sans", "sans-serif";
	text-transform: uppercase;
	color:          #000;
	font-size:      1.4vw;
	margin-top:     0;
	
	}

.section-titre {
	font-family:    "ReplicaBold", "Gill Sans", "sans-serif";
	text-transform: uppercase;
	color:          #000;
	font-size:      1.4vw;
	width:          100vw;
	margin-top:     6em;
	float:          left
	}

h3.actu-titre {
	font-family:    "ReplicaBold", "Gill Sans", "sans-serif";
	text-transform: uppercase;
	color:          #000;
	font-size:      1.4vw;
	width:          100vw;
	margin:     2em 0 0em;
	float:          left
	}

.liste-sous-titre {
	font-family: 'NimbusSanNov-Bol', sans-serif;
	}

.liste-categorie {
	font-size:   70%;
	line-height: 170%;
	font-family: 'NimbusSanNov-Reg', sans-serif;
	}

.liste-extrait, .liste-telephone {
	font-family: 'NimbusSanNov-Reg', sans-serif;
	color:       #000;
	}

.liste-email a {
	font-family: 'NimbusSanNov-Reg', sans-serif;
	}

.liste-thematiques {
	margin-top: 10px;
	}

.liste-thematiques img {
	width: 30px;
	}

.liste-thematiques a img {
	width: 30px;
	}

p.citation {
	font-style:  italic;
	background-color:#F3F3F3;
	border-radius:5px;
	padding:2em;
	}

p.note {
	font-size:   90%;
	line-height: 1.5em;
	}

sup {
	line-height: 1.2em;
	}

/* ==========================================================================
   CARTE
   ========================================================================== */
#map {
	width:  90%;
	height: 15vw;
	margin: 5vh 0 0;

	}

div.gm-style-iw {
	color: black;
	}

/* ==========================================================================
   RGPD
   ========================================================================== */
#rgpd {
	color:            white;
	background-color: #e52935;
	color:            #fff;
	position:         absolute;
	right:            10px;
	bottom:           10px;
	padding:          1em 5em;
	position:         fixed;
	width:            30vw;
	border-radius:    5px;
	z-index:          500;
	border:           2px solid white
	}

#rgpd .ghost {
	float:         right;
	color:         rgba(7, 48, 92, 1);
	background:    white;
	border:        0;
	border-radius: 4px;
	font-size:     100%;
	padding:       .5em 2em;
	font-weight:   bold;
	}

#filigrane {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top:0;
	left:0;
	z-index: -100;
	filter:blur(20px);
	opacity: .4;
	}



/* ==========================================================================
   LIEN CMS
   ========================================================================== */
#btn-edit {
	position:                  absolute;
	z-index:                   10000;
	right:                     0;
	top:                       200px;
	background:                black;
	padding:                   .5em;
	color:                     white;
	border-top-left-radius:    4px;
	border-bottom-left-radius: 4px;
	}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
	display: none !important;
	}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visuallyhidden {
	border:      0;
	clip:        rect(0 0 0 0);
	height:      1px;
	margin:      -1px;
	overflow:    hidden;
	padding:     0;
	position:    absolute;
	width:       1px;
	white-space: nowrap; /* 1 */
	}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
	clip:        auto;
	height:      auto;
	margin:      0;
	overflow:    visible;
	position:    static;
	width:       auto;
	white-space: inherit;
	}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
	visibility: hidden;
	}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
	content: " "; /* 1 */
	display: table; /* 2 */
	}

.clearfix:after {
	clear: both;
	}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
	*,
	*:before,
	*:after {
		background:         transparent !important;
		color:              #000 !important; /* Black prints faster */
		-webkit-box-shadow: none !important;
		box-shadow:         none !important;
		text-shadow:        none !important;
		}
	
	a,
	a:visited {
		text-decoration: underline;
		}
	
	a[href]:after {
		content: " (" attr(href) ")";
		}
	
	abbr[title]:after {
		content: " (" attr(title) ")";
		}
	
	/*
	 * Don't show links that are fragment identifiers,
	 * or use the `javascript:` pseudo protocol
	 */
	a[href^="#"]:after,
	a[href^="javascript:"]:after {
		content: "";
		}
	
	pre {
		white-space: pre-wrap !important;
		}
	
	pre,
	blockquote {
		border:            1px solid #999;
		page-break-inside: avoid;
		}
	
	/*
	 * Printing Tables:
	 * http://css-discuss.incutio.com/wiki/Printing_Tables
	 */
	thead {
		display: table-header-group;
		}
	
	tr,
	img {
		page-break-inside: avoid;
		}
	
	p,
	h2,
	h3 {
		orphans: 3;
		widows:  3;
		}
	
	h2,
	h3 {
		page-break-after: avoid;
		}
	}

a.noir {
	color:black;
	}