/*
Theme Name: USO hand
Version: 1.1
*/

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
main { display: block }
h1, h2, h3, h4, h5, h6 { margin: 0; }
p { margin: 0 0 1em }
a { background-color: transparent; }
strong { font-weight: bolder; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
img { border-style: none; display: inline-block; max-width: 100% }
button, input, select, textarea { font-family: inherit; font-size: 100%; 
    line-height: 1.15; margin: 0; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, [type="button"], [type="submit"] { -webkit-appearance: button; }
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset { border: 0; margin: 0; padding: 0; }
textarea { overflow: auto; }
[type="checkbox"] { box-sizing: border-box; padding: 0; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
[hidden] { display: none; } 

/** ---- Font ---- **/

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-Black.woff2') format('woff2'),
        url('assets/fonts/poppins/Poppins-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-BoldItalic.woff2') format('woff2'),
        url('assets/fonts/poppins/Poppins-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-ExtraBold.woff2') format('woff2'),
        url('assets/fonts/poppins/Poppins-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-SemiBold.woff2') format('woff2'),
        url('assets/fonts/poppins/Poppins-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-Regular.woff2') format('woff2'),
        url('assets/fonts/poppins/Poppins-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-Medium.woff2') format('woff2'),
        url('assets/fonts/poppins/Poppins-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-Light.woff2') format('woff2'),
        url('assets/fonts/poppins/Poppins-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-Italic.woff2') format('woff2'),
        url('assets/fonts/poppins/Poppins-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-ExtraLight.woff2') format('woff2'),
        url('assets/fonts/poppins/Poppins-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-Thin.woff2') format('woff2'),
        url('assets/fonts/poppins/Poppins-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vanguard CF';
    src: url('assets/fonts/vanguard/VanguardCF-HeavyOblique.woff2') format('woff2'),
        url('assets/fonts/vanguard/VanguardCF-HeavyOblique.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vanguard CF';
    src: url('assets/fonts/vanguard/VanguardCF-BoldOblique.woff2') format('woff2'),
        url('assets/fonts/vanguard/VanguardCF-BoldOblique.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vanguard CF';
    src: url('assets/fonts/vanguard/VanguardCF-DemiBoldOblique.woff2') format('woff2'),
        url('assets/fonts/vanguard/VanguardCF-DemiBoldOblique.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vanguard CF';
    src: url('assets/fonts/vanguard/VanguardCF-ExtraBold.woff2') format('woff2'),
        url('assets/fonts/vanguard/VanguardCF-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vanguard CF';
    src: url('assets/fonts/vanguard/VanguardCF-Bold.woff2') format('woff2'),
        url('assets/fonts/vanguard/VanguardCF-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vanguard CF';
    src: url('assets/fonts/vanguard/VanguardCF-Light.woff2') format('woff2'),
        url('assets/fonts/vanguard/VanguardCF-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vanguard CF';
    src: url('assets/fonts/vanguard/VanguardCF-Heavy.woff2') format('woff2'),
        url('assets/fonts/vanguard/VanguardCF-Heavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vanguard CF';
    src: url('assets/fonts/vanguard/VanguardCF-DemiBold.woff2') format('woff2'),
        url('assets/fonts/vanguard/VanguardCF-DemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vanguard CF';
    src: url('assets/fonts/vanguard/VanguardCF-ExtraBoldOblique.woff2') format('woff2'),
        url('assets/fonts/vanguard/VanguardCF-ExtraBoldOblique.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vanguard CF';
    src: url('assets/fonts/vanguard/VanguardCF-RegularOblique.woff2') format('woff2'),
        url('assets/fonts/vanguard/VanguardCF-RegularOblique.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vanguard CF';
    src: url('assets/fonts/vanguard/VanguardCF-ThinOblique.woff2') format('woff2'),
        url('assets/fonts/vanguard/VanguardCF-ThinOblique.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vanguard CF';
    src: url('assets/fonts/vanguard/VanguardCF-Thin.woff2') format('woff2'),
        url('assets/fonts/vanguard/VanguardCF-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vanguard CF';
    src: url('assets/fonts/vanguard/VanguardCF-MediumOblique.woff2') format('woff2'),
        url('assets/fonts/vanguard/VanguardCF-MediumOblique.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vanguard CF';
    src: url('assets/fonts/vanguard/VanguardCF-Medium.woff2') format('woff2'),
        url('assets/fonts/vanguard/VanguardCF-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vanguard CF';
    src: url('assets/fonts/vanguard/VanguardCF-LightOblique.woff2') format('woff2'),
        url('assets/fonts/vanguard/VanguardCF-LightOblique.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vanguard CF';
    src: url('assets/fonts/vanguard/VanguardCF-Regular.woff2') format('woff2'),
        url('assets/fonts/vanguard/VanguardCF-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



/** ---- Layout ---- **/

*, *:before, *:after { box-sizing: border-box }
html { scroll-behavior: smooth; font-family: 'Vanguard CF' }
.main__container { min-height: 100vh }

@media (orientation: portrait) {
    .is--landscape { display: none }
    .container { padding-left: 20px; padding-right: 20px }
}
@media (orientation: landscape) {
    .is--portrait { display: none }
    .container { width: calc(100% - 240px); margin-left: auto; margin-right: auto;  }
    .container__aside { min-width: 106px }
}


/** Couleurs **/

:root {
    --color-red: #990000;
    --color-yellow: #FFCC05;
}

/** Header **/

.header { height: 50px; position: sticky; top: 0; /**/ 
    display: flex; justify-content: space-between; align-items: center; 
    background: var(--color-red); color: white;
    padding: 1px 10px 0; z-index: 2 }

.header__main { height: 100%; width: 100%; position: relative;
    display: flex; align-items: center; justify-content: center; }
.menu__toggle { background: none; border: none; cursor: pointer;
    padding: 0; position: absolute; top: 3px; left: 0; padding: 10px;
    width: 36px; height: 36px }
.menu__toggle_icon--open > path { transition: fill .3s ease-in-out }
.menu__toggle:hover .menu__toggle_icon--open > path { fill: #FFCC05 }
.menu__toggle_icon { width: 100%; position: absolute; top: 10px;
    left: 10px; width: 16px; transition: opacity 3 ease-in-out }
.menu__toggle_icon--open { height: 13px; }
.menu__toggle_icon--close { height: 16px; top: 9px; opacity: 0 }
.logo__container { width: 42px; height: 41px }
.logo__link { display: inline-block }
.logo__link,
.logo { width: 100%; height: 100% }
    
.menu--open .menu__toggle_icon--open { opacity: 0 }
.menu--open .menu__toggle_icon--close { opacity: 1 }

.nav--header { position: absolute; top: 100%; left: 0; right: 0; 
    background: var(--color-red); }
.nav__container { display: flex; flex-direction: column; padding: 19px 20px 0;
    text-transform: uppercase; }
body:not(.menu--is-open) .nav--header { display: none }
.nav__list { list-style: none; display: inline-flex; gap: 20px;
    width: 100%; justify-content: flex-start; padding: 0;
  margin: 0 0 30px; }
.nav__list:first-of-type { margin-bottom: 31px }
.nav__item { width: calc((100% - 2 * 20px) / 3);
    position: relative }
.nav__link { color: #fff; text-decoration: none; position: relative }
.nav__link--primary { font-size: 30px }
.nav__sublink { color: var(--color-yellow); position: absolute; margin: 3px 0 0 -2px }
.nav__sublist { padding: 0; list-style: none; margin: 13px 0 0 }
.nav__subitem { margin-bottom: 2px }
.nav__link--secondary { font-size: 20px; opacity: .9 }
.header .nav__list--bottom .nav__item { width: calc((100% - 20px)/2) }

.is--underline { display: inline-block; padding-bottom: 1px }
.is--underline::after { content: ''; position: absolute; bottom: 0; height: 3px;
    left: 0; width: 100%; background: var(--color-yellow);
    transform: scaleX(35%); transform-origin: left;
    transition: transform .3s ease-in-out }
.nav__item:not(.nav__item--primaries):hover .is--underline::after,
.nav__item--primaries .is--underline:hover::after { transform: scaleX(100%) }

.header__social_link path { transition: fill .3s ease-in-out }
.header__social_link:hover path { fill: #FFCC05 }

@media (orientation: portrait) {
    .menu__toggle_container { width: 36px; height: 36px; position: absolute;
        left: 0; top: 4px; }
    .nav__link--contact { margin-top: 33px }
    .header { transition: box-shadow 0.3s ease }
    body.page--is-scrolled .header { box-shadow: 0 3px rgba(0, 0, 0, 0.4) }
    .nav__item--last .nav__link:first-of-type { display: none; }
    .nav__list.is--landscape { display: none }
    .nav__link.is--landscape { display: none }
}

@media (orientation: landscape) {
    .header { padding: 0; height: 85px; }
    .header__main { width: 100%; height: 100%; display: flex; justify-content: center;
        align-items: center; z-index: 1 }
    .menu__toggle_container,
    .header__shop_container { display: inline-block; width: 120px; height: 100% }
    .header__main_container { display: flex; position: relative; justify-content: center; flex: 1;
        height: 100% }
    .menu__toggle_container { position: relative; }
    .menu__toggle { width: 52px; height: 45px; top: 23px; left: auto; right: 34px; }
    .menu__toggle_icon--open { width: 32px; height: 25px }
    .menu__toggle_icon--close { width: 32px; height: 32px }
    .header__shop_container { background: #fff; display: flex; align-items: center;
        justify-content: center; }
    .header__shop_link { color: var(--color-red); text-transform: uppercase; position: relative;
        font-size: 32px; text-transform: uppercase; font-weight: 500; text-decoration: none; }
    .header__shop_link:hover::after { transform: scaleX(100%) }
 
    .logo__container { position: absolute; top: 23px; left: 50%; 
        transform: translate(-50%, 0); transition: transform .3s ease-in-out;
        width: 145px; height: 143px }
    .logo { display: block }
    .nav__links_container { width: 50%; display: flex; justify-content: space-between;
        align-items: center; padding-top: 8px }
    .header__socials { list-style: none; display: flex; margin: 0; padding: 0;
        position: absolute; right: 0; height: 100%; align-items: center;
        padding: 10px 25px 0 0; gap: 8px; }
    .header__social_link { display: inline-block }
    .header__social_link > svg { display: block }

    .nav__links_container > .nav__link.is--underline:hover::after { transform: scaleX(100%) }

    body.menu--open .logo__container,
    body.page--is-scrolled .logo__container { transform: translate(-50%, -22px) scale(0.6) }
    .logo { transition: transform .3s ease-in-out }
    .logo path { transition: fill .3s ease-in-out }    
    body.menu--open .logo .red { fill: #fff }
    body.menu--open .logo .yellow { fill: #990000 }
    
    .nav__container { gap: 20px; padding: 81px 0 58px; flex-direction: row; }
    .nav__list.is--portrait { display: none }    
    .nav__link.is--portrait { display: none }
    .nav__list { width: calc((100% - 2 * 20px) / 3) }
    .nav__item { width: calc((100% - 20px) / 2) }
    .nav__list:last-of-type { flex-direction: row-reverse }
    .nav__sublist { margin-top: 15px }
    .nav__link--secondary { font-size: 26px; }
    .nav__subitem { margin-bottom: 3px; }
    .nav__item--last .nav__link { margin-bottom: 33px }
    .nav__item--last .nav__link:last-of-type { margin-bottom: 0 }
    .nav__item.is--landscape .nav__link:not(:last-of-type) { margin-bottom: 25px }
}

/** Footer */

footer { padding: 2px 0 9px; background: var(--color-red); color: #fff }
.weareuso__logo_container { display: none }
.nav--footer { margin-bottom: 17px; }

.footer__social { height: max(245px, calc(245 / 375 * 100vw)); position: relative; text-align: center;
  padding: 0 0 19px; margin-bottom: 9px; display: flex; flex-direction: column;
  justify-content: flex-end }
.footer__social:before { content: ''; position: absolute; top: 0; height: 100%;
    left: 0; width: 100%; opacity: .5;
    background: transparent url('assets/img/lignes-m.svg') no-repeat top center/cover; }
.footer__social_title { font-size: 23px; letter-spacing: .3em; margin-bottom: 8px; }
.footer__social_list { list-style: none; display: inline-flex; gap: 13px;
    justify-content: center; padding: 0; margin: 0 }
.footer__social_item { height: 24px }
.footer__social_link { height: 100%; display: inline-block }
.footer__social_link > svg { height: 100% }

.nav__bottom { font-family: 'Poppins'; letter-spacing: -.25px; font-size: 12px;
    text-align: center }
.nav__list_bottom { list-style: none; padding: 0; margin: 0; text-align: center }
.nav__item_bottom { padding: 0 1px; position: relative; display: inline-block }
.nav__link_bottom { color: #fff; text-decoration: none }
.nav__item_separator { transform: scaleY(0.75); transform-origin: bottom;
  display: inline-block; }

.footer__social_link path { transition: fill .3s ease-in-out }
.footer__social_link:hover path { fill: #FFCC05 }

footer .nav__link_bottom:hover { text-decoration: underline; text-underline-offset: 4px;}

@media (orientation: portrait) {
    footer .nav__list--bottom .nav__item { width: calc((100% - 20px) / 2) }
}

@media (orientation: landscape) {
    footer { padding-top: 70px; padding-bottom: 1px;
        background: var(--color-red) url('assets/img/lignes-d.svg') no-repeat bottom 13px center }
    .weareuso__logo_container { display: block; text-align: center; }
    .weareuso__logo { height: max(85px, calc(85 / 1440 * 100vw)) }

    footer .nav__list { flex-direction: column }
    footer .nav__list--primary-links { gap: 36px; }
    .nav__list_bottom { margin-bottom: 5px; }
    footer .nav__container { padding-top: 68px; padding-bottom: 24px; }
    footer .nav__item { width: 100% }

    .footer__social { height: auto; margin-bottom: 37px }
    .footer__social:before { display: none }
    .footer__social_title { font-size: 30px; margin-bottom: 15px }
    .footer__social_list { gap: 20px }
    .footer__social_item { height: 40px }    

    .nav__bottom { font-size: 15px }
}

/** Footer / Bloc partner **/

.footer__partners_container { text-align: center; padding-top: 30px;
    padding-bottom: 30px }
.footer__partners_title { margin: 0 0 23px }
.footer__partners_title > span { font-size: 30px; position: relative; padding-bottom: 2px; 
    display: inline-block }
.footer__partners_title > span:after { content: ''; position: absolute;
    bottom: 0; height: 4px; left: 0; width: 100%; background-color: var(--color-yellow);  }

.partners__list { list-style: none; margin: 0 auto 30px; padding: 0; width: 100%;
  display: inline-flex; gap: 10px 20px; justify-content: center; 
    flex-wrap: wrap; align-items: center } 
.partners__item { width: 250px; height: 125px; }
.partners__link { font-size: 0; width: 100%; height: 100%; position: relative;
    display: inline-flex; justify-content: center; align-items: center; }

.partners__img { max-width: 100%; max-height: 100% }
.partners__img_mono { transition: opacity 0.3s ease-in-out }
.partners__img_color { opacity: 0; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); width: 100%; height: 100%; 
    transition: opacity 0.3s ease-in-out }

.partners__item:hover .partners__img_mono { opacity: 0 }
.partners__item:hover .partners__img_color { opacity: 1 }

.partners__item--primary { width: 250px; height: 110px; position: relative }
.partners__item--secondary { width: 144px; height: 81px; position: relative; }

@media (orientation: landscape) {
    .footer__partners_container { margin-top: -60px }

    .partners__list { gap: 35px; margin-bottom: 30px }

    .partners__item--arcer { width: 267px; }
    .partners__item--hydrotec { width: 245px; }
    .partners__item--ada { width: 278px; }
}

/** Page partenaire **/

.partners__container .partners__img { opacity: 1; padding-bottom: 30px }
.partners__title { border-bottom: 3px solid var(--color-yellow); text-align: center;
    margin: 2em 0 }
.partners__title > span { color: var(--color-red); font-weight: 500; font-size: 36px }

@media (orientation: landscape) {
    .partners__title > span { font-size: 52px }
}

/** Hero **/

.hero { display: none; }
.hero__title_container { height: 146px; position: relative;
    display: flex; align-items: center; padding-left: 5px; }
.hero__title_container:before { content: ''; position: absolute; top: 0; height: 100%; left: 0; width: 100%;
    background: var(--color-red); clip-path: polygon(0 0, 100% 0, 100% 72%, 0 100%); }
.hero__title { color: #fff; font-size: 40px; font-weight: 500; position: relative; }

@media (orientation: landscape) {
    .hero { display: block; margin-top: -3vw; font-size: 0 }
    .hero__title_container { margin-top: -85px; padding-left: 0 }
    .hero__title { font-size: 55px }
}

/** 404 **/

.page404__container { height: calc(866 / 750 * 100vw);
    background: transparent url('assets/img/404-m.jpg') no-repeat center/cover;
    display: flex; flex-direction: column; justify-content: center;
    color: #fff; text-align: center; padding: 0 50px }
.page404__title { font-size: 76px; line-height: 70px; margin-bottom: 37px }
.page404__subtitle { font-weight: 500; font-size: 48px }

@media (orientation: landscape) {
    .page404__container { height: calc(1370 / 2880 * 100vw); padding-top: 54px;
        background: transparent url('assets/img/404-d.jpg') no-repeat center/cover }
    .page404__title { font-weight: 600; font-size: 81px; margin-bottom: 0 }
}

/** Construction **/

#construction__container { text-align: center; padding-bottom: 50px }
#construction__container img { width: 67vw; margin-bottom: 16px }
#construction__container h1 { font-weight: 500; font-style: italic;
  font-size: 48px; line-height: 40px; color: var(--color-red) }

@media (orientation: landscape) {
    #construction__container img { width: 33%; margin-bottom: 38px }
    #construction__container h1 { font-size: 64px }
}

/** Contact **/

.contact__container { padding: 5vh 20px }
.contact__content { background: var(--color-red); border-radius: 10px;
    color: #fff; position: relative; padding: 4.5% 3.7% 38%; overflow: hidden }
.contact__content::after { content: ''; position: absolute; 
    bottom: -3.5%; width: 46%; left: 5%; height: 35%;
    background: transparent url('assets/img/jeanne-2.svg') no-repeat center/contain }
.contact__title { font-family: 'Poppins'; font-size: 24px; font-weight: 500; margin-bottom: 36px }
.contact__list { list-style: none; margin: 0; padding: 0 }
.contact__item { display: flex; margin-bottom: 8px }
.contact__icon_container { width: 48px }
.contact__item_description { font-family: 'Poppins'; font-size: 16px; line-height: 1.5em;
    margin: 0 }
.contact__socials { position: absolute; bottom: 10px; right: 16px }
.contact__social_list { list-style: none; margin: 0; padding: 0; display: flex;
    gap: 13px }

.contact__form_container { padding: 40px 0 0 0; font-family: 'Poppins' }
.contact__form_container label { font-size: 1em; font-weight: 500!important; 
    color: #000 }
.contact__form_container .forminator-input { padding: 0 0 4px!important;
    margin-top: 6px!important; border-width: 0 0 1px 0; }

#textarea-1 { margin-top: 24px }
#textarea-1 textarea { padding-top: 8px!important }
.forminator-field-textarea .forminator-is_filled .forminator-label[class*="forminator-floating-"], #forminator-module-78.forminator-design--material .forminator-field-textarea .forminator-is_active .forminator-label[class*="forminator-floating-"] { 
    padding-left: 0!important }
.forminator-row-last .forminator-field { text-align: right; }
.forminator-row-last button { border: 0!important;
    padding: 18px 49px !important; border-radius: 5px!important;
    color: #fff; font-size: 16px; margin-top: 20px }

@media (orientation: portrait) {
    .forminator-col { margin-bottom: 40px!important }
    .contact__socials { transform: scale(0.8); transform-origin: bottom right }
}
@media (orientation: landscape) {
    .contact__container { padding: 19vh 12px 23vh; display: flex; align-items: flex-start;
        gap: 47px }
    .contact__content { width: 42%; padding: 4.5% 3.7% 21%; }
    .contact__title { font-size: 32px }
    .contact__socials { bottom: 20px; right: 33px }

    .contact__form_container { flex: 1; padding: 52px 39px 0 0 }
    .contact__form_container .forminator-row { margin-bottom: 50px!important }
}

/** Page / Content **/

.content__container { font-family: 'Poppins'; padding-top: 30px; padding-bottom: 30px }
.content__container h2 { color: var(--color-red); font-size: 32px;
    font-weight: 500; margin: 0 0 .5em }
.content__container h2,
.content__container h3,
.content__container h4,
.content__container h5 { font-family: 'Vanguard CF' }
.content__container p + h2,
.content__container div + h2,
.wp-block-table + h2 { margin-top: 1em }
.content__container p { font-size: 16px }

@media (orientation: landscape) {
    .content__container { padding-top: 37px; padding-bottom: 37px }
    .content__container h2 { font-size: 40px }
}

/** home.php : liste de posts */

.posts__container { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;
  align-items: stretch  }
.post__container { width: 100%; font-size: 0; display: flex; flex-direction: column; }
.post__media { display: inline-block; position: relative; 
    width: 100%; padding-bottom: calc(100% * 9 / 16); height: 0 }
.post__media > img { position: absolute; object-fit: cover; max-width: 100%; max-height: 100%;
    width: 100%; height: 100%; opacity: .75; transition: opacity .3s ease-in-out; }
.post__container:hover .post__media > img { opacity: 1 }
.post__date { position: absolute; top: 0; left: 0; padding: 12px; 
    background-color: #fff; color: var(--color-red);
    display: inline-flex; flex-direction: column; justify-content: center;
    align-items: center; font-size: 20px; line-height: 1 }
.post__date--day { font-size: 30px }
.post__category { position: absolute; top: 13px; right: 14px; padding: 8px 8px 5px;
    color: var(--color-red); background-color: var(--color-yellow);
    font-size: 20px; line-height: 1; font-weight: 500; }
.post__link { margin-top: 2px; display: inline-block; width: 100%; flex: 1 }
.post__title { padding: 8px 10px; background-color: var(--color-red); color: #fff;
    font-size: 20px; line-height: 1; width: 100%; height: 100%;
    display: inline-flex; justify-content: center; align-items: center; text-align: center; }

@media (min-width: 640px) and (orientation: portrait) {
    .posts__container { padding-left: calc((100% - 600px) / 2);
        padding-right: calc((100% - 600px) / 2) }
}
@media (min-width: 900px) {
    .post__container { width: calc((100% - 20px) / 2); cursor: pointer }
    
}
@media (min-width: 1200px) {
    .post__container { width: calc((100% - 2 * 20px) / 3) }
}
@media (min-width: 1400px) {
    .post__container { width: calc((100% - 3 * 20px) / 4) }
}

/** single.php : article de blog */

body.single-post .hero { opacity: .5; margin-top: 0; margin-bottom: -16.6vw }
.single__container { max-width: 800px; position: relative;
    padding-bottom: 40px }
.single__hero_container { position: relative; font-size: 0;
    margin-bottom: 40px }
.single__hero_container img { width: 100%; object-fit: cover }
.single__category { font-size: 35px; line-height: 1; color: var(--color-red);
    background-color: var(--color-yellow); position: absolute; left: 17px;
    bottom: 15px; padding: 8px 12px 2px; font-weight: 500 }
.single__date { font-size: 35px; line-height: 1; 
    position: absolute; right: 0; bottom: 0;
    background-color: #fff; color: var(--color-red); padding: 8px 8px 5px }
.single__title { font-size: 45px; line-height: 1; font-weight: 600; 
    color: var(--color-red); padding: 10px 5px; margin-bottom: .6em; }
.single__content p { font-family: Poppins; font-size: 20px; line-height: 1.5 }
.single__content h2,
.single__content h3,
.single__content h4 { line-height: 1; font-weight: 600; 
    color: var(--color-red); padding: 10px 5px; margin: .6em 0; }
.single__content h2 { font-size: 35px }
.single__content h3 { font-size: 25px }
.single__content h4 { font-size: 20px }

@media (max-width: 599px) {
    .single__category { right: 0; left: auto; top: 0; bottom: auto; }
}
@media (max-width: 1023px) {
    .single__hero_container { padding-bottom: calc(100% * 9 /16); height: 0; }
    .single__hero_container img { object-fit: cover; max-height: 100%;
        max-width: 100%; position: absolute; }
    
}

/** Bureau **/

.office__title { font-weight: 500; color: var(--color-red); font-size: 40px;
    margin-bottom: 18px }
/*.office__members { display: flex; gap: 20px; padding-bottom: 40px; flex-wrap: wrap }*/
.office__member { margin: 0 calc(20px - .5em) 20px 0!important }
.office__media { height: 0; padding-bottom: 100%; position: relative;
    font-size: 0; margin-bottom: -1px; background: transparent url('assets/img/office/bg.png') no-repeat center/cover; }
.office__img { object-fit: cover; max-height: 100%;
        max-width: 100%; position: absolute; }
.office__role { width: 100%; background-color: var(--color-red); color: #fff;
    font-family: Poppins!important; font-size: 15px; line-height: 1; font-weight: 500;
    height: 35px; display: flex; justify-content: center; align-items: center;
    text-align: center; }
.office__name { font-family: Poppins; display: flex; justify-content: flex-start;
  align-items: center; padding: 10px; flex-direction: column; 
  font-size: 20px!important; line-height: 1.2 }
.office__name > strong { text-transform: uppercase; font-weight: 600 }

@media (min-width: 430px) {
    .office__member { width: 183px; }
}

/** USO HB+ **/

/*.usohb__container { padding-top: 50px; padding-bottom: 50px; }*/
.usohb__list { list-style: none; display: inline-flex; gap: 20px; flex-wrap: wrap;
    width: 100%; justify-content: center; padding: 0; margin: 0 }
.usohb__item { border: 2px solid var(--color-red); border-radius: 0 0 20px 20px;
    width: 285px; overflow: hidden; display: flex; flex-direction: column; }
.usohb__media { width: 285px; height: calc(285px * 9 / 16); padding: 20px; 
    display: flex; justify-content: center; align-items: center; 
    font-size: 0; }
.usohb__img { object-fit: cover; max-height: 100%; max-width: 100% }
.usohb__advantage { flex: 1; padding: 12px; font-family: Poppins;
  text-align: center; color: var(--color-red); font-weight: 500;
  font-size: 18px; margin: 0 }
.usohb__link { background-color: var(--color-red); color: #fff;
    padding: 12px; display: inline-block; text-decoration: none; 
    cursor: pointer; font-family: Poppins; text-align: center;
    font-size: 18px; font-weight: 500; }

/** Teams **/

.teams__content { margin-bottom: 2em }
.teams__season_container { display: flex; flex-wrap: wrap; gap: 20px }
.teams__team { width: max(calc((100% - 5 * 20px) / 6), 170px); height: 120px }
.teams__team_link { display: inline-flex; width: 100%; height: 100%;
    text-decoration: none; justify-content: center; align-items: center;
    font-size: 28px; font-weight: 500; text-align: center; }    
.teams__season_container .teams__team:nth-of-type(odd) .teams__team_link { 
    background: var(--color-red); color: #fff }
.teams__season_container .teams__team:nth-of-type(even) .teams__team_link { 
    background: var(--color-yellow); color: var(--color-red) }

/** Team **/

.team__header { display: flex; gap: 20px; flex-direction: column; }
.team__img { width: 100% }
.team__title > span { position: relative }
.team__title > span:after { width: 60px; transform: none }
.team__competition_container { display: inline-flex; gap: 10px; flex-wrap: wrap }
.team__competiton_link { display: inline-flex; justify-content: center; align-items: center;
    background-color: var(--color-red); color: #fff; text-decoration: none; padding: 17px;
    font-size: 16px; border-radius: 5px; font-family: Poppins; width: 175px; }
a.team__competiton_link { cursor: pointer }
.team__container p { font-size: 18px }

@media (orientation: landscape) {
    .team__header { flex-direction: row }
    .team__media { width: 66%; }   
    .team__info { width: calc(34% - 20px) }
}

/** Match **/

.match__container { display: flex; gap: 20px; padding-top: 49px; flex-wrap: wrap;
    padding-bottom: 40px; justify-content: center;  }
.match { width: 100%; padding-bottom: 30px;
    max-width: 388px; text-align: center; border-radius: 0 0 30px 30px;
    display: flex; flex-direction: column; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25)}
.match__date { background-color: var(--color-red); color: #fff;
    text-transform: uppercase; font-family: 'Vanguard CF';
    font-size: 35px !important; margin: 0; padding: 11px 10px 7px;
    font-weight: 400; }
.match__championship { color: var(--color-red); margin: 0;
  font-size: 29px!important; font-weight: 500; padding: 4px 10px;
    font-family: 'Vanguard CF'; padding: 10px 10px 0; }
.match__detail { display: flex; gap: 10px; justify-content: center;
    padding-top: 17px; flex: 1; }
.match__detail[data-place="away"] { flex-direction: row-reverse }
.match__detail > * { width: calc((100% - 20px) / 2);
    display: flex; flex-direction: column; }
.match__detail_media { height: 75px; display: flex; justify-content: center;
    margin-bottom: 7px; }
.match__detail_img { height: 100%; }
.match__detail_team { display: inline-block; width: 100%; 
    font-family: 'Vanguard CF'; font-weight: 600; font-size: 28px;
    margin-bottom: 10px; flex: 1; padding: 0 10px }
.match__detail_score { display: inline-block; width: 100%;
    font-family: 'Vanguard CF'; font-size: 46px; font-weight: 600; }
/*
@media (orientation: landscape) {
    .match { width: calc((100% - 2 * 20px) / 3); }
}*/