﻿/* CONTENU.CSS - éléments de contenu principal globaux au site */


/* affectations webfonts */
.accordion dt { font-family: 'Chivo', Calibri, Arial, sans-serif; }


/* image d'entête de page */
.page-header.intrinsic { padding-bottom: 27.5%; /* 1600:440 */ background: #f7f7f7; }
.page-header.intrinsic:after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 45%,rgba(0,0,0,.3) 100%); }


/* listes de base 2 items */
/* container principal */
.list { overflow: hidden; margin: 2em 0; }
/* wrapper des items avec offset négatif pour marges */
.list-items, .list > ul { position: relative; margin: -15px; word-spacing: -0.5em; text-align: left; }
/* item individuel avec gutter */
.list-item, .list > ul > li { position: relative; display: inline-block; vertical-align: top; width: 50%; padding: 15px; text-align: left; word-spacing: normal; }
/* overrides sandbox */
.sandbox .list > ul > li { margin: 0; }
.sandbox .list > ul > li:before { display: none; }
.sandbox .list img { margin: 0; }


/* blocs items génériques (base) */
.item-wrapper, .item-txt, .item-img { display: block; color: inherit; }
/* conteneur texte */
.item-txt { position: relative; margin: 1em 0 0.5em; padding: 0 15px; }
/* titre générique avec sous-titre  */
.item-title { display: block; margin: 0.125em 0; color: #1d1d1d; font-family: inherit; font-size: 115%; /* 23px */ line-height: 1.2; }
a.item-wrapper .item-title { color: #0064a3; }
a.item-wrapper:hover .item-title { color: #1d1d1d; }


/* listes d'items en slider flickity compact (nouvelles accueil, etc.) */
.slider-list { overflow: visible; margin-top: 0; max-width: 1180px; /* 2 slides @ 575px */ }
.slider-list .list-items { margin: 0; padding: 0; overflow: visible; }
.slider-list .list-items .flickity-viewport { overflow: visible; }
.slider-list .list-item { width: auto; padding: 0 30px 0 0; }
.slider-list .list-item:last-child { padding-right: 0; }
.slider-list .item-wrapper { width: 575px; }
.slider-list .item-txt { margin-bottom: 0; padding: 0 10px; }
.slider-list .item-title { text-align: left; text-transform: none; }
.slider-list .flickity-button { position: absolute; z-index: 3; left: -15px; /* offset dans le gap entre les slides */ top: 190px; font-size: 210%; /* 42px */ width: 1em; height: 1em; box-sizing: content-box; padding: 0.45em 0.55em 0.55em 0.45em; margin: -1em 0 0 -1em; background: rgba(255,255,255,0.9); fill: #1d1d1d; border-radius: 50%; }
.slider-list .flickity-button.next { left: auto; right: -15px; margin: -1em -1em 0 0; padding: 0.45em 0.45em 0.55em 0.55em; }
.slider-list .flickity-button:hover { background: #0064a3; fill: #fff; }


/* liste/fiche des nouvelles (+ filtres communs avec liste escales) */
.news-filters { margin-top: 3.5em; }
.news-filters, .port-list { margin-bottom: 3.5em; color: #c0bfbf; }
.news-filters, .port-list, .port-txt p, .port-txt ul { font-size: 1rem; }
.news-filters button { font-weight: 600; }
.news-filters button.actif { color: #1d1d1d; }
.news-list > ul { margin: -10px; }
.news-list > ul > li { width: 33.33%; padding: 10px; }
.news-list .item-txt { margin-top: 0.75em; }
.news-list .item-title { font-size: 90%; /* 18px */ }
.news-date { margin: 0.5em 0 2em; }
.news-img { width: 60%; }
.news-img img { margin: 0; }
.news-attachment a { display: table; }


/* liste des escales */
.port-list a { font-weight: 600; }
.content-block .port-item { display: -ms-flexbox; display: -webkit-flex; display: flex; margin: -1.25em 0; }
.port-img, .port-txt { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; width: 50%; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; padding: 0 2%; }
.port-img { position: relative; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
.port-img.align-top { -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; }
.port-img img { margin: 0; }
.port-img figcaption { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; position: absolute; z-index: 3; left: 0; right: 0; top: 0; bottom: 0; padding: 5%; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,.25) 50%, rgba(0,0,0,0) 100%); color: #fff; text-shadow: 0 0 0.5em rgba(0,0,0,.15); }
.port-img figcaption h3 { margin: 0; font-size: 250%; text-align: center; color: #fff; }
.port-txt { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; }


/* bouton "en savoir plus" et logos */
.sandbox .port-actions, .sandbox .port-actions ul { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; flex-wrap: wrap; }
.sandbox .port-actions .bt-action { margin: 1em 2em 1em 0; }
.sandbox .port-actions ul { margin: 0; font-size: inherit; }
.sandbox .port-actions ul > li { margin: 0 2em 0 0; }
.sandbox .port-actions ul > li:before { display: none; }
.sandbox .port-actions img { display: block; width: auto; height: 87px; margin: 0; }


/* accordéons */
.accordion { margin: 2em 0; font-size: 1rem; }
.accordion dt { position: relative; margin: 1.25rem 0 0; padding: 0.75em 3em 0.75em 40px; border-radius: 10px; font-size: 130%; line-height: 1.1; background: #0064a3; color: #fff; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.accordion dt:hover { background: #1d1d1b; }
.accordion dt:before, .accordion dt:after { position: absolute; right: 40px; top: 50%; margin: -0.5em 0 0; font-size: 133%; }
.accordion dt[aria-expanded=true]:before, .accordion dt[aria-expanded=true]:after { opacity: 0; }
.accordion dt[aria-expanded=true]:after { opacity: 1; }
.accordion .inner-container { background: #f3f3f3; margin: 1.25rem 0 0; padding: 40px; border-radius: 10px; }
.alt .accordion .inner-container { background: #fff; }
.accordion .inner-container hr:before, .accordion .inner-container .separator:before { left: 0; right: 0; }


/* répertoire des membres */
.sandbox .directory-list { max-width: 52.5em; }
.directory-logo, .directory-thumb { width: auto; max-width: none; max-height: 81px; }
.directory-thumb.align-right { max-height: 95px; margin: 0 0 20px 20px; }


/* extranet - outils */
.extranet-tools { margin: 2em 0; }
.extranet-tools li { margin: 0.5em 0; }
.extranet-tools a { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; font-size: 80%; /* 16/20 */ color: inherit; }
.extranet-tools a:hover { color: #1d1d1d; }
.extranet-tools strong { -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; font-weight: 600; }
.extranet-tools img { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 11.875em; /* 190px */ height: 4.375em; /* 70px */ margin: 1.25em 2em 1.25em 0; }


/* media queries */
@media (min-width: 1px) and (max-width: 93.75em) { /* 1500/16 */
	.slider-list .flickity-button { font-size: 175%; }
}

@media (min-width: 1px) and (max-width: 80em) { /* 1280/16 */
	.slider-list .item-wrapper { width: 450px; }
	.slider-list .flickity-button { display: none; }
	.news-filters, .port-list, .port-txt p, .port-txt ul { font-size: 0.875rem; /* 14px */ }
	.port-img { padding: 0 1.5% 0 0; width: 40%; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; }
	.port-txt { padding: 0 0 0 1.5%; width: 60%; }
	.sandbox .port-actions .bt-action, .sandbox .port-actions ul > li { margin-right: 1.25em; }
	.sandbox .port-actions img { height: 60px; }
}

@media (min-width: 1px) and (max-width: 63.9375em) { /* 1023/16 */
	.list.news-list > ul { margin: -5px; }
	.list.news-list > ul > li { padding: 5px; }
	.slider-list .list-item { padding-right: 20px; }
	.slider-list .item-wrapper { width: 360px; }
	.item-txt, .slider-list .item-txt { padding: 0; }
	.accordion { font-size: 0.875rem; }
	.accordion dt { padding-left: 30px; }
	.accordion dt:before, .accordion dt:after { right: 30px; }
	.accordion .inner-container { padding: 30px; }
}

@media print, (min-width: 1px) and (max-width: 47.9375em) { /* 767/16 */
	.list-items, .list > ul { margin: -10px; }
	.list-item, .list > ul > li { padding: 10px; }
	.news-filters { margin-top: 2.25em; }
	.news-filters, .port-list { margin-bottom: 2.25em; }
	.content-block .port-item { display: block; margin: 0; }
	.port-img, .port-txt { padding: 0; width: auto; }
	.port-txt { padding: 1em 0 0; }
	.sandbox .port-actions img { height: 45px; }
	.accordion dt { padding-left: 20px; margin-top: 1rem; font-size: 125%; }
	.accordion dt:before, .accordion dt:after { right: 20px; }
	.accordion .inner-container { margin-top: 1rem; padding: 20px; }
}

@media (min-width: 1px) and (max-width: 37.5em) { /* 600/16 */
	.extranet-tools img { margin: 0.5em 1.5em 0.5em 0; }
}

@media (min-width: 1px) and (max-width: 29.9375em) { /* 479/16 */
	.list-item, .list > ul > li { width: 100%; }
	.slider-list .item-wrapper { width: 288px; width: 80vw; }
	.news-img { width: 100%; float: none; }
	.directory-logo.align-right { float: none; display: block; margin: 0 0 1em; max-height: 50px; }
	.directory-thumb.align-right { max-height: 48px; }
}