body{height:100%;overflow-y:scroll;color:var(--base-noir-color);margin-top:80px}
.container{max-width:1000px;margin:0 auto;padding:2rem}
header{text-align:center;margin:0 0 2rem;opacity:0;transform:translateY(-20px);animation:1s ease-out forwards fadeInDown}
h1,h2{font-family:rostock_kaligraph,sans-serif;color:var(--base-noir-color)}
h1{font-size:var(--font-size-h1);margin-bottom:20px}
h2{font-size:var(--font-size-h2);margin:4rem 0 15px}
p{font-size:var(--font-size-normal);margin-bottom:15px}
.subtitle{font-size:var(--font-size-h3);color:var(--base-rouge-color)}
.signature{font-size:var(--font-size-button);text-align:right;margin-top:2rem;opacity:0;animation:1s ease-out 1.5s forwards fadeIn}
.profile-image{width:200px;height:200px;border-radius:50%;object-fit:cover;margin:2rem auto;display:block;box-shadow:0 4px 6px rgba(0,0,0,.1);opacity:0;transform:scale(.8);animation:1s ease-out .5s forwards fadeInScale;transition:transform 0.3s ease, box-shadow 0.3s ease}
.profile-image:hover{transform:scale(1.05);box-shadow:0 8px 15px rgba(0,0,0,.2)}
.button-container{display:flex;justify-content:center}
.button{font-size:var(--font-size-button);display:inline-block;padding:15px 25px;background-color:var(--base-rouge-color);color:var(--base-light-bg);text-decoration:none;border-radius:5px;transition:.3s;opacity:0;transform:translateY(10px);animation:.5s ease-out 2s forwards fadeInUp}
.button:hover{background-color:var(--base-noir-color);transform:translateY(-3px);box-shadow:0 4px 8px rgba(0,0,0,.2)}
.button2{font-size:var(--font-size-button);display:inline-block;padding:15px 25px;background-color:var(--base-rouge-color);color:var(--base-light-bg);text-decoration:none;text-align:center;border-radius:5px;transition:.3s;opacity:0;transform:translateY(10px);animation:.5s ease-out 2s forwards fadeInUp}
.button2:hover{background-color:var(--base-noir-color);transform:translateY(-3px);box-shadow:0 4px 8px rgba(0,0,0,.2)}
.color-button{padding:10px 15px;border:none;color:#fff;font-size:16px;cursor:pointer;margin:5px;border-radius:5px;transition:background-color .3s,opacity .3s}
.color-button:hover{opacity:.8}
.floral-divider{display:flex;align-items:center;justify-content:center;margin:2rem 0;color:var(--base-rouge-color)}
.highlight{background-color:#bb6262;padding:1rem;border-radius:5px;margin:1rem 0;transition:background-color .3s}
.timeline{position:relative;max-width:800px;margin:0 auto;padding:rem 0}
.timeline-item{background-color:var(--base-white-color);font-family:var(--global-font-family);border-radius:8px;padding:20px;margin-bottom:30px;box-shadow:0 4px 6px rgba(0,0,0,.1);position:relative;opacity:0;transform:translateY(20px);transition:.5s}
.timeline-item::after,.timeline-item::before{content:"";position:absolute;background-color:var(--base-rouge-color)}
.timeline-item::before{width:20px;height:20px;border-radius:50%;left:-40px;top:50%;transform:translateY(-50%)}
.timeline-item::after{width:2px;height:calc(100% + 30px);left:-31px;top:50%}
.timeline-item:last-child::after{height:50%}
.timeline-item:hover{transform:translateY(-5px);box-shadow:0 6px 12px rgba(0,0,0,.15)}
.timeline-date{font-weight:700;color:#000;margin-bottom:.5rem}
.timeline-title{font-size:var(--font-size-normal);color:var(--base-rouge-color);margin-bottom:.5rem;font-weight:700}
.timeline-description{font-size:var(--font-size-normal);color:#555}
.timeline-images{display:flex;justify-content:space-between;margin-top:1rem}
.timeline-image,.timeline-image1{width:150px;height:150px;object-fit:contain;border-radius:5px;box-shadow:0 2px 4px rgba(0,0,0,.1);transition:transform .3s}
.timeline-image:hover{transform:scale(1.05)}
@keyframes fadeInDown{
from{opacity:0;transform:translateY(-20px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes fadeInScale{
from{opacity:0;transform:scale(.8)}
to{opacity:1;transform:scale(1)}
}
@keyframes fadeInUp{
from{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes fadeIn{
from{opacity:0}
to{opacity:1}
}
.timeline-item.visible{opacity:1;transform:translateY(0)}
@media (max-width:768px){
h1{font-size:var(--font-size-h1-mobile)}
h2{font-size:var(--font-size-h2-mobile)}
p{font-size:var(--font-size-normal-mobile)}
.subtitle{font-size:var(--font-size-h3-mobile)}
.button,.button2,.signature{font-size:var(--font-size-button-mobile)}
.timeline-description,.timeline-title{font-size:var(--font-size-normal-mobile)}
}
.formation-continue{margin:8rem 0;padding:4rem;background-color:var(--base-white-color);border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,.1);border-left:4px solid var(--base-rouge-color);opacity:0;transform:translateY(20px);animation:.5s ease-out forwards fadeInUp}
.formation-continue-content{padding:2rem}
.formation-continue h3{color:var(--base-rouge-color);margin-bottom:1rem;font-size:var(--font-size-h3);font-family:rostock_kaligraph,sans-serif}
.formation-continue p{margin-bottom:1rem;line-height:1.6;font-size:var(--font-size-normal)}
.formation-continue ul{list-style-type:none;padding-left:0}
.formation-continue li{margin-bottom:.5rem;padding-left:1.5rem;position:relative;font-size:var(--font-size-normal)}
.formation-continue li:before{content:"🌿";position:absolute;left:0;color:var(--base-rouge-color)}

/* Styles pour le modal */
.modal-overlay {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
}

.modal-content {
    position: relative;
    margin: auto;
    padding: 20px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    transform: translateY(-50%);
}

.modal-image {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: #fff;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1001;
    transition: color 0.3s ease;
}

.modal-close:hover {
    color: var(--base-rouge-color);
}

/* Animation d'ouverture du modal */
.modal-overlay.show {
    animation: fadeIn 0.3s ease-out;
}

.modal-content.show {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-50%) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

/* Responsive pour le modal */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        padding: 10px;
    }
    
    .modal-close {
        top: -35px;
        font-size: 30px;
    }
}