/* ===================================================================== site.css — styles NON critiques (sections, presentation, musiciens, concerts, contact, pied de page, pages secondaires concerts.php / musiciens.php ...) -> Le CSS CRITIQUE (menu + hero) est inliné dans le du PHP. -> Source unique : build.py | cache-bust : ?v=8 ===================================================================== */ .wrap{max-width:1140px;margin:0 auto} .sec-head{text-align:center;margin-bottom:30px} .musiciens .sec-head,.actu .sec-head{margin-bottom:35px} .sec-head .eyebrow{display:block;margin-bottom:10px} .sec-head h2{font-family:'Playfair Display',serif;font-weight:700;color:var(--brun); font-size:clamp(30px,4.5vw,40px);line-height:1.1;letter-spacing:0} .sec-head .diamond{margin-top:22px} /* PRESENTATION */ .presentation{background:var(--creme)} .lead{font-family:'Source Sans 3',sans-serif;font-weight:500; font-size:clamp(22px,3.2vw,26px);line-height:1.35;color:var(--brun);text-align:center; max-width:820px;margin:0 auto 34px} .lead .or{color:var(--cuivre)} .pres-body{max-width:680px;margin:0 auto;text-align:center;font-size:19px;color:var(--texte)} .pres-body p+p{margin-top:18px} .pres-body .colibri{color:var(--muted)} /* MUSICIENS */ .musiciens{background:var(--creme2);border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)} .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)} .muso{text-align:center} .muso .ph{position:relative;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden; margin-bottom:18px;box-shadow:0 14px 34px rgba(26,21,16,.22); outline:1px solid rgba(201,169,110,.5);outline-offset:7px;transition:transform .45s,box-shadow .45s} .muso .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s,filter .6s} .muso .ph::after{content:'';position:absolute;inset:0;border-radius:50%; background:radial-gradient(circle at 50% 28%,rgba(201,169,110,.16),transparent 60%)} .muso:hover .ph{transform:translateY(-6px);box-shadow:0 22px 46px rgba(26,21,16,.3)} .muso:hover .ph img{transform:scale(1.06)} /* cadrage individuel des ronds (images d'origine intactes) */ .grid4 .muso:nth-child(2) .ph img{object-position:48% 50%} /* Luiz */ .grid4 .muso:nth-child(3) .ph img{object-position:50% 42%} /* Damien (~10px plus bas) */ .grid4 .muso:nth-child(4) .ph img{object-position:48% 5%} /* Alvaro */ .muso .name{font-family:'Source Sans 3',sans-serif;font-weight:600;color:var(--brun);font-size:21px;line-height:1.15} .muso .inst{font-family:'Source Sans 3',sans-serif;font-size:12px;letter-spacing:.2em; text-transform:none;color:var(--cuivre);margin-top:7px} .center-link{text-align:center;margin-top:52px} .btn-line{display:inline-flex;align-items:center;gap:10px;font-family:'Source Sans 3',sans-serif; font-size:13px;letter-spacing:.2em;text-transform:none;color:var(--brun); border:1px solid var(--cuivre);padding:14px 28px;transition:.3s} .btn-line:hover{background:var(--cuivre);color:var(--creme)} /* ACTU / dernier concert */ .actu{background:var(--creme)} .post{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center;max-width:1040px;margin:0 auto} .post .pics{display:grid;grid-template-columns:1fr 1fr;gap:22px} .post .pics .pic{overflow:hidden;aspect-ratio:3/4; box-shadow:0 12px 30px rgba(26,21,16,.2); outline:1px solid rgba(201,169,110,.5);outline-offset:7px; transition:transform .5s ease,box-shadow .5s ease} .post .pics .pic:first-child{margin-top:24px} .post .pics .pic:last-child{margin-bottom:24px} .post .pics .pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s ease} .post .pics .pic:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(26,21,16,.3)} .post .pics .pic:hover img{transform:scale(1.06)} .post .txt .tag{font-family:'Source Sans 3',sans-serif;font-size:15px;letter-spacing:.04em; color:var(--cuivre);margin-bottom:14px} .post .txt h3{font-family:'Source Sans 3',sans-serif;font-weight:600;color:var(--brun); font-size:clamp(24px,3.2vw,32px);line-height:1.15;margin-bottom:8px} .post .txt .meta{font-family:'Source Sans 3',sans-serif;font-size:18px;color:var(--brun); letter-spacing:.04em;margin-bottom:18px} .post .txt p{font-size:19px;margin-bottom:20px} /* HISTORIQUE */ .historique{background:var(--creme2);border-top:1px solid var(--ligne)} .histo-body{max-width:720px;margin:0 auto;text-align:center} .histo-body p{margin-bottom:16px} .provisoire{display:inline-block;font-family:'Source Sans 3',sans-serif;font-size:11px; letter-spacing:.18em;text-transform:none;color:var(--cuivre); border:1px dashed var(--cuivre);padding:5px 12px;margin-bottom:24px;opacity:.8} /* CONTACT (sombre) */ .contact{background:var(--brun);color:var(--creme);position:relative} .contact::before{content:'';position:absolute;top:0;left:0;width:100%;height:1px; background:linear-gradient(90deg,transparent,var(--cuivre),transparent)} .contact-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(32px,5vw,72px);align-items:start} .contact .eyebrow{color:var(--or);display:block;margin-bottom:14px} .contact h2{font-family:'Playfair Display',serif;font-weight:700;color:rgba(245,240,232,.85); font-size:clamp(28px,4vw,40px);line-height:1.16;margin:0 0 22px} .contact-sub{font-family:'Source Sans 3',sans-serif;font-size:18px;color:rgba(245,240,232,.85); margin:0 0 12px} .contact-line{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:26px} .contact .who,.contact .tel{font-family:'Source Sans 3',sans-serif;font-weight:400; font-size:18px;color:rgba(245,240,232,.85);letter-spacing:.01em} .contact .mail-btn{display:inline-flex;align-items:center;gap:10px;font-family:'Source Sans 3',sans-serif; font-size:18px;letter-spacing:.02em;color:rgba(245,240,232,.7);background:transparent; border:0.5px solid rgba(245,240,232,.6);padding:12px 26px;cursor:pointer;border-radius:6px; position:relative;overflow:hidden;transition:border-color .3s,color .3s} .contact .mail-btn span{position:relative;z-index:1} .contact .mail-btn::before{content:'';position:absolute;left:0;bottom:0;width:100%;height:0; background:var(--or);transition:height .3s ease;z-index:0} .contact .mail-btn:hover::before{height:100%} .contact .mail-btn:hover{border-color:var(--or);color:var(--brun)} .contact .mail-reveal{margin-top:16px;font-family:'Source Sans 3',sans-serif;font-size:18px; color:var(--or);letter-spacing:.01em;user-select:all;-webkit-user-select:all} .contact .mail-reveal .copied{font-size:12px;color:rgba(245,240,232,.55);user-select:none;-webkit-user-select:none} .contact .follow{font-family:'Source Sans 3',sans-serif;font-size:18px; color:rgba(245,240,232,.85);margin:0 0 14px;white-space:nowrap} .socials{display:flex;flex-direction:column;gap:16px;margin-top:4px} .socials .srow{display:flex;align-items:center;gap:14px} .socials a{width:46px;height:46px;border:0.5px solid rgba(245,240,232,.6);border-radius:50%; display:flex;align-items:center;justify-content:center;transition:border-color .3s;flex-shrink:0; position:relative;overflow:hidden} .socials a::before{content:'';position:absolute;left:0;bottom:0;width:100%;height:0; background:var(--or);transition:height .3s ease;z-index:0} .socials a:hover::before{height:100%} .socials a:hover{border-color:var(--or)} .socials svg{width:18px;height:18px;fill:rgba(245,240,232,.7);transition:fill .3s;position:relative;z-index:1} .socials a:hover svg{fill:#fff} .socials .handle{font-family:'Source Sans 3',sans-serif;font-size:18px;color:rgba(245,240,232,.7); letter-spacing:.02em} /* FOOTER */ footer{background:var(--noir);color:rgba(245,240,232,.5);text-align:left; font-family:'Source Sans 3',sans-serif;font-size:13px;letter-spacing:.08em} footer .bar{height:1px;background:var(--cuivre);opacity:.3;margin:0 clamp(40px,6vw,90px)} footer .foot-inner{padding:30px clamp(40px,6vw,90px) 34px} footer .foot-copy{max-width:1140px;margin:0 auto} footer .foot-dia{color:var(--or);margin:0 12px;font-size:9px;vertical-align:middle} footer .foot-copy a{color:rgba(245,240,232,.6);transition:color .25s} footer .foot-copy a:hover{color:var(--or)} /* REVEAL */ .reveal{opacity:0;transform:translateY(30px);transition:opacity .9s ease,transform .9s ease} .reveal.in{opacity:1;transform:none} /* SCROLL TOP */ .scrolltop{position:fixed;right:24px;bottom:24px;width:48px;height:48px;border-radius:50%; background:var(--cuivre);color:var(--creme);border:0;cursor:pointer;display:flex; align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(10px); transition:opacity .3s,transform .3s,background .25s,color .25s;z-index:50;box-shadow:0 6px 20px rgba(0,0,0,.35)} .scrolltop.show{opacity:.7;visibility:visible;transform:none} .scrolltop:hover{background:var(--or);color:var(--brun);opacity:1;transform:translateY(-3px) scale(1.08)} .scrolltop svg{width:20px;height:20px} /* RESPONSIVE — sections */ @media(max-width:860px){ .grid4{grid-template-columns:repeat(2,1fr);gap:34px 24px} .post{grid-template-columns:1fr} .post .pics{max-width:420px;margin:0 auto} .contact-grid{grid-template-columns:1fr;gap:40px} } @media(max-width:460px){ .grid4{grid-template-columns:1fr 1fr;gap:26px 18px} } .page-hero{position:relative;min-height:34vh;display:flex;align-items:flex-end; padding:0 clamp(40px,6vw,90px) clamp(34px,5vw,54px);overflow:hidden;background:var(--noir)} .page-hero::before{content:"";position:absolute;inset:0; background:url('/images/banner.jpg') center 38%/cover no-repeat} .page-hero::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(15,11,8,.45),rgba(15,11,8,.78))} .page-hero .ph-inner{position:relative;z-index:2} .page-hero .eyebrow{color:rgba(245,240,232,.9);display:block;margin-bottom:10px} .page-hero h1{font-family:'Playfair Display',serif;font-weight:700;color:var(--or); font-size:clamp(34px,5vw,54px);line-height:1.05;margin:0;text-shadow:0 2px 24px rgba(0,0,0,.45)} .cpage{background:var(--creme)} .cwrap{max-width:840px;margin:0 auto} .cgroup + .cgroup{margin-top:clamp(48px,7vh,84px)} .cgroup > .eyebrow{display:block;text-align:center;margin-bottom:10px} .cgroup > h2{font-family:'Playfair Display',serif;font-weight:700;color:var(--brun); text-align:center;font-size:clamp(22px,2.8vw,30px);line-height:1.1;margin:0 0 30px} .ccard{border:1px solid var(--or);padding:22px 26px;background:var(--creme2);margin-bottom:16px; display:flex;justify-content:space-between;align-items:flex-start;gap:24px} .ccard .cdate{font-family:'Source Sans 3',sans-serif;font-weight:600;color:var(--brun); font-size:21px;line-height:1.2;white-space:nowrap} .ccard .cdate .chour{display:block;font-size:15px;font-weight:500;color:var(--cuivre);margin-top:3px} .ccard .cplace{color:var(--texte);font-size:17px;line-height:1.45;text-align:right} .ccard .cplace .cven{font-weight:600;color:var(--brun)} .ccard .cprice{display:block;margin-top:7px;font-size:14px;color:var(--cuivre)} .crow{display:flex;justify-content:space-between;gap:16px;padding:13px 27px; border-bottom:1px solid var(--ligne);color:var(--muted);font-size:16px} .crow .rdate{font-weight:600;color:var(--texte);white-space:nowrap} .crow .rplace{text-align:right} .cempty{text-align:center;color:var(--muted)} @media(max-width:680px){ .ccard{flex-direction:column;gap:8px} .ccard .cplace{text-align:left} .ccard .cdate{white-space:normal} .crow{flex-direction:column;gap:2px} .crow .rplace{text-align:left} } .page-hero{position:relative;min-height:34vh;display:flex;align-items:flex-end; padding:0 clamp(40px,6vw,90px) clamp(34px,5vw,54px);overflow:hidden;background:var(--noir)} .page-hero::before{content:"";position:absolute;inset:0; background:url('/images/banner.jpg') center 38%/cover no-repeat} .page-hero::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(15,11,8,.45),rgba(15,11,8,.78))} .page-hero .ph-inner{position:relative;z-index:2} .page-hero h1{font-family:'Playfair Display',serif;font-weight:700;color:var(--or); font-size:clamp(34px,5vw,54px);line-height:1.05;margin:0;text-shadow:0 2px 24px rgba(0,0,0,.45)} .mpage{background:var(--creme)} .mus-list{max-width:1000px;margin:0 auto} .mus{display:flex;gap:clamp(28px,5vw,56px);align-items:center;margin-bottom:clamp(46px,7vh,84px)} .mus:last-child{margin-bottom:0} .mus:nth-child(even){flex-direction:row-reverse} .mus-photo{flex:0 0 33%;max-width:33%} .mus-photo .pic{overflow:hidden;aspect-ratio:4/5;display:block; box-shadow:0 12px 30px rgba(26,21,16,.2); outline:1px solid rgba(201,169,110,.5);outline-offset:7px; transition:transform .5s ease,box-shadow .5s ease} .mus-photo .pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s ease} .mus-photo .pic:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(26,21,16,.3)} .mus-photo .pic:hover img{transform:scale(1.06)} .mus-info{flex:1} .mus-info .role{display:block;color:var(--cuivre);font-size:15px;margin-bottom:6px} .mus-info h2{font-family:'Playfair Display',serif;font-weight:700;color:var(--brun); font-size:clamp(24px,3vw,32px);line-height:1.1;margin:0 0 14px} .mus-info p{color:var(--texte);font-size:17px;line-height:1.6;margin:0 0 12px} .mus-info p:last-child{margin-bottom:0} @media(max-width:720px){ .mus,.mus:nth-child(even){flex-direction:column;text-align:center} .mus-photo{flex-basis:auto;max-width:340px;width:100%} } /* bannière mobile (image réduite) */ @media(max-width:860px){ .hero::before{background-image:url('/images/banner-mobile.jpg')} .page-hero::before{background-image:url('/images/banner-mobile.jpg')} }