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

:root {
	--primary-color: #9A6880;
	--secondary-color: #6A6F55;
	--text-color: #57575C;
	--padding-btn: 0.8em 2em;
	--taille-container: 1450px;
	--font-family: 'Cabin', sans-serif;
}

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

@media screen and (max-width: 576px) {
	:root {
		--h1-size: 3rem;
		--h2-size: 2.4rem;
		--h3-size: 1.8rem;
	}

	a.btn {
		font-size: 110%;
	}
}
	
::selection {
	background-color: var(--primary-color);
	color: white; 
}

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

main.site-main {
    background-image: url(/wp-content/themes/antigone/assets/img/agyl-association-gynecologues-liberaux-strasbourg-alsace-logo-boules-opacite-reduite.svg), url(/wp-content/themes/antigone/assets/img/agyl-association-gynecologues-liberaux-strasbourg-alsace-logo-boules-opacite-reduite.svg);
    background-size: 600px;
    background-position: top left, bottom right;
    background-repeat: no-repeat;
}

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

.pink {color: var(--primary-color);}
.green {color: var(--secondary-color);}

h1,h2,h3 {font-weight: 500;}
em {font-style: normal; font-weight: 700;}
.entry-content h2 {
    color: var(--primary-color);
    font-size: 160%;
}

.entry-content h3 {
    text-transform: uppercase;
    color: var(--secondary-color);
    display: inline;
}

img#billes-logo {
    width: 34px;
    height: 34px;
    vertical-align: text-top;
    margin-right: 0.2em;
}

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

a.btn-bleu {
	background-color: #187BAC;
	border-color: #187BAC;
	color: white;
    fill: #FFF;
}

a.btn-bleu svg {
    width: 1.6em;
    height: 1.6em;
    vertical-align: middle;
    margin-right: 0.5em;
}

a.btn-bleu:hover {
    background-color: white;
    color: #187BAC;
    fill: #187BAC;
}

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

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

a.btn-blanc {
	background-color: #FFF;
	border-color: #FFF;
	color: #187BAC;
}

a.btn-blanc:hover {
    background-color: transparent;
    color: #FFF;
}

a:not(.btn)[target="_blank"]:after {
    display: inline-block;
    width: 12px;
    height: 12px;
    content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iMTIiIGhlaWdodD0iMTIiCnZpZXdCb3g9IjAsMCwyNTYsMjU2IgpzdHlsZT0iZmlsbDojMDAwMDAwOyI+CjxnIGZpbGw9IiM1NzU3NWMiIGZpbGwtcnVsZT0ibm9uemVybyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lY2FwPSJidXR0IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9IiIgc3Ryb2tlLWRhc2hvZmZzZXQ9IjAiIGZvbnQtZmFtaWx5PSJub25lIiBmb250LXdlaWdodD0ibm9uZSIgZm9udC1zaXplPSJub25lIiB0ZXh0LWFuY2hvcj0ibm9uZSIgc3R5bGU9Im1peC1ibGVuZC1tb2RlOiBub3JtYWwiPjxnIHRyYW5zZm9ybT0ic2NhbGUoMTAuNjY2NjcsMTAuNjY2NjcpIj48cGF0aCBkPSJNMTksMjFoLTE0Yy0xLjEsMCAtMiwtMC45IC0yLC0ydi0xNGMwLC0xLjEgMC45LC0yIDIsLTJoN3YyaC03djE0aDE0di03aDJ2N2MwLDEuMSAtMC45LDIgLTIsMnoiPjwvcGF0aD48cGF0aCBkPSJNMjEsMTBoLTJ2LTVoLTV2LTJoN3oiPjwvcGF0aD48cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMi40NzA1LDEzLjAzNTgzKSByb3RhdGUoLTQ1LjAwMSkiIGQ9Ik02LjcsOC41aDE1LjZ2MmgtMTUuNnoiPjwvcGF0aD48L2c+PC9nPgo8L3N2Zz4=');
    margin-left: 0.3em;
}

address a[target="_blank"]:after {
    vertical-align: text-top;
}

a.link {
    font-size: 110%;
}

a.btn-rdv {
    padding: 0px 8px 4px;
    background-color: #187bac;
    color: white;
    font-size: 1.6em;
    border-radius: 2em;
    position: absolute;
    right: 0.3em;
    top: 0.3em;
}

a.btn-rdv:hover, a.btn-rdv:focus {
    background-color: #10597c;
}

/*-------------------------
* HEADER & NAVIGATION
*-------------------------*/

header#masthead div {
    display: flex;
    column-gap: 2em;
    align-items: center;
    flex-wrap: wrap;
}

header#masthead hr {
    margin: 0.5em auto 0;
    background-color: #DFDFDF;
}

a#site-logo {
	display: inline-block;
}

a#site-logo img {
    max-width: 180px;
    width: 35vw;
}

header address {
    text-align: left;
    display: flex;
    column-gap: 2em;
}

header#masthead address a {
    text-decoration: none;
}

nav#site-navigation {
    display: flex;
    justify-content: space-between;
    column-gap: 3em;
}

.main-navigation ul {
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.main-navigation li {
    flex: auto;
    min-width: 54px;
}

.submenu {
    position: absolute;
    background-color: #FFF;
    padding-top: 1em;
}

a.js-nav-system__subnav__link {
    padding: 0.9em 1.2em;
}

a.js-nav-system__subnav__link:hover {
    background-color: #F7F8F2;
}

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

nav#site-navigation i {
    display: block;
    margin: 0 auto 5px;
}

nav#site-navigation i, nav#site-navigation svg {
	width: 3.5em;
	height: 3.5em;
}

form.search-form {position: relative; flex: 0 1 280px;}
input.search-field {
    background-color: #F3F3F3;
    border: none;
    padding: 14px;
}

input.search-submit {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 0;
    background: none;
    border: none;
    font-size: 0;
    width: 40px;
}

form.search-form:after {
    content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iMjYiIGhlaWdodD0iMjYiCnZpZXdCb3g9IjAgMCAzMiAzMiIKc3R5bGU9ImZpbGw6IzAwMDAwMDsiPgo8cGF0aCBkPSJNIDE5IDMgQyAxMy40ODgyODEgMyA5IDcuNDg4MjgxIDkgMTMgQyA5IDE1LjM5NDUzMSA5LjgzOTg0NCAxNy41ODk4NDQgMTEuMjUgMTkuMzEyNSBMIDMuMjgxMjUgMjcuMjgxMjUgTCA0LjcxODc1IDI4LjcxODc1IEwgMTIuNjg3NSAyMC43NSBDIDE0LjQxMDE1NiAyMi4xNjAxNTYgMTYuNjA1NDY5IDIzIDE5IDIzIEMgMjQuNTExNzE5IDIzIDI5IDE4LjUxMTcxOSAyOSAxMyBDIDI5IDcuNDg4MjgxIDI0LjUxMTcxOSAzIDE5IDMgWiBNIDE5IDUgQyAyMy40Mjk2ODggNSAyNyA4LjU3MDMxMyAyNyAxMyBDIDI3IDE3LjQyOTY4OCAyMy40Mjk2ODggMjEgMTkgMjEgQyAxNC41NzAzMTMgMjEgMTEgMTcuNDI5Njg4IDExIDEzIEMgMTEgOC41NzAzMTMgMTQuNTcwMzEzIDUgMTkgNSBaIj48L3BhdGg+Cjwvc3ZnPg==');
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: 30px;
    pointer-events: none;
}


/*---------------------------------
* HERO SLIDER + NAV TRANSVERSALE
*---------------------------------*/

section#hero-slider {
    text-align: center;
    background-color: #eee;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 2em 0px 6em;
}

section#hero-slider h1 {
    max-width: 700px;
    margin: 1em auto 0;
}

section#hero-slider p {
    max-width: 700px;
    margin: 1em auto 2em;
}

section#hero-slider span.info-user {
    color: var(--secondary-color);
}

nav#navigation-activites {
    margin-top: -4em;
    padding-bottom: 1.5em;
}

ul#liste-activites-agyl {
    text-align: center;
}

ul#liste-activites-agyl li {
    box-shadow: 1px 1px 20px rgba(0,0,0,0.06);
    background-color: white;
    border-radius: 4px;
    margin: 0 1em 1em 0;
}

ul#liste-activites-agyl a {
    display: block;
    text-decoration: none;
    padding: 2em 1.5em 1em;
    height: 100%;
    border: 2px solid transparent;
    border-radius: 3px;
}

ul#liste-activites-agyl a:hover, ul#liste-activites-agyl a:focus {
    border-color: var(--primary-color);
    color: var(--text-color);
}

strong.titre-activite {
    font-size: 112%;
    color: var(--secondary-color);
    text-transform: uppercase;
}

ul#liste-activites-agyl img {
    width: 7em;
    display: block;
    margin: 0 auto 1em;
}

ul#liste-activites-agyl p {
    margin-bottom: 0;
}

/*-------------------------
* INTRO EQUIPE
*-------------------------*/

section#introduction-equipe {
    margin: 5em auto 0;
    padding-bottom: 6em;
    display: grid;
}

ul#liste-equipe-accueil {
    margin: 2em auto;
    padding-bottom: 1em;
}

ul#liste-equipe-accueil li {
    margin-right: 1em;
    width: 270px;
}

article.membre-equipe {
	text-align: center;
	border-radius: 4px;
	overflow: hidden;
	position: relative;
}

article.membre-equipe img {
    width: 100%;
    display: block;
}

article.membre-equipe h3 {
    background: rgb(154,104,128);
    background: linear-gradient(0deg, rgb(122 83 102) 0%, rgba(255,255,255,0) 100%);
    color: white;
    padding: 6em 1em 1em;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.info-user {
    font-style: italic;
    display: block;
    margin: 3em 0 0;
}

section#introduction-equipe span.info-user {
    color: #815c6d;
}

span.info-user img {
    width: 1.6rem;
    height: 1.6rem;
    vertical-align: middle;
    margin-right: 4px;
}

section#introduction-equipe a.btn {
    margin-top: 0.6em;
}

article.membre-equipe a:after {
    position: absolute;
    top: 0.5em;
    right: 1em;
}

/*-------------------------
* GALERIE + FOOTER
*-------------------------*/

section#appel-action-doctolib {
    background-color: #187BAC;
    color: white;
    font-weight: 700;
    padding-top: 2em;
    text-align: center;
}

section#appel-action-doctolib span {
    font-size: 120%;
    max-width: 500px;
}

section#appel-action-doctolib img {
    width: 4em;
}

section#appel-action-doctolib div {
    display: flex;
    flex-wrap: wrap;
    row-gap: 2em;
    column-gap: 2em;
    align-items: center;
    justify-content: center;
}

ul#galerie-cabinets-agyl {
    display: grid;
}

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

footer#colophon {
    padding-top: 3em;
    background-color: #F7F8F2;
}

footer#colophon img {
    display: block;
    width: 200px;
    margin: 0 auto;
}

nav#navigation-footer {
    margin: 4em auto;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    row-gap: 2em;
    column-gap: 2em;
    justify-content: space-between;
}

nav#navigation-footer ul {
    flex: 100%;
    max-width: 100%;
}

nav#navigation-footer a {
    display: inline-table;
    line-height: 2.2;
    text-decoration: none;
}

footer#colophon address div {
    margin-bottom: 2em;
}

footer#colophon h3 {
    margin-top: 0;
}

footer#colophon address a {
    text-decoration: none;
    line-height: 1.5;
    display: block;
}

footer#colophon address i, footer#colophon address svg {
    width: 1.3em;
    height: 1.3em;
}

footer#colophon address i {
    vertical-align: middle;
}

.nom-cabinet {
    font-weight: 700;
    display: block;
    text-transform: uppercase;
}

footer#colophon .nom-cabinet {
	font-size: 120%;
}

.copyright {
    background-color: #FFF;
    border-top: 1px solid #D8DCC5;
}

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

body:not(.home) ul#galerie-cabinets-agyl {
    margin-top: 6em;
}

body:not(.home) header#masthead {
    border-bottom: 1px solid #dfdfdf;
}

img.featured-img {
    display: block;
    margin-bottom: 2em;
    height: 200px;
    width: 100%;
    background-color: #f7f8f2;
    border: none;
    object-fit: cover;
}

header.page-header {
    margin-bottom: 2em;
}

h2.entry-title {
    font-size: 130%;
    margin: 0.5em 0 0;
}

span.metier p {
    margin: 0 auto 1em;
    font-weight: 700;
    color: var(--primary-color);
}

button.flickity-button.flickity-prev-next-button {
    width: 36px;
    height: 36px;
    background: none;
}

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

ul#liste-pages-enfants h2 {
    margin: 0 auto;
    font-size: 160%;
    color: var(--primary-color);
}

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

ul#liste-pages-enfants img {
    width: 100%;
    background-color: #f7f8f2;
    aspect-ratio: 3/2;
    object-fit: cover;
    display: block;
}

ul#liste-pages-enfants li {
    display: grid;
}

article.equipe {
    position: relative;
}

article.search {
    margin: 0 0 1em;
}

article.search a {
    border: 1px solid var(--secondary-color);
    border-radius: 3px;
    padding: 0 1em;
    text-decoration: none;
    display: block;
}

article.search a:hover {
    background-color: #F7F8F2;
    border-color: var(--primary-color);
}

.page-id-71 .entry-content, .page-id-69 .entry-content {
    display: grid;
    column-gap: 2em;
    row-gap: 2em;
}

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

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

    ul#liste-pages-enfants img {
        margin-bottom: 1em;
        max-height: 170px;
    }
}

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

@media screen and (min-width:500px) and (max-width:850px) {
    ul#liste-pages-enfants {
        column-gap: 1.5em;
    }
}

@media screen and (min-width: 850px) and (max-width: 1200px) {
    header address {
        margin-right: 0;
    }

    ul#galerie-cabinets-agyl {
        grid-template-columns: repeat(3, 1fr);
    }

    nav#navigation-footer ul, nav#navigation-footer address {
        flex: calc((100% / 2) - 2em);
        max-width: calc(100% / 2);
    }

    ul#liste-pages-enfants li {
        grid-template-columns: 1fr 1fr;
        row-gap: 1em;
    }

}

@media screen and (min-width: 850px) {
    header#masthead div {justify-content: space-between;}

    nav#site-navigation {
       flex: 100%;
       max-width: 100%;
    }

    li.has-submenu > a:after {
        content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iMTIiIGhlaWdodD0iMTIiCnZpZXdCb3g9IjAsMCwyNTYsMjU2IgpzdHlsZT0iZmlsbDojMDAwMDAwOyI+CjxnIGZpbGw9IiM1NzU3NWMiIGZpbGwtcnVsZT0ibm9uemVybyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lY2FwPSJidXR0IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9IiIgc3Ryb2tlLWRhc2hvZmZzZXQ9IjAiIGZvbnQtZmFtaWx5PSJub25lIiBmb250LXdlaWdodD0ibm9uZSIgZm9udC1zaXplPSJub25lIiB0ZXh0LWFuY2hvcj0ibm9uZSIgc3R5bGU9Im1peC1ibGVuZC1tb2RlOiBub3JtYWwiPjxnIHRyYW5zZm9ybT0ic2NhbGUoMTAuNjY2NjcsMTAuNjY2NjcpIj48cGF0aCBkPSJNNS43MDcsMTAuNzA3bDUuNTg2LDUuNTg2YzAuMzkxLDAuMzkxIDEuMDI0LDAuMzkxIDEuNDE0LDBsNS41ODYsLTUuNTg2YzAuNjMsLTAuNjMgMC4xODQsLTEuNzA3IC0wLjcwNywtMS43MDdoLTExLjE3MmMtMC44OTEsMCAtMS4zMzcsMS4wNzcgLTAuNzA3LDEuNzA3eiI+PC9wYXRoPjwvZz48L2c+Cjwvc3ZnPg==');
        display: inline-block;
        margin-left: 0.3em;
    }

    .main-navigation ul {column-gap: 3em; margin-left: 0;}
    .main-navigation > ul { padding: 14px 0px;}
    nav#site-navigation i, .mobile-only {display: none;}
    li#menu-contact a {font-size: 0;}
    li#menu-contact span {font-size: initial;} 
    section#hero-slider {padding-bottom: 8em;}
    nav#navigation-footer ul, nav#navigation-footer address {text-align: left;}
    .copyright {padding: 1em 0;}
    ul#liste-equipe-accueil {padding-left: 4.5em;}
    button.flickity-prev-next-button.next {right: -10px;}

    ul#liste-activites-agyl {text-align: center;padding: 0 5em;}
    ul#liste-activites-agyl li {width: 320px;}

    ul#liste-pages-enfants {
        column-gap: 3em;
    }

    ul#liste-pages-enfants li {
        grid-template-columns: 35% 65%;
        column-gap: 1em;
    }

    .page-id-71 .entry-content, .page-id-69 .entry-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 850px) {
    .desktop-only {display: none;}
    header#masthead div {justify-content: center; text-align: center;padding-top: 0.2em;padding-bottom: 0.2em;}

    header address {display: none;}

    nav#site-navigation {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: white;
        box-shadow: 0 -1px 25px rgb(0 0 0 / 20%);
        text-align: center;
        padding: 0.6em 0.6em 0.8em;
        z-index: 9;
    }

    .main-navigation ul {
        flex: 100%;
    }

    nav#site-navigation a {
        font-size: 85%;
        text-transform: capitalize;
    }

    ul#galerie-cabinets-agyl {
        grid-template-columns: repeat(2, 1fr);
    }

    .copyright {
        margin-bottom: 7em;
        padding: 2em 0;
    }

    button.flickity-button {
        display: none;
    }

    ul#liste-activites-agyl li {width: 240px;}

    body.post-type-archive-equipe section#main-archives {
        column-gap: 0.6em;
    }

}

@media screen and (max-width: 1200px) {
    header a.btn-bleu {display: none;}
    footer#colophon address { order: 1;}
    nav#navigation-footer ul {order: 2;}

    nav#navigation-footer a {
        padding: 0.3em 0;
    }
}

@media screen and (min-width: 1200px) {
    ul#galerie-cabinets-agyl {
        grid-template-columns: repeat(6, 1fr);
    }

    nav#navigation-footer ul, nav#navigation-footer address {
        flex: calc((100% / 4) - 2em);
        max-width: calc(100% / 4);
    }

}

@media screen and (max-width: 992px) {
    form.search-form {display: none;}
    section#appel-action-doctolib {padding-bottom: 3em; justify-content: center;}

    section#hero-slider {
        background-image: url('/wp-content/themes/antigone/assets/img/agyl-association-gynecologues-liberaux-strasbourg-alsace-fond-slider-mobile-960x900.webp');
    }
}

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

    section#hero-slider {
        background-image: url('/wp-content/themes/antigone/assets/img/agyl-association-gynecologues-liberaux-strasbourg-alsace-fond-slider-desktop-1920x500.webp');
    }

    section#introduction-equipe {
        grid-template-columns: 52% 48%;
        grid-column-gap: 2em;
    }

    section#appel-action-doctolib span {text-align: left;}
    section#appel-action-doctolib {padding-bottom: 2em;}
    section#appel-action-doctolib a.btn {margin-right: 0;margin-left: auto;}
}