/* v2 : couleurs du logo (marine, bleu du globe, or de la flamme) + slider */
.dark{background:linear-gradient(135deg,#07072E 0,#10107A 100%)}
.dark p{color:#c9cdf0}
.dark .badge{background:rgba(255,255,255,.08);color:var(--gold);border-color:rgba(255,194,26,.6)}
.brand img{width:50px}
footer .brand img{background:#fff}

/* bandeau de page interne */
.hero.sub{padding:112px 16px 0;background:#fff;text-align:left}
.hero.sub .wrap{max-width:1400px;padding:0;align-items:stretch;display:block}
.subbox{position:relative;overflow:hidden;border-radius:32px;padding:110px 70px 70px;min-height:360px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:18px;color:#fff;background:radial-gradient(circle at 85% 20%,rgba(46,163,242,.4),transparent 45%),radial-gradient(circle at 0 100%,rgba(255,194,26,.2),transparent 40%),linear-gradient(135deg,#07072E 0,#0E0E6E 60%,#1B1FA8 100%)}
.subbox::after{content:"";position:absolute;right:-40px;bottom:-60px;width:340px;height:340px;background:url("../img/p/design-sans-titre.png") center/contain no-repeat;opacity:.1;filter:grayscale(1) brightness(3)}
.subbox>*{position:relative;z-index:1}
.subbox h1{color:#fff;font-size:clamp(36px,5vw,68px)}
.subbox .lead{color:#d3d7f7;max-width:640px;font-size:18px}
.subbox .badge{background:rgba(255,255,255,.1);color:var(--gold);border-color:rgba(255,194,26,.6)}
.crumb{font:500 14px var(--head);color:#bfc4f0}
.crumb a{color:#fff;opacity:.8}.crumb a:hover{opacity:1;color:var(--gold)}

/* barres */
.bars{display:flex;flex-direction:column;gap:20px;width:100%;max-width:520px}
.bar b{display:flex;justify-content:space-between;color:var(--ink);font:500 16px var(--head);margin-bottom:8px}
.bar i{display:block;height:10px;border-radius:99px;background:#E4E9F8;overflow:hidden}
.bar i::after{content:"";display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--green),var(--sky));transition:width 1.4s cubic-bezier(.2,.7,.2,1)}
.bar.in i::after{width:var(--w)}
.big{display:flex;align-items:baseline;gap:12px;font:500 clamp(70px,9vw,120px) var(--head);letter-spacing:-.06em;color:var(--green);line-height:1}
.big small{font:500 18px var(--head);letter-spacing:-.01em;color:var(--muted)}

/* onglets */
.tabs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:40px}
.tabs button{display:flex;align-items:center;gap:10px;padding:8px 20px 8px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;font:500 15px var(--head);cursor:pointer;transition:.25s}
.tabs button img{width:38px;height:38px;border-radius:50%;object-fit:cover}
.tabs button.on,.tabs button:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.tabp{display:none;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.tabp.on{display:grid}
.tabp .media{aspect-ratio:4/3.2}
.tabp .txt{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.tabp h3{color:#fff;font-size:clamp(26px,3vw,38px)}
.tabp .ticks li{color:#fff}
.tabp .ticks li::before{background-color:var(--gold);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307073A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E")}

/* galeries */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gal div{border-radius:18px;overflow:hidden;aspect-ratio:1;background:var(--cream)}
.gal img{width:100%;height:100%;object-fit:cover;transition:.5s}
.gal div:hover img{transform:scale(1.06)}
.gal .tall{grid-row:span 2;aspect-ratio:auto}
.strip{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.strip div{flex:none;width:260px;aspect-ratio:4/5;border-radius:18px;overflow:hidden;scroll-snap-align:start}
.strip img{width:100%;height:100%;object-fit:cover}
.marq{overflow:hidden;white-space:nowrap;padding:34px 0;border-block:1px solid var(--line)}
.marq span{display:inline-block;font:500 clamp(34px,5vw,64px) var(--head);letter-spacing:-.04em;color:var(--ink);animation:mq 24s linear infinite}
.marq span em{font-style:normal;color:var(--gold);margin:0 .5em}
@keyframes mq{to{transform:translateX(-50%)}}

/* filtres */
.filters{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
.filters button{padding:10px 22px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font:500 15px var(--head);cursor:pointer;transition:.25s}
.filters button.on,.filters button:hover{background:var(--green);border-color:var(--green);color:#fff}
.ev.hide{display:none}
.ev .im.poster{aspect-ratio:auto}
.ev .im.poster img{height:auto}
.ev.nolink{cursor:default}
.ev.nolink:hover{transform:none;box-shadow:none}

/* détail événement */
.detail{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.detail .media{aspect-ratio:auto;position:sticky;top:110px}
.detail .media img{height:auto}
.detail .txt{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.pn{display:flex;justify-content:space-between;gap:16px;margin-top:50px;padding-top:30px;border-top:1px solid var(--line);width:100%}
.pn a{display:flex;flex-direction:column;gap:4px;max-width:46%;color:var(--ink);font:500 18px var(--head);letter-spacing:-.02em}
.pn a small{color:var(--muted);font:400 13px var(--body)}
.pn a:last-child{text-align:right;margin-left:auto}
.pn a:hover{color:var(--green)}

/* bandeau contact avec photo */
.cta-box{background-color:var(--green-d);background-position:center;background-size:cover}
.cta-box p{color:#d3d7f7}

@media(max-width:980px){
  .hero.sub{padding:100px 12px 0}
  .subbox{padding:80px 26px 44px;min-height:300px}
  .tabp.on,.detail{grid-template-columns:1fr;gap:30px}
  .detail .media{position:static}
  .gal{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  .gal{grid-template-columns:1fr 1fr}
  .tabs button{font-size:14px}
}

/* événements de l'accueil (5 affiches) */
.events.five{grid-template-columns:repeat(5,1fr);gap:16px}
.events.five h3{font-size:16px}
/* contact : les longues adresses e-mail passent à la ligne */
.contact>*{min-width:0}
.info{overflow-wrap:anywhere}
@media(max-width:980px){
  .events.five{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  section{padding:64px 0}
  .head{margin-bottom:36px}
  .events{grid-template-columns:1fr 1fr;gap:12px}
  .ev .bd{padding:14px 14px 18px;gap:6px}
  .ev h3,.events.five h3{font-size:15px}
  .ev .date{font-size:13px}
  .events.five{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -24px;padding:0 24px 10px;scrollbar-width:none}
  .events.five::-webkit-scrollbar{display:none}
  .events.five>*{flex:0 0 66%;scroll-snap-align:start}
  .split{gap:28px}
  .subbox{padding:72px 22px 36px;min-height:240px;border-radius:26px}
  .crumb{font-size:13px}
  .tabs{gap:8px}
  .tabs button{padding:6px 14px 6px 6px}
  .tabs button img{width:30px;height:30px}
  .tabp .media{aspect-ratio:4/3}
  .big{font-size:76px}
  .facts{padding:16px}
  .pn a{font-size:15px}
  .cta{padding:64px 0}
  .marq{padding:22px 0}
  .info .it{padding:18px}
}

/* menu compact entre tablette et grand écran */
@media(min-width:981px) and (max-width:1180px){
  .menu{gap:16px;font-size:14px}
  .brand small{display:none}
  .nav>.btn{white-space:nowrap;padding:10px 16px}
}