:root{
  --paper:#f5f0e7;
  --paper-2:#eee5d7;
  --ink:#1d1916;
  --forest:#102d2a;
  --forest-2:#173936;
  --gold:#b07a31;
  --gold-light:#c99956;
  --white:#fffdf8;
  --muted:#6f685f;
  --line:#dfd5c8;
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Inter", Arial, sans-serif;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;min-height: 100%;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.6;min-height: 100vh;margin: 0;display: flex;flex-direction: column;}
a{color:inherit}
h3 {
  font-family: var(--serif);
}
img{max-width:100%;display:block}
.container{width:min(calc(100% - 40px),var(--max));margin-inline:auto}
.narrow{max-width:820px}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;background:#fff;padding:.75rem;z-index:1000}
.skip-link:focus{left:1rem;top:1rem}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:var(--gold);font-weight:600}
.kicker{font-family:var(--serif);font-size:21px;color:#5b5148}
.section-title{font-family:var(--serif);font-weight:500;font-size:clamp(42px,5vw,66px);line-height:1;margin:.15em 0 .35em}
.lead{font-family:var(--serif);font-size:23px;line-height:1.45}
.rule{display:block;width:48px;height:2px;background:var(--gold);margin:0 0 12px}
.card{background:#fbf8f2;border:1px solid var(--line)}
.prose p{font-family:var(--serif);font-size:21px;line-height:1.55}
.prose h2{font-family:var(--serif);font-size:40px;font-weight:500;margin-top:1.4em}

.site-header{position:sticky;top:0;z-index:100;background:rgba(248,244,236,.97);backdrop-filter:blur(10px);border-bottom:1px solid rgba(0,0,0,.05)}
.header-inner{min-height:78px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:220px}
.brand-mark{width:50px;height:50px;border:1px solid var(--gold);display:grid;place-items:center;border-radius:50%;font-family:var(--serif);font-size:38px;color:var(--gold)}
.brand-text strong{font-family:var(--serif);font-size:19px;line-height:.86;text-transform:uppercase;letter-spacing:.03em;font-weight:600;display:block}
.brand-text small{font-size:8px;letter-spacing:.28em;color:var(--gold);text-transform:uppercase}
.main-nav{margin-left:auto;display:flex;align-items:center;gap:24px}
.main-nav a{text-decoration:none;text-transform:uppercase;font-size:11px;letter-spacing:.04em;padding:28px 0 23px;border-bottom:2px solid transparent}
.main-nav a:hover,.main-nav a.active{color:var(--gold);border-color:var(--gold)}
.header-cta{white-space:nowrap}
.menu-toggle{display:none;background:none;border:0;padding:10px}
.menu-toggle span:not(.sr-only){display:block;width:24px;height:2px;background:var(--ink);margin:5px 0}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 20px;border:1px solid transparent;text-transform:uppercase;letter-spacing:.05em;font-size:11px;font-weight:600;text-decoration:none;cursor:pointer;transition:.2s ease}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:#966524}
.btn-outline{border-color:var(--gold);color:var(--gold);background:transparent}
.btn-outline:hover{background:var(--gold);color:#fff}
.btn-dark-outline{border-color:rgba(255,255,255,.65);color:#fff}
.btn-dark-outline:hover{background:#fff;color:var(--ink)}

.hero{position:relative;color:#fff;background-color:#3a2d23;background-size:cover;background-position:center;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(21,16,13,.86) 0%,rgba(21,16,13,.65) 44%,rgba(21,16,13,.12) 72%)}
.hero .container{position:relative;z-index:1}
.hero-large{min-height:560px;display:flex;align-items:center}
.hero-small{min-height:390px;display:flex;align-items:flex-end}
.hero-content{padding:82px 0}
.hero-small .hero-content{padding:70px 0}
.hero h1{font-family:var(--serif);font-weight:500;line-height:.96;font-size:clamp(54px,6vw,84px);margin:.2em 0}
.hero-small h1{font-size:clamp(50px,5.5vw,72px)}
.hero-lead{max-width:620px;font-size:16px;color:#f2eee7}
.hero .actions{margin-top:28px}

.home-hero{background-image:url("assets/accueil.jpg")}
.assoc-hero{background-image:url("assets/association-hero.jpg")}
.concerts-hero{background-image:url("assets/concerts-hero.jpg")}
.transmission-hero{background-image:url("assets/transmission-hero.jpg")}
.journal-hero{background-image:url("https://images.unsplash.com/photo-1767358270254-54f63bbe6b10?auto=format&fit=crop&fm=jpg&q=82&w=2200")}
.contact-hero{background-image:url("assets/contact-hero.jpg")}
.support-hero{background-image:url("https://images.unsplash.com/photo-1687092187089-595e8409022b?auto=format&fit=crop&fm=jpg&q=82&w=2200")}
.event-hero{background-image:url("https://images.unsplash.com/photo-1756476872149-2365d1c42d02?auto=format&fit=crop&fm=jpg&q=82&w=2200")}

.intro{padding:72px 0}
.intro-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:54px;align-items:center}
.intro-image{min-height:390px;background:url("https://images.unsplash.com/photo-1520523839897-bd0b52f945a0?auto=format&fit=crop&w=1200&q=85") center/cover}
.intro-copy p{font-family:var(--serif);font-size:22px}

.pillars{background:#fbf8f2;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pillars-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.pillars article{padding:34px 28px;border-right:1px solid var(--line)}
.pillars article:last-child{border-right:0}
.pillars h2{font-family:var(--serif);font-size:28px;font-weight:600;margin:0 0 8px}
.pillars p{font-size:13px;color:#49433e}
.pillars a{text-decoration:none;text-transform:uppercase;color:var(--gold);font-size:10px;letter-spacing:.1em}

.feature{display:grid;grid-template-columns:1fr 1.2fr;min-height:380px;margin:28px auto;background:rgba(255,255,255,.28)}
.feature.reverse{grid-template-columns:1.2fr 1fr}
.feature-media{min-height:380px;background-size:cover;background-position:center}
.media-project{background-image:url("assets/association-notre-projet.jpg");background-position:center 48%}
.media-approach{background-image:url("https://images.unsplash.com/photo-1465847899084-d164df4dedc6?auto=format&fit=crop&w=1200&q=85")}
.feature-copy{padding:55px 48px;display:flex;flex-direction:column;justify-content:center}
.feature-copy h2{font-family:var(--serif);font-size:46px;font-weight:500;line-height:1;margin:.2em 0}
.feature-copy p{font-family:var(--serif);font-size:20px;line-height:1.48}

.team{padding:70px 0 90px}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}
.person-card{display:grid;grid-template-columns:42% 58%;background:#f1e9de;min-height:230px}
.person-photo{background-size:cover;background-position:center}
.photo-1{background-image:url("https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=700&q=85")}
.photo-2{background-image:url("https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=700&q=85")}
.photo-3{background-image:url("https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=700&q=85")}
.person-copy{padding:24px 18px}
.person-copy h3{font-family:var(--serif);font-size:23px;line-height:1.05;margin:0 0 4px}
.role{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:18px;margin:0 0 13px}
.person-copy p:last-child{font-size:12px;line-height:1.5}

.section{padding:80px 0}
.section.alt{background:var(--paper-2)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.info-card{padding:28px;background:#fbf8f2;border:1px solid var(--line)}
.info-card h3{font-family:var(--serif);font-size:28px;line-height:1.05;margin:.2em 0}
.info-card p{font-size:14px}
.info-card .meta{font-size:12px;color:var(--gold);text-transform:uppercase;letter-spacing:.08em}

.events-list{display:grid;gap:18px;margin-top:30px}
.event-card{display:grid;grid-template-columns:150px 1fr auto;gap:28px;align-items:center;padding:26px;background:#fbf8f2;border:1px solid var(--line)}
.date-block{text-align:center;border-right:1px solid var(--line);padding-right:24px}
.date-block strong{font-family:var(--serif);font-size:46px;color:var(--gold);display:block;line-height:.9}
.date-block span{text-transform:uppercase;font-size:11px;letter-spacing:.12em}
.event-card h3{font-family:var(--serif);font-size:31px;margin:0 0 5px}
.event-card p{margin:0;color:#5a534b}
.event-card .btn{white-space:nowrap}

.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.article-card{background:#fbf8f2;border:1px solid var(--line);overflow:hidden}
.article-image{height:220px;background-size:cover;background-position:center}
.article-card:nth-child(1) .article-image{background-image:url("https://images.unsplash.com/photo-1511379938547-c1f69419868d?auto=format&fit=crop&w=900&q=85")}
.article-card:nth-child(2) .article-image{background-image:url("https://images.unsplash.com/photo-1455885666463-8182d6c6f3f5?auto=format&fit=crop&w=900&q=85")}
.article-card:nth-child(3) .article-image{background-image:url("https://images.unsplash.com/photo-1507838153414-b4b713384a76?auto=format&fit=crop&w=900&q=85")}
.article-copy{padding:24px}
.article-copy h3{font-family:var(--serif);font-size:29px;line-height:1.05;margin:.25em 0}
.article-copy p{font-size:14px}
.article-copy a{text-decoration:none;color:var(--gold);text-transform:uppercase;font-size:10px;letter-spacing:.1em}

.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px}
.contact-card{background:#fbf8f2;border:1px solid var(--line);padding:30px}
.contact-card h2{font-family:var(--serif);font-size:38px;font-weight:500;margin-top:0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:1/-1}
label{font-size:12px;text-transform:uppercase;letter-spacing:.08em}
input,textarea,select{width:100%;padding:13px 14px;border:1px solid #cfc2b1;background:#fffdf8;font:inherit}
textarea{min-height:180px;resize:vertical}
.form-note{font-size:12px;color:#736a61}

.support-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.support-card{padding:30px;background:#fbf8f2;border:1px solid var(--line)}
.support-card h3{font-family:var(--serif);font-size:31px;margin:.1em 0}
.support-card p{font-size:14px}

.event-layout{display:grid;grid-template-columns:1.35fr .65fr;gap:44px;align-items:start}
.event-aside{position:sticky;top:110px;background:#fbf8f2;border:1px solid var(--line);padding:28px}
.event-aside h3{font-family:var(--serif);font-size:28px;margin-top:0}
.event-aside dl{margin:0}
.event-aside dt{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);margin-top:16px}
.event-aside dd{margin:2px 0 0}

.discover{min-height:330px;display:flex;align-items:center;position:relative;color:#fff;background:linear-gradient(90deg,rgba(18,14,11,.9),rgba(18,14,11,.4)),url("https://images.unsplash.com/photo-1507838153414-b4b713384a76?auto=format&fit=crop&w=1800&q=85") center/cover}
.discover-inner{padding:65px 0}
.discover h2{font-family:var(--serif);font-size:52px;font-weight:500;line-height:1;margin:.1em 0}
.actions{display:flex;gap:14px;flex-wrap:wrap}

footer {margin-top: auto;}
.site-footer{background:var(--forest);color:#f1eee6;padding:52px 0 20px}
.footer-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr 1.35fr .55fr;gap:28px}
.site-footer h2{font-family:var(--sans);font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--gold-light);margin:0 0 14px}
.site-footer p,.site-footer a{font-size:12px;color:#f2f0e8;text-decoration:none;line-height:1.65}
.site-footer a:hover{color:var(--gold-light)}
.newsletter{display:flex}
.newsletter input{width:100%;min-width:0;background:transparent;border:1px solid rgba(255,255,255,.2);padding:10px 12px;color:white}
.newsletter .btn{padding:0 15px}
.footer-mark{font-family:var(--serif);font-size:110px;color:var(--gold);line-height:.8;text-align:center}
.footer-bottom{border-top:1px solid rgba(255,255,255,.09);margin-top:35px;padding-top:18px;text-align:center}
.footer-bottom p{margin:0;font-size:10px;color:#bbb7ad}

@media (max-width: 980px){
  .header-inner{min-height:70px}
  .main-nav{position:absolute;top:70px;left:0;right:0;background:#f8f4ec;display:none;flex-direction:column;align-items:stretch;gap:0;padding:12px 20px 22px;border-top:1px solid #e3dbcf}
  .main-nav.open{display:flex}
  .main-nav a{padding:13px 0;border-bottom:1px solid #e6ded2}
  .menu-toggle{display:block;margin-left:auto}
  .header-cta{display:none}
  .brand{min-width:0}
  .intro-grid,.feature,.feature.reverse,.contact-grid,.event-layout{grid-template-columns:1fr}
  .feature.reverse .feature-copy{order:2}
  .feature.reverse .feature-media{order:1}
  .pillars-grid,.grid-3,.article-grid,.support-grid{grid-template-columns:1fr}
  .pillars article{border-right:0;border-bottom:1px solid var(--line)}
  .team-grid{grid-template-columns:1fr}
  .person-card{grid-template-columns:180px 1fr}
  .event-card{grid-template-columns:120px 1fr}
  .event-card .btn{grid-column:2}
  .event-aside{position:static}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-mark{display:none}
}
@media (max-width: 640px){
  .container{width:min(calc(100% - 28px),var(--max))}
  .brand-text strong{font-size:16px}.brand-mark{width:42px;height:42px;font-size:31px}
  .hero-large{min-height:620px}.hero-small{min-height:360px}
  .hero h1{font-size:50px}
  .feature-copy{padding:36px 24px}.feature-copy h2{font-size:39px}
  .feature-copy p,.prose p{font-size:18px}
  .person-card{grid-template-columns:1fr}.person-photo{min-height:280px}
  .grid-2,.form-grid{grid-template-columns:1fr}
  .form-grid .full{grid-column:auto}
  .event-card{grid-template-columns:1fr;text-align:left}
  .date-block{text-align:left;border-right:0;border-bottom:1px solid var(--line);padding:0 0 16px}
  .event-card .btn{grid-column:auto}
  .footer-grid{grid-template-columns:1fr}
  .newsletter{flex-direction:column;gap:8px}
}

/* Logo officiel fourni par Résonances Baroques */
.brand{min-width:245px;height:68px;display:flex;align-items:center}
.brand-logo{display:block;width:230px;max-height:64px;object-fit:contain;object-position:left center}
.footer-logo-wrap{display:flex;align-items:flex-start;justify-content:center}
.footer-logo{display:block;width:190px;max-width:100%;height:auto;object-fit:contain;filter:brightness(1.18)}
@media(max-width:1100px){.brand{min-width:205px}.brand-logo{width:195px}.main-nav{gap:16px}}
@media(max-width:980px){.brand{min-width:0;height:62px}.brand-logo{width:185px;max-height:58px}}
@media(max-width:640px){.brand-logo{width:165px;max-height:54px}.footer-logo-wrap{justify-content:flex-start}.footer-logo{width:210px}}

/* Cadrages des nouveaux fonds : architecture sacrée, pierre et voûtes */

.assoc-hero{background-position:center 48%}
.concerts-hero{background-position:center 52%}
.transmission-hero{background-position:center 42%}
.journal-hero{background-position:center 48%}
.contact-hero{background-position:center 50%}
.support-hero{background-position:center 44%}
.event-hero{background-position:center 48%}

.newsletter-consent{
  margin-top:8px!important;
  font-size:9px!important;
  line-height:1.45!important;
  color:#bbb7ad!important;
}
.newsletter-button {
  display: inline-block;
  margin-top: 12px;
  padding: 12px 20px;

  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold);

  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;

  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

.newsletter-button:hover,
.newsletter-button:focus-visible {
  background: var(--gold);
  color: var(--forest);
}
/* Accueil — Drottningholm : cadrage de la fenêtre et du jardin baroque */
.home-hero{
  background-position:center 0;
  background-size:cover;
}
#form-status {
    margin-top: 18px;
    font-size: 14px;
    line-height: 1.6;
}

#form-status:empty {
    display: none;
}
@media (max-width: 800px){
  .home-hero{
    background-position:center 52%;
  }
}

/* Photos fournies — cadrages des bandeaux et de Notre projet */
.concerts-hero,.transmission-hero,.assoc-hero,.media-project{
  background-position:center center;
  background-size:cover;
}

/* Derniers visuels fournis */
.transmission-hero {
  background-image: url("assets/transmission-hero.jpg");
  background-size: cover;
  background-position: center top;
}
.contact-hero{background-position:center center;background-size:cover}


@media (max-width:800px){
  .transmission-hero{
    background-position:center 68%;
  }
}