nav{background:#fffffff2;box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:100;padding:1rem 0;transition:transform .3s ease}nav.hidden{transform:translateY(-100%)}nav .nav-container{max-width:1200px;margin:0 auto;padding:0 1rem;display:flex;justify-content:space-between;align-items:center}nav .logo{font-family:var(--font-heading);font-size:1.5rem;color:var(--color-primary);font-weight:700;cursor:pointer}nav ul{list-style:none;display:flex;gap:2rem}nav a{text-decoration:none;color:var(--color-text);font-weight:600;transition:var(--transition);position:relative}nav a:hover{color:var(--color-primary)}nav a:after{content:"";position:absolute;bottom:-5px;left:0;width:0;height:2px;background:var(--color-primary);transition:var(--transition)}nav a:hover:after{width:100%}@media(max-width:768px){nav ul{gap:1rem;flex-wrap:wrap;justify-content:center}}@media(max-width:480px){nav .nav-container{flex-direction:column;gap:1rem}}header{text-align:center;background:linear-gradient(135deg,var(--color-primary) 0%,#FFA500 100%);color:#fff;padding:3rem 1rem;position:relative;overflow:hidden}header:before{content:"";position:absolute;top:-50%;right:-50%;width:100%;height:100%;background:#ffffff1a;border-radius:50%;animation:float 6s ease-in-out infinite}header h1{font-family:var(--font-heading);font-size:clamp(2rem,5vw,3.5rem);margin-bottom:1rem;text-shadow:2px 2px 4px rgba(0,0,0,.2);position:relative;z-index:1;animation:slideDown .8s ease-out}header .subtitle{font-size:clamp(1rem,2vw,1.2rem);margin-bottom:2rem;opacity:.9;position:relative;z-index:1}header img{display:block;margin:0 auto;width:600px;max-width:100%;height:auto;border-radius:16px;box-shadow:var(--shadow-lg);position:relative;z-index:1;transition:var(--transition)}header img:hover{transform:scale(1.02);box-shadow:0 12px 24px #0000004d}@media(max-width:768px){header{padding:2rem 1rem}}#intro{margin-bottom:3rem;animation:fadeIn 1s ease-out}#intro h2{font-family:var(--font-heading);font-size:clamp(1.5rem,3vw,2.5rem);color:var(--color-primary);margin-bottom:1.5rem;text-align:center}#intro .intro-content{display:grid;grid-template-columns:2fr 1fr;gap:3rem;margin-top:2rem}#intro .intro-text{display:grid;grid-template-rows:1fr 1fr;gap:1.5rem}#intro .text-block{background:#fff;padding:2rem;border-radius:12px;box-shadow:var(--shadow-sm);transition:var(--transition);border-left:4px solid var(--color-primary);opacity:0;transform:translateY(30px)}#intro .text-block:hover{box-shadow:var(--shadow-md);transform:translate(5px)}#intro .text-block h3{font-family:var(--font-heading);color:var(--color-primary);margin-bottom:.75rem;font-size:1.3rem}#intro .text-block.french{border-left-color:var(--color-secondary)}#intro .text-block.french h3{color:var(--color-secondary)}#intro .text-block p{margin-bottom:.75rem;line-height:1.8}#intro .text-block p:last-child{margin-bottom:0}#intro .intro-images{display:grid;grid-template-rows:1fr 1fr 1fr;gap:1.5rem;align-content:stretch}#intro .intro-images img{width:100%;height:100%;object-fit:contain;border-radius:12px;box-shadow:var(--shadow-sm);transition:var(--transition)}#intro .intro-images img:hover{transform:scale(1.02);box-shadow:var(--shadow-md)}@media(max-width:768px){#intro .intro-content{flex-direction:column;grid-template-columns:1fr;gap:2rem}#intro .intro-images{grid-template-rows:auto;grid-template-columns:repeat(3,1fr)}#intro .intro-images img{height:auto}}@media(max-width:480px){#intro .intro-images{flex-direction:column}}footer{text-align:center;padding:2rem 1rem;font-size:.9rem;color:var(--color-text-light);background:#fff;margin-top:4rem;box-shadow:0 -2px 4px #0000000d}footer p{margin-bottom:.5rem}footer a{color:var(--color-primary);text-decoration:none;transition:var(--transition)}footer a:hover{color:var(--color-secondary)}.audio-player-container{padding:1rem}.audio-player{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:var(--shadow-sm);margin:1rem auto;max-width:500px}.audio-player audio{width:100%;outline:none}.error{color:var(--color-accent);text-align:center;padding:2rem}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;z-index:1000;animation:fadeIn .3s ease-out}.modal.active{display:flex;align-items:center;justify-content:center}.modal-content{background:#fff;border-radius:16px;padding:2rem;max-width:600px;max-height:70vh;overflow-y:auto;position:relative;animation:slideUp .3s ease-out}.modal-title{font-family:var(--font-heading);color:var(--color-primary);margin-bottom:1.5rem;font-size:1.8rem;text-align:center}.modal-body{color:var(--color-text)}.modal-close{position:absolute;top:1rem;right:1rem;background:var(--color-accent);color:#fff;border:none;border-radius:50%;width:40px;height:40px;font-size:1.5rem;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;line-height:1}.modal-close:hover{transform:rotate(90deg);background:#c0392b}.modal-section{margin-bottom:2rem}.modal-section:last-child{margin-bottom:0}.modal-section h4{font-family:var(--font-heading);color:var(--color-primary);margin-bottom:.75rem;font-size:1.2rem}.modal-section ul{margin-left:1.5rem;margin-top:.5rem}.modal-section li{margin-bottom:.5rem}.modal-download{margin-top:2rem;text-align:center}.download-btn{display:inline-block;background:linear-gradient(135deg,#4a9ead,#2c5f6f);color:#fff;padding:12px 30px;border-radius:8px;text-decoration:none;font-weight:600;font-size:1.1rem;transition:var(--transition);box-shadow:var(--shadow-sm)}.download-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);background:linear-gradient(135deg,#5ab0c0,#3a7080)}.video-container{width:100%;max-width:100%}.video-container video{border-radius:8px;box-shadow:var(--shadow-sm)}@media(max-width:768px){.modal-content{max-width:95%;padding:1.5rem}.modal-title{font-size:1.5rem}}main{max-width:1200px;margin:3rem auto;padding:0 1rem;flex:1}:root{--color-bg: #FFF8E7;--color-primary: #FBB13C;--color-secondary: #6AA84F;--color-accent: #E74C3C;--color-text: #333;--color-text-light: #666;--font-heading: "Montserrat", sans-serif;--font-body: "Open Sans", sans-serif;--shadow-sm: 0 2px 4px rgba(0,0,0,.1);--shadow-md: 0 4px 6px rgba(0,0,0,.15);--shadow-lg: 0 8px 16px rgba(0,0,0,.2);--transition: all .3s ease}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background:var(--color-bg);color:var(--color-text);line-height:1.6;overflow-x:hidden}#root{min-height:100vh;display:flex;flex-direction:column}html{scroll-behavior:smooth}.loading{display:inline-block;width:40px;height:40px;border:4px solid var(--color-primary);border-radius:50%;border-top-color:transparent;border-right-color:transparent;animation:spin .8s ease-in-out infinite}.loading-indicator{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:150px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(10deg)}}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}