/*
body.archive .container-content,
body.search .container-content,
body.blog .container-content{
    width: 100%;
    max-width: var(--wideSize);
}

.container-title,
.container-metas{
}

body.page:not(.home) .container-content,
body.single .container-content{
    width: var(--contentSize);
}
*/

:root {
  --hauteur-logo-roller: 15vh;
  --hauteur-logo-roller-mini: 70px;
}

/**************************/
/*******généralités********/
/**************************/

html {
  margin: 0 !important;
}

body {
  font-weight: 100;
}

body.has-sidebar #main-container {
  display: flex;
  flex-direction: row;
}

h1 {
  font-size: var(--font-size-x-large);
  font-weight: 700;
}

h2 {
  font-size: var(--font-size-x-large);
  font-weight: 400;
}

.container-content,
.main-sidebar {
  padding-top: 5vh;
}

.display-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.display-grid > article.post-extrait {
  border: 2px solid var(--couleur-4);
}

article.post-extrait {
  user-select: none;
}

article.post-extrait h3 {
  margin: 0;
  text-transform: uppercase;
  font-size: var(--font-size-large);
  padding: 0;
}

article.post-extrait h3 > a.extrait-content {
  padding: 1rem;
  display: block;
  margin: 0;
}

article.post-extrait .post-thumbnail > a {
  padding: 0.5rem;
}

article.post-extrait .date {
  text-transform: uppercase;
  display: block;
  font-size: var(--font-size-medium);
  font-weight: 100;
  color: var(--couleur-2);
}

article.post-extrait .excerpt {
  padding: 0 1rem;
  font-size: 0.85em;
}

.fond-chargement .logo-site {
  width: 100px;
  min-width: 0;
}

.fond-chargement * + .loading-site {
  margin-top: 0;
}

.fond-chargement .loading-site {
  width: 35px;
  height: 35px;
}

/*********************/
/*******header********/
/*********************/

/* logo */

header#colleno {
  height: auto;
  background-color: var(--couleur-2);
  transition: all var(--transition-basic-duration);
}

header#colleno.mini {
  height: auto;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
}

.header-container {
  position: relative;
  height: 100%;
  flex-direction: column;
  padding: 1rem 0 3rem;
}

header#colleno.mini .header-container {
  padding: 1rem 0 0.75rem;
}

.header-container section.block-logo {
  position: relative;
  margin-bottom: 2rem;
  height: var(--hauteur-logo-roller);
  width: 100%;
}

header#colleno.mini .header-container section.block-logo {
  height: 0;
  margin-bottom: 0;
}

.header-container .block-logo a.logo_box {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  display: block;
  height: var(--hauteur-logo-roller);
}

header#colleno.mini .header-container .block-logo a.logo_box {
  top: -1.4rem;
  left: 0;
  height: var(--hauteur-logo-roller-mini);
}

header#colleno .header-container .block-logo a img,
header#colleno .header-container .block-logo a svg {
  display: block;
  height: 100%;
  width: auto;
  min-height: 0;
}

.block-primary-menu {
  font-family: var(--font-menu);
  font-size: var(--font-size-x-large);
}

.block-primary-menu ul.menu > li {
  text-transform: uppercase;
  display: flex;
  align-items: center;
}

.block-primary-menu ul.menu > li ul.sub-menu {
  text-transform: none;
}

.block-primary-menu ul.menu > li > a {
  color: var(--couleur-fond);
}

.block-primary-menu
  ul.menu
  > li:not(.menu-item-has-children)
  .double-chevron-down {
  display: none;
}

.block-primary-menu ul.menu > li > .double-chevron-down {
  margin-left: -0.25rem;
}

.block-primary-menu ul.menu > li > .double-chevron-down svg {
  height: 15px;
  width: auto;
}

.block-primary-menu ul.menu > li > .double-chevron-down path {
  stroke: var(--couleur-1);
}

.block-primary-menu ul.menu > li.current-menu-item > a,
.block-primary-menu ul.menu > li.current-menu-ancestor > a {
  color: var(--couleur-1);
}

.block-primary-menu ul.menu > li.current-menu-item > a:before,
.block-primary-menu ul.menu > li.current-menu-ancestor > a:before {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  height: 1px;
  width: 100%;
  background: var(--couleur-1);
}

.block-primary-menu ul.sub-menu {
  background: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-texte);
  padding-top: 1.2rem;
}

.block-primary-menu ul.sub-menu > li > a {
  background: var(--couleur-2);
  color: var(--couleur-3);
}

.block-primary-menu ul.sub-menu > li.current-menu-item > a {
  color: var(--couleur-1);
}

/*****************/
/*****contact*****/
/*****************/

.zone-contacts {
  display: flex;
  padding-top: 3rem;
}

.zone-contact-coordonnees {
  flex: 0.3;
}

.zone-contact-form {
  flex: 0.7;
}

.wpcf7-list-item-label {
  font-size: var(--font-size-small);
}

/**********************/
/*****fil d'Ariane*****/
/**********************/

.breadcrumbs {
  margin: 1.75rem 0 0 2.5rem;
  text-transform: uppercase;
  font-style: italic;
  font-size: var(--font-size-small);
}

.breadcrumbs a {
  color: inherit;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

.breadcrumbs span span {
  position: relative;
  padding-right: 1rem;
  margin-right: 1rem;
}

.breadcrumbs span span::after {
  content: "";
  position: absolute;
  right: -1rem;
  top: 50%;
  width: 0.5rem;
  height: 0.375rem;
  transform: translate(-100%, -50%);
  background-image: url("../images/pictos/breadcrumbs-picto.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

.breadcrumbs span span.breadcrumb_last::after {
  display: none;
}

/****************/
/*****footer*****/
/****************/

footer#colophon {
  max-width: 100vw;
  overflow: hidden;
  background: var(--couleur-2);
  padding: 1.5rem 2rem 2.5rem;
}

footer#colophon a {
  color: var(--couleur-fond);
}

.footer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.wp-block-separator {
  border-top-width: 1px;
}

.wp-block-separator.is-style-default {
  width: 35vw;
}

.block-reseaux-sociaux > ul > li > a {
  height: 46px;
  width: 46px;
}

.block-reseaux-sociaux > ul > li > a > svg {
  fill: var(--couleur-fond);
}

.block-reseaux-sociaux + .block-copyright {
  margin-top: 1rem;
}

.block-copyright {
  color: var(--couleur-fond);
}

.block-copyright .item-copyright {
  padding: 0 0.5rem;
}

/****************/
/*****sidebar*****/
/****************/
.main-sidebar {
  margin-right: var(--margin-right-sidebar);
  width: 18vw;
}

.main-sidebar img,
.main-sidebar .wp-block-image.size-full {
  width: 100%;
  height: auto;
}

/****************/
/*****page*******/
/****************/
.page-title {
  font-size: var(--font-size-x-large);
}

.page-title h1.entry-title {
  font-size: var(--font-size-xx-large);
  color: var(--couleur-1);
  margin-bottom: 2rem;
}

/**************************/
/*****entry-content*******/
/****************/

:root :where(.is-layout-constrained) > * {
  margin-block-start: 1rem;
}

.entry-content ul li {
  list-style-type: none;
  margin-left: var(--item-list-margin);
  position: relative;
}

.entry-content ul li::before {
  content: "";
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  background: var(--couleur-1);
  position: absolute;
  left: calc(-1 * var(--item-list-margin));
  top: 0.4rem;
}

.entry-content h2 {
  color: var(--couleur-1);
  font-weight: 600;
  font-size: var(--font-size-x-large);
  margin-bottom: 0rem;
}

.entry-content * + h2 {
  margin-top: 2.5rem;
}

.entry-content p {
  padding-top: 0;
}

/*****************/
/*****archive*****/
/*****************/

.archive-wrapper {
  display: flex;
  flex-direction: column;
  width: auto;
}

.archive-wrapper .post-extrait {
  display: flex;
  flex-direction: row;
}

article.post-extrait {
  transition: var(--transition-basic);
}

article.post-extrait:hover {
  transform: scale(1.03);
  background: var(--couleur-1);
}

article.post-extrait:hover h3 > a.extrait-content {
  color: var(--couleur-fond);
}

.post-thumbnail {
  overflow: hidden;
}

article.post-extrait > * + .post-content {
  margin-left: 0;
}

/*****************/
/*****metas single*****/
/*****************/
body.single .container-metas {
  justify-content: flex-start;
  padding: 0.25rem 0;
}

.entry-meta {
  margin-bottom: 0;
}

.single-thumbnail {
  width: 50%;
}

.single-thumbnail .post-thumbnail,
.single-thumbnail img {
  width: 100% !important;
  height: auto;
}

/*****************/
/*****pagination*****/
/*****************/
.page-numbers {
  margin-top: 2rem;
}

/*************************/
/*****bloc flex-start*****/
/*************************/

/*règles CSS permettant de gérer l'affichage d'un contenu flex en flex start
centré dans un conteneur
structure :

<div class="flex-start-container">
    <div class="flex-start-wrapper">
        <div class="flex-start-element">


        </div>
    </div>
        <div class="flex-start-wrapper">
        <div class="flex-start-element">


        </div>
    </div>
</div>
*/

:root {
  --flex-start-container-width: 84vw;
  --flex-start-nb-columns: 5;
  --flex-start-element-width: calc(100% / var(--flex-start-nb-columns));
  --flex-start-element-height: 20vw;
  --flex-start-element-padding: 0.8vw;
}

.flex-start-container {
  width: var(--flex-start-container-width);
  padding: var(--flex-start-element-padding);
}

.flex-start-wrapper {
  width: var(--flex-start-element-width);
  height: var(--flex-start-element-height);
  padding: var(--flex-start-element-padding);
  transition: all var(--transition-basic-duration);
}

.flex-start-element {
  width: 100%;
  height: 100%;
  margin: 0;
}