/*
Theme Name:   Diwan
Text Domain:  diwan
Description:  Thème du site Diwan basé sur Chaplin
Author:       cherpove
Author URL:   https://www.diwan-centre.net
Template:     chaplin
Version:      1.0.5
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/*
   ACO: ajustement du css avec comme finalité
   - avoir une image de background sur les franges en plus d'un fond uni
   - réduire les espaces entre blocs qui sont parfois très larges
*/

/*
    0- 	CSS Reset
    1- 	Document Setup
    2- 	Element Base
    3- 	Helper Classes
    4- 	Site Header
    5- 	Modal: Menu
    6- 	Modal: Search
    7- 	Page Templates
        a- 	Template: Cover Template
        b- 	Template: Only Content
        c- 	Template: Full Width
        d-	Template: Full Width with Only Content
    8- Post: Archive
    9- Post: Single
    10- Blocks
    11- Entry Content
    12- Comments
    13- Site Pagination
    14- Error 404
    15- WooCommerce
    16- Widgets
    17- Site Footer
    18- Media Queries
*/

/**

    Rappel de la structure générale de page

    section-inner : wrapper principal dans les sections principales
    permet de centrer le contenu dans le conteneur en jouant sur la largeur
    assure également l'alignement du contenu

    body
        header (site-header)
            > header-inner > div.section-inner
            > search-modal cover-modal > search-modal-inner modal-inner > div.section-inner
        menu-modal cover-modal > menu-wrapper section-inner
        main (site-content)
            > article section-inner
                > comments-wrapper > respond > form section-inner
        footer (site-footer)
            > footer-widgets-outer-wrapper section-inner
            > footer-inner section-inner
*/

/* 1- Document setup */

/**
 * Palettes de couleurs
 * C'est la même couleur qui est disponible dans le configurateur de bloc,
 * voir pour cela le fichier functions.php
 */
:root {
    --c-aliceblue: #e8eff3; /* hsl(202,31,93) - primary white 2 */
    --c-black: #000; /* hsl(0,0,0) - noir */
    --c-blue: #1e00ff; /* hsl(247,100,50) - secondary */
    --c-bluegreen: #148eb3; /* hsl(194,80,39) - primary-accent */
    --c-bluesapphire: #005270; /* hsl(196,100,22) - primary */
    --c-burntorange: #cc4b00; /* hsl(22,100,40) - complementaire */
    --c-cadet: #607076; /* hsl(196,10,42) - primary atténué 1 */
    --c-cadetgrey: #92a4aa; /* hsl(195,12,62) - primary atténué 4 */
    --c-cultured: #f2f6f8; /* hsl(200,30,96) - primary white 1 */
    --c-davysgrey: #4e4e4e; /* tsl(0,0,31) - gris sombre */
    --c-ghostwhite: #eeeff6; /* hsl(233,31,95) - primary white 3 */
    --c-gunmetal: #033344; /* hsl(196,92,14) - primary sombre 2 */
    --c-indigodye: #003d52; /* hsl(195,100,16) - primary sombre 1 */
    --c-outerspacecrayola: #2c3e44; /* hsl(195,21,22) - primary texte */
    --c-platinum: #ededed; /* hsl(0, 0, 93) - gris clair */
    --c-slategray: #6f8085; /* hsl(194,9,48) - primary atténué 2 */
    --c-sonicsilver: #707070; /* hsl(0,0,44) - gris overlay cover */
    --c-stealteal: #628593; /* hsl(197,20,48) - primary atténué 3 */
    --c-white: #ffffff; /* hsl(0,0,100) - blanc */
}

/**
 * couleurs utilisées 
 * toutes les couleurs font référence à la palette ci-dessus
 */
:root {

    /** couleurs à configurer aussi dans le configurateur */
    --accent-color: var(--c-bluegreen);
    --background-color: var(--c-cultured);
    --border-color: var(--c-bluesapphire);
    --buttons-background-color: var(--c-bluegreen);
    --buttons-text-color: var(--c-white);
    --headings-color: var(--c-bluesapphire);
    --light-background-color: var(--c-platinum); /** verifier */
    --overlay-text-color: var(--c-white); /** verifier */
    --primary-color: var(--c-outerspacecrayola); /** text color */
    --secondary-color: var(--c-burntorange);

    /** couleurs - à modifier seulement ici */
    --cover-color: var(--c-sonicsilver);
    --background-color-global: var(--c-gunmetal);
    --background-color-inner: var(--c-aliceblue);
    --discreet-text: var(--c-cadetgrey);
    --border-white: hsla(200, 30%, 96%, 0.1); /* --c-cultured */
    --border-primary: hsla(196, 100%, 22%, 0.1); /* --c-bluesapphire */
    --strip-background-color: var(--c-aliceblue);
    --accent-color-light: hsla(194, 80%, 39%, 0.6); /** --c-bluegreen */
    --discreet-text-light: hsla(195, 12%, 62%, 0.6); /** --c-cadetgrey */

}

/** Autres propriétés css */
:root {
    --max-width: 169rem; /* largeur max contenu */
    --max-width-inner: 102.4rem; /** 103rem; */ /* largeur max header - a synchroniser avec bp */
    --max-width-article: 69rem; /* largeur max colonne article */
    --background-image: url("assets/images/bg.png"); /* image de fond */
}

/** body */
body {
    background-color: var(--background-color-global) !important;
    background-image: none !important;
}

/** main */

#site-content {
    max-width: var(--max-width);
    margin: 0 auto;
    background-image: url("assets/images/bg.png");
    background-size: auto;
    background-attachment: fixed;
    background-color: var(--background-color-inner);
    background-repeat: repeat;
    background-position: left top;
}

#site-content > .section-inner {
    background-color: var(--background-color);
}

/** 2- Elements de base */

p {
    margin-bottom: 2rem;
}

table {
    margin-top: 0;
    margin-bottom: 2rem;
}

ul,
ol {
    /** margin: .5rem 0 1.75rem 1.75rem; */
    margin: 0 0 2rem 0;
}

hr {
    margin: 3rem 0;
}

code, kbd, pre, samp {
    font-size: 0.9em;
}

img.inline {
    display: inline;
}

/** 3- Helper classes */

.section-inner {
    max-width: var(--max-width-inner);
    width: 100%;
    margin: 0 auto;
    padding: 2rem 2rem;
}

.section-inner.thin {
    max-width: var(--max-width-article);
}

.screen-height {
    position: relative;
    top: -2rem; /* à synchroniser avec le padding section-inner */
    min-height: 100vh;
}

/**
 * Responsive images sur les images de preview
 * voir https://www.edgarallan.com/blog/fully-responsive-images
 */

.fixed-image__wrapper {
    overflow: hidden;
    position: relative;
}

.fixed-image__wrapper.aspect-ratio-16x9 { padding-top: 56.25%; }
.fixed-image__wrapper.aspect-ratio-16x10 { padding-top: 62.5%; }
.fixed-image__wrapper.aspect-ratio-4x3 { padding-top: 75%; }
.fixed-image__wrapper.aspect-ratio-1x1 { padding-top: 100%; }
.fixed-image__wrapper.aspect-ratio-3x4 { padding-top: 133.33%; }
.fixed-image__wrapper.aspect-ratio-10x16 { padding-top: 160%; }
.fixed-image__wrapper.aspect-ratio-9x16 { padding-top: 177.77%; }

.fixed-image {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

ul.social-icons {
    flex-wrap: nowrap;
}

/* 4- Header */

#site-header {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 0;
    background-color: var(--background-color);
}

.header-inner {
    min-height: 6rem;
    border-top: 0.4rem solid var(--headings-color);
    border-bottom: 0.1rem solid var(--border-primary);
    box-sizing: content-box;
}

.header-inner.is-sticky {
    max-width: var(--max-width);
    margin: 0 auto;
    width: 100%;
}

.wp-custom-logo .header-titles {
    margin-left: -2rem;
}

.header-inner.is-sticky .site-logo {
    margin-left: 0.5rem;
}

.header-inner.is-sticky .site-logo img {
    max-height: 5rem;
}

.header-inner .section-inner {
    padding-top: 0;
    padding-bottom: 0;
}

.header-toggles .toggle {
    height: 6rem;
}

a.sub-menu-toggle {
    border-left-width: 0px;
}

.site-title,
.site-logo {
    margin: 0 0 0 0;
}

ul.main-menu-alt {
    margin: -2rem 0 0 -3rem; */
}

/* 5- Modal menu */

.menu-bottom {
    margin-bottom: 0;
    padding: 0;
    flex-direction: column-reverse
}

.menu-copyright {
    margin-top: 3rem;
}

/* 6- 	Modal: Search */

.filter-menu {
    transition-property: max-height;
    transition-duration: 0s;
    overflow: hidden;
    display: block;
}

.filter-menu-content {
    display: flex;
    margin: 0;
    margin-bottom: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    flex-wrap: wrap;
    flex-direction: row;
}

div.filter {
    flex: 1 ;
    padding: 0 3.2rem 0 0;
    flex-basis: 15rem;
    display: flex;
    flex-direction: column;
}

h4.filter {
    display: block;
    margin: 5px 0;
    padding: 15px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.007px;
    text-transform: uppercase;
}

ul.filter {
    padding: 1.5rem 0 0;
}

li.filter-option {
    display: flex;
    flex-direction: row;
}

a.filter-option {
    display: flex;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent-color-light);
    text-decoration: none;
    flex-direction: row;
    align-items: center;
}

li.filter-option.selected a.filter-option {
    color: var(--accent-color);
    font-weight: 500;
}

div.filter.disabled h4,
div.filter.disabled li.filter-option a.filter-option {
    color: var(--discreet-text-light);
    cursor: default;
}

div.filter-option.icon {
    padding-left: 1.4rem;
    height: 1.4rem;
    width: 2.8rem;
}

.filter-menu > .header-toggles {
    justify-content: flex-start;
    margin: 0;
}

.header-toggles .toggle.filter-toggle {
    padding: 0;
}

.header-toggles .toggle.filter-toggle:hover,
.header-toggles .toggle.filter-toggle:focus {
    outline: none;
    text-decoration: none;
}

.filter-toggle .toggle-text {
    display: block;
}

.filter-toggle svg {
    height: 1.8rem;
    width: 1.8rem;
}

/* 7- Templates */

/* gradient de haut en bas */
.overlay-header #site-header {
    z-index: 9998; /** 9999 sticky header */
    background: linear-gradient(180deg, var(--c-black) 10%, transparent 100%);
}

.overlay-header .header-inner {
    border-top: 0;
}

/* bas en haut */
.cover-color-overlay::after {
    height: 30%;
    background: linear-gradient(0deg, currentColor 2%, transparent 100%); /* currentColor pour récupérer la couleur d'overlay */
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 1;
}

/* bas en haut */
.cover-color-overlay::before {
    width: 30%;
    top: 0px;
    background: linear-gradient(90deg, currentColor 10%, transparent 100%);
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 1;
}

/** Video in cover mode */

svg:not(:root) {
    overflow: hidden;
}

.icon {
    display: inline-block;
    fill: currentColor;
    height: 1em;
    position: relative; /* Align more nicely with capital letters */
    top: -0.0625em;
    vertical-align: middle;
    width: 1em;
}

.wp-custom-header video,
.wp-custom-header iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100vw;
    max-width: 1000%;
    width: auto;
    min-height: 100%;
    height: auto;
    padding-bottom: 1px;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
}

.wp-custom-header .wp-custom-header-video-button {
    position: absolute;
    top: 60px;
    left: 20px;
    width: 45px;
    height: 45px;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background-color: rgba(34, 34, 34, 0.5);
    color: rgba(255, 255, 255, 0.6);
    -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
}

/* Specificity prevents .color-dark button overrides */
.wp-custom-header .wp-custom-header-video-button:hover,
.wp-custom-header .wp-custom-header-video-button:focus {
    background-color: rgba(34, 34, 34, 0.8);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.8);
}

/* For browsers that support 'object-fit' */
@supports (object-fit: cover) {
    .wp-custom-header video {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: none;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        object-fit: cover;
        -o-object-fit: cover;
    }
}


/** 8- Post archive */

.archive-header {
    padding-bottom: 0rem;
}

/** 9- Post-single */
.featured-media {
    margin-top: 3rem;
}

.post-inner {
    padding-top: 3rem;
    padding-top: 0rem; /* pour cover */
}

.post-navigation {
    margin-top: 3rem;
}

/** single post with agenda - hight-light the date */
.single.category-agenda header h1 {
    position: relative;
    margin-top: 4.5rem;
}

.single.category-agenda header h1 time {
    display: block;
    position: absolute;
    top: -4.5rem;
    left: 50%;
    margin: 0;
    padding: 1rem 2rem;
    border: 0;
    color: var(--c-white);
    font-size: 1.8rem;
    font-style: inherit;
    font-weight: inherit;
    text-align: center;
    transform: translateX(-50%);
    background-color : var(--c-burntorange);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

.post-meta .post-share .meta-icon svg {
    width: 1.8rem; height: 1.8rem;
}

/* 10- Blocks */

/*
 * Palette de couleurs utilisables dans l'éditeur gutenberg,
 * quand une couleur non standard est sélectionnée soit en texte ou en fond
 * la classe associée est utilisée ici
 */

:root .has-aliceblue-color {
    color: var(--c-aliceblue)
}

:root .has-black-color {
    color: var(--c-black)
}

:root .has-blue-color {
    color: var(--c-blue)
}

:root .has-bluegreen-color {
    color: var(--c-bluegreen)
}

:root .has-bluesapphire-color {
    color: var(--c-bluesapphire)
}

:root .has-cadet-color {
    color: var(--c-cadet)
}

:root .has-cadetgrey-color {
    color: var(--c-cadetgrey)
}

:root .has-cultured-color {
    color: var(--c-cultured)
}

:root .has-davysgrey-color {
    color: var(--c-davysgrey)
}

:root .has-ghostwhite-color {
    color: var(--c-ghostwhite)
}

:root .has-gunmetal-color {
    color: var(--c-gunmetal)
}

:root .has-indigodye-color {
    color: var(--c-indigodye)
}

:root .has-burntorange-color {
    color: var(--c-burntorange)
}

:root .has-outerspacecrayola-color {
    color: var(--c-outerspacecrayola)
}

:root .has-platinum-color {
    color: var(--c-platinum)
}

:root .has-slategray-color {
    color: var(--c-slategray)
}

:root .has-sonicsilver-color {
    color: var(--c-sonicsilver)
}

:root .has-stealteal-color {
    color: var(--c-stealteal)
}

:root .has-white-color {
    color: var(--c-white)
}

:root .has-aliceblue-background-color {
    background-color: var(--c-aliceblue)
}

:root .has-black-background-color {
    background-color: var(--c-black)
}

:root .has-blue-background-color {
    background-color: var(--c-blue)
}

:root .has-bluegreen-background-color {
    background-color: var(--c-bluegreen)
}

:root .has-bluesapphire-background-color {
    background-color: var(--c-bluesapphire)
}

:root .has-burntorange-background-color {
    background-color: var(--c-burntorange)
}

:root .has-cadet-background-color {
    background-color: var(--c-cadet)
}

:root .has-cadetgrey-background-color {
    background-color: var(--c-cadetgrey)
}

:root .has-cultured-background-color {
    background-color: var(--c-cultured)
}

:root .has-davysgrey-background-color {
    background-color: var(--c-davysgrey)
}

:root .has-ghostwhite-background-color {
    background-color: var(--c-ghostwhite)
}

:root .has-gunmetal-background-color {
    background-color: var(--c-gunmetal)
}

:root .has-indigodye-background-color {
    background-color: var(--c-indigodye)
}

:root .has-outerspacecrayola-background-color {
    background-color: var(--c-outerspacecrayola)
}

:root .has-platinum-background-color {
    background-color: var(--c-platinum)
}

:root .has-slategray-background-color {
    background-color: var(--c-slategray)
}

:root .has-sonicsilver-background-color {
    background-color: var(--c-sonicsilver)
}

:root .has-stealteal-background-color {
    background-color: var(--c-stealteal)
}

:root .has-white-background-color {
    background-color: var(--c-white)
}

.wp-block-table {
    margin-bottom: 3rem;
}

.wp-block-table.alignfull {
    margin-bottom: 5rem;
}

.wp-block-table.is-style-stripes td, .wp-block-table.is-style-stripes th {
    border-color: var(--border-color);
}

table.is-style-stripes tbody tr:nth-child(2n+1), .wp-block-table.is-style-stripes tbody tr:nth-child(2n+1) {
    background: var(--strip-background-color);
}

.wp-block-table table {
    margin-bottom: 0;
}

.wp-block-table figcaption {
    margin: 1rem 0 0 0;
}

.wp-block-table.alignleft, .wp-block-table.alignright {
    padding-top: 0.7rem;
}

.wp-block-image figcaption {
    margin: 1rem 0 0 0;
}

.wp-block-latest-posts.is-grid li {
    margin-bottom: 0px;
    padding-bottom: 1.2rem;
}

.wp-block-cover-image .wp-block-cover__inner-container, .wp-block-cover .wp-block-cover__inner-container {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.alignwide.wp-block-cover + .alignwide.wp-block-cover, .alignwide.wp-block-cover + .alignwide.has-background, .alignwide.has-background + .alignwide.wp-block-cover, .alignwide.has-background + .alignwide.has-background {
    margin-top: 0rem; /* -3rem; */
}

.alignfull {
    /* margin: 5rem 0; */
    margin-top: 0rem;
}

/* 11- Entry Content */

.alignleft {
    margin: .3rem 1.75rem 0 0;
}

.alignright {
    margin: .3rem 0 0 1.75rem;
}

.entry-content {
    max-width: var(--max-width-article);
}

.alignfull > figcaption, .alignfull > .wp-caption-text {
    padding-left: 1rem;
    max-width: calc ( 100vw - 1rem );
}

.wp-block-group__inner-container .wp-block-columns {
    margin-top: -2rem;
}

/**
    Post carousel avec affiche fait remonter légèrement le texte en overlay
*/

.wp-block-getwid-images-slider .slick-prev,
.wp-block-getwid-images-slider .slick-next,
.wp-block-getwid-media-text-slider .slick-prev,
.wp-block-getwid-media-text-slider .slick-next,
.wp-block-getwid-post-slider .slick-prev,
.wp-block-getwid-post-slider .slick-next,
.wp-block-getwid-post-carousel .slick-prev,
.wp-block-getwid-post-carousel .slick-next {
    display: inline-block;
    position: absolute;
    top: 25%;
    bottom: auto;
    z-index: 1;
    width: 6.4rem;
    height: 8rem;
    padding: 0em;
    border: none;
    background: transparent;
    color: transparent;
    font-size: initial;
    line-height: 0;
    cursor: pointer;
    outline: none;
}

.wp-block-getwid-images-slider .slick-prev,
.wp-block-getwid-media-text-slider .slick-prev,
.wp-block-getwid-post-slider .slick-prev,
.wp-block-getwid-post-carousel .slick-prev {
    left: 0rem;
}

.wp-block-getwid-images-slider .slick-next,
.wp-block-getwid-media-text-slider .slick-next,
.wp-block-getwid-post-slider .slick-next,
.wp-block-getwid-post-carousel .slick-next {
    right: 0rem;
}

.wp-block-getwid-images-slider .slick-prev::before,
.wp-block-getwid-images-slider .slick-next::before,
.wp-block-getwid-media-text-slider .slick-prev::before,
.wp-block-getwid-media-text-slider .slick-next::before,
.wp-block-getwid-post-slider .slick-prev::before,
.wp-block-getwid-post-slider .slick-next::before,
.wp-block-getwid-post-carousel .slick-prev::before,
.wp-block-getwid-post-carousel .slick-next::before {
    background-image: url(assets/images/lightbox/arrow-left.svg);
    background-color: var(--c-cultured);
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.6;
    content: " ";
    display: block;
    height: 100%;
    width: 100%;
}

.wp-block-getwid-images-slider .slick-next::before,
.wp-block-getwid-media-text-slider .slick-next::before,
.wp-block-getwid-post-slider .slick-next::before,
.wp-block-getwid-post-carousel .slick-next::before {
    background-image: url(assets/images/lightbox/arrow-right.svg);
}

.wp-block-getwid-post-carousel.affiche.alignwide {
    position: relative;
    left: -2rem;
    max-width: 100vw;
    width: 100vw;
}

.wp-block-getwid-post-carousel.affiche .preview-header {
    position: relative;
    z-index: 4;
    width: calc( 100vw - 4rem );
    margin-top: -4.5rem;
    margin-right: auto;
    margin-left: auto;
    padding: 2.8rem 0;
    background-color: var(--c-cultured);
    text-align: center;
}

.wp-block-getwid-post-carousel.affiche .preview-header .post-meta {
    justify-content: center;
}

.wp-block-getwid-post-carousel.affiche .preview-header a time {
    display: block;
    position: absolute;
    top: -2rem;
    left: 50%;
    margin: 0;
    padding: 1rem 2rem;
    border: 0;
    color: var(--c-white);
    font-size: 1.6rem;
    font-style: inherit;
    font-weight: inherit;
    text-align: center;
    transform: translateX(-50%);
    background-color : var(--c-burntorange);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

/* 12- Comments */

.comments-wrapper {
    margin-top: 3rem;
    padding-bottom 3rem;
}

/* 13- Site Pagination */

.pagination-wrapper {
    margin-top: 0rem;
    padding-bottom: 3rem;
}

/* 16- Widget */

.widget.widget_text .widget.widget_text {
    padding-top: 0;
}

.widget.widget_text img.alignnone {
    margin: 0rem 0;
}

.chaplin-widget-list,
.widget_archive ul,
.widget_categories ul,
.widget_pages ul,
.widget_meta ul,
.widget_nav_menu ul {
    list-style: none;
    margin-left: 2rem;
}

/* 17- Site footer */

#site-footer {
    display: flex;
    max-width: var(--max-width);
    margin: 0 auto;
    border-top-color: var(--border-white);
    border-bottom-color: var(--background-color-global);
    background-color: var(--headings-color);
    color: var(--background-color);
    border-width: 0.1rem 0 0.4rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-style: solid;
}

#site-footer a {
    text-decoration: none;
}

.footer-widgets-outer-wrapper {
    padding-top: 0;
}

.footer-widgets.grid-item {
    margin-bottom: 2rem;
}

.footer-inner {
    padding-bottom: 2rem;
}

.footer-widgets:first-of-type .widget:first-of-type {
    /** border-top-style: none !important; */
}

#site-footer h1,
#site-footer h2,
#site-footer h3,
#site-footer h4,
#site-footer h5,
#site-footer h6,
#site-footer .faux-heading {
    color: var(--background-color);
}

#site-footer .border-color-border,
#site-footer .border-color-border-hover:hover,
#site-footer pre,
#site-footer th,
#site-footer td,
#site-footer input,
#site-footer textarea,
#site-footer fieldset,
#site-footer .main-menu li,
#site-footer button.sub-menu-toggle,
#site-footer .wp-block-latest-posts.is-grid li,
#site-footer .wp-block-calendar,
#site-footer .footer-menu li,
#site-footer .comment .comment,
#site-footer .post-navigation,
#site-footer .related-posts,
#site-footer .widget,
#site-footer .select2-container #site-footer .select2-selection--single {
    border-color: var(--background-color);
}

#site-footer .color-secondary,
#site-footer .color-secondary-hover:hover,
#site-footer .has-secondary-color,
#site-footer .wp-block-latest-comments time,
#site-footer .wp-block-latest-posts time {
    color: var(--discreet-text);
}

#site-footer .color-accent,
#site-footer .color-accent-hover:hover,
#site-footer :root .has-accent-color,
#site-footer a,
#site-footer .is-style-outline .wp-block-button__link:not(.has-text-color),
#site-footer .wp-block-button__link.is-style-outline {
    color: var(--c-white);
}

/** To the top link */

.to-the-top {
    margin-bottom: 2rem;
    text-align: center;
}

a.to-the-top > * {
    pointer-events: none;
}

.to-the-top-long {
    display: none;
}

/* Footer Top Menu */

.footer-top-menu {

}

/** Social menu */

.social-menu {
    display: block;
    margin-top: 3rem;
    text-align: center;
    align-items: center;
    -webkit-box-align: center;
}

.social-menu a:hover,
.social-menu a:focus {
    text-decoration: underline;
}

.social-menu__title {
    display: block;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
}

.social-menu__list {
    display: flex;
    justify-content: center;
    /** width: 100%; */
}

.social-menu__list .menu-item {
    margin: 0.5rem 0 0 0.5rem;
    flex: 0 1 auto;
    list-style-type: none;
}

/*******************************************************************************
 *
 *                       MEDIA QUERIES
 *
 *******************************************************************************/

/** Marge à 3rem */
@media (min-width: 700px) {

    /* 3- Helper */
    .section-inner {
        padding: 2rem 3rem;
    }

    /* 4- Header */
    #site-header {
        padding: 0;
    }

    .header-inner {
        min-height: 9rem;
        border-top-width: 0.6rem;
    }

    .header-inner.is-sticky .site-logo {
        margin-left: 1rem;
    }

    .header-inner.is-sticky .site-logo img {
        max-height: 7rem;
    }

    .wp-custom-logo .header-titles {
        margin-left: -3rem;
    }

    /* 5- Modal menu */
    .main-menu > li > a, .main-menu > li > .ancestor-wrapper > a {
        font-size: 2.4rem;
        padding: 2.5rem 2.5rem;
    }

    /* 7- Template */
    .wp-custom-header .wp-custom-header-video-button {
        left: 30px;
        top: 80px;
    }

    /* 8- Archive post */
    .archive-header {
        margin-bottom: 0;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    /** 9- Post-single */
    .post-navigation {
        margin-top: 5rem;
    }

    /** 10- Blocks */
    .wp-block-getwid-images-slider .slick-prev,
    .wp-block-getwid-images-slider .slick-next,
    .wp-block-getwid-media-text-slider .slick-prev,
    .wp-block-getwid-media-text-slider .slick-next,
    .wp-block-getwid-post-slider .slick-prev,
    .wp-block-getwid-post-slider .slick-next,
    .wp-block-getwid-post-carousel .slick-prev,
    .wp-block-getwid-post-carousel .slick-next {
        top: 50%;
    }

    .wp-block-getwid-post-carousel.affiche.alignwide {
        left: -3rem;
    }

    .wp-block-getwid-post-carousel.affiche .preview-header {
        max-width: calc( 100% - 6rem ) ;
        width: calc( 100% - 6rem );
    }

    /* 11- Entry Content */

    .entry-content > .alignwide {
        max-width: calc( 100vw - 6rem );
        width: calc( 100vw - 6rem );
    }

    .entry-content > .alignfull {
        margin-left: -3rem;
    }

    .alignwide, .alignfull {
        margin-bottom: 3rem;
        margin-top: 3rem;
    }

    .wp-block-separator.is-style-wide {
        width: calc( 100vw - 6rem );
    }

    /* 12- Comments */
    .comments-wrapper {
        margin-top: 5rem;
        /** padding-bottom 2rem; */
    }

    /* 17- Site footer */
    #site-footer {
        font-size: 1.5rem;
        border-width: 0.2rem 0 0.6rem;
    }

    .footer-inner {
        padding-bottom: 2rem;
    }

    .footer-widgets-outer-wrapper {
        margin-bottom: 0rem;
        margin-top: 0;
        padding-top: 5rem;
        padding-bottom: 5rem;
        border-top-style: none;
    }

    #site-footer h1 {
        font-size: 2em;
    }

    #site-footer h2 {
        font-size: 1.8em;
    }

    #site-footer h3 {
        font-size: 1.6em;
    }

    #site-footer h4 {
        font-size: 1.4em;
    }

    #site-footer h5 {
        font-size: 1.2em;
    }

    #site-footer h6 {
        font-size: 1em;
    }

    /** social */
    .footer-top-menu {
        display: flex;
        flex-direction: row;
    }

    .social-menu__title {
        font-size: 2rem;
    }

    .to-the-top {
        text-align: right;
    }

    .to-the-top-long {
        display: inline;
    }

    .to-the-top-short {
        display: none;
    }
}

/** padding de 4 et marge extérieure de 4 */
@media (min-width: 1000px) {

    /* 3 - Helper class */
    .section-inner {
        width: calc(100% - 8rem);
        padding: 3rem 4rem;
    }

    .screen-height {
        top: -3rem; /* à synchroniser avec le padding section-inner */
    }

    .grid {
        margin-bottom: -3rem;
    }

    /** 4 - Header */
    .header-inner {
        min-height: 9rem;
    }

    .header-inner.is-sticky .site-logo {
        margin-left: 0rem;
    }

    .wp-custom-logo .header-titles {
        margin-left: 0rem;
    }

    /* 8- Archive post */
    .archive-header {
        margin-bottom: 0;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    /* 7- Template */
    .wp-custom-header .wp-custom-header-video-button {
        left: 80px;
        top: 80px;
    }

    /** 10- Blocks */
    .wp-block-getwid-post-carousel.affiche.alignwide {
        left: -4rem;
        max-width: calc( 100vw - 8rem);
        width: calc( 100vw - 8rem);
    }

    .wp-block-getwid-post-carousel.affiche .preview-header {
        max-width: calc( 100% - 8rem ) ;
        width: calc( 100% - 8rem );
    }

    /* 11- Entry Content */
    .entry-content > .alignwide {
        max-width: calc( 100vw - 16rem );
        width: calc( 100vw - 16rem );
    }

    .entry-content > .alignfull {
        margin-left: -8rem;
    }

    .alignwide, .alignfull {
        margin-bottom: 5rem;
        margin-top: 5rem;
    }

    .wp-block-separator.is-style-wide {
        width: calc( 100vw - 16rem );
    }

    /* 13- Site Pagination */
    .pagination-wrapper {
        margin-top: 0rem;
        padding-bottom: 3rem;
    }

    /* 17 - Site footer */
    #site-footer {
        font-size: 1.8rem;
    }

    .footer-widgets-outer-wrapper {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .footer-inner {
        padding-bottom: 2rem;
    }

    /** social */
    .social-menu {
        display: flex;
        align-items: center;
    }

    .social-menu__title {
        margin: 0;
        text-align: center;
        margin-left: auto;
        margin-right: 2rem;
        margin-left: 2rem;
    }
    .social-menu__list {
        margin-left: auto;
        margin-right: auto;
    }

}

/** si article width = max-width-inner => widh = max-width-inner + 2*marge latérales de 4 = 1030 + 80 = 1110px */
@media ( min-width: 1110px ) {

    .entry-content > .alignfull {
        margin-left: calc( ( var(--max-width-inner) - 100vw ) / 2 - 4rem );
    }

    .entry-content > .alignwide {
        max-width: calc( var(--max-width-inner) - 8rem );
        width: calc( var(--max-width-inner) - 8rem );
    }

    .wp-block-separator.is-style-wide {
        width: calc( var(--max-width-inner) - 8rem );
    }

    /* 7- Template */
    .wp-custom-header .wp-custom-header-video-button {
        top: 90px;
        width: 60px;
        height: 60px;
    }

    /** 10- Blocks */
    .wp-block-getwid-post-carousel.affiche.alignwide {
        left: -4rem;
        max-width: var(--max-width-inner);
        width: var(--max-width-inner);
    }

}

@media ( min-width: 1180px ) {
    /**
    article.section-inner,
    .posts.section-inner,
    .pagination-wrapper.section-inner
    */

    .section-inner {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .screen-height {
        top: -5rem; /* à synchroniser avec le padding section-inner */
    }

    .archive-header {
        margin-bottom: 0;
        padding-top: 3rem;
        padding-bottom: 0rem;
    }

    /** 4- Header */
    .header-inner {
        min-height: 11rem;
    }

    .site-logo img {
        max-height: 11rem;
    }

    .header-inner.is-sticky .site-logo img {
        max-height: 9rem;
    }

    /* 7- Template */
    .wp-custom-header .wp-custom-header-video-button {
        left: 80px;
        top: 120px;
    }

}

/** max-width est atteint */
@media ( min-width: 1690px ) {

    .entry-content > .alignfull {
        margin-left: calc( ( ( var(--max-width) - var(--max-width-inner) ) / -2 ) - 4rem );
    }

    .overlay-header #site-header {
        margin: 0 auto;
    }

    .screen-width {
        position: relative;
        left: calc( 50% - ( var(--max-width) / 2 ) );
        width: var(--max-width);
    }

    .wp-custom-header video, .wp-custom-header iframe {
        min-width: var(--max-width);
        max-width: var(--max-width);
    }
}

@media print {
}