body{
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.875rem;
  font-size: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);
  font-weight: 500;
}

/**********************************************************************************************************************************/
/* CHARTE
/**********************************************************************************************************************************/
.noscroll {
  overflow: hidden;
}

.container, .frame-layout-0 {
  margin: 0 auto;
  padding-left:  var(--padding);
  padding-right:  var(--padding);
  width: 100%;
}

@media only screen and (min-width: 960px) {
  /*
  .container {
    max-width: 1200px;
  }
  */
}

@media only screen and (min-width: 1240px) {

}

@media only screen and (min-width: 1600px) {
  .container, .frame-layout-0 {
    max-width: 1450px;
  }
}

@media only screen and (min-width: 600px) {
}
@media only screen and (min-width: 800px) {
}
@media only screen and (min-width: 1200px) {
}
@media only screen and (min-width: 1600px) {
}
@media only screen and (min-width: 1990px) {
}

/* ######################################################################################################################################################## #
# HEADER
# ######################################################################################################################################################## */
#header{
  position: sticky;
  top: 0;
  z-index: 10;
  background: #FFFFFF;
  background: var(--rouge);
}

#header-socials {
  padding: 10px;
  background: #FFFFFF;
}
#header-socials ul{
  display: flex;
  gap: 20px;
  justify-content: center;
}

#header-socials img{
  max-height: 32px;
  width: auto;
  display: block;
}


#header-flex{
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

#logo{
  max-width: 240px;
  margin-top: -10px;
  margin-bottom: -10px;
}

@media only screen and (min-width: 600px) {
  #logo{
    max-width: 320px;
    margin-top: -20px;
    margin-bottom: -20px;
  }
}

#logo img{
  display: block;
  width:100%;
  height: auto;
}


/* ######################################################################################################################################################## #
# NAVIGATION
# ######################################################################################################################################################## */
#navigation{

}

.openMenu #navigation {
	position: fixed;
	top: 0;
	right: 0;
	min-width: 80vw;
	bottom: 0;
    overflow: auto;
}

.openMenu #navigation::before {
	content: '';
	display: block;
	position: fixed;
	background: rgba(0,0,0,.7);
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

#menu{
  display: none;
}

@media only screen and (min-width: 900px) {
  #menu{
    display: flex;
    gap: var(--padding);
  }
}

.openMenu #menu {
	background: #FFFFFF;
  min-height: calc(100% - 60px);
	position: relative;
  display: block;
  border-radius: 20px 0 0 0;
  overflow: hidden;
  margin-top: 60px;
}

#menu a,
#menu .nolink{
  color: #FFFFFF;
	display: block;
  cursor: pointer;
  font-weight: 700;
  font-style: italic;
  position: relative;
  text-transform: uppercase;
  font-size: 25px;
  min-width: max-content;
}

@media only screen and (min-width: 800px) and (max-width: 1100px) {
  #menu a,
  #menu .nolink{
    font-size: 14px;
  }
}

#menu .submenu-gip,
#menu .submenu {
  display: none;
}

#menu .focus .submenu {
	display: flex;
	flex-direction: column;
  overflow: hidden;
}

.openMenu #menu > .focus{
  background: var(--bleu);
}

.openMenu #menu .focus .submenu{
	background: #FFFFFF;
	margin-left: var(--margin);
	border-radius: 20px 0 0 0;
	border-left: 1px solid #cecece;
	border-top: 1px solid #cecece;
}


html:not(.openMenu) #menu .focus .submenu {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  transform: translateX(-25%) translateY(40px);
	position: absolute;
	background: var(--rouge);
	border-radius: 0 0 20px 20px;
}

#menu .submenu a {
	padding: 25px;
	display: block;
  font-weight: 300;
}

#menu .submenu li + li{
  border-top: 1px solid #cecece;
}

#menu .submenu li a{
	padding: 25px;
  font-weight: 300;
  color: #FFFFFF;
}

#menu .submenu li a:hover{
  background: #fafafa;
  color: var(--rouge);
}

.openMenu #menu > li {
	border-bottom: 1px solid #CECECE;
}

.openMenu #menu a,
.openMenu #menu .nolink {
	color: inherit;
	display: block;
	cursor: pointer;
	font-weight: 500;
	padding: 25px;
}

#menu .nolink {
  position: relative;
  padding-right: 20px;
}

.nolink::after{
	content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: var(--padding);
  background: url(../../Icons/arrow-down.svg) no-repeat center / contain transparent;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  transition: all .2s ease;
}

html:not(.openMenu) .nolink::after{
  right: 0;
}

.focus > .nolink::after{
  transform: translateY(-50%) rotate(180deg);
}

/*
#menuToggle{
  position: absolute;
  right: 0;
  top: 50%;
}*/

#menuToggle{
  cursor: pointer;
}

@media only screen and (min-width: 900px) {
  #menuToggle{
    display: none;
  }
}

.openMenu #menuToggle {
	position: absolute;
	top: var(--padding);
	right: var(--padding);
	z-index: 4;
}

#menuToggle span {
	height: 4px;
	width: 30px;
	display: block;
	margin: 4px 0;
	border-radius: 320px;
	background: #FFFFFF;
  transition: all .2s ease;
}

.openMenu #menuToggle span{
  background: #FFFFFF;
}

.openMenu #menuToggle span:nth-child(2){
  opacity: 0;
}

.openMenu #menuToggle span:nth-child(1){
  transform: rotate(45deg);
  transform-origin: left;
}

.openMenu #menuToggle span:nth-child(3){
  transform: rotate(-45deg) translateX(-4px) translateY(4px);
  transform-origin: left;
}

/* ######################################################################################################################################################## #
# BANNER
# ######################################################################################################################################################## */
#main{
  display: flex;
  flex-direction: column;
  gap: var(--margin);
  padding: var(--margin) 0;
}

/* ######################################################################################################################################################## #
# BANNER
# ######################################################################################################################################################## */
#footer{
  margin-top: var(--megaspace);
  background: var(--rouge);
  color: #FFFFFF;
  padding: 56px 0 0;
}

#footer a{
  color: inherit;
  text-decoration: none;
}

#footer .bouton{
  background: var(--bleu);
}

#footer-flex{
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: 36px;
  padding-bottom: 48px;
}

#footer-logo{
  display: block;
  line-height: 0;
}

#footer-logo img{
  width: 200px;
  max-width: 60vw;
  height: auto;
}

#footer-socials{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  padding: 32px 0;
  border-top: 1px solid rgba(255, 255, 255, .35);
  border-bottom: 1px solid rgba(255, 255, 255, .35);
}

.footer-titre{
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .04em;
}

#footer-socials ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

#footer-socials ul li{
  margin: 0;
}

#footer-socials ul li a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  transition: background .2s ease, border-color .2s ease;
}

#footer-socials ul li a svg{
  width: 20px;
  height: 20px;
  display: block;
  fill: #FFFFFF;
  transition: fill .2s ease;
}

#footer-socials ul li a:hover,
#footer-socials ul li a:focus-visible{
  background: #FFFFFF;
  border-color: #FFFFFF;
}

#footer-socials ul li a:hover svg,
#footer-socials ul li a:focus-visible svg{
  fill: var(--rouge);
}

#footer-contact{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

#footer-contact p{
  margin: 0;
  color: #FFFFFF;
  text-transform: uppercase;
  font-size: 19px;
  line-height: 1.35;
  font-weight: 700;
  font-style: italic;
}

#footer-contact p a:hover,
#footer-contact p a:focus-visible{
  text-decoration: underline;
}

#footer-contact .bouton{
  margin-top: 8px;
  font-size: 22px;
}

#footer-legals{
  border-top: 1px solid rgba(255, 255, 255, .25);
  background: rgba(0, 0, 0, .12);
  padding: 16px 0;
  font-size: 15px;
}

#footer-legals .container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 24px;
}

#footer-legals p{
  margin: 0;
  opacity: .85;
}

#footer-legals ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#footer-legals li{
  margin: 0;
}

#footer-legals a{
  opacity: .85;
}

#footer-legals a:hover,
#footer-legals a:focus-visible{
  opacity: 1;
  text-decoration: underline;
}

@media only screen and (min-width: 900px) {
  #footer{
    padding-top: 72px;
  }

  #footer-flex{
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    justify-items: stretch;
    text-align: left;
    gap: 0;
    padding-bottom: 72px;
  }

  #footer-logo{
    justify-self: start;
    padding-right: 64px;
  }

  #footer-logo img{
    width: 230px;
  }

  #footer-socials{
    width: auto;
    align-self: stretch;
    padding: 12px 72px;
    border-top: none;
    border-bottom: none;
    border-left: 1px solid rgba(255, 255, 255, .35);
    border-right: 1px solid rgba(255, 255, 255, .35);
  }

  #footer-contact{
    align-items: flex-start;
    justify-self: end;
    padding-left: 64px;
  }

  #footer-legals .container{
    justify-content: space-between;
  }
}

/* ######################################################################################################################################################## #
# GARDE-FOUS RESPONSIVE (globaux, faible spécificité : les composants à dimensions fixes gardent la priorité)
# ######################################################################################################################################################## */

/* jamais de scroll horizontal parasite (clip = ne casse pas le header sticky) */
body{
  max-width: 100%;
  overflow-x: clip;
}

/* les images de contenu ne débordent jamais de leur conteneur */
img{
  max-width: 100%;
  height: auto; /* sinon l'attribut height reste fixe quand la largeur rétrécit => image écrasée */
}

/* images RTE / content elements : ratio préservé quand la largeur est contrainte */
.frame-type-text img,
.frame-type-textpic img,
.frame-type-textmedia img,
.frame-type-image img,
.ce-bodytext img,
.rte img{
  max-width: 100%;
  height: auto;
}

/* mots/URL très longs qui cassent la mise en page sur mobile */
.frame-type-text,
.ce-bodytext,
.banniere-title h1,
.profil-content h3,
.actus-slide-content h2{
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* tableaux RTE : scroll interne plutôt que débordement de page */
.frame-type-text table,
.ce-bodytext table{
  display: block;
  max-width: 100%;
  overflow-x: auto;
}