/*-------------------------
* GENERAL
*-------------------------*/

:root {
	--primary-color: #676E89;
	--secondary-color: #F5F5F7;
	--text-color: #1A1A1A;
	--padding-btn: 0.8em 2.8em;
	--taille-container: 1400px;
	--font-family: 'Inter', sans-serif;
	--vert: #0CA889;
	--bleu: #229AEB;
	--jaune: #F1C40F;
	--rouge: #ED0A00;
	--violet: #9B59B6;
}

@media screen and (min-width: 576px) {
	:root {
		--h1-size: 4rem;
		--h2-size: 3rem;
		--h3-size: 2rem;
	}
}

@media screen and (max-width: 576px) {
	:root {
		--h1-size: 3rem;
		--h2-size: 2rem;
		--h3-size: 1.6rem;
	}
}
	
::selection {
	background-color: var(--primary-color);
	color: #FFF;
}

.container {
    width: calc(var(--taille-container));
    padding-left: 1em;
    padding-right: 1em;
}

/*-------------------------
* TITRES
*-------------------------*/

span.pretitre {
    display: block;
    color: var(--primary-color);
    font-weight: 600;
    text-transform: uppercase;
}

h2 {
	font-weight: 500;
}

.home h2, section#call-to-action h2 {
	margin-top: 0;
	line-height: 1.3;
}

em {
	font-weight: normal;
}

/*-------------------------
* LIENS ET BOUTONS
*-------------------------*/

a.btn-primary {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: white;
}

body.page-id-14 article a.btn-primary {
	background-color: var(--vert);
	border-color: var(--vert)
}

body.page-id-24 article a.btn-primary {
	background-color: var(--bleu);
	border-color: var(--bleu)
}

body.page-id-44 article a.btn-primary {
	background-color: var(--jaune);
	border-color: var(--jaune);
	color: black;
}

body.page-id-50 article a.btn-primary {
	background-color: var(--violet);
	border-color: var(--violet)
}

a.btn-primary:hover, a.btn-primary:focus {
	filter: hue-rotate(-20deg);
} 

a:after, a:before {
    height: 20px;
    font-family: 'ehpad-mirebeau';
    display: inline-block;
    text-decoration: none;
}

a:before {margin-right: 0.2em}

a[target="_blank"]:not(.no-after):after {
    content: '\f111';
}

a[download]:after {
	content: '\f110';
}

a[href^="tel:"]:before {
	content: '\f114';
	font-weight: bold;
}

a[href*="goo.gl"]:before {
	content: '\f113';
	font-weight: bold;
}

p a:after, footer a:after {
	margin-left: 0.2em;
}

a.btn:after {
    margin-left: 6px;
}

/*-------------------------
* HEADER
*-------------------------*/

div#zone-annonce {
	text-align: center;
    background-color: #D64040;
    color: #FFF;
    padding: 0.5em 0px;
}

div#zone-annonce span {display: block}
div#zone-annonce p {margin: 0;}

section#hero {
    background-size: cover;
    background-repeat: no-repeat;
    color: #FFF;
    position: relative;
}

section#hero:before {
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%);
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

section#hero .container {
	border-bottom: 0;
	display: flex;
	column-gap: 1.5em;
	align-items: center;
}

section#hero * {
    position: relative;
}

section#hero h1 {
    max-width: 800px;
}

.home section#hero img {
    display: block;
    max-width: 50vw;
}

ul#blocs-coordonnees {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1em;
    row-gap: 0.5em;
}

ul#blocs-coordonnees li {
    background-color: rgba(255,255,255,0.8);
    border-radius: 4px;
    padding: 0.6em 1.5em;
    max-width: 350px;
}

ul#blocs-coordonnees a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: bold;
    font-size: 1.6rem;
    display: block;
}

ul#blocs-coordonnees a:hover {
    transform: scale(0.98);
}

ul#blocs-coordonnees a:after {
	display: none;
}

ul#blocs-coordonnees a:before {
	color: var(--primary-color);
	vertical-align: text-bottom;
}

ul#blocs-coordonnees span:first-child {
	color: var(--primary-color);
	text-transform: uppercase;
	font-size: small;
}

ul#blocs-coordonnees span:last-child {
	display: block;
}

.main-navigation ul {
    justify-content: center;
}

nav.main-navigation > ul > li {
	flex: 1;
    border-top-width: 6px;
    border-top-style: solid;
    background-position: top 10px right -15px;
    background-size: 80px;
    background-repeat: no-repeat;
    border-right: 1px solid #F1F2F4;
}

.js-nav-system__subnav {
  z-index: 9;
  background-color: white;
  margin: 0 auto;
  left: 0;
  right: 0;
  position: absolute;
  box-shadow: 2px 8px 6px rgb(0 0 0 / 10%);
}

main {
	transition: ease filter 0.2s;
}

[data-visually-hidden="true"] {
  display: none;
}
[data-visually-hidden="false"] {
  display: block;
}

nav.main-navigation em {
	font-weight: bold;
	font-style: normal;
	display: block;
}

nav#menu-desktop li a.lien-principal, footer nav#navigation-footer li a.lien-principal {
    font-weight: 500;
    padding: 14px;
}

li.menu-decouvrir {border-top-color: var(--vert); background-image: url(/wp-content/themes/antigone/assets/img/ehpad-theodore-arnault-mirebeau-vienne-icones-fond-menu_nous-decouvrir.svg);}
li.menu-decouvrir em, li.menu-decouvrir a:hover, li.menu-decouvrir a:focus {color: var(--vert);}

li.menu-vie-ehpad {border-top-color: var(--bleu);background-image: url(/wp-content/themes/antigone/assets/img/ehpad-theodore-arnault-mirebeau-vienne-icones-fond-menu_vie-ehpad.svg);}
li.menu-vie-ehpad em, li.menu-vie-ehpad a:hover, li.menu-vie-ehpad a:focus {color: var(--bleu);}

li.menu-animations {border-top-color: var(--jaune); background-image: url(/wp-content/themes/antigone/assets/img/ehpad-theodore-arnault-mirebeau-vienne-icones-fond-menu_actus-animations.svg);}
li.menu-animations em, li.menu-animations a:hover, li.menu-animations a:focus {color: var(--jaune);}

li.menu-infos-pratiques {border-top-color: var(--violet); background-image: url(/wp-content/themes/antigone/assets/img/ehpad-theodore-arnault-mirebeau-vienne-icones-fond-menu_infos-pratiques.svg);}
li.menu-infos-pratiques em, li.menu-infos-pratiques a:hover, li.menu-infos-pratiques a:focus {color: var(--violet);}

li.menu-contact {border-top-color: var(--rouge); background-image: url(/wp-content/themes/antigone/assets/img/ehpad-theodore-arnault-mirebeau-vienne-icones-fond-menu_contact.svg);}
li.menu-contact em, li.menu-contact a:hover, li.menu-contact a:focus {color: var(--rouge);}


/*-------------------------
* INTRODUCTION
*-------------------------*/

section#introduction {
	background-color: var(--secondary-color);
    padding: 4em 0px;
}

section#introduction .container {
    display: flex;
    flex-wrap: wrap;
    row-gap: 3em;
    column-gap: 3em;
    justify-content: space-between;
    align-items: center;
}

picture * {
    display: block;
    width: 100%;
}

/*-------------------------
* ACCES RAPIDE
*-------------------------*/

section#acces-rapide {
	padding: 4em 0px;
	text-align: center;
	background-color: white;
}

ul#liste-raccourcis {
    display: flex;
    flex-wrap: wrap;
    column-gap: 12px;
    row-gap: 12px;
    justify-content: center;
}

ul#liste-raccourcis li a {
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
	aspect-ratio: 1;
	width: calc(50vw - 28px);
	max-width: 200px;
	font-size: 110%;
}

ul#liste-raccourcis li a:hover, ul#liste-raccourcis li a:focus {
    color: var(--text-color);
}

ul#liste-raccourcis svg {
    width: 60px;
    height: 60px;
    margin: 0 auto 1em;
    flex: 100%;
	max-width: 100%;
}

.jaune {background-color: #FEF9E6;} .jaune:hover, .jaune:focus {background-color: #f9f0d0;}
.rouge {background-color: #FFEEED;} .rouge:hover, .rouge:focus {background-color: #fde3e2;}
.bleu {background-color: #EBF7FE;} .bleu:hover, .bleu:focus {background-color: #daf1ff;}
.vert {background-color: #E7F8F5;} .vert:hover, .vert:focus {background-color: #d7f3ee;}
.violet {background-color: #F5EEF8;} .violet:hover, .violet:focus {background-color: #ece0f1}


/*-------------------------
* ACTUS - FACEBOOK
*-------------------------*/

section#actus-facebook {
    background-color: var(--secondary-color);
    padding: 3em 0px;
}

span.titre {
    font-size: 120%;
    font-weight: 600;
    color: var(--primary-color);
}

ul#liste-articles-blog, ul#liste-offres-emploi {
    padding: 0;
    display: grid;
    row-gap: 2em;
    margin-top: 3em;
}

span.entry-meta {
    border-radius: 4px;
    padding: 2px 12px;
    display: inline-block;
    text-transform: uppercase;
    color: white;
    margin-bottom: 8px;
    font-size: 80%;
}

ul#liste-articles-blog p, ul#liste-offres-emploi p {
	margin: 0 auto 1em;
}

ul#liste-articles-blog article.post, ul#liste-offres-emploi article.post {
	display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1.5em;
    align-items: center;
}

span.entry-meta.histoire {background-color: #0078cb;}
span.entry-meta.initiatives {background-color: #007e65;}
span.entry-meta.emploi {background-color: var(--violet);}
span.entry-meta.default {background-color: var(--rouge);}

div#zone-fb {
    margin-top: 3em;
}

.cff-wrapper {
    margin-top: 3vh;
}

/*-------------------------
* CALL TO ACTION
*-------------------------*/

section#call-to-action {
    background-color: #e4e4eb;
    padding: 3em 0px;
}

section#call-to-action span.pretitre {
    color: #49506c;
}

section#call-to-action .container {
    display: flex;
    column-gap: 3em;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

/*-------------------------
* GALERIE PHOTO
*-------------------------*/

ul#galerie-photo {
    padding: 0;
    display: grid;
}

ul#galerie-photo img {
    display: block;
    width: 100%;
}

/*-------------------------
* FOOTER
*-------------------------*/

nav#navigation-footer > ul {
    display: grid;
}

nav#navigation-footer ul.submenu {
	margin: 0 auto;
	padding: 0px 14px;
}

nav#navigation-footer ul.submenu a {
	padding: 1em 0;
	font-weight: normal;
}

nav#navigation-footer ul.submenu a:hover {
	text-decoration: underline;
}

nav#navigation-footer > ul > li {
    padding-bottom: 2em;
    font-size: 1.5rem;
}

nav#navigation-footer li a.lien-principal em {
    font-size: 2rem;
}

footer address {
    padding: 0px 1em;
}

footer li#menu-contact a {
	font-weight: normal;
}

footer li#menu-contact a:not(.lien-principal, .telephone) {
    margin: 1em auto;
}

.copyright {
    background-color: #FFF;
    border-top: 1px solid #F1F2F4;
    padding: 1.5em 1em;
    color: var(--primary-color);
    text-align: center;
}


/*-------------------------
* PAGES INTERNES
*-------------------------*/

body:not(.home) nav#site-navigation {
    border-bottom: 1px solid #F1F2F4;
}

main#primary {
    margin: 3em auto 5em;
}

a#intro-site {
    display: inline-block;
    margin-bottom: 0.5em;
    text-decoration: none;
}

a#intro-site:hover {
    color: #FFF;
}

a#intro-site span {
    display: block;
    font-size: 50%;
    fill: #FFF;
}

a#intro-site svg {
    vertical-align: bottom;
    margin-right: 0.3em;
}

body:not(.home) section#hero img {
    display: block;
    max-width: 280px;
    margin: 0 auto;
}


/* PAGE GAZETTES */ 

ul.liste-gazettes {
    display: grid;
    row-gap: 2em;
}

ul.liste-gazettes img {
    display: block;
    margin: 0 auto;
    aspect-ratio: 5/7;
    object-fit: cover;
    width: 100%;
}

ul.liste-gazettes a {
	text-decoration: none;
	display: block;
}

ul.liste-gazettes h3 {
	margin: 0.5em auto 0;
}

section.zone-gazette {
    background-color: var(--secondary-color);
    padding: 1em 2em 4em;
    margin: 0 auto 2em;
    border-radius: 3px;
    text-align: center;
}

/* PAGES PARENTES */

ul#liste-pages-enfants {
    margin: 2em auto 0;
    padding: 0;
    list-style: none;
    display: grid;
}

ul#liste-pages-enfants h2 {
    font-size: 130%;
    font-weight: 600;
    margin: 0.5em auto;
}

ul#liste-pages-enfants p {
    margin: 0.5em auto 1em;
}

ul#liste-pages-enfants img {
	display: block;
	width: 100%;
}

ul#liste-offres-emploi {
 	margin-top: 1em;
}

/*-------------------------
* RESPONSIVE
*-------------------------*/

@media screen and (min-width:1350px) {
	nav.main-navigation em {font-size: 120%;}
}

@media screen and (max-width:1200px) {
	nav#navigation-footer > ul {
	    grid-template-columns: repeat(2, 1fr);
	}

	.home section#hero img {margin: 3em auto 0;}
	section#introduction .col-gauche, section#introduction .col-droite {
	    flex: 100%;
	    max-width: 100%;
	}
}

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

	a.has-submenu em:after {
	    content: '\f115';
	    margin-left: 0.6em;
	    font-family: 'ehpad-mirebeau';
	    font-size: 1rem;
	    vertical-align: middle;
	}

	ul#galerie-photo {grid-template-columns: repeat(6, 1fr);}
	section#introduction .col-gauche {
	    flex: calc(54% - 3em);
	    max-width: 54%;
	}

	section#introduction .col-droite {
	    flex: calc(46% - 3em);
	    max-width: 46%;
	}

	nav#navigation-footer > ul {grid-template-columns: repeat(5, 1fr);}
	ul.liste-gazettes {grid-template-columns: repeat(6, 1fr);column-gap: 1.8em;}
}

@media screen and (max-width: 992px) {

	section#hero {
	    background-image: url(/wp-content/themes/antigone/assets/img/ehpad-theodore-arnault-mirebeau-vienne-photo-panoramique-hero-slider-mobile-900x630.webp);
	    background-position: bottom center;
	}
	
	nav#site-navigation {
	    position: fixed;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    background-color: white;
	    box-shadow: 0px 0px 16px rgb(0 0 0 / 30%);
	    z-index: 9;
	}

	nav#site-navigation > ul > li {
		background-image: none;
		text-align: center;
	}

	nav#site-navigation a.lien-principal {
		font-size: 0;
		padding: 4px;
	    border-left: 1px solid #F1F2F4;
	    border-right: 1px solid #F1F2F4;
	}

	.main-navigation a span.mobile-only{font-size: initial;}

	nav#site-navigation svg {
		width: 36px;
		height: 36px;
		margin: 2px auto;
	}

	.copyright {padding-bottom: 80px;}
	ul#liste-pages-enfants {column-gap: 1em;row-gap: 2em;}

	section#call-to-action .container div.col-gauche {
		flex: 100%;
		max-width: 100%;
	}

	a#intro-site {font-size: 3rem;}
}

@media screen and (min-width:650px) and (max-width:1200px) {
	ul#galerie-photo {
	    grid-template-columns: repeat(3, 1fr);
	}

}

@media screen and (min-width:768px) and (max-width:1200px) {
	ul.liste-gazettes {
	    grid-template-columns: repeat(4, 1fr);
	    column-gap: 1.5em;
	}

	ul#liste-articles-blog article.post, ul#liste-offres-emploi article.post  {
	    grid-template-columns: repeat(1, 1fr);
	}

	section#hero .col-droite {
	    flex: 20%;
	    max-width: 20%;
	}
}

@media screen and (min-width:992px) and (max-width:1200px) {
	nav#site-navigation li.menu-infos-pratiques em {
		display: inline;
	}
}

@media screen and (min-width:650px) and (max-width:768px) {
	ul.liste-gazettes {
	    grid-template-columns: repeat(3, 1fr);
	    column-gap: 1em;
	}
}

@media screen and (max-width: 768px) {
	section#hero {text-align: center;}
	section#hero .container {justify-content: center; flex-wrap: wrap;}

	span.pretitre {font-size: 1.1rem;}
	section#introduction {text-align: center;}
	ul#blocs-coordonnees {justify-content: center}

	nav#navigation-footer > ul {grid-template-columns: repeat(1, 1fr);}
	section#hero {padding: 3em 0 0;}
	body:not(.home) section#hero img {display: none}
	body:not(.home) section#hero {padding: 3em 0;}
	ul#liste-articles-blog, ul#liste-offres-emploi {grid-template-columns: repeat(1, 1fr);}
}

@media screen and (min-width: 768px) {
	ul#blocs-coordonnees {justify-content: start}
	section#hero {padding: 1em 0 0;}
	section#hero .container {justify-content: space-between;}
	ul#liste-articles-blog, ul#liste-offres-emploi {grid-template-columns: repeat(2, 1fr);column-gap: 3em;}
}

@media screen and (max-width: 650px) {
	ul#galerie-photo {
	    grid-template-columns: repeat(2, 1fr);
	}

	ul#liste-pages-enfants {
	    grid-template-columns: repeat(1, 1fr);
	}

	ul.liste-gazettes {
	    grid-template-columns: repeat(2, 1fr);
	    column-gap: 0.5em;
	}
}

@media screen and (min-width:650px) {
	ul#liste-pages-enfants {
	    grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (min-width: 992px) {
	span.mobile-only {display: none}
	section#hero {
	    background-image: url(/wp-content/themes/antigone/assets/img/ehpad-theodore-arnault-mirebeau-vienne-photo-panoramique-hero-slider-desktop-2000x700.webp);
	    background-position: center;
	}

	section#hero h1 em {display: inline-block;}
	nav#site-navigation svg {display: none}
	nav#site-navigation a {padding: 1em 1.5em;}
	footer#colophon {margin-bottom: -24px;}

	ul#liste-pages-enfants {
	    grid-template-columns: repeat(3, 1fr);
	    column-gap: 3em;
	    row-gap: 3em;
	}

	section#call-to-action .container div.col-gauche {
		flex: calc(60% - 3em);
		max-width: 60%;
	}

	section#call-to-action .container a {
		flex: calc(40% - 3em);
		max-width: 380px;
	}

	a#intro-site {font-size: 4rem;}
	.blur {filter: blur(2px);}
}

@media screen and (min-width:480px) {
	ul#liste-articles-blog a.post-thumbnail, ul#liste-offres-emploi a.post-thumbnail {
		grid-area: 1 / 1 / 3 / 2;
		aspect-ratio: 3/2;
	}
}

@media screen and (max-width:480px) {
	ul#liste-articles-blog article.post, ul#liste-offres-emploi article.post {
	    display: grid;
	    grid-template-columns: repeat(1, 1fr);
	    column-gap: 1.5em;
	    align-items: center;
	}
}