:root{--blue:#5578EF;--light:#6697C5;--green:#8CAC16;--navy:#060B24;--white:#fff;--ink:#11162d}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,sans-serif}
.home-page{background:linear-gradient(145deg,var(--navy),#14255d);color:white;min-height:100vh}
.site-header{display:flex;justify-content:space-between;align-items:center;padding:18px 5vw}.brand img{width:160px}.start,.hero-cta,.next{background:var(--green);color:#111;text-decoration:none;font-weight:700;border-radius:999px;padding:13px 20px}
.home{width:min(1100px,92vw);margin:auto}.hero{min-height:55vh;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:45px}.hero-logo{width:100%;max-width:560px}.kicker{color:#b9d536;text-transform:uppercase;letter-spacing:.17em;font-weight:700}.hero h1{font-size:clamp(3rem,7vw,6rem);line-height:.9;margin:.15em 0}.hero h1 span{color:var(--light)}.lead{line-height:1.7;color:#d9e5ff;margin-bottom:30px}
.repertoire{padding:50px 0 70px}.section-title-row{display:flex;justify-content:space-between;align-items:end}.section-title-row h2{font-size:2rem}.count{color:#cbd7f2}.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.card{display:grid;grid-template-columns:55px 1fr auto;align-items:center;padding:20px;background:white;color:var(--ink);text-decoration:none;border-radius:16px;border-left:7px solid var(--green)}.card-no{color:var(--blue);font-weight:bold}.card-copy strong{font-size:1.08rem}.card-arrow{font-size:1.3rem}.home-footer{text-align:center;padding:25px;color:#b9c6e4}
.song-page{background:#eaf1f8;color:var(--ink)}.song-header{position:sticky;top:0;z-index:4;background:var(--navy);display:flex;justify-content:space-between;align-items:center;padding:10px 18px}.song-header img{width:120px;display:block}.song-header>a:last-child{color:white;text-decoration:none;font-weight:bold}.song-nav{text-align:center;padding:14px;background:#d9e7f3}.song-title{display:flex;gap:15px;align-items:baseline;width:min(1000px,94vw);margin:20px auto 10px}.song-title span{color:var(--green);font-weight:bold}.song-title h1{margin:0}.pdf-wrap{width:min(1000px,100%);height:80vh;margin:auto}.pdf-wrap iframe{width:100%;height:100%;border:0;background:white}.bottom{padding:25px}
@media(max-width:700px){.site-header .brand img{width:115px}.hero{grid-template-columns:1fr;gap:5px;text-align:center;padding-bottom:35px}.hero-logo{max-height:250px;object-fit:contain}.grid{grid-template-columns:1fr}.start{font-size:.85rem;padding:10px 14px}.pdf-wrap{height:75vh}.song-header img{width:95px}}
/* Présentation chanson sans lecteur PDF */
.song-page{background:linear-gradient(180deg,#edf4fa,#dceaf5);color:var(--ink);min-height:100vh}
.song-header{position:sticky;top:0;z-index:5;background:var(--navy);display:flex;justify-content:space-between;align-items:center;padding:8px 18px;box-shadow:0 2px 10px #0002}
.song-header img{width:112px;display:block}
.song-header>a:last-child{color:white;text-decoration:none;font-weight:bold}
.lyrics-page{width:min(980px,96vw);margin:0 auto;padding:18px 0 34px}
.song-heading{display:flex;align-items:baseline;gap:16px;margin:20px auto 14px;width:min(900px,94vw)}
.song-heading span{font-size:1rem;color:var(--green);font-weight:800}
.song-heading h1{font-size:clamp(2rem,5vw,3.3rem);margin:0;color:#101a3b}
.next{display:block;width:max-content;max-width:94vw;margin:0 auto;background:var(--green);color:#101600;padding:13px 22px;border-radius:999px;text-decoration:none;font-weight:800;text-align:center}
.next-top{margin-bottom:10px}.next-bottom{margin-top:22px}
.pages{display:flex;flex-direction:column;align-items:center;gap:22px}
.pdf-page{display:block;max-width:100%;height:auto;background:white;box-shadow:0 8px 28px #0b17362b;border-radius:2px}
.pdf-status{text-align:center;padding:40px;color:#53627a}
@media(max-width:700px){
 .song-header img{width:90px}.lyrics-page{width:100%;padding:12px 8px 25px}
 .song-heading{width:96%;margin-top:14px}.next{font-size:.92rem;padding:11px 16px}
 .pdf-page{box-shadow:0 4px 16px #0b173625}
}

/* Finition graphique Baolélés */
.home-page{
 background:
   radial-gradient(circle at 78% 15%,rgba(102,151,197,.22),transparent 28%),
   radial-gradient(circle at 15% 62%,rgba(85,120,239,.18),transparent 30%),
   linear-gradient(145deg,#050a20 0%,#0a173c 48%,#132c65 100%);
}
.hero{position:relative}
.hero:before{content:"♪";position:absolute;left:-3%;top:20%;font-size:7rem;color:rgba(140,172,22,.14);transform:rotate(-12deg)}
.hero:after{content:"♫";position:absolute;right:-2%;bottom:10%;font-size:6rem;color:rgba(102,151,197,.15);transform:rotate(12deg)}
.repertoire{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(102,151,197,.07));border:1px solid rgba(255,255,255,.08);border-radius:30px;padding:42px 36px 55px;margin-bottom:45px;box-shadow:0 25px 70px rgba(0,0,0,.15)}
.hero-cta,.start{box-shadow:0 8px 25px rgba(140,172,22,.22);transition:.2s}
.hero-cta:hover,.start:hover,.next:hover{transform:translateY(-2px);filter:brightness(1.08)}
.card{box-shadow:0 8px 25px rgba(0,0,0,.13);transition:.18s}.card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.2)}

/* Pages chansons : fond dans les couleurs du site */
.song-page{
 background:
  radial-gradient(circle at 12% 18%,rgba(85,120,239,.22),transparent 25%),
  radial-gradient(circle at 88% 70%,rgba(140,172,22,.10),transparent 25%),
  linear-gradient(145deg,#07102b 0%,#10275b 55%,#0b1b43 100%) !important;
 color:white !important;
}
.song-header{background:rgba(6,11,36,.92)!important;backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.lyrics-page{padding-top:22px}
.song-heading{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:14px 20px;box-shadow:0 12px 35px rgba(0,0,0,.16)}
.song-heading h1{color:white!important}.song-heading span{color:#b4d326!important}
.next{box-shadow:0 8px 24px rgba(140,172,22,.24);transition:.18s}
.pdf-page{border-radius:10px!important;box-shadow:0 20px 55px rgba(0,0,0,.35)!important}
.pdf-status{color:#d7e3fa!important}
@media(max-width:700px){.repertoire{padding:28px 14px 38px;border-radius:20px}.hero:before,.hero:after{display:none}.song-heading{padding:10px 14px}}

/* Accueil basé sur le visuel validé */
.visual-home{background:linear-gradient(180deg,#06132e,#10275b)}
.visual-hero{position:relative;width:100%;padding:0;background:#07152f;overflow:hidden}
.visual-hero>img{display:block;width:100%;height:auto;margin:0}
.visual-hotspot{position:absolute;left:49.4%;top:58.2%;width:16.5%;height:8%;border-radius:999px}
.live-repertoire{padding-top:42px}
.repo-intro{color:#d7e3fa;line-height:1.5}
@media(max-width:700px){
 .visual-hero>img{width:180%;max-width:none;transform:translateX(-22%)}
 .visual-hotspot{display:none}
 .live-repertoire{padding-top:25px}
}

/* === ACCUEIL 100% HTML/CSS, net à toutes résolutions === */
.code-home{margin:0;background:#07152f;color:#fff;overflow-x:hidden}
.topbar-code{height:76px;position:absolute;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:10px 4vw}
.mini-logo img{width:120px;display:block}
.top-start,.go-button{background:linear-gradient(135deg,#9bc018,#b5dc35);color:#07152f;text-decoration:none;font-weight:800;border-radius:999px;box-shadow:0 10px 30px #0003;transition:.2s}
.top-start{padding:12px 20px}.top-start:hover,.go-button:hover{transform:translateY(-2px);filter:brightness(1.08)}
.hero-code{position:relative;min-height:760px;background:
 radial-gradient(circle at 78% 10%,rgba(45,98,164,.28),transparent 33%),
 radial-gradient(circle at 16% 50%,rgba(27,74,135,.23),transparent 30%),
 linear-gradient(135deg,#041027 0%,#08204a 55%,#12336b 100%);
 overflow:hidden;display:flex;align-items:center}
.hero-inner{position:relative;z-index:3;width:min(1120px,88vw);margin:auto;display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:70px;padding:100px 0 160px}
.hero-brand{text-align:center}.hero-brand img{width:min(520px,100%);filter:drop-shadow(0 20px 35px #0005)}
.hero-text .eyebrow,.repertoire-code .eyebrow{text-transform:uppercase;letter-spacing:.22em;color:#a9d329;font-weight:800;font-size:.9rem}
.hero-text h1{font-size:clamp(4rem,7vw,7.5rem);line-height:.78;margin:.15em 0 .28em;color:#6697c5;letter-spacing:-.045em}
.hero-text h1 span{color:#fff}.instruction{max-width:520px;color:#e3edfb;line-height:1.55;font-size:1.05rem;margin-bottom:26px}
.go-button{display:inline-flex;gap:18px;align-items:center;padding:16px 28px;font-size:1.12rem}
.handwritten{position:absolute;z-index:2;color:#6697c5;font-family:"Segoe Print","Comic Sans MS",cursive;font-style:italic;transform:rotate(-6deg);font-size:clamp(1.3rem,2vw,2.1rem)}
.handwritten:after{content:"";display:block;height:4px;background:#9bc018;border-radius:99px;margin:8px 5px 0;transform:rotate(-5deg)}
.top-right{right:7vw;top:70px}.bottom-right{right:8vw;bottom:145px}
.decor-note{position:absolute;font-size:5rem;color:#9bc018;opacity:.7}.note-a{left:4vw;top:35%}.note-b{right:7vw;top:35%;color:#6697c5}.ukulele-line{position:absolute;left:8vw;bottom:145px;font-size:15rem;color:#6697c5;opacity:.12;transform:rotate(-18deg)}
.wave{position:absolute;left:-5%;width:110%;height:190px;border-radius:50% 50% 0 0/80% 80% 0 0;bottom:-95px;transform:rotate(2deg)}
.wave-green{background:#91b817;bottom:-75px}.wave-light{background:#edf6fd;bottom:-100px}
.repertoire-code{background:#edf6fd;color:#07152f;padding:75px 0 85px;scroll-margin-top:0}
.repo-inner{width:min(1050px,90vw);margin:auto}.repo-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:30px}.repo-heading h2{font-size:clamp(2rem,4vw,3.2rem);margin:.15em 0}.repo-heading p:not(.eyebrow){color:#465875}.green{color:#86ab12!important}.count{white-space:nowrap;color:#61738e!important}
.repertoire-code .grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.repertoire-code .card{display:grid;grid-template-columns:55px 1fr auto;align-items:center;background:white;color:#07152f;text-decoration:none;padding:20px;border-radius:16px;border-left:7px solid #9bc018;box-shadow:0 8px 24px #15315b17;transition:.18s}
.repertoire-code .card:hover{transform:translateY(-3px);box-shadow:0 14px 30px #15315b25}.card-no{color:#5578ef;font-weight:800}.card-arrow{font-size:1.3rem}
.code-footer{text-align:center;padding:28px;background:#07152f;color:#9fb4d2}
@media(max-width:760px){
 .topbar-code{height:62px}.mini-logo img{width:90px}.top-start{padding:9px 14px;font-size:.85rem}
 .hero-code{min-height:700px}.hero-inner{grid-template-columns:1fr;text-align:center;gap:5px;padding:90px 0 145px}
 .hero-brand img{width:min(330px,78vw)}.hero-text h1{font-size:clamp(3.5rem,17vw,5.5rem)}
 .instruction{margin-left:auto;margin-right:auto}.handwritten,.decor{display:none}
 .repertoire-code{padding-top:55px}.repo-heading{display:block}.repertoire-code .grid{grid-template-columns:1fr}
}

/* Ajustements accueil : aucun fond blanc */
.topbar-code{justify-content:flex-start}
.repertoire-code{
 background:
   radial-gradient(circle at 12% 20%,rgba(85,120,239,.18),transparent 28%),
   radial-gradient(circle at 88% 75%,rgba(140,172,22,.10),transparent 25%),
   linear-gradient(145deg,#07152f 0%,#0b214d 55%,#102d65 100%) !important;
 color:#fff !important;
}
.repo-heading h2{color:#fff!important}
.repo-heading p:not(.eyebrow){color:#cbdaf0!important}
.repertoire-code .count{color:#aebfda!important}
.repertoire-code .card{
 background:rgba(255,255,255,.08)!important;
 border:1px solid rgba(255,255,255,.10);
 border-left:7px solid #9bc018!important;
 color:#fff!important;
 backdrop-filter:blur(8px);
}
.repertoire-code .card:hover{background:rgba(255,255,255,.13)!important}
.repertoire-code .card-no{color:#a9c4ff!important}
.repertoire-code #status{color:#d9e6f8}
.wave-light{background:#07152f!important}
.code-footer{border-top:1px solid rgba(255,255,255,.08)}

.event-title{
 margin:.2rem 0 1rem;
 color:#b9d93b;
 font-weight:800;
 font-size:clamp(1rem,1.7vw,1.45rem);
 line-height:1.3;
}
.show-finished{
 max-width:570px;
 margin:28px 0 0;
 padding:20px 24px;
 border:1px solid rgba(169,211,41,.38);
 border-radius:18px;
 background:rgba(169,211,41,.10);
 color:#f1f7df;
 font-size:1.12rem;
 line-height:1.55;
 font-weight:650;
}
@media(max-width:760px){
 .show-finished{margin-left:auto;margin-right:auto}
}

[hidden]{display:none!important;}

/* Pages institutionnelles */
.site-top{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:16px clamp(20px,6vw,90px);background:#07152f;position:sticky;top:0;z-index:20;border-bottom:1px solid rgba(255,255,255,.08)}
.site-top img{width:92px;height:auto}.site-top nav{display:flex;gap:24px;flex-wrap:wrap}.site-top a{color:#fff;text-decoration:none;font-weight:800}.site-top nav a:hover{color:#a8cf12}
.info-page{margin:0;background:#07152f;color:#fff}.content-page{max-width:1100px;margin:auto;padding:64px 24px 80px}.content-page.narrow{max-width:800px}.page-hero{padding:24px 0 42px}.page-hero h1{font-size:clamp(42px,7vw,76px);margin:8px 0 20px}.page-hero p{font-size:1.12rem;line-height:1.7;max-width:900px;color:#dce7ff}.eyebrow{color:#a8cf12;font-weight:900;letter-spacing:.18em}
.info-grid,.media-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.info-card,.media-card,.contact-form{background:linear-gradient(145deg,#10295a,#0b1d42);border:1px solid rgba(168,207,18,.38);border-radius:22px;padding:28px;box-shadow:0 20px 45px rgba(0,0,0,.18)}.info-card h2,.media-card h2{font-size:1.7rem}.info-card h3{color:#a8cf12;margin-top:24px}.info-card p,.media-card p{line-height:1.65;color:#dce7ff}.media-card{text-decoration:none;color:#fff;min-height:180px}.media-card span{color:#a8cf12;font-weight:900}.media-card:hover{transform:translateY(-3px);border-color:#a8cf12}
.action-btn,.secondary-btn,.home-nav-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:14px 22px;font-weight:900;text-decoration:none;border:0;cursor:pointer}.action-btn,.home-nav-btn{background:#a8cf12;color:#07152f}.secondary-btn{border:1px solid #a8cf12;color:#fff}.member-actions,.home-nav{display:flex;gap:14px;flex-wrap:wrap}.home-nav{margin:28px auto 10px;justify-content:center;max-width:900px}.home-nav-btn{background:#5578ef;color:white;border:1px solid rgba(255,255,255,.2)}.home-nav-btn:hover{background:#a8cf12;color:#07152f}
.contact-form{display:grid;gap:20px}.contact-form label{display:grid;gap:8px;font-weight:800}.contact-form input,.contact-form textarea{font:inherit;color:#fff;background:#07152f;border:1px solid #5578ef;border-radius:12px;padding:13px 14px}.contact-form textarea{resize:vertical}.new-footer{text-align:center;padding:28px;background:#050d20;color:#8fa5d0}
@media(max-width:760px){.site-top{align-items:flex-start}.site-top nav{gap:10px 16px;font-size:.9rem}.info-grid,.media-grid{grid-template-columns:1fr}.content-page{padding-top:34px}}