ajustement fond des images en mode Cognac

b701eb1b · real3t@gmail.com · 9900352c · b701eb1b
--- a/stylesportailcognac.css.html
+++ b/stylesportailcognac.css.html
 #CACHE{24*3600,cache-client}
 #HTTP_HEADER{Content-Type: text/css; charset=iso-8859-15}
 #HTTP_HEADER{Vary: Accept-Encoding}
 #SET{c_triadea,(#CONFIG{soyezcreateurs_couleurs/triadea,#be1621})}
 #SET{c_triadeb,(#CONFIG{soyezcreateurs_couleurs/triadeb,#129b9b})}
 #SET{c_triadec,(#CONFIG{soyezcreateurs_couleurs/triadec,#c38f06})}
 #SET{c_vignettes_bk,(#CONFIG{soyezcreateurs_couleurs/vignettes_bk,#ffffff})}
 #SET{c_navigation,(#CONFIG{soyezcreateurs_couleurs/navigation,#017ca5})}
 #SET{c_body_bk,(#CONFIG{soyezcreateurs_couleurs/body_bk,#eceded})}
 #SET{c_logo_bk,(#CONFIG{soyezcreateurs_couleurs/logo_bk,transparent})}
 #SET{c_header,(#CONFIG{soyezcreateurs_couleurs/header,#262626})}
 	#SET{c_header_bk,(#CONFIG{soyezcreateurs_couleurs/header_bk,#ffffff})}
 #SET{c_footer,(#CONFIG{soyezcreateurs_couleurs/footer,#595959})}
 	#SET{c_footer_bk,(#CONFIG{soyezcreateurs_couleurs/footer_bk,#ffffff})}
 #SET{c_navigation,(#CONFIG{soyezcreateurs_couleurs/navigation,#017ca5})}
 	#SET{c_navigation_bk,(#CONFIG{soyezcreateurs_couleurs/navigation_bk,#ffffff})}
 #SET{c_menuhaut,(#CONFIG{soyezcreateurs_couleurs/menuhaut,#017ca5})}
 	#SET{c_menuhaut_bk,(#CONFIG{soyezcreateurs_couleurs/menuhaut_bk,#ffffff})}
 #SET{c_extra,(#CONFIG{soyezcreateurs_couleurs/extra,#017ca5})}
 	#SET{c_extra_bk,(#CONFIG{soyezcreateurs_couleurs/extra_bk,#ffffff})}
 #SET{c_datemajsite,(#CONFIG{soyezcreateurs_couleurs/datemajsite,#595959})}
 	#SET{c_datemajsite_bk,(#CONFIG{soyezcreateurs_couleurs/datemajsite_bk,#ffffff})}
 #SET{c_menu_a,(#CONFIG{soyezcreateurs_couleurs/menu_a,#005e7a})}
 	#SET{c_menu_a_bk,(#CONFIG{soyezcreateurs_couleurs/menu_a_bk,#ffffff})}
 #SET{c_menu_a_hover,(#CONFIG{soyezcreateurs_couleurs/menu_a_hover,#ffffff})}
 	#SET{c_menu_a_hover_bk,(#CONFIG{soyezcreateurs_couleurs/menu_a_hover_bk,#0b7899})}
 #SET{c_menu_a_active,(#CONFIG{soyezcreateurs_couleurs/menu_a_active,#ffffff})}
 	#SET{c_menu_a_active_bk,(#CONFIG{soyezcreateurs_couleurs/menu_a_active_bk,#0b7899})}
 #SET{c_menu_a_strong,(#CONFIG{soyezcreateurs_couleurs/menu_a_strong,#ffffff})}
 	#SET{c_menu_a_strong_bk,(#CONFIG{soyezcreateurs_couleurs/menu_a_strong_bk,#0b7899})}
 #SET{c_container,(#CONFIG{soyezcreateurs_couleurs/container,#02265a})}
 	#SET{c_container_bk,(#CONFIG{soyezcreateurs_couleurs/container_bk,#f6f6f6})}
 #SET{c_titraille,(#CONFIG{soyezcreateurs_couleurs/titraille,#005e7a})}
 	#SET{c_titraille_bk,(#CONFIG{soyezcreateurs_couleurs/titraille_bk,#f6f6f6})}
 #SET{LargeurContaineur,(#CONFIG{soyezcreateurs_layout/largeurconteneur,960})}
 #SET{LargeurMenuGauche,(#CONFIG{soyezcreateurs_layout/largeurmenugauche,180})}
 #SET{LargeurMenuDroit,(#CONFIG{soyezcreateurs_layout/largeurmenudroit,180})}
 #SET{LargeurMilieu,(#GET{LargeurContaineur}|moins{#GET{LargeurMenuGauche}}|moins{#GET{LargeurMenuDroit}}|div{2})}
 #SET{masonry,308}
 #miettesdepain, .boutonstexte {display: none; }
 div#content { width: 100%; }
 .portailcognac .boutonstexte {
 	right: 0;
 }
 {
  /* clearfix */
  /* ---- grid ---- */
  /* ---- grid-item ---- */
 }
 iframe {
  width: 100%;
 }
 img {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
  -ms-interpolation-mode: bicubic;
 }
 :focus {
  outline: none;
 }
 select {
  cursor: pointer;
 }
 .spip_logo {
  max-width: 100%;
 }
 .ariaformprop {
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 99;
  background-color: white;
  font-size: 80%;
 }
 .ajaxbloc {
  height: 100%;
 }
 .row {
  margin-right: auto;
  margin-left: auto;
 }
 .text-center {
  text-align: center;
 }
 .text-right {
  text-align: right;
 }
 .text-left {
  text-align: left;
 }
 .menu {
  margin: 0;
  list-style-type: none;
 }
 .menu > li {
  display: table-cell;
  vertical-align: middle;
 }
 .vertical > li {
  display: block;
  vertical-align: middle;
 }
 .hide {
  display: none;
 }
 .sans-border {
  border: 0;
 }
 .avec-border {
  border: 1px solid #aaa;
 }
 .avec-border-top {
  border-top: 1px solid #aaa;
 }
 .avec-border-bottom {
  border-bottom: 1px solid #aaa;
 }
 .avec-border-left {
  border-left: 1px solid #aaa;
 }
 .sans-margin {
  margin: 0;
 }
 .avec-margin {
  margin: 1.5em;
 }
 .avec-margin-top {
  margin-top: 1.5em;
 }
 .avec-margin-right {
  margin-right: 1.5em;
 }
 .avec-margin-bottom {
  margin-bottom: 1.5em;
 }
 .avec-margin-bottom05 {
  margin-bottom: .5em;
 }
 .avec-margin-bottom015 {
  margin-bottom: .15em;
 }
 .avec-margin-left {
  margin-left: 1.5em;
 }
 @media screen and (min-width: 40em) {
  .avec-margin-bottom-for-medium {
    margin-bottom: 1.5em;
  }
 }
 .sans-padding {
  padding: 0;
 }
 @media screen and (max-width: 40em) {
  .sans-padding-for-small {
    padding: 0;
  }
 }
 .avec-padding {
  padding: 1em;
 }
 .avec-padding05 {
  padding: .5em;
 }
 .avec-padding-top {
  padding-top: 1em;
 }
 .avec-padding-top05 {
  padding-top: .5em;
 }
 .avec-padding-top15 {
  padding-top: 1.5em;
 }
 .avec-padding-right {
  padding-right: 1em;
 }
 .avec-padding-right05 {
  padding-right: .5em;
 }
 .avec-padding-bottom {
  padding-bottom: 1em;
 }
 .avec-padding-left {
  padding-left: 1em;
 }
 .avec-padding-leftright {
  display: block;
  padding-right: 1em;
  padding-left: 1em;
 }
 .display-block {
  display: block;
 }
 .text-transform-none {
  text-transform: none;
 }
 .text-uppercase {
  text-transform: uppercase;
 }
 .font-style-italic {
  font-style: italic;
 }
 .position-relative {
  position: relative;
 }
 .float-left {
  float: left ;
 }
 .float-right {
  float: right ;
 }
 .float-center {
  display: table;
  margin-right: auto ;
  margin-left: auto ;
 }
 .z-index-999 {
  z-index: 999;
 }
 .cursor-pointer {
  cursor: pointer;
 }
 .portailcognac #letexte {
  display: none;
 }
 .portailcognac #content {
  padding: 0;
  background-color: transparent;
 }
 .portailcognac #contenu {
  max-width: 100%;
  width: 100%;
 }
 .portailcognac #contenu #content {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
 }
 #contenu #content img {
  padding: 0;
 }
 #projets {
  margin: 0;
  padding: 0;
 }
 #projets a {
  display: flex;
  flex-direction: row;
  align-content: center;
  height: [(#CONFIG{soyezcreateurs/variante_blocprojet,par2}|=={par2}|?{20vw,7vw})];
  color: white;
  border: none;
 }
 #projets a:hover {
  color: #333;
 }
 #projets h2 {
  width: 100%;
  height: auto;
  margin: auto;
  padding: 0 10px;
  align-self: center;
  color: inherit;
  font-weight: 300;
  text-align: center;
 }
 #projets .suite {
  background-color: rgba(100, 100, 100, 0.5) ;
  display: flex;
  height: auto;
  padding: 0 25px;
 }
 #projets .suite .icon {
  margin: auto;
  align-self: center;
  font-size: 0;
 }
 #projets .suite .icon:before {
  font-size: 3rem;
 }
 @media only screen and (max-width: 1023px) {
  #projets h2 {
    font-size: 36px;
    line-height: 38px;
  }
 }
 @media only screen and (max-width: 767px) {
  #projets .projet {
    width: 100%;
    float: none;
  }
  #projets h2 {
    font-size: 30px;
    line-height: 34px;
  }
 }
 @media only screen and (max-width: 639px) {
  #projets .projet a {
    height: auto;
  }
  #projets h2 {
    padding: 1rem;
    font-size: 26px;
    line-height: 1em;
  }
  #projets .suite {
    padding: 0 15px;
  }
  #projets .suite .icon {
    font-size: 0;
  }
 }
 .hasJS .slider:not(:first-child) { display:none; }
 .hasJS .slick-initialized .slider:not(:first-child) { display:block; }
 .slider-pratique {
  margin: 0 4rem;
 }
 #cycloshow .slick-prev,
 #cycloshow .slick-next,
 .slider-pratique .slick-prev,
 .slider-pratique .slick-next {
  width: 60px;
  height: 70px;
  text-shadow: initial;
 }
 .slider-pratique .slick-prev {
  left: -60px;
 }
 #cycloshow .slick-prev:before,
 .slider-pratique .slick-prev:before {
  content: "\276c";
 }
 .slider-pratique .slick-next {
  right: -60px;
 }
 #cycloshow .slick-next:before,
 .slider-pratique .slick-next:before {
  content: "\276d";
 }
 #cycloshow .slick-prev:before,
 #cycloshow .slick-next:before {
  font-family: "picto-soyezcreateurs" ;
  font-size: 50px;
  opacity: 1;
  color: #FFF;
 }
 .slider-pratique .slick-prev:before,
 .slider-pratique .slick-next:before {
  margin-left: -20px;
  font-family: "picto-soyezcreateurs" ;
  font-size: 50px;
  opacity: 1;
  color: #GET{c_triadea};
 }
 .slider-pratique .slick-prev:hover:before,
 .slider-pratique .slick-prev:focus:before,
 .slider-pratique .slick-next:hover:before,
 .slider-pratique .slick-next:focus:before {
  opacity: 1;
  color: #333 ;
 }
 .slider-pratique button:hover,
 .slider-pratique button:focus {
  background-color: transparent;
 }
 .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
    background: rgba(48,48,48,0.5);
 }
 .slider-pratique .content-pratique {
  background-color: #GET{c_triadeb};
  width: 280px !important;
  margin: 0 24px 0 0;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
 }
 .slider-pratique .content-pratique:hover,
 .slider-pratique .content-pratique:focus {
  background-color: rgba(18, 155, 155, 0.2) ;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
 }
 .slider-pratique .content-pratique:hover h2,
 .slider-pratique .content-pratique:focus h2 {
  color: #129b9b ;
 }
 .slider-pratique .h2 {
  display: flex;
  height: 150px;
  margin: 1.5em 0 0 0;
  padding-bottom: 90px;
  font-family: 'Open Sans', sans-serif ;
  font-size: 26px;
  color: white;
  font-weight: 300;
  text-align: right;
  border-bottom: none;
 }
 .slider-pratique .h2 .titre-pratique {
  width: 100%;
  align-self: center;
  padding: 10px;
  text-align: right;
  border-right: 1px solid;
 }
 .slider-pratique .h2 .icon {
  align-self: center;
  padding: 7px 15px 7px 7px;
  font-size: 0;
 }
 .slider-pratique .h2 .icon:before {
  font-size: 30px;
 }
 @media only screen and (max-width: 400px) {
  .slider-pratique {
    margin: 0 2.8rem;
  }
  .slider-pratique .content-pratique {
    width: 240px !important;
  }
  .slider-pratique .h2 {
    height: 130px;
    padding-bottom: 0;
    font-size: 21px;
  }
 }
 #content .titre-sommaire {
  margin-top: 4em;
 }
 #content .titre-sommaire:before {
  content: "";
  display: block;
  background-color: #GET{c_titraille};
  width: 100%;
  height: 1px;
 }
 #content .titre-sommaire h1 {
  display: block;
  background-color: #GET{c_titraille_bk};
  max-width: [(#GET{LargeurContaineur}|moins{40})]px;
  margin: -1.1em auto .5em auto;
  padding: .5em .8em .5em;
  color: #GET{c_titraille};
  font-size: 2rem;
  line-height: 1em;
  border-left: 1px solid #GET{c_titraille};
 }
 @media screen and (max-width: 1178px) {
   #content .titre-sommaire h1 {
    border-left: none;
  }
 }
 .slick-slider {
  margin-bottom: 0;
 }
 .slider-slick img {
  width: 100%;
 }
 .slick-slide img {
  margin: 0 auto;
 }
 .slick-slide .row {
  max-width: none;
 }
 .slick-dots {
  bottom: -45px;
 }
 .slick-dots li {
  width: 30px;
  height: 30px;
 }
 .slick-dots li button {
  width: 30px;
  height: 30px;
 }
 .slick-dots li button::before {
  font-size: 20px;
  line-height: 30px;
  width: 30px;
  height: 30px;
 }
 .slick-dots li.slick-active button::before {
  color: #GET{c_triadea};
 }
 #liens-diaporama {
  position: absolute;
  top: 100px;
  right: 0;
  z-index: 1;
 }
 @media only screen and (max-width: 1024px) {
   #liens-diaporama {
    top: 5vw;
  }
 }
 @media only screen and (max-width: 767px) {
   #liens-diaporama {
    position: relative;
 	z-index: 0;
  }
 }
 #liens-diaporama ul {
  width: 220px;
  text-align: right;
 }
 @media only screen and (max-width: 767px) {
  #liens-diaporama ul {
    width: 100%;
 	margin: 0;
  }
  #liens-diaporama li {
    padding: 0;
 	width: 100%;
  }
 }
 @media only screen and (max-width: 767px) {
   #liens-diaporama li a span {
    padding: .25em 0;
  }
 }
 #liens-diaporama li a span.icon {
  margin-left: .55rem;
  padding: .85rem .5rem;
  font-size: 0;
  border-left: 1px solid #GET{c_titraille};
 }
 #liens-diaporama li a span.icon:before {
  font-size: 2.15rem;
 }
 #liens-diaporama li a:hover {
  color: #666 ;
 }
 @media only screen and (max-width: 767px) {
   #liens-diaporama li a {
    background-color: #eae9e5;
  }
 }
 #actualites {
  margin-top: 7em;
  margin-bottom: 5em;
 }
 #lesprojets {
  margin-top: 0em;
  margin-bottom: 5em;
 }
 #lesprojets .titre-sommaire {
  display: none;
 }
 #pratique {
  margin-top: 6.5em;
  margin-bottom: 4em;
 }
 .clearfix:after,
 .grid:after {
  content: '';
  display: block;
  clear: both;
 }
 .grid-item .h2 .icon:before {
  font-size: 30px;
 }
 .grid-item-x2 {
  width: calc(50% - 20px) ;
 }
 .grid-item-x3 {
  width: calc(75% - 20px) ;
 }
 .VideoALaUne figcaption { display: none; }
 .VideoALaUne .spip_documents.spip_documents_center { margin-bottom: 0; }
 .VideoALaUne .spip_documents .oembed {
  background: transparent;
  padding: 8px;
  border: none;
 }
 #sommaire_mode_portailcognac header .logo_rubrique { margin-bottom: 3em; }
 #liens-diaporama {
  position: absolute;
  top: 100px;
  right: 0;
 }
 @media only screen and (max-width:[(#GET{LargeurContaineur})]px) {
  #liens-diaporama {
    top: 5vw;
  }
 }
 @media only screen and (max-width: 767px) {
  #liens-diaporama {
    position: relative;
  }
 }
 #liens-diaporama ul {
  width: 220px;
  text-align: right;
 }
 @media only screen and (max-width: 767px) {
  #liens-diaporama ul {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
  }
 }
 #liens-diaporama li {
  /* Si le fond est clair, on va le prendre comme couleur de fond, sinon, la couleur d'écriture Texte : #GET{c_header}([(#GET{c_header}|couleur_extreme)])/ Fond : #GET{c_header_bk}([(#GET{c_header_bk}|couleur_extreme)]) */
  background-color: rgba([(#GET{c_header_bk}|couleur_extreme|=={ffffff}|?{#GET{c_header_bk},#GET{c_header}}|sc_rgb)], 0.75);
 }
 #diaporama .liste_auteurs { text-align: left; padding: 0 1em; }
 #diaporama .datepublication,
 #cycloshow .datepublication {
 	float: none;
 	background-color : transparent;
 	color: inherit;
 }
 #liens-diaporama li a {
  display: flex;
  font-size: 1.2em;
  color: [(#GET{c_header_bk}|couleur_extreme|=={ffffff}|?{#GET{c_header},#GET{c_header_bk}})];
  justify-content: flex-end;
  line-height: 1 ;
  align-items: center;
 }
 #liens-diaporama li a span {
  padding: .5em .25em .5em .5em;
 }
 @media only screen and (max-width: 767px) {
  #liens-diaporama li a span {
    padding: .25em .5em;
  }
 }
 #liens-diaporama li a span.icon {
  border-left: 1px solid;
  border-left-color: inherit;
 }
 .slick-slide img {
  margin: 0 auto;
 }
 .slick-slide .row {
  max-width: none;
 }
 .slick-dots {
  bottom: -45px;
 }
 .slick-dots li {
  width: 30px;
  height: 30px;
 }
 .slick-dots li button {
  width: 30px;
  height: 30px;
 }
 .slick-dots li button::before {
  font-size: 20px;
  line-height: 30px;
  width: 30px;
  height: 30px;
 }
 #content img {
  padding: 0;
 }
 .clearfix:after,
 .grid:after {
  content: '';
  display: block;
  clear: both;
 }
 #diaporama {
 	position: relative;
 }
 #editotexte {
  max-width: [(#GET{LargeurContaineur}|moins{44})]px;
  margin: 0 auto;
  padding: 1em 2em;
  color: #GET{c_container};
  background-color: #GET{c_container_bk};
  [(#CONFIG{soyezcreateurs_couleurs/transparencecontent,1}|!={1}|oui)background-color: rgba([(#GET{c_container_bk}|sc_rgb)], #CONFIG{soyezcreateurs_couleurs/transparencecontent,1});]
 }
 #content #edito .titre-sommaire h1 {
 	margin-bottom: 0;
 }
 img.editologo {
  max-width: [(#GET{LargeurContaineur})]px;
  margin: 0 auto;
  display: block;
 }
 /* gestion block texte sur slider : CycloShow */
 #cycloshow {
 	position: relative;
 	max-width: #GET{LargeurContaineur}px;
 	width: 100%;
    margin: 0 auto 7em auto;
 }
 .slider-diapo-imgfull {
  position: relative;
 }
 @media screen and (max-width: 39.9375em) {
  .hide-for-small-only {
    display: none !important;
  }
 }
 .slider-content.desc-gauche {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: rgba(152, 152, 152, 0.7);
  top: 0;
  bottom: 0;
  left: 8%;
  width: 27%;
  padding: 1.75em !important;
 }
 #content .slider-content.desc-gauche h3 {
  margin: 0 0 1em 0;
  padding: 0;
  color: #GET{c_triadec};
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 2.15em;
  line-height: 1.15em;
  text-align: left;
 }
 .slider-content.desc-gauche p {
  font-size: 1.25em;
  color: white;
  line-height: 1.35;
 }
 @media screen and (max-width: 100em) {
  .slider-content.desc-gauche h3 {
    margin: 0 0 .5em;
    font-size: 1.75em;
  }
  .slider-content.desc-gauche p {
    font-size: 1.1em;
  }
 }
 @media screen and (max-width: 80em) {
  .slider-content.desc-gauche {
    left: 8%;
    width: 346px;
    padding: 1.5em !important;
  }
  .slider-content.desc-gauche h3 {
    margin: 0 0 .5em;
    font-size: 1.5em;
  }
  .slider-content.desc-gauche p {
    font-size: 1.1em;
  }
 }
 @media screen and (max-width: 410px) {
  .slider-content.desc-gauche {
    left: 0;
    width: 100%;
  }
 }
 .largeurcontrainte {
 	max-width: [(#GET{LargeurContaineur}|moins{40})]px;
 	margin: 0 auto;
 	text-align: center;
 }
 #masonry {
  max-width: #GET{LargeurContaineur}px;
  margin: 0 auto;
  padding-left: 20px;
  text-align: center;
 }
 .grid {
  text-align: center;
 }
 .grid-item {
  margin-bottom: 20px;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
  background-color: #eae9e5;
  color: [(#GET{c_header_bk}|couleur_extreme|=={000000}|?{#GET{c_header_bk},#GET{c_header}})];
  float: left;
  margin-right: 20px;
 }
 .grid-item a {
  color: inherit;
 }
 .grid-item .content-actus:hover,
 .grid-item .content-actus:focus {
  /* Si le fond est clair, on va le prendre comme couleur de fond, sinon, la couleur d'écriture Texte : #GET{c_header}([(#GET{c_header}|couleur_extreme)])/ Fond : #GET{c_header_bk}([(#GET{c_header_bk}|couleur_extreme)]) */
  background-color: rgba([(#GET{c_header_bk}|couleur_extreme|=={ffffff}|?{#GET{c_header_bk},#GET{c_header}}|sc_rgb)], 0.2);
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
 }
 .grid-item .content-actus {
  /* Si le fond est clair, on va le prendre comme couleur de fond, sinon, la couleur d'écriture Texte : #GET{c_header}([(#GET{c_header}|couleur_extreme)])/ Fond : #GET{c_header_bk}([(#GET{c_header_bk}|couleur_extreme)]) */
  background-color: #[(#GET{c_header_bk}|couleur_extreme|=={ffffff}|?{#GET{c_header_bk},#GET{c_header}}|couleur_foncerluminosite{20})];
 }
 .grid-item .content-actus:nth-child(2) {
  margin-top: 16px;
 }
 .grid-item header {
  font-size: 1.5em;
  font-weight: 300;
  line-height: 21px;
  overflow: auto;
 }
 .agenda strong {
  font-size: 1.8em;
  vertical-align: bottom;
 }
 .agenda .annee {
  font-size: 1.8em;
 }
 .agenda time {
  padding: 0 .25em;
 }
 .agenda {height: 95px; }
 .grid-item .h2 {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 95px;
  margin: 0;
  font-size: 21px;
  font-weight: 400;
  color: inherit;
  line-height: 21px;
  padding: 10px;
  text-align: right;
  border: none;
 }
 .grid-item .agenda .h2 {
  font-size: 18px;
 }
 .grid-item .agenda .date {
  padding: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .agenda time {
    text-align: center;
 }
 .agenda .debutfin time {
    text-align: left;
 }
 .grid-item .agenda .date.debutfin {
  display: block;
  align-items: left;
  justify-content: left;
 }
 .grid-item .h2 .icon {
  font-size: 0;
  align-self: center;
  padding: 7px 0 7px 7px;
 }
 .grid-item .h2 .titre-actus {
    width: 100%;
    align-self: center;
    padding: 10px 10px 10px 0;
    border-right: 1px solid;
 }
 .grid-item img {
  max-width: 100%;
  width: 100%;
  max-height: [(#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340})]px;
-}
+  background-color: #GET{c_body_bk};
-.grid-item {
+}
-  margin-bottom: 20px;
+.grid-item {
-}
+  margin-bottom: 20px;
-/* Affichage des dates. cf https://codepen.io/jpyrat/pen/EmZrpR */
+}
-.date {
+/* Affichage des dates. cf https://codepen.io/jpyrat/pen/EmZrpR */
-  width: 95px;
+.date {
-  height: 95px;
+  width: 95px;
-  position: relative;
+  height: 95px;
-  background: [(#GET{c_header_bk}|couleur_extreme|=={000000}|?{#GET{c_header_bk},#GET{c_header}})];
+  position: relative;
-  color: [(#GET{c_header_bk}|couleur_extreme|=={000000}|?{#GET{c_header},#GET{c_header_bk}})];
+  background: [(#GET{c_header_bk}|couleur_extreme|=={000000}|?{#GET{c_header_bk},#GET{c_header}})];
-}
+  color: [(#GET{c_header_bk}|couleur_extreme|=={000000}|?{#GET{c_header},#GET{c_header_bk}})];
+}
-.debutfin:after {
-  content: "";
+.debutfin:after {
-  position: absolute;
+  content: "";
-  right: 0;
+  position: absolute;
-  top: 0;
+  right: 0;
-  border-top: 2px solid #fff;
+  top: 0;
-  width: 142%;
+  border-top: 2px solid #fff;
-  transform: rotate(-45deg);
+  width: 142%;
-  transform-origin: 99% 0%;
+  transform: rotate(-45deg);
-}
+  transform-origin: 99% 0%;
+}
-.debut, .fin {
-  width: 75%;
+.debut, .fin {
-  height: 50%;
+  width: 75%;
-  position: absolute;
+  height: 50%;
-  text-align: left;
+  position: absolute;
-  display: flex;
+  text-align: left;
-  flex-direction: column;
+  display: flex;
-  justify-content: center;
+  flex-direction: column;
-  color: #fff;
+  justify-content: center;
-  line-height: 1.2em;
+  color: #fff;
-  font-size: 75%;
+  line-height: 1.2em;
-}
+  font-size: 75%;
+}
-.agenda .debutfin time.fin {
-  right: 0;
+.agenda .debutfin time.fin {
-  top: 50%;
+  right: 0;
-  text-align: right;
+  top: 50%;
-}
+  text-align: right;
+}
-.ladate {
-  margin:0;
+.ladate {
-  padding:0;
+  margin:0;
-}
+  padding:0;
+}
-.annee {
-  font-size: 1.2em;
+.annee {
-  line-height: 0.82em;
+  font-size: 1.2em;
-  display: block;
+  line-height: 0.82em;
-}
+  display: block;
+}
-/*
-M : [(#GET{masonry}|mult{4}|moins{100})]
+/*
-LC: #GET{LargeurContaineur}
+M : [(#GET{masonry}|mult{4}|moins{100})]
-*/
+LC: #GET{LargeurContaineur}
-.gutter-sizer { width: 20px; }
+*/
-[(#GET{masonry}|mult{4}|moins{100}|<={#GET{LargeurContaineur}}|oui)
+.gutter-sizer { width: 20px; }
-/* M <= LC */
+[(#GET{masonry}|mult{4}|moins{100}|<={#GET{LargeurContaineur}}|oui)
-	.grid-sizer, .grid-item {
+/* M <= LC */
-	  width: calc(25% - 20px);
+	.grid-sizer, .grid-item {
-	}
+	  width: calc(25% - 20px);
-	.grid-item {
+	}
-	  height: calc([(#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340})]px + 65px);
+	.grid-item {
-	}
+	  height: calc([(#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340})]px + 65px);
-	.grid-item-demie {
+	}
-	  height: calc(127px + 65px);
+	.grid-item-demie {
-	  margin-bottom: 0;
+	  height: calc(127px + 65px);
-	}
+	  margin-bottom: 0;
-	.grid-item-x2 {
+	}
-	  width: calc(50% - 20px);
+	.grid-item-x2 {
-	}
+	  width: calc(50% - 20px);
-	.grid-item-x3 {
+	}
-	  width: calc(75% - 20px);
+	.grid-item-x3 {
-	}
+	  width: calc(75% - 20px);
-	@media only screen and (max-width: #GET{LargeurContaineur}px) {
+	}
-	  .grid-item {
+	@media only screen and (max-width: #GET{LargeurContaineur}px) {
-		height: calc([(#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340})]px + 90px);
+	  .grid-item {
-	  }
+		height: calc([(#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340})]px + 90px);
-	  .grid-item-demie {
+	  }
-		height: calc(127px + 90px);
+	  .grid-item-demie {
-		margin-bottom: 0;
+		height: calc(127px + 90px);
-	  }
+		margin-bottom: 0;
-	}
+	  }
-]
+	}
-[(#GET{masonry}|mult{4}|moins{100}|<={#GET{LargeurContaineur}}|non)
+]
-/* M > LC */
+[(#GET{masonry}|mult{4}|moins{100}|<={#GET{LargeurContaineur}}|non)
-	.grid-sizer, .grid-item {
+/* M > LC */
-	  width: calc(33.333% - 20px);
+	.grid-sizer, .grid-item {
-	}
+	  width: calc(33.333% - 20px);
-	.grid-item {
+	}
-	height: calc([(#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340})]px + 90px);
+	.grid-item {
-	}
+	height: calc([(#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340})]px + 90px);
-	.grid-item-demie {
+	}
-	height: calc(127px + 90px);
+	.grid-item-demie {
-	margin-bottom: 0;
+	height: calc(127px + 90px);
-	}
+	margin-bottom: 0;
-	.grid-item-x2 {
+	}
-	width: calc(66.666% - 20px);
+	.grid-item-x2 {
-	}
+	width: calc(66.666% - 20px);
-	.grid-item-x3 {
+	}
-	width: calc(100% - 20px);
+	.grid-item-x3 {
-	}
+	width: calc(100% - 20px);
-]
+	}
-@media only screen and (max-width:[(#GET{masonry}|mult{4}|moins{100})]px) {
+]
-  .grid-sizer, .grid-item {
+@media only screen and (max-width:[(#GET{masonry}|mult{4}|moins{100})]px) {
-    width: calc(33.333% - 20px);
+  .grid-sizer, .grid-item {
-  }
+    width: calc(33.333% - 20px);
-  .grid-item {
+  }
-    height: calc([(#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340})]px + 90px);
+  .grid-item {
-  }
+    height: calc([(#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340})]px + 90px);
-  .grid-item-demie {
+  }
-    height: calc(127px + 90px);
+  .grid-item-demie {
-	margin-bottom: 0;
+    height: calc(127px + 90px);
-  }
+	margin-bottom: 0;
-  .grid-item-x2 {
+  }
-    width: calc(66.666% - 20px);
+  .grid-item-x2 {
-  }
+    width: calc(66.666% - 20px);
-  .grid-item-x3 {
+  }
-    width: calc(100% - 20px);
+  .grid-item-x3 {
-  }
+    width: calc(100% - 20px);
-}
+  }
-@media only screen and (max-width: [(#GET{masonry}|mult{3}|moins{80})]px) {
+}
-  .grid-sizer, .grid-item {
+@media only screen and (max-width: [(#GET{masonry}|mult{3}|moins{80})]px) {
-    width: calc(50% - 20px);
+  .grid-sizer, .grid-item {
-  }
+    width: calc(50% - 20px);
-  .grid-item {
+  }
-    height: calc([(#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340})]px + 90px);
+  .grid-item {
-  }
+    height: calc([(#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340})]px + 90px);
-  .grid-item-demie {
+  }
-    height: calc(127px + 90px);
+  .grid-item-demie {
-	margin-bottom: 0;
+    height: calc(127px + 90px);
-  }
+	margin-bottom: 0;
-  .grid-item-x2 {
+  }
-    width: calc(100% - 20px);
+  .grid-item-x2 {
-  }
+    width: calc(100% - 20px);
-}
+  }
-@media only screen and (max-width: [(#GET{masonry}|mult{2}|moins{60})]px) {
+}
-  .grid-sizer, .grid-item {
+@media only screen and (max-width: [(#GET{masonry}|mult{2}|moins{60})]px) {
-    width: calc(100% - 20px);
+  .grid-sizer, .grid-item {
-  }
+    width: calc(100% - 20px);
-  .grid-item {
+  }
-    height: auto;
+  .grid-item {
-  }
+    height: auto;
-}
+  }
-#projets {
+}
-  margin: 0;
+#projets {
-  padding: 0;
+  margin: 0;
-}
+  padding: 0;
-#projets .projet {
+}
-  background-color: #777;
+#projets .projet {
-}
+  background-color: #777;
-@media only screen and (min-width: 768px) {
+}
- #projets .projet {
+@media only screen and (min-width: 768px) {
-[(#CONFIG{soyezcreateurs/variante_blocprojet,par2}|=={par2}|oui)
+ #projets .projet {
-  width: 50%;
+[(#CONFIG{soyezcreateurs/variante_blocprojet,par2}|=={par2}|oui)
-]
+  width: 50%;
-[(#CONFIG{soyezcreateurs/variante_blocprojet,par2}|=={par3}|oui)
+]
-  width: 25%;
+[(#CONFIG{soyezcreateurs/variante_blocprojet,par2}|=={par3}|oui)
-  margin-left: 4%;
+  width: 25%;
-  margin-right: 4%;
+  margin-left: 4%;
-]
+  margin-right: 4%;
-  float: left;
+]
- }
+  float: left;
-}
+ }
+}
-#projets .projet:hover {
-  background-color: #aaa;
+#projets .projet:hover {
-}
+  background-color: #aaa;
+}
-@media only screen and (max-width:[(#GET{LargeurContaineur})]px) {
-  #projets h2 {
+@media only screen and (max-width:[(#GET{LargeurContaineur})]px) {
-    font-size: 2.5rem;
+  #projets h2 {
-  }
+    font-size: 2.5rem;
-}
+  }
-@media only screen and (max-width: 768px) {
+}
-  #projets h2 {
+@media only screen and (max-width: 768px) {
-    font-size: 2rem;
+  #projets h2 {
-  }
+    font-size: 2rem;
-}
+  }
-@media only screen and (max-width: 640px) {
+}
-  #projets article {
+@media only screen and (max-width: 640px) {
-    width: 100%;
+  #projets article {
-    float: none;
+    width: 100%;
-  }
+    float: none;
-  #projets article a {
+  }
-    height: auto;
+  #projets article a {
-  }
+    height: auto;
-  #projets h2 {
+  }
-    padding: 1rem;
+  #projets h2 {
-    font-size: 1.8rem;
+    padding: 1rem;
-  }
+    font-size: 1.8rem;
-}
+  }
+}
-#pratique {
-  margin-bottom: 4em;
+#pratique {
-}
+  margin-bottom: 4em;
+}
-<BOUCLE_CouleursRubriques(MOTS){type=_CouleurRubrique}{par id_mot}>
-.grid-item .couleurrubrique#ID_MOT,
+<BOUCLE_CouleursRubriques(MOTS){type=_CouleurRubrique}{par id_mot}>
-#projets .couleurrubrique#ID_MOT { [background-color: #(#TEXTE|textebrut);][ color: #(#TEXTE|textebrut|couleur_extreme|couleur_inverser);] }
+.grid-item .couleurrubrique#ID_MOT,
-.grid-item .couleurrubrique#ID_MOT:hover,
+#projets .couleurrubrique#ID_MOT { [background-color: #(#TEXTE|textebrut);][ color: #(#TEXTE|textebrut|couleur_extreme|couleur_inverser);] }
-.grid-item .couleurrubrique#ID_MOT:focus,
+.grid-item .couleurrubrique#ID_MOT:hover,
-#projets .couleurrubrique#ID_MOT:hover,
+.grid-item .couleurrubrique#ID_MOT:focus,
-#projets .couleurrubrique#ID_MOT:focus  { [background-color: #(#TEXTE|textebrut|couleur_eclaircir);] }
+#projets .couleurrubrique#ID_MOT:hover,
-</BOUCLE_CouleursRubriques>
+#projets .couleurrubrique#ID_MOT:focus  { [background-color: #(#TEXTE|textebrut|couleur_eclaircir);] }
+</BOUCLE_CouleursRubriques>
-[(#PLUGIN{lesscss}|oui)
-	[(#CHEMIN{images/stylesportailcognac_perso.less.html}|?{'/* Surcharge eventuelle */'})
+[(#PLUGIN{lesscss}|oui)
+	[(#CHEMIN{images/stylesportailcognac_perso.less.html}|?{'/* Surcharge eventuelle */'})
-		[(#PRODUIRE{fond=images/stylesportailcognac_perso.less,format=less}
-				|supprimer_timestamp
+		[(#PRODUIRE{fond=images/stylesportailcognac_perso.less,format=less}
-				|appliquer_filtre{less_css}
+				|supprimer_timestamp
-				|file_get_contents
+				|appliquer_filtre{less_css}
-		)
+				|file_get_contents
-		#SET{lessdone,1}
+		)
-		]
+		#SET{lessdone,1}
-	]
+		]
-]
+	]
-[(#GET{lessdone}|non)
+]
-[(#CHEMIN{images/stylesportailcognac_perso.css}|?{'/* Surcharge eventuelle */'})
+[(#GET{lessdone}|non)
-[(#INCLURE{#CHEMIN{images/stylesportailcognac_perso.css}|url_absolue_css}|compacte{css})]
+[(#CHEMIN{images/stylesportailcognac_perso.css}|?{'/* Surcharge eventuelle */'})
-]
+[(#INCLURE{#CHEMIN{images/stylesportailcognac_perso.css}|url_absolue_css}|compacte{css})]
+]
 ]
\ No newline at end of file