/* version 3.6 fév 2026 */
/* 
	colors 
	#CCD5AE green
	#FEFAEO off white
	#FAEDCD beige
	#D4A373 brown
    #E9EDC9 light green NOT USED

    jan 2026: changed from beige above to gray below
    #C8D8D4 gray
*/
/* Google fonts */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css?family=Tangerine');
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

body {
    /* set Google fonts & fallback fonts
    font-family: 'Tangerine', serif;
    text-shadow: 3px 3px 3px #aaa;

    font-family: 'Jost', Georgia;
    font-family: "Playfair Display", serif;
     */
    /* html fonts
    font-family: cursive;
    */
    background-color: #FEFAEO;
    font-family: "Playfair Display", serif;
}
.mainbox {
    width: 100%;
    height: auto;
}
#logo {
    height: 60px;
    margin: 0 5px 0 0;
}
/* START side bar navigation */
.sidebar {
  margin: 0;
  padding: 0;
  width: 33%;
  height: auto;
  background-color: #D4A373;
  letter-spacing: 0.1em;
  position: fixed;
  top: 4.5em;
  left: -150px;
  visibility: hidden;
  animation: slidein 3s ease-in 1;
  
  /* this will keep image zoomed, normally will zoom in then go back to normal size */
    animation-fill-mode: forwards;

  overflow: auto;
  z-index: 3; /* Higher z-index, appears in front */
}
/* Sidebar links */
.sidebar a {
    font-family: 'Jost', Georgia;
    display: block;
    color: white;
    padding: 16px;
    text-decoration: none;
    font-size: 1.8vw;
}
/* 
.sidebar a.active {
    background-color: #555;
    color: white;
}
.sidebar a:hover:not(.active) {
  background-color: #555;
  color: white;
}
 */
.sidebar-items {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 10px 0 0 0;
}
/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
div.content {
  margin-left: 160px;
  height: 1000px; 
}
.sidebar-items img {
    width: 30px;
    height: 30px;
}
@keyframes slidein {
    0% {transform: translatex(0px);}
    100% {transform: translatex(+150px);}
}
/* END side bar navigation */
/* Google icons */
.material-symbols-outlined {
    font-size: 5vw;
    padding: 12px;
    border-radius: 50%;
    border-style: solid;
    border-width: 2px;
    border-color: #e1e5f2;
}
.navigation {
    position: fixed;
    top: 4.5em;
    right: 10px;
    display: flex;
    flex-direction: column;
    z-index: 2; /* Higher z-index, appears in front */
}
.navigation img {
    width: 90px;
    height: 90px;
}
.navigation button {
    background-color: #CCD5AE;
}
.navigation a {
    text-align: center;
    text-decoration: none;
    color: black;
    font-size: 1.3vw;
}
.brandBox {
    position: fixed;
    top: 4.5em;
    left: 10px;
    width: fit-content;
    height: fit-content;
    background-color: #D4A373;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 5px 5px 5px 5px;
    z-index: 2; /* Higher z-index, appears in front */
}
.brandItem {
    display: flex;
    flex-direction: column; 
    justify-content: center;
}
.brandItem a {
    text-align: center;
    font-size: 1.3vw;
    text-decoration: none;
    color: white;
}
.brandItem img {
    width: 30px;
    height: 30px;
}
/* START sticky notes section on top of page */
.notes {
    height: 21vw;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    text-align: center;
    margin: 4vw 0 1vw 0;
    font-family: cursive;

    /* NOTE changing font-size here will change size of sticky notes */
    font-size: 54px;
}
.notes-heading {
    text-align: center;
}
.thumbtackImg {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: auto;
}
/* END sticky notes section on top of page */
/* START flash news section just below sticky notes news */
.news-cep-sj {    
    border: 3px dashed transparent;
    width: 60%;
    height: auto;
    padding: 10px 10px 10px 10px;
    margin: 5em 20% 5em 20%;
    text-align: center;
    animation: borderFlash 1s step-end infinite;
}
@keyframes borderFlash {
  0%, 100% {
    border-color: transparent; /* Border is transparent at the start and end */
  }
  50% {
    border-color: #D4A373; /* Border becomes red in the middle of the animation */
  }
}
.news-cep-sj button {
    width: 30%;
    height: 3em;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
    font-size: 1.8vw;
    cursor: pointer;
}
.news-cep-sj a {
    text-decoration: none;
    color: black;
}
/* END flash news section just below sticky notes news */
/* START features for news pages */
.div-30-70 {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    text-align: center;
}
.div-30pct {
    width: 30%;
    justify-content: center;
}
.div-30pct img {
    width: 50%;
}
.div-70pct {
    width: 70%;
}
.news1 {
    width: 90%;
    height: auto;
    padding: 10px 10px 10px 10px;
    margin: auto;
    text-align: center;
    display: flex;
    flex-direction: row;
}
.news1images {
    border: 3px dashed black;
    width: 30%;
    height: auto;
    margin: auto;
}
.news1images img {
    border-radius: 18px;
    width: 27%;
    height: auto;
    cursor: zoom-in;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
.news1images img:hover {
    animation: zoom 1s ease-in 1;
    animation-fill-mode: forwards;
}
@keyframes zoom {
    100% {
        transform: scale(2.0);
    }
}
.objectrotate {   
    animation: rotate 1s linear 1;
}
@keyframes rotate {
    100% { 
        transform:rotate(180deg);
    }
}
.fontblanc {
    color: white;
}
/* END features for news pages */
.section1 {
    /*
    border: 3px dashed black;
     */
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    padding: 10px 10px 10px 10px;
}
.section1-left {
    width: 30%;
    margin: auto;
    text-align: center;
    font-size: 4vw;
}
.section1-right {
    width: 70%;
}
.section2 {
	background-color: #FAEDCD;
    width: 100%;
    height: fit-content;
    margin: 30px 0 30px 0;
    padding: 30px 0 30px 0;
    text-align: center;
    display: flex;
    flex-direction: row;   
}
.section2 h1 {
    font-size: 2.7vw;
}
.section2-left {
    width: 50%;
    margin: auto;
}
.section2-right {
    width: 50%;
    margin: auto; 
    text-align: center;   
}
.section2-left img {
    /* make the image square */
    width: 80%;
    object-fit: cover;
    /* make it a circle (will not be perfect because width/height not equal) */
    border-radius: 50%;
}
.section3 {
    width: 100%;
    height: auto;
    margin: 30px 0 0 0;
   	text-align: center;
	display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}
.section3a {
	width: 25%;
	display: flex;
    flex-direction: column;
    padding: 10px 10px 10px 10px;
    border: 1px dotted; #D4A373;
}
.section3 img {
    width: 30%;
	margin: auto;
}
.section3 h1 {
    font-size: 2.7vw;
}
.section4 {  
    font-family: 'Tangerine', serif;
    text-shadow: 3px 3px 3px #aaa;
    background-color: #CCD5AE;
    padding: 30px 0 30px 0;
    margin: 60px 0 30px 0;
    width: 100%;
    height: auto;
    text-align: center;
}
.section4 button {
    width: 30%;
    height: 3em;
    font-size: 1.8vw;
    border-radius: 50%;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
}
.section4 h1 {
    font-size: 3.6vw;
    margin: 0 10% 0 10%;
}
.section4 h3 {
    font-size: 2.7vw;
    margin: 0 10% 0 10%;
}
.section4Scroll {  
    background-color: #CCD5AE;
    padding: 30px 0 30px 0;
    margin: 30px 0 30px 0;
    width: 100%;
    height: auto; 
    text-align: center;
    z-index: 1; /* Lower z-index, appears behind */
}
.section4Scroll h1 {
    font-size: 3.6vw;
    margin: 0 10% 0 10%;
}
.section4Scroll h3 {
    font-size: 2.7vw;
    margin: 0 10% 0 10%;
}
@keyframes scrollUp {
    /*
    0% {transform: translateY(0px);}
    100% {transform: translateY(-180px);}
    */
    0% {transform: translateY(0px);}
    50% {transform: translateY(-270px);}
    100% {transform: translateY(0px);}
}
.sectiona {
	background-color: #FEFAEO;
    width: 100%;
    height: auto;
    padding: 10px 10px 10px 10px;
    margin: auto;
    text-align: center;
}
.sectiona p {
    font-size: 2vw;
    margin: 20px 10% 20px 10%;
}
.sectiona img {
    width: 50%;
    margin: 5% 0 5% 0;
}
.sectiona li {
    list-style-type: none;
    font-size: 2vw;
}
.sectiona h1 {
    letter-spacing: 0.2em;
    font-size: 3.6vw;
}
.sectiona h3 {
    font-family: cursive;
    font-size: 2.7vw;
}
.sectiona h5 {
    font-size: 2.1vw;
    color: gray;
    font-weight: bold;
}
/* START image slideshow */
.slideshow {
    width: 90%;
    display: flex;
    flex-direction: row; 
    justify-content: space-evenly;
    margin: 10% 5% 5% 5%;
}
.slideshow-img1 {
    opacity: 0.5;
}
.img-left {
    /*
    transform: skew(5deg, 15deg);
    */
    transform: rotate(5deg);
}
.img-left img {
    width: 95%;
    margin: 0 20px 0 0;
    cursor: pointer;
}
.img-center img {
    width: 100%;
}

/* animation-fill-mode will keep image zoomed,
     otherwise will zoom in then go back to normal size 
.img-center img:hover {
    animation: zoom2 1s ease-in 1;
    animation-fill-mode: forwards;
}
@keyframes zoom2 {
    100% {
        transform: scale(2.0);
    }
}
*/

.slideshow-img3 {
    opacity: 0.5;
}
.img-right {
    /*
    transform: skew(5deg, 5deg);
    */
    transform: rotate(-5deg);
}
.img-right img {
    width: 95%;
    margin: 0 0 0 20px;
    cursor: pointer;
}
/* END image slideshow */

.sectionb {
    background-color: #FAEDCD;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    margin: 30px 0 30px 0;
    padding: 30px 0 30px 0;   
}
.sectionb-left {
    width: 70%;
    text-align: center;
    margin: auto;
}
.sectionb-right {
    width: 30%;   
    margin-left: 10%;
    margin-top: 5%;
}
.sectionb h1 {
    font-size: 2.7vw;
}
.sectionb h2 {
    font-size: 2vw;
}
.sectionb-right img {
    /* make the image square */
    width: 80%;
    object-fit: cover;
    /* make it a circle (will not be perfect because width/height not equal) */
    border-radius: 50%;
}
.sectionc {
    background-color: #FEFAEO;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    padding: 10px 10px 10px 10px; 
}
.sectionc-left {
    width: 40%;
    text-align: center;
    margin: auto;
}
.sectionc-left img {
    margin-bottom: 45%;
}
.sectionc-right {
    width: 60%;
    margin: 2% 5% 2% 5%;
}
.sectionc h1 {
    font-size: 3.6vw;   
}
.sectionc img {
    width: 80%;
    margin-left: 10%;
}
.sectiond {
    background-color: #FAEDCD;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    padding: 10px 10px 10px 10px; 
}
.sectiond-left {
    width: 50%;
    text-align: center;
}
.sectiond-right {
    width: 50%;
    text-align: center;
}
.sectiond h1 {
    font-size: 3vw;
}
.redirect {
    background-color: #D4A373;
    height: 9em;
    font-size: 3vw;
    cursor: pointer;
    text-decoration: none;
    color: black;
    padding: 3% 3% 3% 3%;
    border-radius: 50%;
}

/* reply text is initially hidden, click button to show or hide reply
.question {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.question button {
    margin: 0 20px 0 20px;
}
#r1 {
    visibility: hidden;
}
#r2 {
    visibility: hidden;
}
#r3 {
    visibility: hidden;
}
#r4 {
    visibility: hidden;
}
#r5 {
    visibility: hidden;
}
.reponse {
    font-size: 2vw;
    text-align: center;
    border: 1px dashed gray;
    margin: 3% 3% 3% 3%;
}
*/

/* start: tags for FAQ on dons.html */
.accordion {    
    width: 80%;
    font-size: 2vw;
    text-align: center;
    background-color: #D4A373;
    cursor: pointer;
    padding: 5px 10px 5px 0;
    border: none;  
    outline: none;  
    transition: 0.4s;
}
.activepanel, .accordion:hover {    
    background-color: #FAEDCD;    
}
.accordion:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 18px;
  color: black;
  float: right;
  margin-left: 5px;
  margin-top: 5px;
}
.activepanel:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}
.panel {
  padding: 0 18px;
  display: none;
  background-color: #FAEDCD;
  overflow: hidden;
  font-size: 1.8vw;
  width: 75%;
  margin: auto;
}
/* end: tags for FAQ on dons.html */
.carousel {
	/* use this for debugging
	border: 2px solid yellow;
	*/
    display: flex;
    justify-content: center;
}
.carousel img {
    width: 25em;
    height: 25em;
}

/* show dots as image thumbnails */
.dot-container {
    text-align: center;
    margin: 20px 0 20px 0;
}
.dot-container button {
    width: 3em;
}
.thumbnail {
    width: 5vw;
    height: 10vh;
	border-radius: 50%;
	margin: 0 5% 0 5%;
	cursor: pointer;
}
.ticker-tape-container {
    font-family: cursive;
    width: 100%;
    height: 2.5em;
    margin: 30px 0 30px 0;
    /* using this will set scroll bar showing text is too big for container  
        overflow-y: scroll;
    */
	/* if text > container will overflow, this keeps text within container */
    verflow-x: hidden;
	/* this puts all divs on the same line (columns) instead of rows by default */
	display: flex;
	background-color: #D4A373;
	font-size: 2vw;
}
.tickertapeTop {
    font-family: cursive;
    width: 100%;
    height: 2.5em;
    /* using this will set scroll bar showing text is too big for container   
        overflow-y: scroll;
    */
    /* if text > container will overflow, this keeps text within container */
    overflow-x: hidden;
    /* this puts all divs on the same line (columns) instead of rows by default */
    display: flex;
    background-color: #D4A373;
    font-size: 2vw;
}
.ticker-tape {
	display: flex;
	align-items: center;
	/* NOT USED= what does this do
	flex: 0 0 auto;
	*/
	gap: 5rem;
	animation-name: marquee;
    animation-duration: 5s;
    animation-delay: 0.5s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: normal;
}
@keyframes marquee {
	0% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(-100%);
	}
}
/* start demandeinfo.php parameters */
#section-info-form {
    height: auto;
    background-color: #CCD5AE;
}
#section-info-form input {
    background-color: #D4A373;
    font: inherit;
    width: 80%;
    min-width: 450px;
    height: 45px;
    padding: 0 10px 10px 10px;
}
#section-info-form textarea {
    background-color: #D4A373;
    font: inherit;
    width: 80%;
    min-width: 450px;
    padding: 0 10px 10px 10px;
}
#section-info-form h3 {
    font-size: 3.6vw;
    text-align: center;
}
#section-info-form h5 {
    font-size: 1.8vw;
    text-align: center;
}
#pulldown {
    background-color: #D4A373;
    font: inherit;
    width: 80%;
    min-width: 450px;
    height: 45px;
    border: 2px dotted gray;
    cursor: pointer;
    margin: 0 10px 10px 10px;
}
.erreur1 {
    color: red;
}
.inputform {
    display: flex;
    flex-direction: column; 
    width: 80%;
    padding: 0 0 30px 15%;
    margin: auto;
    font-size: 1.8vw;
}
/* end demandeinfo.php parameters */
.horaire {
    color: #D4A373;
    font-weight: bold;
    width: 90%;
    height: auto;
    /* top right bottom left */
    margin: 1% 5% 1% 5%;
}
/* object is initially hidden then when scrolled to object 
    in JS change the id name to show & object will appear & bounce */

.object1 {
}
#bounceobj {
    visibility: hidden;
    color: #D4A373;
    font-weight: bold;
    width: 90%;
    height: auto;
    margin: 1% 5% 1% 5%;   
}
#bounceobj:hover {
    cursor: zoom-in;
    transform: scale(1.1);
}
#bounceobj.show {
    visibility: visible;
    animation: bounce2 1s ease-in-out 1;
}
@keyframes bounce2 {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-15px);}
}
/* <!-- button will rotate when scrolled to object --> */
/* when user scrolls to this class an animation is triggered in JS */
.devbenevole {
}
.objectspin {
    animation: spin 1s ease-in-out 1;
}
@keyframes spin {
    100% { 
        transform:rotate(360deg);
    } 
}
#copyright-banner {
    font-size: 1.8vw;
    text-align: center;   
    margin: 30px 0 30px 0;
    background-color: #D4A373;
    height: 45px;
}

/* parameters for small screens (iPhone, etc)  
    screen sizes = <600px, 601px, 768px, 992px, 1200px     
    */
@media (max-width: 768px) {
    .sidebar {
        width: 50%;
    }
    .sidebar a {
        font-size: 20px;
    }
    #facebook {
        height: 18px;
    }
    .material-symbols-outlined {
        font-size: 50px;
    }
    .carousel img {
        width: 15em;
        height: 15em;
    }
    .dot-container button {
        width: 1.5em;
    }
    .thumbnail {
        width: 40px;
        height: 40px;
        margin: 0 5px 0 5px;
    }
    .section2 h1 {
        font-size: 20px;
    }
    .section3 h1 {
        font-size: 16px;
    }
    .section3 {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }
    .section3a {
        width: 80%;
        margin: 3% 10% 3% 10%;
    }
    .section4 h1 {
        font-size: 24px;
    }
    .section4 h3 {
        font-size: 20px;
    }
    .section4Scroll h1 {
        font-size: 24px;
    }
    .section4Scroll h3 {
        font-size: 20px;
    }   
    .section4 img {
        width: 90px;
        height: 90px;
        margin: 15% 0 0 0;
    }
    .sectiona h1 {
        font-size: 24px;
    }
    .sectiona h3 {
        font-size: 21px;
    }
    .sectiona h5 {
        font-size: 18px;
    }
    .sectionb h1 {
        font-size: 20px
    }
    .sectionb h2 {
        font-size: 18px
    }
    .sectionc h1 {
        font-size: 24px;
    }
    .sectiond {
        flex-direction: column;
    }
    .sectiond-left {
        width: 100%;
        border: 1px solid black;
    }
    .sectiond-right {
        width: 100%;
        border: 1px solid black;
    }
    .sectiond h1 {
        font-size: 36px;
        margin: auto;
    }
    .notes {
        flex-direction: column;
        margin-left: 30%;
        margin-bottom: 40%;
        font-size: 24px;
    }
    .ticker-tape-noel {
        font-size: 16px;
    }
}