/*
Theme Name: SIMI
Author: the Astraga team
Author URI: https://www.astraga.fr
Description: Astraga Starter theme
Requires at least: 6.1
Tested up to: 6.3
Requires PHP: 5.6
Version: 1.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: astraga
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

@font-face {
  font-family: 'Raleway';
  src: url('fonts/Raleway-Regular.eot');
  src: url('fonts/Raleway-Regular.eot?#iefix') format('embedded-opentype'),
  url('fonts/Raleway-Regular.woff2') format('woff2'),
  url('fonts/Raleway-Regular.woff') format('woff'),
  url('fonts/Raleway-Regular.ttf') format('truetype'),
  url('fonts/Raleway-Regular.svg#Raleway-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway';
  src: url('fonts/Raleway-Bold.eot');
  src: url('fonts/Raleway-Bold.eot?#iefix') format('embedded-opentype'),
  url('fonts/Raleway-Bold.woff2') format('woff2'),
  url('fonts/Raleway-Bold.woff') format('woff'),
  url('fonts/Raleway-Bold.ttf') format('truetype'),
  url('fonts/Raleway-Bold.svg#Raleway-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-yellow: #FFDE76;
  --fond-yellow: rgb(240, 198, 123, .1);
  --color-grey: #BAC1C6;
  --color-white: #FFFFFF;
  --color-grey-light: #F1F3F4;
  --bleufonce: #00203A;
  --bleu: #005CB9;
  --gris-bleu-light: #C4D8EC;
}

[data-ratio] {
  display: block;
  max-width: 100%;
  position: relative
}

[data-ratio]:before {
  content: '';
  display: block;
}

[data-ratio] > * {
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

[data-ratio='20:9']::before {
  padding-top: 47.5%;
}

[data-ratio='16:9']::before {
  padding-top: 56.25%;
}

[data-ratio='4:3']::before {
  padding-top: 73.22%;
}

[data-ratio='3:4']::before {
  padding-top: 133.33%;
}

[data-ratio='1:1']::before {
  padding-top: 100%;
}

[data-ratio='acthome']::before {
  padding-top: 120%;
}

[data-ratio='logo-header']::before {
  padding-top: 43.48%;
}


body {
  margin: 0;
  color: var(--bleufonce);
  text-align: center;
}

body.single-emploi {
  background-color: var(--color-grey-light);
}

.relative {
  position: relative;
}

a {
  text-decoration: none;
  color: var(--bleu);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

a:hover {
  color: var(--color-grey);
}

p, ul li {
  text-align: left;
}

img {
  vertical-align: middle;
  height: auto;
}

.pagination{
  display: flex;
  gap: 0 0.5rem;
  align-items: center;
  justify-content: center;
}
.pagination .page-numbers{
  padding:1rem 0.75rem 0.5rem 0.75rem;
  border:1px solid var(--bleu);
  font-size:1rem;
  line-height:1;
  border-radius:1.5rem;
}
.pagination .page-numbers.current{
  font-weight: bold;
  color: var(--color-white);
  background-color: var(--bleu);
}
.pagination a.page-numbers:hover{
  background-color: var(--bleufonce);
  color: var(--color-white);
  border-color: var(--bleufonce);
}
.pagination a.page-numbers.next, .pagination a.page-numbers.prev{
  border: none;
  text-transform: uppercase;
  font-size:0.8rem;
}
.pagination a.page-numbers.next:hover, .pagination a.page-numbers.prev:hover{
  background-color: transparent;
  color: var(--bleufonce);
}

.bouton {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: var(--bleu);
  color: var(--color-white);
  border: 2px solid var(--bleu);
  border-radius: 2rem;
  margin: 1rem 0;
  font-weight: bold
}

.bouton:hover {
  background-color: var(--bleufonce);
  color: var(--color-white);
  border-color: var(--bleufonce);
}

.bouton span {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
}

.bouton.transp {
  background-color: transparent;
  color: var(--bleufonce);
}

.bouton.transp:hover {
  background-color: var(--bleu);
  color: var(--color-white);
  border-color: var(--bleu)
}

.bouton.bl {
  background-color: var(--color-white);
  color: var(--bleu);
  border-color: var(--color-white);
}

.bouton.bl:hover {
  background-color: var(--bleufonce);
  color: var(--color-white);
  border-color: var(--bleufonce);
}

.arrow {
  width: 18px;
  height: 18px;
  background-image: url(img/arrows.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-left: 0.75rem;
  margin-top: -0.2rem;
}

.bgrouge {
  background-color: var(--bleu);
  border-color: var(--bleu)
}

.wrapper {
  overflow: hidden;
}

.center {
  text-align: center
}

.alignfull {
  margin: 0 calc(50% - 50vw);
  max-width: 100vw;
  width: 100vw;
}

.alignfull.has-background {
  padding: 0em calc(-50% - -50vw) 0rem calc(-50% - -50vw);
}

.alignwide {
  margin: 2.5vw calc(25% - 25vw);
}

.has-medium-font-size {
  font-size: 1.25rem !important;
}

.has-large-font-size {
  font-size: 1.5rem !important;
}

.has-x-large-font-size {
  font-size: 2rem !important;
}

.has-small-font-size {
  font-size: 1rem !important;
}

.filtre {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .6);
}

.wp-block-button a:hover {
  background-color: var(--bleufonce);
  color: var(--color-white);
}

.wp-block-button a.has-color-black-background-color:hover {
  background-color: var(--bleu);
}

.has-color-black-background-color {
  background-color: var(--bleufonce);
}

.has-bleufonce-background-color {
  background-color: var(--bleufonce);
}

.has-bleu-background-color {
  background-color: var(--bleu);
}

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

.has-color-red-background-color {
  background-color: var(--bleu);
}

.has-color-yellow-background-color {
  background-color: var(--color-yellow);
}

.has-fond-yellow-background-color {
  background-color: var(--fond-yellow);
}

.has-color-grey-background-color {
  background-color: var(--color-grey);
}

.has-color-grey-light-background-color {
  background-color: var(--color-grey-light);
}

.has-gris-bleu-light-background-color {
  background-color: var(--gris-bleu-light);
}

.has-color-red-color {
  color: var(--bleu);
}

.has-color-white-color {
  color: var(--color-white);
}

.has-bleufonce-color {
  color: var(--bleufonce);
}

.has-bleu-color {
  color: var(--bleu);
}

.has-color-black-color {
  color: var(--bleufonce);
}

.has-color-yellow-color {
  color: var(--color-yellow);
}

.has-color-grey-color {
  color: var(--color-grey);
}

.has-color-grey-light-color {
  color: var(--color-grey-light);
}

.vignet {
  overflow: hidden;
  border-radius: 0.75rem;
  position: relative;
}

.vs {
  overflow: hidden;
  border-radius: 1rem;
  position: relative;
  background-color: var(--color-grey)
}

.vs img, .vignet img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.main, header .inner, footer .inner {
  width: 90%;
  margin: 0 auto;
  max-width: 1860px;
}

.swiper {
  padding-bottom: 2rem;
}

.swiper-button-prev, .swiper-button-next {
  width: 25px;
  height: 25px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  margin: 0;
}

.swiper-button-prev {
  background-image: url(img/prev.svg);
  left: unset;
  right: 25px;
}

.swiper-button-next {
  background-image: url(img/next.svg);
  right: 0;
}

.swiper-button-prev::after, .swiper-button-next::after {
  display: none;
}

.swiper-pagination {
  position: relative;
  width: auto !important;
  bottom: 0 !important;
}

.swiper-pagination-bullet {
  width: 15px;
  height: 15px;
  border: 2px solid var(--bleufonce);
  background-color: var(--color-white);
  opacity: 1
}

.swiper-pagination-bullet-active {
  background-color: var(--bleu);
}


@media screen and (min-width: 1920px) {
  .main, header .inner, footer .inner {
    max-width: 1680px;
  }
}

.index-2 {
  z-index: 2;
}