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}nav a{font-size:.9rem}}@media(max-width:480px){nav .nav-container{flex-direction:column;gap:.5rem}nav .logo{font-size:1.3rem}nav ul{gap:.6rem}nav a{font-size:.85rem}}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(1.5rem,3vw,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}header img{width:480px}}@media(max-width:480px){header{padding:1.5rem .8rem}header .subtitle{margin-bottom:1.5rem}header img{width:100%;border-radius:12px}}#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:flex;flex-direction:column;gap:2rem;margin-top:2rem}#intro .intro-row{display:grid;grid-template-columns:2fr 1fr;gap:1.5rem;align-items:stretch}#intro .text-block{background:#fff;padding:2rem;border-radius:12px;box-shadow:var(--shadow-sm);transition:opacity .6s ease-out,transform .6s ease-out,box-shadow .3s ease;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:flex;flex-direction:column;gap:1rem}#intro .intro-images img{width:100%;min-height:120px;object-fit:cover;border-radius:12px;box-shadow:var(--shadow-sm);transition:var(--transition)}#intro .intro-images img:hover{transform:scale(1.03);box-shadow:var(--shadow-md)}@media(max-width:768px){#intro .intro-row{grid-template-columns:1fr}#intro .intro-images{flex-direction:row}#intro .intro-images img{max-height:200px}#intro .text-block{padding:1.5rem}#intro .text-block h3{font-size:1.15rem}}@media(max-width:480px){#intro{margin-bottom:2rem}#intro .intro-content{gap:1.5rem}#intro .intro-row{gap:1rem}#intro .intro-images{flex-direction:column}#intro .intro-images img{max-height:180px}#intro .text-block{padding:1.2rem}#intro .text-block h3{font-size:1.05rem}#intro .text-block p{font-size:.95rem}}@media(prefers-reduced-motion:reduce){#intro .text-block{opacity:1;transform:none;transition:none}}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-french .modal-title{color:#88a95b}.modal-french .download-btn{background:#88a95b}.modal-body{color:var(--color-text)}.modal-close{position:absolute;top:1rem;right:1rem;background:var(--color-bg);color:var(--color-text);border:1px solid #ddd;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:#e8dcc8}.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-flex;align-items:center;justify-content:center;gap:8px;background:var(--color-primary);color:#fff;padding:16px 31px;height:54px;border-radius:12px;text-decoration:none;font-family:var(--font-heading);font-weight:600;font-size:1.14rem;line-height:1.3;transition:var(--transition);box-shadow:var(--shadow-sm)}.download-btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}.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;max-height:80vh}.modal-title{font-size:1.5rem}.download-btn{font-size:1rem;padding:12px 24px;height:48px}}@media(max-width:480px){.modal-content{max-width:98%;padding:1.2rem;max-height:85vh;border-radius:12px}.modal-title{font-size:1.3rem;margin-bottom:1rem}.modal-close{width:34px;height:34px;font-size:1.2rem;top:.8rem;right:.8rem}.modal-section h4{font-size:1.05rem}.download-btn{font-size:.95rem;padding:10px 20px;height:44px}}main{max-width:1200px;margin:3rem auto;padding:0 1rem;flex:1}main section{scroll-margin-top:80px}:root{--color-bg: #FFF8E7;--color-primary: #FBB13C;--color-secondary: #88A95B;--color-accent: #E74C3C;--color-text: #333;--color-text-light: #666;--font-heading: "Nunito", sans-serif;--font-body: "Nunito", 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:#e0e0e0;color:var(--color-text);line-height:1.6;overflow-x:hidden}#root{min-height:100vh;display:flex;flex-direction:column;max-width:1400px;margin:0 auto;background:var(--color-bg);box-shadow:0 0 30px #00000026}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)}}