@charset "UTF-8";
/*
Theme Name:  Gli Angeli - JS Bach Cantate
Description: Thème 2025
Author:      Pierre Schilling
Template:    twentytwenty
Version:     1.0.0
Text Domain: twenty-twenty-child
*/

@charset "UTF-8";
/* CSS Document */
#wpadminbar {
	display:none!important
	}
	
	body:not(.custom-background-image).admin-bar:before {
    top: 0!important;
}

html {
   height: 100%;
}
:root{
  --orange: #D16B1C;
   --typosize: clamp(17px, 17vw / 12.8, 17px);
   --padding: 30px;
   --pad: 15px;
   --shadow:   0 0 10px #0000001f;
   --border: 1px solid hsl(0deg 0% 0% / 10%);
   --video:60vh;
}
@media screen and (max-width: 900px) {
  :root{
     --typosize: clamp(17px, 17vw / 12.8, 17px);
     --padding: 20px;
     --pad: 10px;
  }
}
html, body {
    width: 100%;
    margin: 0px;
    font-weight: 500;
    color: black;
    -webkit-overflow-scrolling: touch;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    font-family: var(--typo);
     text-rendering:optimizeLegibility !important;

}

body {
    position: absolute;
    width: 100%;
	height: 100%;
	background-position:center;


}
* {
	box-sizing: border-box;
}
*:focus {
    outline: none;
}
.grecaptcha-badge {
    display: none !important;
}

p {
    margin: 0 0 20px;
    white-space: initial;
    font-weight: 100;
}


p:last-child {
    margin: 0;
}


.sommaire strong{
   font-weight:600;
}
 b {
}



sup {
}

li:last-child {
    margin-bottom: 0!important;
}


a {
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    text-decoration: none!important;
    color: inherit;
    cursor: pointer;
    opacity: 1;
    color:inherit;
}



p a {
    color: inherit;
    border-bottom: 1px solid;
}

ul {
    margin: 0 0 20px 0;
    padding: 0;
}

li{
	margin:0;
	padding:0;
	list-style: none;
}

.col li {
    list-style: circle;
    margin-left: 20px;
    margin-bottom: 5px;
}



sup {
    line-height: 0;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0; 
}

h1 {

font-weight:500;
}
h1, h3{
   font-family: var(--garamond);
}

h2, h4, h1.title-text {
font-family: var(--typo);
font-weight:300;
}
.header-text {
  font-size: clamp(0.9375rem, 0.9176rem + 0.1064vw, 1.25rem)!important;
    text-align: center;
}

h1.sub-title, h1.title-text {
    font-weight: 100;
    text-transform: uppercase;
}

h2, h3{
   font-size:clamp(15px, 17vw / 12.8, 17px);
}
h4{
  font-size:clamp(14px, 16vw / 12.8, 16px);
}
h3, h4{
   font-weight:100;
   text-transform: uppercase;
}
h5 {
    font-weight: 100;
    font-size: 0.9em;
}

.undertitle{
   margin-bottom:15px;
}

.sommaire{
   font-family: var(--garamond);
}
.sommaire p{
   font-size: var(--typosize);
}

h4{}
h5{}
h6{}


img{
	max-width:100%;
	height:auto;
}

img.alignright {
    float: right;
}
img.alignleft {
    float: left;
}


* {
   box-sizing: border-box;
  }
  *:focus {
     outline: none;
  }
::-webkit-scrollbar {
   width: 2px;
  }

  ::-webkit-scrollbar-track {
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
   background: rgba(136, 136, 136, 0.508); 
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
   background: #555; 
  }
  
  
  .entry-content::-webkit-scrollbar{
   width:0;
  }

input, textarea {
    width: 100%;
    padding: 5px;
    font-family: inherit;
    font-size: inherit;
    margin-top: 10px;
    border: 1px solid;
}

input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}
.col {
    overflow:auto;
}
.logos-container {
    display: flex
;
    width: 100%;
    justify-content: space-between;
    align-items: self-end;
}

.logos-container > * {
    flex: 1;
}
.logos-container > *:last-child{
  text-align:right;
}
.footer-credits {
    display: flex
;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.logos-container img {
    max-height: calc(var(--padding) * 2);
}
.logos-container .petit-logo{
    max-height: calc(var(--padding) * 2.5);
}

.homepage{
    width: 100%;
    height: 100%;
    padding:var(--padding);
}
.homepage-container {
    width: 100%;
    max-width: 800px;
    height:100%;
    max-height: calc(100% - 100px);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex
;
    flex-direction: column;
    gap: var(--padding);
    padding: var(--padding);
}

.presentation {
    column-count: 1;
    text-align: center;
    padding: var(--pad) 0 0 0;
    column-gap: 10px;
    column-fill: balance;
}
.presentation p {
    max-width: 500px;
    margin: 0 auto;
}
svg.logo-title-homepage {
    flex: 2;
}
.go-under {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align:center;
}
.fleche-homepage {
    max-width: 50px;
    animation: bounce 2s ease infinite;
    margin-top: var(--padding);
}

@keyframes bounce {
    70% { transform:translateY(0%); }
    80% { transform:translateY(-50%); }
    90% { transform:translateY(0%); }
    95% { transform:translateY(-7%); }
    97% { transform:translateY(0%); }
    99% { transform:translateY(-3%); }
    100% { transform:translateY(0); }
}
.col-one, .col-two{
	float:left;
	width:48%;
	width:calc(50% - 20px);
}

.two-col-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.col-full{
   max-width:1200px;
}

#content{
    padding: var(--padding);
}
.header-content {
    padding-top: var(--padding);
    padding-right: var(--padding);
    padding-bottom: 0;
    padding-left: var(--padding);
}
.header-content > * {
    flex: 1;
}
.row, .page-header, footer {
    padding: var(--padding) var(--pad);
}
  .page-header{  
    padding-bottom: 0;
    
  }
.row.image-pleine-page, .row.liens-vers-pages {
   padding:0;
}
.image-simple img{
  width:100%;
}

.home header{
  opacity:0;
  visibility:hidden;
  transition:opacity  ease-in 0.3s;
}

.home header.coucou{
  opacity:1;
  visibility:visible;
}


header.header-general {
    display: flex
;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    z-index: 15;
    width: 100%;
}


header.header-general.logo-centre {
    flex-direction: column;
}

header.header-general.titre-gauche {
    flex-direction: row;
}
.logo{
  margin-bottom:10px;
}
.logo, .logo img{
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

.logo-responsive{
   display:none;
}



#recherche-cantate {
    border: 1px solid var(--orange);
    border-radius: 30px;
    padding: 0 19px;
    height: 32px;
    width: 100%;
    font-weight: 100;
    margin: 0 10px;
    max-width: 40px;
    cursor: pointer;
    background-position: 11px 6px;
    background-size: 18px;
    background-repeat: no-repeat;
    background-color: white;
  }

#recherche-cantate, .close-bar{
  transition: max-width 0.1s, border 0.3s;
  position: absolute;
 right: 75px;
}

.close-bar{
 margin-right:20px;
opacity:0;
visibility: hidden;
}
.close-bar.opened{
  z-index:1000;
  opacity:1;
  visibility:visible;
  cursor: pointer;
}
#recherche-cantate {
  background-image:url('data:image/svg+xml,<svg width="12" height="12" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.77 13L9.9939 10.1739" stroke="%23D16B1C"/><path d="M6.10742 0.5C9.19598 0.5 11.7148 3.0517 11.7148 6.21777C11.7146 9.38367 9.19586 11.9346 6.10742 11.9346C3.01902 11.9345 0.500203 9.38365 0.5 6.21777C0.5 3.05172 3.01889 0.500036 6.10742 0.5Z" stroke="%23D16B1C"/></svg>');

}

input#recherche-cantate::after {
    content: 'x';
    font-size: 50px;
    position: absolute;
    right: 0;
    width: 50px;
    height: 50px;
}
#recherche-cantate::placeholder{
  opacity:0;
}
#recherche-cantate.opened::placeholder{
  opacity:1;
}
#recherche-cantate.opened {
    max-width: 500px;
    padding: 8px 40px;
    cursor: auto;
}
#recherche-cantate.opened:hover{
  border: 1px solid var(--orange);
}



#page {
    width: 100%;
}
#content {
    padding: 0 calc(var(--padding) * 3) calc(var(--padding) * 3) calc(var(--padding) * 3);
    display: flex
;
    flex-direction: column;
}

article {
    margin: 0 auto;
}

.mfp-content .entry-content.single-content {
    display: flex
;
    flex-wrap: wrap;
    overflow: scroll;
    height: calc(100% - calc(var(--padding) * 2));
    margin-top: calc(var(--padding) * 2);
    padding: 0 calc(var(--padding) * 2) calc(var(--padding) * 2) calc(var(--padding) * 2);
}
.entry-content.single-content {
    display: flex
;
    flex-wrap: wrap;
    overflow: scroll;
}
.video-container {
    width: 200%;
    transition: width 0.3s;
    height:var(--video);
    aspect-ratio: 16 / 9;
    width: 200%;
    margin-bottom: var(--padding);
}

.close-video {
    margin-top: -5px;
    text-align: right;
    position: fixed;
    right: var(--padding);
    background-color: white;
    z-index: 10000;
    height: 20px;
    padding: 0;
}
.colonne{
  width:50%;
}
.colonne.deux {
    margin-top: calc(var(--video) + var(--padding));
    transition: margin-top 0.3s;
    transition-delay: 0;
}
.colonne.deux.reduce {
    margin-top: 0;
    position: sticky;
    top: 0;
    height: 100%;
    transition-delay:0.3s;
}
.colonne.une.reduce .video-container {
    width: 100%;
    position: sticky;
    height: 40vh;
    top: 0;
}

.colonne.une.reduce .infos-videos {
    margin-top: 20vh;
}

.embed-container {
    position: relative;
    height: 100%;
    overflow: hidden;
    margin: 0 auto;
    max-width: 1400px;
    box-shadow: var(--shadow);
}

@media screen and (min-width: 1440px) {
.embed-container {
    max-width: 1400px;
}
}

@media screen and (max-width: 1440px) {
.embed-container {
    max-width: 1000px;
}
}

.embed-container iframe,
.embed-container object,
.embed-container embed { 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%!important;
  height: 100%!important;
}

.embed-container.nonstick {
   top: unset;
}
p iframe {
   float: left;
   clear: both;
   width: 100%;
   height: 50vh;
}

.titre-container{
   padding-bottom:30px;
}
.credits-container{
   border-top:  var(--border);
   padding-top:30px;
}
ul.legendes {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin:0;
}
li.legende {
    display: flex;
    flex-direction: column;
}
.legende:nth-child(n+2) span.portee-texte {
    margin-left: 8px;
}
img.portee {
    height: 40px;
    width: auto;
}
span.portee-texte {
    font-family: var(--garamond);
    font-size: 15px;
    line-height: 95%;
}
.fond-texte {
    padding: 2px 4px 4px 4px;
    margin-top: -2px;
}

.fond-orange{
  background-color:#FFBA77;
}

.fond-jaune{
  background-color:#FDF552;
}

.lyrics-container{
  padding: 0 var(--padding) var(--padding) var(--padding);
}

   .legendes-container {
       /* height: 150px; */
       padding-top: var(--padding);
   }

.lyrics-container {
    overflow: auto;
    border-top: var(--border);
    height: 100%;
    overflow-y: scroll;
}

.lyrics-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--padding) 0 var(--pad) 0;
    margin-bottom: var(--padding);
}

.tab {
    overflow: hidden;
    display: flex
;
    align-items: center;
    font-size: 15px !important;
    font-family: var(--typo);
    font-weight: 100;
    position: sticky;
    top: 0;
}
.tab button {
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0 5px;
    transition: 0.3s;
    background-color: unset;
    color: black;
    font-weight: 100;
    font-family: var(--typo);
}

.tablinks.active, .tablinks:hover {
   color: #D16B1C;
}

.tabcontent {
  display: none;
  border-top: none;
}



.row, .page-enfant {
    float: left;
    width: 100%;

}

.row, .row-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}
.row{
   margin-bottom: 30px;
}


.row.lecteur p {
    width: 100%;
}

.row-container.rowalignleft {
    justify-content: left;
}
.row-container.rowaligncenter {
    justify-content: center;
}

.row-container.rowalignright {
    justify-content: right;
}


.bouton-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 20px;
}


.bouton {
    border-radius: var(--padding);
    border: 1px solid var(--orange);
    padding: 10px;
    text-transform: uppercase;
    font-weight: 100;
    cursor:pointer;
    transition: border 0.3s;
    color: var(--orange);
  
}

.bouton a{
  color:var(--orange)!important;
}
.bouton:hover, #recherche-cantate:hover {
  border: 1px solid black;
}

.different-height {
   width:100%;
}
img.fullpage-image {
    width: 100%;
    object-fit: cover;
    object-position: center;
}
#order img.fullpage-image {
    width: 500px !important;
    object-fit: none;
}
img.fullpage-image.respo {
    display: none;
}
.row.sub-title {
    margin-bottom: 0;
    padding-bottom: 0;
}
.sub-title{
   width:100%;
}

.row:last-child, .page-enfant:last-child{
    margin-bottom: 0;
}
.files {
    border-bottom: 1px solid #cccccc;
    float: right;
    width: 100%;
    padding-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
}

.file {
    margin-bottom: 10px;
    background-color: rgb(97 53 254 / 50%);
    float: left;
    padding: 10px 30px 10px 10px;
    margin: 20px 20px 20px 0;
    box-sizing: border-box;
}

.file span {
    display: flex;
    align-items: center;
    height: 100%;
    width: 67%;
    width: calc(100% - 120px);
    float: left;
}

.file img {
    max-width: 100px;
    float: left;
    margin-right: 20px;
    border:1px solid rgb(97 53 254);;
}

sup {
    line-height: 0;
    font-weight: bold;
    font-size: 60%;
}


    
    
    .email-principal {
    text-align: center;
    margin-bottom: 20px;
}

.email-principal span {
    border-left: 1px solid #0077bc;
    border-right: 1px solid #0077bc;
    padding: 5px;
}

.galerie {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.gallery-item img {
    width: 100%;
}
.gallery-item {
	margin:10px;
}

.gallery-item:last-child {
    margin-right:0;
}
.gallery-item p{
	font-size:14px;
}

#square-list {
    display: flex
;
    justify-content: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0 auto;
    width: 100%;
    padding: var(--pad) 0;
}
li.square {
    width: 33.33%;
    overflow: hidden;
    padding: var(--pad);
    display:none;
}


.square-title, li.square svg {
  opacity:1;
  -webkit-transition: 0.1s ease-in-out;
      -moz-transition: 0.1s ease-in-out;
      -o-transition: 0.1s ease-in-out;
      transition: 0.1s  ease-in-out;
}
li.square:hover .square-title, li.square:hover .square-portrait{
  opacity:0.8;
}
.rond{
  transition:stroke 0.3s;
}
svg.play:hover .rond{
    stroke: black !important;
}
.square-title {
    display: flex
;
    justify-content: revert-layer;
    align-items: center;
    justify-content: flex-start;
    gap: var(--pad);
    padding-top: var(--pad);
}


.square-portrait {
    width: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
        position: relative;
}
.square a:hover{
	opacity:1;
}

.square-portrait:after {
    content: "";
    display: block;
    padding-bottom: 65%;
        -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    background-color:none;
}

.wpcf7 p {
    font-size: 15px;
}



.social-media-icon-container.responsive {
    display: none;
}

.social-media-icon {
    max-height: 18px;
    width: 25px;
}
footer {
    display: flex;
    flex-direction: column;
    margin-top: calc(var(--padding) * 2);
    padding-bottom: 0!important;
}

footer .footer-gauche {
    align-items: flex-start;
}

.footer-gauche .social-media-icon-container.menu a {
    justify-content: left;
    padding-left: 0;
    padding-right: 10px;
}
footer.site-footer.footer-centre {
    align-items: center;
}
.footer-centre .social-media-icon-container.menu a {
    justify-content: center;
}
footer.site-footer.footer-droite {
    align-items: flex-end;
}

.footer-droite .social-media-icon-container.menu a {
    justify-content: right;
    padding-right: 0;
    padding-left: 10px;
}
.social-media-icon-container.menu {
    margin: 0;
    width: fit-content;
    display: flex
;
    gap: 20px;
}

footer .social-media-icon{
	max-height:none;
}

.footer-gauche p {
    text-align: left !important;
}
.footer-centre p {
    text-align: center !important;
}
.footer-droite p {
    text-align: right !important;
}

@media screen and (max-width: 1500px) {
.mfp-content .entry-content.single-content {
    height: calc(100% - calc(var(--padding) * 1.5));
    margin-top: calc(var(--padding) * 1.5);
    padding: 0 calc(var(--padding) * 1.5) calc(var(--padding) * 1.5) calc(var(--padding) * 1.5);
}
}

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

.col-full, .two-col-container, .galerie, .flexslider, .files, #square-list  {
    width: 100%!important;
}

.row, .page-header, footer {
    padding: var(--pad) 0;
}

    li.square {
     width: 50%;
     margin: 0 !important;
 }
li.square:nth-child(2n+0) {
    padding-left: var(--pad);
    padding-right: 0;
}
li.square:nth-child(2n-1) {
    padding-left: 0;
    padding-right: var(--pad);
}
    .social-media-icon {
     width: 25px;
     max-height: none;
 }
 

 
 .wpml-ls-legacy-list-horizontal {
     border: 0;
     padding: 0;
 }
.social-media-icon-container.responsive {
    display: inherit;
}
img.fullpage-image.full {
    display: none;
}
img.fullpage-image.respo {
    display: block;
}

img.fullpage-image.respo {
    object-position: top;
    object-fit: contain;
}

.different-height.heightok {
    height: auto !important;
}
.social-media-icon-container.menu a {
    font-size: 22px;
}
.colonne {
    width: 100%;
}
.colonne.deux {
    margin-top: 0;
}
    .video-container {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin-bottom: 0;
}
    .infos-videos{
    padding: calc(var(--padding) * 2) 0;
}
.credits-container, .lyrics-container   {
  padding-top: calc(var(--padding) * 2)!important;
}
.lyrics-container{
    padding: 0;
}

.lyrics-header{
  padding:0;
}
}

@media screen and (max-width: 750px) {
    
   #content, .header-content {
       padding: var(--padding);
   }
  .row, .page-header, footer {
      padding: var(--padding) 0;
  }
.header-content {
    flex-wrap: wrap;
    padding-bottom:10px;
}
.header-content > * {
    flex: unset;
}
.logo {
    width: 75%;
}

.header-container {
    padding: 5px;
}

.header-text.title-text {
    order: 3;
    width: 100%;
}

.entry-content.single-content {
    padding: 0 var(--padding) var(--padding) var(--padding);
    margin-top: var(--padding);
    height: calc(100% - var(--padding));
}
.presentation {
    column-count: 1;

}

}

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

    .homepage-container {
    max-height: calc(100% - 80px);
    gap: var(--pad);
    padding: var(--pad);
}
.page-header, footer {
         padding: var(--pad);
     }
     
     .row{
       padding:0;
     }
     
     .page-header {
         padding-left: 0;
     }
     
     .single-videos .entry-content.single-content {
         padding: 0;
         margin: 0;
     }
     .logo {
         width: 60%;
     }
   
    li.square {
        width: 100%;
        margin: 0 !important;
        margin-bottom: var(--padding) !important;
        padding: 0 !important;
    }
     .square-title{
        opacity:1;
     }
	div#page {
    margin-top: 80px;
}
.file {
    max-width: 100%;
    margin: 5px 5px 5px 0;
    width: 100%;
}

    .two-col-container {
     flex-direction: column;
     gap: 0;
 }
 
 .col-one, .col-two {
     width: 100%;
     padding: 0 0 var(--padding);
 }
.lyrics-container{
  height:auto;
}

img.fullpage-image {
    object-position: 80%;
}
    #recherche-cantate {
    right: 55px;
    background-position: 11px 6px;
}

#recherche-cantate.opened {
    max-width: calc(100% - 20px);
    padding: 8px 40px;
    z-index: 16;
}
#recherche-cantate.opened, .close-bar{
  right: 0;
}
 .logos-container.footer {
     flex-wrap: wrap;
     gap: 40px;
 }
.footer-credits {
    order: 1;
    width:100%;
}
footer .logos-container > * {
    flex: unset;
    text-align: center!important;
}
footer .logos-container > *:nth-child(1) {
    order: 2;
}
footer .logos-container > *:nth-child(3) {
    order: 3;
}

}