{\rtf1\ansi\ansicpg1252\cocoartf2822
\cocoatextscaling0\cocoaplatform0{\fonttbl}
{\colortbl;\red255\green255\blue255;}
{\*\expandedcolortbl;;}
\paperw11900\paperh16840\margl1440\margr1440\vieww11520\viewh8400\viewkind0
}/* ======================================================
   PERSEPHONY
   Site officiel
====================================================== */

/***************
RESET
****************/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    background:#071423;

    color:white;

    font-family:'Poppins',sans-serif;

    overflow-x:hidden;

}

/**********************
HEADER
**********************/

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 70px;

    background:rgba(5,15,30,.85);

    backdrop-filter:blur(10px);

    z-index:999;

}

.logo{

    display:flex;

    align-items:center;

    gap:15px;

}

.logo img{

    width:55px;

}

.logo span{

    font-family:'Montserrat',sans-serif;

    font-size:28px;

    letter-spacing:6px;

}

nav{

    display:flex;

    gap:30px;

}

nav a{

    color:white;

    text-decoration:none;

    transition:.3s;

    font-size:14px;

    letter-spacing:2px;

}

nav a:hover{

    color:#5fa8ff;

}

.active{

    color:#5fa8ff;

}

/**********************
HERO
**********************/

.hero{

    position:relative;

    width:100%;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    overflow:hidden;

}

/* Fond */

.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        rgba(4,11,25,.82),

        rgba(7,20,35,.95)

    );

    z-index:1;

}

/* Logo géant */

.logo-background{

    position:absolute;

    inset:0;

    background-image:url("../images/logo.png");

    background-repeat:no-repeat;

    background-position:center;

    background-size:55%;

    opacity:.12;

    z-index:0;

}

/**********************
TEXTE HERO
**********************/

.hero-content{

    position:relative;

    z-index:2;

    max-width:900px;

}

.hero h1{

    font-family:'Montserrat',sans-serif;

    font-size:90px;

    font-weight:300;

    letter-spacing:12px;

}

.hero h2{

    margin-top:20px;

    font-weight:300;

    letter-spacing:6px;

    color:#6fb7ff;

}

.line{

    width:140px;

    height:2px;

    background:white;

    opacity:.3;

    margin:35px auto;

}

.hero p{

    font-size:22px;

    line-height:35px;

}

/**********************
BOUTON
**********************/

.button{

    display:inline-block;

    margin-top:45px;

    padding:18px 45px;

    background:#4067d9;

    color:white;

    text-decoration:none;

    border-radius:8px;

    transition:.35s;

    font-size:18px;

}

.button:hover{

    transform:translateY(-5px);

    background:#5a86ff;

}

/**********************
FLECHE
**********************/

.scroll{

    position:absolute;

    bottom:30px;

    left:50%;

    transform:translateX(-50%);

    font-size:38px;

    animation:float 2s infinite;

    z-index:2;

}

@keyframes float{

    0%{

        transform:translate(-50%,0);

    }

    50%{

        transform:translate(-50%,10px);

    }

    100%{

        transform:translate(-50%,0);

    }

}

/**********************
SECTION
**********************/

.container{

    width:1100px;

    max-width:90%;

    margin:auto;

}

.presentation{

    padding:120px 0;

    text-align:center;

}

.presentation h2{

    font-family:'Montserrat';

    font-size:45px;

    margin-bottom:30px;

}

.presentation p{

    font-size:20px;

    color:#d8d8d8;

}

/**********************
ACTUS
**********************/

.actus{

    padding:120px 0;

}

.actus h2{

    text-align:center;

    font-size:42px;

    margin-bottom:60px;

}

.cards{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.card{

    background:#0f223c;

    border-radius:15px;

    padding:35px;

    transition:.35s;

}

.card:hover{

    transform:translateY(-10px);

    background:#153052;

}

.card h3{

    margin-bottom:20px;

}

/**********************
FOOTER
**********************/

footer{

    padding:50px;

    text-align:center;

    background:#03101f;

    color:#8aa3c9;

}/* ======================================================
   PARTIE 2 - EFFETS PREMIUM
====================================================== */


/**********************
EFFET DE LUMIÈRE
**********************/

.hero::before{

    content:"";

    position:absolute;

    width:900px;

    height:900px;

    border-radius:50%;

    background:radial-gradient(circle,
        rgba(80,140,255,.20) 0%,
        rgba(80,140,255,.05) 40%,
        transparent 70%);

    filter:blur(80px);

    animation:halo 8s ease-in-out infinite;

    z-index:0;

}

@keyframes halo{

    0%{

        transform:scale(1);

        opacity:.35;

    }

    50%{

        transform:scale(1.15);

        opacity:.55;

    }

    100%{

        transform:scale(1);

        opacity:.35;

    }

}

/**********************
APPARITION
**********************/

.hero-content{

    animation:fadeUp 1.5s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/**********************
OMBRE DES TITRES
**********************/

.hero h1{

    text-shadow:

        0 0 25px rgba(100,170,255,.4),

        0 0 60px rgba(50,120,255,.25);

}

.hero h2{

    text-shadow:

        0 0 15px rgba(80,140,255,.35);

}

/**********************
CARDS
**********************/

.card{

    border:1px solid rgba(255,255,255,.05);

    box-shadow:

        0 15px 35px rgba(0,0,0,.35);

}

.card:hover{

    box-shadow:

        0 20px 60px rgba(40,90,255,.25);

}

/**********************
BOUTON
**********************/

.button{

    box-shadow:

        0 10px 25px rgba(40,90,255,.35);

}

.button:hover{

    box-shadow:

        0 20px 50px rgba(40,90,255,.45);

}

/**********************
SCROLLBAR
**********************/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#071423;

}

::-webkit-scrollbar-thumb{

    background:#4067d9;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#6ca8ff;

}

/**********************
RESPONSIVE
**********************/

@media(max-width:1100px){

header{

    padding:20px 30px;

}

nav{

    gap:18px;

}

.hero h1{

    font-size:65px;

}

.hero h2{

    font-size:18px;

}

.cards{

    grid-template-columns:1fr;

}

}

@media(max-width:768px){

header{

    flex-direction:column;

    gap:20px;

}

nav{

    flex-wrap:wrap;

    justify-content:center;

}

.logo span{

    font-size:20px;

}

.hero h1{

    font-size:42px;

    letter-spacing:5px;

}

.hero h2{

    font-size:15px;

    letter-spacing:3px;

}

.hero p{

    font-size:17px;

}

.button{

    padding:15px 30px;

}

.logo-background{

    background-size:90%;

    opacity:.10;

}

}/* ==============================
PAGE HERO
==============================*/

.page-hero{

height:60vh;

position:relative;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

background:linear-gradient(rgba(5,15,30,.8),rgba(5,15,30,.9)),
url("../images/logo.png");

background-size:contain;

background-repeat:no-repeat;

background-position:center;

}

.page-content{

position:relative;

z-index:2;

}

.page-content h1{

font-size:70px;

letter-spacing:8px;

font-family:'Montserrat';

}

.page-content p{

margin-top:20px;

font-size:22px;

color:#9bc8ff;

}/* =======================================
LES MUSICIENS
=======================================*/

.intro{

text-align:center;

margin-bottom:50px;

font-size:20px;

color:#cfd8e8;

}

.membres{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:35px;

margin-top:50px;

}

.musicien{

background:#10233d;

border-radius:18px;

overflow:hidden;

transition:.4s;

box-shadow:0 20px 40px rgba(0,0,0,.35);

}

.musicien:hover{

transform:translateY(-10px);

box-shadow:0 30px 60px rgba(60,120,255,.35);

}

.musicien img{

width:100%;

height:320px;

object-fit:cover;

transition:.5s;

}

.musicien:hover img{

transform:scale(1.08);

}

.info{

padding:25px;

}

.info h3{

font-family:'Montserrat';

font-size:26px;

margin-bottom:10px;

}

.info h4{

color:#73B9FF;

margin-bottom:15px;

font-weight:400;

}

.info p{

line-height:28px;

color:#d8d8d8;

}/* ======================================
CHORALE
======================================*/

.bibliotheque{

padding:120px 0;

}

#search{

width:100%;

padding:18px;

margin:40px 0;

font-size:18px;

border:none;

border-radius:12px;

background:#112746;

color:white;

}

.songs{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(400px,1fr));

gap:35px;

}

.song-card{

background:#10233d;

padding:30px;

border-radius:18px;

transition:.4s;

box-shadow:0 20px 40px rgba(0,0,0,.35);

}

.song-card:hover{

transform:translateY(-8px);

box-shadow:0 30px 60px rgba(60,120,255,.30);

}

.song-card h3{

font-family:'Montserrat';

font-size:32px;

margin-bottom:5px;

}

.song-card h4{

color:#73B9FF;

margin-bottom:25px;

font-weight:400;

}

.documents{

display:flex;

flex-direction:column;

gap:12px;

margin-bottom:30px;

}

.documents a{

text-decoration:none;

color:white;

padding:12px;

background:#173152;

border-radius:8px;

transition:.3s;

}

.documents a:hover{

background:#2a4f82;

}

.audio p{

margin-top:20px;

margin-bottom:8px;

color:#73B9FF;

}

audio{

width:100%;

}/*==================================================
 CALENDRIER PERSEPHONY
==================================================*/

.calendar-section{

    padding:80px 0;

}

.calendar-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

.calendar-header h2{

    font-size:40px;

    font-family:'Montserrat',sans-serif;

    color:white;

}

.calendar-header button{

    background:#1d4ed8;

    color:white;

    border:none;

    width:50px;

    height:50px;

    border-radius:50%;

    font-size:22px;

    cursor:pointer;

    transition:.3s;

}

.calendar-header button:hover{

    background:#3b82f6;

    transform:scale(1.08);

}

.days{

    display:grid;

    grid-template-columns:repeat(7,1fr);

    margin-bottom:10px;

    font-weight:bold;

    text-align:center;

    color:#8ec5ff;

}

.days div{

    padding:15px;

}

.calendar-grid{

    display:grid;

    grid-template-columns:repeat(7,1fr);

    gap:8px;

}

.day{

    background:#10233d;

    min-height:130px;

    border-radius:15px;

    padding:10px;

    transition:.3s;

    position:relative;

    cursor:pointer;

    border:1px solid rgba(255,255,255,.05);

}

.day:hover{

    transform:translateY(-5px);

    background:#18365d;

}

.day-number{

    font-size:20px;

    font-weight:bold;

}

.empty{

    background:transparent;

    border:none;

    cursor:default;

}

.today{

    border:2px solid #4da3ff;

}

.event{

    margin-top:10px;

    background:#2563eb;

    color:white;

    border-radius:8px;

    padding:5px;

    font-size:12px;

}

.event.repetition{

    background:#16a34a;

}

.event.concert{

    background:#2563eb;

}

.event.animation{

    background:#f97316;

}

.event.prive{

    background:#9333ea;

}

/*=========================
 MODAL
=========================*/

.modal{

    display:none;

    position:fixed;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.75);

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.modal-content{

    width:650px;

    max-width:90%;

    background:#0d2037;

    border-radius:18px;

    padding:35px;

    color:white;

    position:relative;

}

#closeModal{

    position:absolute;

    right:25px;

    top:20px;

    font-size:35px;

    cursor:pointer;

}

#modalDate{

    margin-bottom:25px;

    color:#6fb7ff;

}

.event-card{

    background:#16314f;

    padding:15px;

    border-radius:10px;

    margin-bottom:15px;

}

.event-card h3{

    margin-bottom:8px;

}

.event-card p{

    color:#d9d9d9;

    line-height:26px;

}

/*=========================
 MOBILE
=========================*/

@media(max-width:900px){

.calendar-grid{

grid-template-columns:repeat(2,1fr);

}

.days{

display:none;

}

.day{

min-height:100px;

}

}

@media(max-width:600px){

.calendar-grid{

grid-template-columns:1fr;

}

.calendar-header h2{

font-size:28px;

}

}/*====================================
 PROCHAIN EVENEMENT
====================================*/

.prochain-evenement{

    padding:100px 0;

}

.next-event-card{

    background:#10233d;

    border-radius:18px;

    padding:35px;

    margin-top:40px;

    box-shadow:0 15px 40px rgba(0,0,0,.35);

    border-left:8px solid #2563eb;

}

.next-event-card h3{

    font-size:32px;

    margin-bottom:20px;

    color:#73B9FF;

}

.next-event-card p{

    margin:12px 0;

    font-size:18px;

}

.countdown{

    margin-top:25px;

    font-size:22px;

    color:#6fb7ff;

    font-weight:bold;

}
/* =====================================
   PAGE CONNEXION CHORALE
===================================== */

.connexion-chorale {
    min-height: 75vh;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 60px 20px;
}

.connexion-box {
    width: 450px;
    max-width: 100%;

    background: #10233d;

    padding: 45px;

    border-radius: 20px;

    text-align: center;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.connexion-box img {
    width: 140px;
    max-width: 100%;

    margin-bottom: 20px;
}

.connexion-box h1 {
    color: white;

    font-size: 32px;

    margin-bottom: 15px;
}

.connexion-box > p {
    color: #cbd5e1;

    line-height: 1.6;

    margin-bottom: 30px;
}

.connexion-box form {
    display: flex;

    flex-direction: column;

    text-align: left;
}

.connexion-box label {
    color: white;

    font-weight: 600;

    margin-bottom: 8px;
}

.connexion-box input {
    padding: 15px;

    border-radius: 10px;

    border: 1px solid #315276;

    background: #0b1b2e;

    color: white;

    font-size: 16px;

    margin-bottom: 20px;

    outline: none;
}

.connexion-box input:focus {
    border-color: #4da3ff;
}

.connexion-box button {
    padding: 15px;

    border: none;

    border-radius: 10px;

    background: #2563eb;

    color: white;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    transition: 0.3s;
}

.connexion-box button:hover {
    background: #3b82f6;

    transform: translateY(-2px);
}

#erreurConnexion {
    color: #ff6b6b;

    margin-top: 20px;

    margin-bottom: 0;

    text-align: center;
}
/* =====================================
   BOUTON DECONNEXION CHORALE
===================================== */

.bouton-deconnexion {
    display: block;

    margin: 30px auto;

    padding: 12px 25px;

    border: 1px solid #4da3ff;

    border-radius: 10px;

    background: transparent;

    color: white;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition: 0.3s;
}

.bouton-deconnexion:hover {
    background: #2563eb;

    border-color: #2563eb;

    transform: translateY(-2px);
}
/* =========================================
   SOUS-ONGLETS CHORALE
========================================= */

.chorale-navigation {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    margin: 40px auto;

    padding: 0 20px;

}

.chorale-tab {

    padding: 14px 25px;

    border: 1px solid #315276;

    border-radius: 10px;

    background: #10233d;

    color: white;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    transition: .3s;

}

.chorale-tab:hover {

    background: #18365d;

    transform: translateY(-2px);

}

.chorale-tab.active {

    background: #2563eb;

    border-color: #2563eb;

}


/* =========================================
   SOUVENIRS
========================================= */

.souvenirs-header {

    text-align: center;

    margin-bottom: 50px;

}

.souvenirs-header h2 {

    font-size: 38px;

    color: white;

    margin-bottom: 15px;

}

.souvenirs-header p {

    color: #cbd5e1;

    font-size: 17px;

}


.souvenirs-section {

    margin-bottom: 60px;

}

.souvenirs-section h3 {

    color: #73b9ff;

    font-size: 28px;

    margin-bottom: 25px;

}


/* =========================================
   GALERIE PHOTOS
========================================= */

.galerie-souvenirs {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 25px;

}

.souvenir-photo {

    position: relative;

    overflow: hidden;

    border-radius: 15px;

    background: #10233d;

    cursor: pointer;

    box-shadow:
        0 10px 30px rgba(0,0,0,.25);

}

.souvenir-photo img {

    width: 100%;

    height: 250px;

    object-fit: cover;

    display: block;

    transition: .4s;

}

.souvenir-photo:hover img {

    transform: scale(1.06);

}

.souvenir-legende {

    padding: 15px;

    color: white;

    background: #10233d;

    font-weight: 600;

}


/* =========================================
   VIDEOS
========================================= */

.galerie-videos {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 30px;

}

.souvenir-video {

    background: #10233d;

    border-radius: 15px;

    overflow: hidden;

}

.souvenir-video video {

    width: 100%;

    display: block;

    background: black;

}

.souvenir-video h4 {

    color: white;

    padding: 15px;

    margin: 0;

}


/* =========================================
   FENÊTRE PHOTO
========================================= */

.photo-modal {

    display: none;

    position: fixed;

    z-index: 99999;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background:
        rgba(0,0,0,.90);

    justify-content: center;

    align-items: center;

    padding: 30px;

}

.photo-modal img {

    max-width: 90%;

    max-height: 90%;

    object-fit: contain;

    border-radius: 10px;

}

.fermer-photo {

    position: absolute;

    top: 20px;

    right: 35px;

    color: white;

    font-size: 50px;

    cursor: pointer;

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 900px) {

    .galerie-souvenirs {

        grid-template-columns:
            repeat(2, 1fr);

    }

    .galerie-videos {

        grid-template-columns: 1fr;

    }

}

@media (max-width: 600px) {

    .galerie-souvenirs {

        grid-template-columns: 1fr;

    }

    .chorale-tab {

        width: 100%;

    }

}