*{box-sizing:border-box}
:root{--orange:#F58220;--orange-dark:#DF6812;--orange-soft:#FFF3E8;--black:#111313;--black-soft:#1B1D1D;--white:#FFFFFF;--border:#EED8C8;--shadow:0 8px 24px rgba(17,19,19,.08)}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:hidden;background:#F8F4F1;font-family:Inter,Arial,sans-serif;color:var(--black)}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}.storm-icon,.label-icon,.picto svg,.bottom-nav svg,.section-icon{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.storm-icon{width:27px;height:27px;color:var(--orange)}.label-icon{width:14px;height:14px;vertical-align:-3px}.section-icon{width:20px;height:20px;display:block}
a{text-decoration:none;color:inherit}
.page{position:relative;z-index:1;max-width:760px;margin:0 auto;background:rgba(255,255,255,.94);min-height:100vh;box-shadow:0 0 30px rgba(0,0,0,.08)}
.page-wave-watermark{position:absolute;inset:0;z-index:4;overflow:hidden;pointer-events:none;opacity:.085;mix-blend-mode:multiply}.page-wave-watermark>span{position:absolute;left:-25%;width:150%;height:230px;background:url("assets/decor/waves.svg") center/100% 100% no-repeat;transform-origin:center;animation:independent-wave var(--wave-duration,2s) ease-in-out var(--wave-delay,0s) infinite alternate}.page>header,.page>nav{position:relative;z-index:5}.page>main{position:relative;z-index:1}@keyframes independent-wave{from{transform:translateX(-5%) scale(1.02) rotate(var(--wave-rotation,0deg))}to{transform:translateX(5%) scale(1.055) rotate(var(--wave-rotation-end,0deg))}}
.page-canvas{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;background:linear-gradient(135deg,#090909,#381507 52%,#101010)}
.header{height:200px;position:sticky;top:0;z-index:50;display:flex;align-items:flex-start;justify-content:space-between;padding:16px 26px;overflow:hidden;box-shadow:0 8px 22px rgba(17,19,19,.08)}
.brand{display:flex;align-items:center;gap:18px;z-index:3;transform:translateY(7px)}
.brand img{width:132px;height:132px;object-fit:contain}
.brand div{font:800 italic 46px/1 "Barlow Condensed",sans-serif;margin-top:20px;white-space:nowrap}
.brand div span{color:var(--orange)}
.header-impact{position:absolute;left:205px;right:105px;top:12px;z-index:3;height:105px;overflow:hidden;pointer-events:none}.header-impact>span{--slogan-delay:0s;position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.header-impact>span:nth-child(2){--slogan-delay:3s}.header-impact>span:nth-child(3){--slogan-delay:6s}.header-impact b,.header-impact strong{display:flex;white-space:nowrap}.header-impact b{color:var(--black);font:800 italic 24px/.82 "Barlow Condensed";letter-spacing:.04em}.header-impact strong{color:var(--orange);font:800 italic clamp(34px,5.4vw,48px)/.9 "Barlow Condensed";letter-spacing:-.02em;text-shadow:0 6px 14px rgba(245,130,32,.18)}.impact-letter{display:inline-block;opacity:0;transform-origin:center bottom;animation:impact-letter-shot 9s cubic-bezier(.18,.8,.2,1) calc(var(--slogan-delay) + var(--letter-delay)) infinite}.impact-letter.space{width:.25em}@keyframes impact-letter-shot{0%{opacity:0;transform:translateY(-125px) scale(2.8) rotate(-10deg)}2.2%{opacity:1;transform:translateY(7px) scale(.78,1.25) rotate(2deg)}3.4%{opacity:1;transform:translateY(-3px) scale(1.12,.9) rotate(-1deg)}4.5%,29%{opacity:1;transform:translateY(0) scale(1) rotate(0)}33%{opacity:0;transform:translateY(18px) scale(.9)}100%{opacity:0;transform:translateY(-125px) scale(2.8)}}
.header-actions{display:flex;gap:8px;z-index:3;margin-top:20px}
.icon-link{width:44px;height:44px;display:grid;place-items:center;font-size:27px;position:relative}
.badge{position:absolute;right:0;top:-4px;font:700 11px Inter;background:var(--orange);color:white;border-radius:50px;padding:3px 6px}
.header-waves{position:absolute;left:0;right:0;bottom:0;width:100%;height:92px;z-index:1}
main{padding:0 20px 105px}
.panel{background:var(--white);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:22px}
.hero,main>.panel,main>.support{transform:translateY(var(--scroll-lift,0)) scale(var(--scroll-scale,1));transform-origin:center;transition:transform .16s ease-out;will-change:transform}
.hero{height:320px;position:relative;overflow:hidden;border-radius:20px;background:var(--black-soft)}
.hero-canvas{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(120deg,#080808,#321307 58%,#111)}
.hero-photo{position:absolute;inset:0;z-index:1;background:url("assets/accueil/hero-soccer-scene-smooth.webp") center/cover no-repeat;opacity:.94}
.hero-animation,.hero-still{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;object-fit:cover;object-position:center;background:#111;pointer-events:none}
.hero-animation{animation:hero-video-loop 18s ease-in-out infinite}
.hero-still{opacity:0;animation:hero-still-loop 18s ease-in-out infinite}
@keyframes hero-video-loop{0%,42%{opacity:1}52%,78%{opacity:0}88%,100%{opacity:1}}
@keyframes hero-still-loop{0%,42%{opacity:0}52%,78%{opacity:1}88%,100%{opacity:0}}
.hero-bottom-logo{position:absolute;right:14px;bottom:12px;z-index:3;width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 5px 9px rgba(0,0,0,.35));pointer-events:none}
.hero-shade{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.15) 66%,transparent)}
.hero-filigree{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.24;background:repeating-linear-gradient(116deg,rgba(255,255,255,.14) 0 1px,transparent 1px 24px),repeating-linear-gradient(8deg,transparent 0 46px,rgba(245,130,32,.2) 46px 47px,transparent 47px 94px);mix-blend-mode:soft-light;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.75),rgba(0,0,0,.2) 70%,transparent);mask-image:linear-gradient(90deg,rgba(0,0,0,.75),rgba(0,0,0,.2) 70%,transparent)}
.hero-content{position:absolute;left:24px;top:68px;z-index:3;color:#fff}
.hero-content p{font:800 italic 36px "Barlow Condensed";margin:0}
.hero-content h1{font:800 italic 48px "Barlow Condensed";color:var(--orange);margin:-5px 0 6px}
.small-line{display:block;width:48px;height:4px;background:var(--orange);margin:12px 0 17px}
.button,.big-link{display:inline-flex;align-items:center;justify-content:center;gap:14px;background:linear-gradient(90deg,var(--orange),var(--orange-dark));color:white;font-weight:800;border-radius:999px;padding:12px 18px}
.carousel-dots{position:absolute;bottom:9px;left:50%;z-index:3;transform:translateX(-50%);display:flex;gap:7px}
.carousel-dots span{width:10px;height:10px;background:var(--white);border-radius:50%}.carousel-dots .on{background:var(--orange)}
.next-match{margin-top:18px;padding:17px 16px 14px;position:relative}
.tab-title{position:absolute;left:16px;top:-11px;background:var(--orange);color:#fff;border-radius:7px;padding:6px 10px;font-size:11px;font-weight:800}
.match-row{display:grid;grid-template-columns:94px 1fr 115px;align-items:center;min-height:185px}
.date{text-align:center;border-right:1px solid var(--border)}
.date strong{display:block;font:700 54px "Barlow Condensed"}.date b{display:block;color:var(--orange);font-size:19px}.date span{display:block;font-size:17px;color:#6D625B}.date small{display:block;margin-top:17px;font-size:10px;font-weight:800}
.clubs{display:flex;align-items:center;justify-content:center;gap:18px}
.club{text-align:center}.club img{width:76px;height:76px}.club span{display:block;font:700 14px "Barlow Condensed";margin-top:4px}
.next-match{--match-logo-scale:1}.next-match .club img,.next-match .cnff-logo{transform:scale(var(--match-logo-scale));transform-origin:center;transition:transform .12s ease-out;will-change:transform}
.cnff-logo{width:70px;height:62px;border:4px solid #111;border-radius:7px;display:grid;place-items:center;font:800 22px "Barlow Condensed"}
.versus{font:800 36px "Barlow Condensed";color:var(--orange)}
.kickoff{text-align:center;border-left:1px solid var(--border)}.kickoff>b{display:block;color:var(--orange);font-size:13px}.kickoff strong{display:block;font:700 44px "Barlow Condensed";margin:5px 0}.kickoff span{display:block;color:var(--orange);font-size:12px;font-weight:800}.kickoff small{display:block;color:#6D625B;font-size:9px;margin-top:14px}
.venue{display:block;text-align:center;color:#6D625B;font-weight:700;font-size:11px;margin:3px 0 12px}
.big-link{width:100%;border-radius:12px;padding:10px}
.shortcut-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:15px 0}
.shortcut{border:1px solid var(--border);box-shadow:var(--shadow);border-radius:15px;padding:16px 4px;text-align:center;background:var(--white);font-size:9px}
.picto{position:relative;width:36px;height:36px;display:grid;place-items:center;margin:0 auto 6px;border-radius:11px 4px 11px 4px;background:var(--orange-soft);color:var(--orange);transform:rotate(-3deg)}.picto svg{width:22px;height:22px;transform:rotate(3deg)}
.match-results{margin:0 0 15px;padding:14px;animation:results-in .28s ease both}
.match-results[hidden]{display:none}
.results-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid var(--border)}
.results-head strong{display:block;font:800 18px "Barlow Condensed"}.results-head span{display:block;margin-top:2px;color:var(--orange);font-size:9px;font-weight:800}
.results-close{width:30px;height:30px;border:0;border-radius:50%;background:var(--orange-soft);color:var(--orange);font-size:23px;line-height:1;cursor:pointer}
.result-row{display:grid;grid-template-columns:62px 1fr auto;align-items:center;gap:12px;padding:11px 3px;border-bottom:1px solid #f3e7df}
.result-row:last-child{border-bottom:0}.result-row time{color:#74665d;font-size:9px;font-weight:800}.result-row div b,.result-row div span{display:block;font:700 13px "Barlow Condensed"}.result-row div span{margin-top:3px;color:#74665d}
.result-row>strong{min-width:55px;text-align:center;font:800 23px "Barlow Condensed"}.result-row>strong i{padding:0 5px;color:#9a8d85;font-style:normal}.result-row>strong em{color:var(--orange);font-style:normal}
@keyframes results-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.club-profile{scroll-margin-top:175px;margin-top:15px;padding:20px;overflow:hidden;background:linear-gradient(145deg,#fff 0%,#fff7f0 100%)}
.club-profile-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;padding:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}.club-profile-head{display:flex;min-width:0;align-items:center;gap:16px}.club-profile-head img{width:68px;height:68px;object-fit:contain;filter:drop-shadow(0 7px 10px rgba(17,19,19,.14))}.club-profile-title-wrap{display:block}.club-profile-title-wrap>span:first-child{display:block;color:var(--orange);font-size:9px;font-weight:800;letter-spacing:.08em}.club-profile-head h2{margin:2px 0 0;font:800 italic 30px "Barlow Condensed"}.club-profile-head .club-profile-motto{display:block;margin:0;color:#695d55;font:700 italic 13px "Barlow Condensed";letter-spacing:0}.club-profile-action{display:flex;flex:0 0 auto;align-items:center;gap:8px;color:var(--orange);font-size:9px;font-weight:800}.club-profile-chevron{display:grid;width:28px;height:28px;place-items:center;border-radius:50%;background:var(--orange-soft);font-size:20px;line-height:1;transition:transform .22s ease}.club-profile-toggle[aria-expanded="true"] .club-profile-chevron{transform:rotate(180deg)}.club-profile-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:8px;border-radius:8px}.club-profile-content{margin-top:15px;padding-top:1px;border-top:1px solid var(--border);animation:club-profile-reveal .24s ease both}.club-profile-content[hidden]{display:none}@keyframes club-profile-reveal{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.club-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:14px}.club-facts>div{padding:11px;border:1px solid var(--border);border-radius:11px;background:#fff}.club-facts small,.academy-block small{display:block;margin-bottom:4px;color:var(--orange);font-size:8px;font-weight:800}.club-facts strong{display:flex;align-items:center;gap:5px;font:700 13px "Barlow Condensed"}.club-color{width:10px;height:10px;border-radius:50%}.club-color.orange{background:var(--orange)}.club-color.black{background:var(--black)}
.club-profile-columns{display:grid;grid-template-columns:170px 1fr;gap:10px;margin-top:10px}.academy-block{display:flex;align-items:center;gap:10px;padding:14px;border-radius:12px;background:var(--black);color:#fff}.academy-block>span{font-size:27px}.academy-block strong{font:800 15px "Barlow Condensed"}.club-objectives{padding:13px;border-radius:12px;background:var(--orange-soft)}.club-objectives h3{margin:0 0 7px;font:800 15px "Barlow Condensed"}.club-objectives ul{margin:0;padding-left:17px;color:#5d534d;font-size:9px;line-height:1.5}.club-objectives li+li{margin-top:4px}
.president-message{margin-top:15px;padding:20px;background:linear-gradient(145deg,#171717,#2a160c);color:#fff;overflow:hidden}.president-feature{display:grid;grid-template-columns:165px 1fr;align-items:center;gap:20px}.president-feature .president-video-wrap{width:165px;transition:width .28s ease}.president-message.message-open .president-feature{grid-template-columns:210px 1fr}.president-message.message-open .president-video-wrap{width:210px}.president-message-head small{display:block;color:#ff9b55;font-size:9px;font-weight:800;letter-spacing:.08em}.president-message-head strong{display:block;margin-top:5px;font:800 italic 27px/1 "Barlow Condensed"}.president-message-head>span{display:block;margin-top:7px;color:#cfc7c1;font:700 12px "Barlow Condensed"}.president-text-toggle{margin-top:14px;border:0;border-radius:999px;background:var(--orange);color:#fff;padding:9px 13px;font-size:9px;font-weight:800;cursor:pointer}
.president-message.is-rotating{animation:president-window-spin 1.08s cubic-bezier(.35,.05,.22,1) both;transform-style:preserve-3d}.president-text-toggle:disabled{opacity:.7;cursor:wait}@keyframes president-window-spin{0%{transform:translateY(var(--scroll-lift,0)) scale(var(--scroll-scale,1)) perspective(900px) rotateY(0)}38%{transform:translateY(-13px) scale(1.14) perspective(900px) rotateY(200deg)}64%{transform:translateY(-17px) scale(1.18) perspective(900px) rotateY(360deg)}76%{transform:translateY(var(--scroll-lift,0)) scale(var(--scroll-scale,1)) perspective(900px) rotateY(360deg)}85%{transform:translateY(-4px) scale(1.045) perspective(900px) rotateY(360deg)}92%{transform:translateY(2px) scale(.985) perspective(900px) rotateY(360deg)}97%{transform:translateY(-1px) scale(1.012) perspective(900px) rotateY(360deg)}100%{transform:translateY(var(--scroll-lift,0)) scale(var(--scroll-scale,1)) perspective(900px) rotateY(360deg)}}
.president-content{margin-top:17px;padding-top:17px;border-top:1px solid rgba(255,255,255,.14);animation:president-text-reveal .22s ease both}.president-content[hidden]{display:none}@keyframes president-text-reveal{from{opacity:0}to{opacity:1}}
.president-video-wrap{position:relative;width:160px;align-self:start;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:#000;box-shadow:0 10px 25px rgba(0,0,0,.3)}.president-portrait{width:100%;height:auto;aspect-ratio:4/3;display:block;background:#000;object-fit:cover}.president-letter p{margin:0 0 10px;color:#ddd;font-size:10px;line-height:1.6}.president-letter>p:first-child{color:#fff;font-size:12px}.president-letter footer{margin-top:15px;padding-left:12px;border-left:3px solid var(--orange)}.president-letter footer span,.president-letter footer strong,.president-letter footer small{display:block}.president-letter footer span{color:#c9c1bb;font-size:9px}.president-letter footer strong{margin:3px 0;font:800 italic 18px "Barlow Condensed"}.president-letter footer small{color:#ff9b55;font-size:8px;font-weight:800}
.tournament,.news{padding:14px;margin-top:15px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.section-head strong{font:700 16px "Barlow Condensed"}.section-head span{display:block;color:var(--orange);font-size:11px;font-weight:800;margin-top:2px}
.small-button,.section-head>a{border:1px solid #F4A16C;border-radius:999px;color:var(--orange);padding:6px 10px;font-size:9px;font-weight:800;white-space:nowrap}
.fixtures{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.fixture{min-width:154px;border:1px solid var(--border);border-radius:13px;display:grid;grid-template-columns:52px 1fr;overflow:hidden;background:var(--white)}
.fixture.selected{border-color:#ff8c50}.fixture-date{display:grid;place-items:center;align-content:center;background:#FFF9F5}.selected .fixture-date{background:var(--orange);color:white}.fixture-date b{font-size:24px}.fixture-date span{font-size:9px}
.fixture-main{text-align:center;padding:8px 5px}.fixture-main small{font-size:8px;font-weight:800}.mini-clubs{display:flex;align-items:center;justify-content:center;gap:5px;margin:7px 0}.mini-clubs img,.mini-cnff,.generic-logo{width:28px;height:28px}.mini-cnff,.generic-logo{border:2px solid #111;display:grid;place-items:center;font-size:7px;font-weight:800}.generic-logo{border-radius:50%;background:#111;color:#fff}.fixture-main>span{font-size:7px;font-weight:800}
.gallery{padding:14px;margin-top:15px;overflow:hidden}
.gallery-controls{display:flex;gap:6px}.gallery-arrow{width:31px;height:31px;border:1px solid #f4a16c;border-radius:50%;background:#fff;color:var(--orange);font-size:22px;line-height:1;cursor:pointer}
.gallery-filters{display:flex;gap:7px;margin:-2px 0 12px}.gallery-filter{border:1px solid var(--border);border-radius:999px;background:#fff;color:#695d55;padding:7px 14px;font-size:10px;font-weight:800;cursor:pointer;transition:.2s ease}.gallery-filter.active{border-color:var(--orange);background:var(--orange);color:#fff;box-shadow:0 5px 12px rgba(223,104,18,.2)}
.gallery-track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px}.gallery-track::-webkit-scrollbar{display:none}
.gallery-card[hidden]{display:none}
.gallery-card{position:relative;flex:0 0 72%;height:210px;padding:0;border:0;border-radius:14px;overflow:hidden;background:#171717;scroll-snap-align:start;cursor:zoom-in;box-shadow:0 8px 20px rgba(17,19,19,.15)}
.gallery-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 52%,rgba(0,0,0,.72));pointer-events:none}
.gallery-card img{width:calc(100% + 34px);height:100%;margin-left:-17px;display:block;object-fit:cover;object-position:calc(50% + var(--gallery-pan,0%)) var(--photo-y,50%);translate:var(--gallery-shift,0) 0;filter:contrast(1.08) saturate(1.13) brightness(1.04);animation:gallery-breathe 9s ease-in-out infinite alternate;transition:filter .45s ease,object-position .12s ease-out,translate .12s ease-out}
.gallery-card span{position:absolute;left:13px;bottom:11px;z-index:1;color:#fff;font:800 13px "Barlow Condensed";letter-spacing:.04em;text-shadow:0 2px 6px rgba(0,0,0,.5)}
.gallery-card:nth-child(even) img{animation-direction:alternate-reverse;animation-duration:10.5s}.gallery-card:nth-child(3n) img{animation-delay:-4s;animation-duration:11.5s}
.gallery-card:hover img{filter:contrast(1.1) saturate(1.2) brightness(1.07)}
.gallery-card:nth-child(1) img,.gallery-card:nth-child(3) img,.gallery-card:nth-child(5) img{--photo-y:42%}
@keyframes gallery-breathe{from{transform:scale(1.01)}to{transform:scale(1.065)}}
.gallery-lightbox{position:fixed;inset:0;z-index:100;background:rgba(9,9,9,.92);display:grid;place-items:center;padding:48px 18px 24px}.gallery-lightbox[hidden]{display:none}.gallery-lightbox img{max-width:min(100%,1000px);max-height:85vh;border-radius:14px;filter:contrast(1.08) saturate(1.13) brightness(1.04);box-shadow:0 20px 70px rgba(0,0,0,.5)}
.lightbox-close{position:absolute;right:18px;top:16px;width:40px;height:40px;border:0;border-radius:50%;background:#fff;color:#111;font-size:28px;cursor:pointer}.lightbox-open{overflow:hidden}
.news-grid{display:grid;grid-template-columns:1fr;gap:9px}.news-card{display:grid;grid-template-columns:145px 1fr;grid-template-rows:auto auto 1fr auto;column-gap:0;min-height:138px;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--white);padding:0 0 9px}.thumb{grid-column:1;grid-row:1/5;width:100%;height:100%;min-height:138px;position:relative;overflow:hidden;background:#171717}.thumb img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .45s ease}.news-card:hover .thumb img{transform:scale(1.07)}.thumb span{position:absolute;left:8px;top:8px;background:var(--orange);color:#fff;font-size:9px;padding:5px 7px;border-radius:4px;font-weight:800;box-shadow:0 3px 8px rgba(0,0,0,.18)}
.news-card small,.news-card h3,.news-card p,.news-card>b{grid-column:2;margin-left:14px;margin-right:12px}.news-card small{display:block;color:var(--orange);font-size:9px;font-weight:800;margin-top:11px}.news-card h3{font:800 18px/1.05 "Barlow Condensed";margin-top:5px;margin-bottom:5px}.news-card p{font-size:10px;line-height:1.35;color:#5D534D;min-height:28px;margin-top:2px;margin-bottom:3px}.news-card>b{font-size:9px;color:var(--orange)}
.news-more{display:block;grid-column:2;margin:6px 12px 0 14px;padding:0;border:0;background:none;color:var(--orange);font:800 9px Inter,Arial,sans-serif;cursor:pointer;text-align:left}.news-more:hover{color:var(--orange-dark);text-decoration:underline}.news-more[aria-expanded="true"]{color:var(--black)}
.news-card.is-open{display:block;padding:0}.news-card.is-open>.thumb,.news-card.is-open>small,.news-card.is-open>h3,.news-card.is-open>p,.news-card.is-open>.news-more{display:none}.news-card.is-open>.news-reader{margin:0;border:0;border-radius:0;box-shadow:none}
.news-reader{position:relative;display:grid;grid-template-columns:minmax(190px,38%) 1fr;gap:22px;margin-top:14px;padding:16px;border:1px solid var(--border);border-radius:17px;background:linear-gradient(145deg,#fff,#fff8f2);box-shadow:0 12px 28px rgba(17,19,19,.1);animation:news-reader-in .38s cubic-bezier(.2,.85,.3,1) both}.news-reader[hidden]{display:none}.news-reader>img{width:100%;height:230px;object-fit:cover;border-radius:13px}.news-reader>div{align-self:center;padding-right:18px}.news-reader small{color:var(--orange);font-size:9px;font-weight:800}.news-reader h2{font:800 italic 27px/1 "Barlow Condensed";margin:7px 0 10px}.news-reader p{color:#554b45;font-size:11px;line-height:1.55;margin:8px 0}.news-reader-close{position:absolute;right:10px;top:9px;z-index:2;width:30px;height:30px;border:0;border-radius:50%;background:var(--orange);color:#fff;font-size:21px;line-height:1;cursor:pointer;box-shadow:0 4px 10px rgba(223,104,18,.25)}@keyframes news-reader-in{from{opacity:0;transform:translateY(-12px) scale(.97)}to{opacity:1;transform:none}}
.partners{margin-top:15px;padding:22px;overflow:hidden;background:linear-gradient(145deg,#fff 0%,#fff8f2 100%)}
.partners-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0;border:0;background:transparent;color:var(--black);text-align:left;cursor:pointer}.partners-toggle small{display:block;color:var(--orange);font-size:9px;font-weight:800;letter-spacing:.08em}.partners-toggle strong{display:block;margin-top:5px;font:800 italic 25px/1 "Barlow Condensed"}.partners-toggle-label{flex:none;border-radius:999px;background:var(--orange);color:#fff;padding:9px 13px;font-size:9px;font-weight:800;white-space:nowrap;box-shadow:0 5px 12px rgba(223,104,18,.2)}
.partners-content{padding-top:18px;animation:partners-open .3s ease both}.partners-content[hidden]{display:none}@keyframes partners-open{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.partners-intro{position:relative;padding-right:20%}.partners-intro p{max-width:560px;margin:0;color:#5d534d;font-size:12px;line-height:1.6}.partners h3{margin:22px 0 10px;font:800 16px "Barlow Condensed"}
.partner-benefits{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.partner-benefits>div{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:8px;padding:11px;border:1px solid var(--border);border-radius:12px;background:#fff}.partner-benefits span{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--orange-soft);color:var(--orange);font-weight:800}.partner-benefits p{margin:0;color:#5d534d;font-size:10px;line-height:1.35}
.partner-types{margin-top:14px;padding:15px;border-radius:14px;background:var(--black);color:#fff}.partner-types>strong{font:800 17px "Barlow Condensed"}.partner-types p{margin:7px 0 11px;color:#ddd;font-size:10px;line-height:1.55}.partner-types>div{display:flex;flex-wrap:wrap;gap:6px}.partner-types span{padding:5px 8px;border:1px solid rgba(245,130,32,.55);border-radius:999px;color:#ffac70;font-size:8px;font-weight:800}
.partner-contact{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;margin-top:14px;padding:14px;border-left:4px solid var(--orange);background:#fff}.partner-contact strong{font:800 17px "Barlow Condensed"}.partner-contact p{margin:5px 0 0;color:#5d534d;font-size:10px;line-height:1.5}.partner-contact-label{border-radius:999px;background:var(--orange-soft);color:var(--orange);padding:8px 11px;font-size:8px;font-weight:800;white-space:nowrap}
.support{display:grid;grid-template-columns:58px 1fr auto;align-items:center;margin-top:15px;padding:13px 16px;background:linear-gradient(90deg,#fff,#fff4ec)}.ticket{font-size:34px}.support strong{display:block;font:700 20px "Barlow Condensed"}.support span{display:block;font-size:10px;color:#5D534D}.reserve{background:linear-gradient(90deg,var(--orange),var(--orange-dark));color:white;border-radius:999px;padding:10px 16px;font-size:12px}
.legal-footer{position:relative;z-index:5;padding:18px 20px;text-align:center;border-top:1px solid var(--border);background:rgba(255,255,255,.92)}.legal-footer address{margin-bottom:10px;color:#6d625b;font-style:normal;font-size:10px;line-height:1.5}.legal-footer address strong,.legal-footer address span{display:block}.legal-footer address strong{color:var(--black);font:800 15px "Barlow Condensed"}.legal-toggle{border:0;background:transparent;color:#6d625b;font-size:10px;font-weight:700;text-decoration:underline;cursor:pointer}.legal-toggle:hover{color:var(--orange)}
.legal-content{margin:18px auto 0;max-width:680px;padding:20px;text-align:left;border:1px solid var(--border);border-radius:16px;background:#fff;animation:legal-open .3s ease both}.legal-content[hidden]{display:none}.legal-content h2{margin:0 0 16px;color:var(--black);font:800 italic 25px "Barlow Condensed"}.legal-content section{padding:13px 0;border-top:1px solid #f0e2d8}.legal-content h3{margin:0 0 7px;color:var(--orange);font:800 14px "Barlow Condensed"}.legal-content p{margin:0 0 7px;color:#5d534d;font-size:10px;line-height:1.65}.legal-content p:last-child{margin-bottom:0}.legal-content a{color:var(--orange);font-weight:700}@keyframes legal-open{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bottom-nav{position:sticky;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid var(--border);padding:11px 8px 14px}.bottom-nav a{text-align:center;font-size:8px}.bottom-nav span{width:30px;height:27px;display:grid;place-items:center;margin:0 auto 3px;color:#72675f}.bottom-nav svg{width:22px;height:22px}.bottom-nav .active{color:var(--orange)}.bottom-nav .active span{color:var(--orange)}

@media(max-width:560px){
  .page{max-width:none}
  .header{height:160px;padding:10px 14px}.brand{transform:translateY(5px)}.brand img{width:94px;height:94px}.brand div{font-size:34px;margin-top:15px}.header-impact{left:125px;right:72px;top:8px;height:75px}.header-impact b{font-size:14px}.header-impact strong{font-size:clamp(21px,6.3vw,29px)}.header-actions{margin-top:12px}.header-waves{height:68px;bottom:0}
  main{padding:0 10px 92px}.hero{height:225px}.hero-content{left:18px;top:47px}.hero-content p{font-size:29px}.hero-content h1{font-size:39px}.hero-bottom-logo{right:9px;bottom:9px;width:54px;height:54px}.button{font-size:11px;padding:10px 14px}
  .match-row{grid-template-columns:75px 1fr 86px;min-height:160px}.date strong{font-size:42px}.date b{font-size:15px}.date span{font-size:14px}.clubs{gap:7px}.club img{width:58px;height:58px}.club span{font-size:10px}.cnff-logo{width:55px;height:48px;font-size:17px}.versus{font-size:29px}.kickoff strong{font-size:34px}.kickoff>b{font-size:10px}
  .shortcut-grid{gap:5px}.shortcut{font-size:8px;padding:13px 2px}.picto{font-size:21px}
  .news-grid{grid-template-columns:1fr;gap:7px}.news-card{grid-template-columns:112px 1fr;min-height:132px}.thumb{height:100%;min-height:132px}.news-card small{font-size:8px}.news-card h3{font-size:15px}.news-card p{font-size:9px;line-height:1.3}.news-reader{grid-template-columns:1fr;gap:12px;padding:12px}.news-reader>img{height:190px}.news-reader>div{padding-right:0}.news-reader h2{font-size:23px}.news-reader p{font-size:10px}.support{grid-template-columns:45px 1fr}.reserve{grid-column:2;margin-top:8px;width:max-content}.support strong{font-size:17px}
  .gallery-card{flex-basis:84%;height:180px}
  .partners{padding:17px 14px}.partners-intro{padding-right:0}.partners h2{font-size:29px}.partner-benefits{grid-template-columns:1fr}.partner-contact{grid-template-columns:1fr}.partner-contact-label{width:max-content}
  .club-profile{scroll-margin-top:140px;padding:14px}.club-profile-head{gap:11px}.club-profile-head img{width:54px;height:54px}.club-profile-head h2{font-size:25px}.club-profile-head .club-profile-motto{font-size:11px}.club-profile-action-label{display:none}.club-facts{grid-template-columns:1fr 1fr}.club-profile-columns{grid-template-columns:1fr}.club-objectives ul{font-size:10px}
  .president-message{padding:16px 14px}.president-feature{grid-template-columns:115px 1fr;gap:13px}.president-feature .president-video-wrap{width:115px}.president-message.message-open .president-feature{grid-template-columns:150px 1fr}.president-message.message-open .president-video-wrap{width:150px}.president-message-head strong{font-size:21px}.president-letter p{font-size:10px;line-height:1.55}.president-letter footer strong{font-size:15px}
}

@media(prefers-reduced-motion:reduce){.gallery-card img{animation:none;transform:none;translate:0}.page-wave-watermark>span,.president-content,.club-profile-content,.impact-letter{animation:none}.club-profile-chevron{transition:none}.header-impact>span{display:none}.header-impact>span:first-child{display:flex}.header-impact>span:first-child .impact-letter{opacity:1;transform:none}}

/* ===== OURAGAN FC - IDENTITÉ VISUELLE UNIFIÉE ===== */
body{
  background:
    radial-gradient(circle at top left,rgba(245,124,32,.16),transparent 32%),
    linear-gradient(135deg,#090807,#281007 58%,#111);
}

.page{
  background:var(--white);
}

.header{
  background:linear-gradient(180deg,#FFFFFF 0%,#FFF9F5 100%);
  border-bottom:1px solid rgba(245,124,32,.08);
}

.brand img{
  filter:drop-shadow(0 6px 10px rgba(17,17,17,.12));
}

.brand div{
  color:var(--black);
}
.brand div span{
  color:var(--orange);
}

.panel,
.shortcut,
.news-card,
.fixture{
  border-color:var(--border);
}

.shortcut:hover,
.news-card:hover,
.fixture:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(245,124,32,.12);
}

.shortcut,
.news-card,
.fixture,
.button,
.big-link,
.small-button,
.reserve,
.bottom-nav a,
.club,
.venue{
  transition:.22s ease;
}

.picto,
.section-head span,
.news-card small,
.news-card>b,
.kickoff>b,
.kickoff span,
.versus,
.date b{
  color:var(--orange);
}

.button,
.big-link,
.reserve{
  background:linear-gradient(90deg,var(--orange),var(--orange-dark));
}

.tab-title,
.thumb span,
.selected .fixture-date{
  background:var(--orange);
}

.bottom-nav{
  border-top:2px solid rgba(245,124,32,.12);
}

.bottom-nav .active{
  color:var(--orange);
}

.bottom-nav a:hover,
.shortcut:hover{
  color:var(--orange-dark);
}

.hero{
  box-shadow:0 10px 30px rgba(17,17,17,.14);
}

.hero-shade{
  background:linear-gradient(90deg,rgba(17,17,17,.78),rgba(17,17,17,.18) 68%,transparent);
}

.hero-content h1{
  color:var(--orange);
}

.small-line{
  background:var(--orange);
}

.cnff-logo,
.mini-cnff{
  border-color:var(--black);
}

.generic-logo{
  background:var(--black);
  color:var(--white);
}

.support{
  background:linear-gradient(90deg,#FFFFFF 0%,var(--orange-soft) 100%);
  border-color:#F3CDB0;
}

::selection{
  background:var(--orange);
  color:white;
}

/* Official Ouragan FC crest is the only header logo */
.header{
  align-items:flex-start;
  background:linear-gradient(180deg,var(--white) 0%,#FFF9F4 100%);
}
.brand{
  z-index:3;
  display:flex;
  align-items:center;
}
.brand img{
  width:122px;
  height:122px;
  object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(17,19,19,.13));
}
.brand div{display:none!important}

/* Uniform official crest palette */
.icon-link,
.picto,
.shortcut:hover,
.bottom-nav .active,
.section-head span,
.news-card small,
.news-card>b,
.kickoff>b,
.kickoff span,
.versus,
.date b{
  color:var(--orange);
}
.button,.big-link,.reserve{
  background:linear-gradient(90deg,var(--orange),var(--orange-dark));
}
.tab-title,.thumb span,.selected .fixture-date,.small-line{
  background:var(--orange);
}
.panel,.shortcut,.fixture,.news-card{
  border-color:var(--border);
}
@media(max-width:560px){
  .brand img{width:88px;height:88px}
}

/* Boutons de raccourcis orange en relief */
.shortcut .picto{
  width:44px;
  height:42px;
  margin-bottom:10px;
  border:1px solid rgba(255,255,255,.38);
  border-radius:13px 7px 13px 7px;
  background:linear-gradient(145deg,#ff9c3f 0%,var(--orange) 48%,var(--orange-dark) 100%);
  color:#fff;
  box-shadow:
    0 7px 0 #b84d08,
    0 11px 16px rgba(180,73,7,.28),
    inset 2px 2px 3px rgba(255,255,255,.42),
    inset -2px -3px 4px rgba(125,43,0,.2);
  transform:rotate(-3deg) translateY(-3px);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.shortcut .picto svg{
  width:25px;
  height:25px;
  color:#fff;
  stroke:#fff;
  stroke-width:2.45;
  filter:drop-shadow(0 1px 1px rgba(94,31,0,.38));
}
.shortcut:hover .picto{
  filter:saturate(1.12) brightness(1.04);
  transform:rotate(-3deg) translateY(-6px);
  box-shadow:0 10px 0 #b84d08,0 15px 20px rgba(180,73,7,.3),inset 2px 2px 3px rgba(255,255,255,.42),inset -2px -3px 4px rgba(125,43,0,.2);
}
.shortcut:active .picto{
  transform:rotate(-3deg) translateY(3px);
  box-shadow:0 2px 0 #b84d08,0 4px 8px rgba(180,73,7,.22),inset 2px 2px 3px rgba(255,255,255,.35),inset -2px -3px 4px rgba(125,43,0,.2);
}

/* Deux ambiances, avec conservation du style classique par défaut. */
.theme-toolbar{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 22px 16px}
.theme-caption{font:700 11px "Barlow Condensed",sans-serif;letter-spacing:.12em;color:#6d625b}
.theme-toggle{display:inline-flex;flex-shrink:0;gap:3px;padding:4px;border:1px solid var(--border);border-radius:999px;background:#f5eee8;color:#695d55;cursor:pointer;font:700 11px Inter,Arial,sans-serif;min-height:44px;box-shadow:0 3px 12px rgba(0,0,0,.06)}
.theme-choice{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px}
.theme-choice>span{font-size:17px;line-height:1}
.theme-choice-light{background:var(--orange);color:#fff;box-shadow:0 2px 7px rgba(0,0,0,.09)}
.theme-toggle:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.theme-toggle:hover{border-color:var(--orange)}
html[data-theme="dark"]{color-scheme:dark;--orange:#ff922f;--orange-dark:#f58220;--orange-soft:#342217;--border:#513521;--shadow:0 10px 28px rgba(0,0,0,.3)}
html[data-theme="dark"] body{color:#f5f1ed;background:radial-gradient(ellipse at top left,#3a1b0c,transparent 55%),#080909}
html[data-theme="dark"] .page{background:linear-gradient(155deg,#1c1713 0%,#101212 28%,#171310 100%);box-shadow:0 0 65px #0008}
html[data-theme="dark"] .header{background:linear-gradient(115deg,#121414 35%,#312014 78%,#a8470b);border-bottom:2px solid var(--orange);box-shadow:0 8px 25px #0005}
html[data-theme="dark"] .header-impact b{color:#fff}
html[data-theme="dark"] .header-waves{opacity:.18}
html[data-theme="dark"] .page-wave-watermark{opacity:.035;mix-blend-mode:screen}
html[data-theme="dark"] .theme-caption{color:#c8b9ab}
html[data-theme="dark"] .theme-toggle{background:#0d1010;color:#bfb6ad}
html[data-theme="dark"] .theme-choice-light{background:transparent;color:inherit;box-shadow:none}
html[data-theme="dark"] .theme-choice-dark{background:linear-gradient(120deg,#ffa33b,#f58220);color:#17100a;box-shadow:0 2px 12px #f5822033}
html[data-theme="dark"] .panel,
html[data-theme="dark"] .shortcut{background:linear-gradient(145deg,#24201c,#121515 72%)}
html[data-theme="dark"] .next-match{background:linear-gradient(100deg,rgba(8,12,12,.95),rgba(16,18,15,.85)),url("assets/accueil/hero-soccer-scene.webp") center 65%/cover;border-color:#a45c25;box-shadow:0 12px 35px #0006,inset 0 1px #ffb66433}
html[data-theme="dark"] .hero{border:1px solid #a45c25;box-shadow:0 12px 35px #0006}
html[data-theme="dark"] .hero-shade{background:linear-gradient(90deg,rgba(0,0,0,.85),rgba(0,0,0,.28) 68%,rgba(0,0,0,.1))}
html[data-theme="dark"] .shortcut{border-bottom:2px solid var(--orange);box-shadow:0 7px 18px #0004}
html[data-theme="dark"] .shortcut .picto{background:transparent;color:var(--orange);border-color:transparent;box-shadow:none}
html[data-theme="dark"] .shortcut .picto svg{color:var(--orange);stroke:currentColor;filter:drop-shadow(0 2px 7px #ff922f33)}
html[data-theme="dark"] .news-card,
html[data-theme="dark"] .fixture,
html[data-theme="dark"] .club-facts>div,
html[data-theme="dark"] .partner-benefits>div,
html[data-theme="dark"] .partner-contact,
html[data-theme="dark"] .legal-content{background:#1d201f}
html[data-theme="dark"] .news-reader,
html[data-theme="dark"] .support{background:linear-gradient(120deg,#252019,#161918)}
html[data-theme="dark"] .fixture-date,
html[data-theme="dark"] .gallery-arrow,
html[data-theme="dark"] .gallery-filter:not(.active){background:#292723;color:#efded0}
html[data-theme="dark"] .fixture.selected .fixture-date{background:var(--orange);color:#111}
html[data-theme="dark"] .cnff-logo,
html[data-theme="dark"] .mini-cnff{background:#fff;color:#111;border-color:#fff;box-shadow:inset 0 0 0 3px #111}
html[data-theme="dark"] .generic-logo{color:#fff}
html[data-theme="dark"] .club-color.black{background:#111;border:1px solid #777}
html[data-theme="dark"] .partners-toggle,
html[data-theme="dark"] .legal-footer address strong,
html[data-theme="dark"] .legal-content h2,
html[data-theme="dark"] .news-more[aria-expanded="true"]{color:#f5f1ed}
html[data-theme="dark"] :is(.date span,.kickoff small,.venue,.result-row time,.result-row div span,.club-profile-motto,.club-objectives ul,.news-card p,.news-reader p,.partners-intro p,.partner-benefits p,.partner-contact p,.support span,.legal-footer address,.legal-toggle,.legal-content p){color:#ccc2b9}
html[data-theme="dark"] .result-row,
html[data-theme="dark"] .legal-content section{border-color:var(--border)}
html[data-theme="dark"] .legal-footer{background:#111413}
html[data-theme="dark"] .bottom-nav{background:rgba(17,20,19,.97);border-color:#74421e;box-shadow:0 -8px 24px #0005}
html[data-theme="dark"] .bottom-nav span{color:#bfb6ad}
html[data-theme="dark"] .bottom-nav .active span{color:var(--orange)}
html[data-theme="dark"] :is(.button,.big-link,.reserve){background:linear-gradient(105deg,#ff9f25,#eb6100);border:1px solid #ffbd63;box-shadow:0 5px 18px #ed6a001c}
@media(max-width:560px){.theme-toolbar{padding:8px 12px 14px;gap:6px}.theme-caption{font-size:9px;letter-spacing:.06em}.theme-choice{padding:8px 9px}.theme-toggle{font-size:10px}}

/* Signature du club : photos indépendantes et lettrage original fourni. */
.legal-footer{padding:0;border-top:0;background:#101212;color:#f6f2ee}
.legal-footer-details{padding:24px 20px;border-top:1px solid #ffffff12}
.legal-footer address,.legal-toggle{color:#c9bfb6}
.legal-footer address strong{color:#fff}
.legal-content{color:var(--black)}
.club-signature{position:relative;isolation:isolate;display:flex;align-items:center;min-height:260px;overflow:hidden;background:#0b0d0c;text-align:left;border-top:3px solid var(--orange);clip-path:polygon(0 8%,100% 0,100% 100%,0 100%);margin-top:-22px}
.club-signature-supporters,.club-signature-textile{position:absolute;top:0;height:100%;object-fit:cover;z-index:-2;pointer-events:none}
.club-signature-supporters{left:0;width:62%;object-position:22% center;mask-image:linear-gradient(90deg,#000 35%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,#000 35%,transparent 100%)}
.club-signature-textile{right:0;width:64%;object-position:right center;mask-image:linear-gradient(90deg,transparent,#000 24%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 24%)}
.club-signature::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0002,rgba(0,0,0,.65) 38%,transparent 72%),linear-gradient(0deg,#080a09aa,transparent 45%);pointer-events:none}
.club-signature-copy{width:72%;padding:40px 18px 35px 24px}
.club-signature-copy h2{margin:0;line-height:0}
.club-signature-wordmark{display:block;width:100%;height:auto;filter:drop-shadow(0 3px 8px #0009)}
@media(max-width:560px){
  .club-signature{min-height:220px;margin-top:-12px}
  .club-signature-copy{width:72%;padding:30px 8px 30px 12px}
  .club-signature-textile{width:61%;object-position:85% center}
  .club-signature-supporters{width:76%;object-position:20% center}
  .club-signature::after{background:linear-gradient(90deg,#0005,#0008 38%,transparent 76%)}
}

/* Proportions de la maquette, calculées sur la largeur réelle de la page. */
.header-curve,.header-motto,.hero-motto{display:none}
html[data-theme] .page{max-width:1024px;container-type:inline-size}
html[data-theme] main{padding:0 1.8cqw 2.4cqw}
html[data-theme] .header{height:19cqw;padding:1cqw 2.5cqw;border:0;box-shadow:none;overflow:visible;background:linear-gradient(90deg,#111c,#111b),url("assets/footer-supporters.jpg") center 62%/cover}
html[data-theme] .header .brand img{width:22cqw;height:22cqw;filter:drop-shadow(0 .4cqw .5cqw #0009)}
html[data-theme] .header-impact{left:29cqw;right:24cqw;top:4cqw;height:8.5cqw}
html[data-theme] .header-impact b{font-size:3.5cqw;line-height:1}
html[data-theme] .header-impact strong{font-size:5.1cqw;line-height:1;letter-spacing:-.025em}
html[data-theme] .header-motto{display:block;position:absolute;left:26cqw;top:13.5cqw;margin:0;color:#ddd;font:500 2.05cqw/1.2 "Barlow Condensed",sans-serif;letter-spacing:.13em;z-index:3}
html[data-theme] .header::after{content:"";position:absolute;right:0;top:0;width:17%;height:100%;background:linear-gradient(110deg,#ff9228,#f57412);clip-path:polygon(38% 0,100% 0,100% 78%,0 95%);pointer-events:none}
html[data-theme] .header-actions{position:absolute;inset:5cqw 3cqw auto auto;gap:9cqw;margin:0;z-index:3}
html[data-theme] .header-actions .icon-link{width:5.5cqw;height:5.5cqw;font-size:5.7cqw;line-height:1;color:#111}
html[data-theme] .header-actions .storm-icon{width:5cqw;height:5cqw;color:#fff}
html[data-theme] .badge{font-size:1.9cqw;padding:.5cqw 1cqw;top:-1.2cqw;right:-1cqw}
html[data-theme] .header-curve{display:block;position:absolute;left:0;bottom:calc(-1 * var(--header-curve-depth));width:100%;height:var(--header-curve-depth);z-index:10;pointer-events:none}
html[data-theme="dark"] .hero{height:45cqw;margin-top:-.3cqw;border:0;border-left:.65cqw solid #ff922f;border-bottom:.6cqw solid #ff922f;border-radius:1.8cqw 0 0 12% / 1.8cqw 0 0 7%;box-shadow:none}
html[data-theme="dark"] .hero-bottom-logo,html[data-theme="dark"] .hero-filigree{display:none}
html[data-theme="dark"] .hero-shade{background:linear-gradient(90deg,#0002,transparent 65%)}
html[data-theme="dark"] .hero-content{left:8%;top:22%;color:#fff}
html[data-theme="dark"] .hero-content p{font:800 italic 6.5cqw/1 "Barlow Condensed",sans-serif}
html[data-theme="dark"] .hero-content h1{margin:0;font:800 italic 9.6cqw/1 "Barlow Condensed",sans-serif;letter-spacing:-.015em}
html[data-theme="dark"] .small-line{width:10cqw;height:.65cqw;margin:1.3cqw 0 1.5cqw;background:linear-gradient(90deg,#ff922f,#ffc86e 70%,transparent)}
html[data-theme="dark"] .hero-motto{display:flex;align-items:center;gap:1.7cqw;margin:0 0 1.8cqw;color:#ddd;font:500 1.8cqw/1.3 "Barlow Condensed",sans-serif;letter-spacing:.04em}
.hero-motto i{font-style:normal}
html[data-theme="dark"] .button{min-width:35cqw;padding:1.6cqw 3.8cqw;justify-content:space-between;border-radius:2.8cqw;border:1px solid #ffc867;font:600 2.6cqw/1.2 "Barlow Condensed",sans-serif}
html[data-theme="dark"] .carousel-dots{bottom:1.2cqw;gap:1.6cqw}
html[data-theme="dark"] .carousel-dots span{width:1.9cqw;height:1.9cqw}
html[data-theme="dark"] .next-match{margin:2.2cqw .8cqw 0;padding:3.6cqw 2.4cqw 1.8cqw;border-radius:3cqw;border:1px solid #db8e36;background:linear-gradient(90deg,#07101155,#07101133),url("assets/match-stadium.jpg") center/cover;box-shadow:0 .5cqw 2cqw #67340d20}
html[data-theme="dark"] .tab-title{top:-1.5cqw;left:3cqw;padding:.8cqw 2.5cqw;border:1px solid #ffba67;border-radius:.7cqw;background:linear-gradient(110deg,#ff8b25,#e96708);font:600 2.8cqw/1.3 "Barlow Condensed",sans-serif;letter-spacing:.09em;transform:skew(-14deg)}
html[data-theme="dark"] .tab-title .label-icon{width:3cqw;height:3cqw;vertical-align:-.5cqw}
html[data-theme="dark"] .match-row{grid-template-columns:19% 54% 27%;min-height:28cqw;align-items:center}
html[data-theme="dark"] .date,html[data-theme="dark"] .kickoff{border-color:#c1b2a45e;padding:1cqw 0}
html[data-theme="dark"] .date strong{font:700 9.7cqw/.95 "Barlow Condensed",sans-serif}
html[data-theme="dark"] .date b{font:700 4.4cqw/1.1 "Barlow Condensed",sans-serif}
html[data-theme="dark"] .date span{font:400 3.8cqw/1.2 "Barlow Condensed",sans-serif;color:#ddd}
html[data-theme="dark"] .date small{font:600 2.3cqw/1 "Barlow Condensed",sans-serif;margin-top:2.4cqw}
html[data-theme="dark"] .clubs{gap:1.7cqw}
html[data-theme="dark"] .club img{display:block;width:16cqw;height:16cqw;object-fit:contain;margin:auto}
html[data-theme="dark"] .club span{font:700 2.5cqw/1.1 "Barlow Condensed",sans-serif;margin-top:.8cqw}
html[data-theme="dark"] .cnff-logo{width:12.8cqw;height:12.8cqw;font:800 4cqw/1 "Barlow Condensed",sans-serif;border:.7cqw solid #fff;border-radius:1.7cqw;box-shadow:inset 0 0 0 .6cqw #111;background:#fff;color:#111}
html[data-theme="dark"] .versus{font:800 6.8cqw/1 "Barlow Condensed",sans-serif}
html[data-theme="dark"] .kickoff>b{font:700 3.3cqw/1.1 "Barlow Condensed",sans-serif}
html[data-theme="dark"] .kickoff strong{font:700 8.5cqw/1 "Barlow Condensed",sans-serif;margin:1.4cqw 0 .7cqw}
html[data-theme="dark"] .kickoff span{font:700 3cqw/1.2 "Barlow Condensed",sans-serif}
html[data-theme="dark"] .kickoff small{display:block;max-width:17cqw;margin:1.2cqw auto 0;font:500 2.1cqw/1.3 "Barlow Condensed",sans-serif;color:#ddd}
html[data-theme="dark"] .venue{margin:1.6cqw 0 1.8cqw;font:600 2.6cqw/1.3 "Barlow Condensed",sans-serif;color:#d9d8d3}
html[data-theme="dark"] .big-link{padding:1.5cqw;border-radius:2.8cqw;font:700 3.5cqw/1.25 "Barlow Condensed",sans-serif}
html[data-theme="dark"] .shortcut-grid{gap:.6cqw;margin:1.8cqw 0}
html[data-theme="dark"] .shortcut{padding:1.6cqw .4cqw;border-radius:1.7cqw;border-color:#c47b35;background:linear-gradient(145deg,#30231a,#111414 65%);font:600 1.8cqw/1.3 "Barlow Condensed",sans-serif}
html[data-theme="dark"] .shortcut .picto{width:4.8cqw;height:4.8cqw;margin-bottom:1cqw;transform:none}
html[data-theme="dark"] .shortcut .picto svg{width:4cqw;height:4cqw;transform:none}
html[data-theme="dark"] .hero,html[data-theme="dark"] main>.panel,html[data-theme="dark"] main>.support{transform:none;will-change:auto}
html[data-theme="dark"] .next-match .club img,html[data-theme="dark"] .next-match .cnff-logo{transform:none}
.club-signature{clip-path:url(#footer-sweep);border-top:0;padding-top:16px}
html[data-theme="dark"] .club-signature{min-height:22cqw;margin-top:-1.2cqw;padding-top:2cqw}
html[data-theme="dark"] .club-signature-copy{width:70%;padding:3cqw 0 3cqw 29%}
.legal-footer-details{padding:12px 18px}
.legal-footer-details .theme-toolbar{justify-content:center;flex-wrap:wrap;min-height:0;padding:0 0 12px;gap:10px}
.legal-footer-details .theme-caption,html[data-theme="dark"] .legal-footer-details .theme-caption{color:#d1c3b7}
@media(max-width:560px){
 html[data-theme="dark"] .header-actions .icon-link{min-height:30px;min-width:26px}
 html[data-theme="dark"] .header-actions{gap:6cqw;top:4cqw;right:2cqw}
 html[data-theme="dark"] .hero{height:49cqw}
 html[data-theme="dark"] .hero-content{top:20%}
 html[data-theme="dark"] .button{font-size:3cqw;min-height:34px;padding:1.6cqw 3cqw}
 html[data-theme="dark"] .big-link{min-height:36px}
 html[data-theme="dark"] .shortcut{font-size:2.5cqw;padding:2cqw .4cqw}
 html[data-theme="dark"] .shortcut .picto{width:6cqw;height:6cqw}
 html[data-theme="dark"] .shortcut .picto svg{width:5cqw;height:5cqw}
 html[data-theme="dark"] .club-signature{min-height:30cqw}
 html[data-theme="dark"] .club-signature-copy{width:73%;padding-left:21%}
}

/* Mouvement lent du stade, indépendant des informations du match. */
.match-backdrop{display:none}
html[data-theme="dark"] .next-match{isolation:isolate;background:#101513}
html[data-theme="dark"] .match-backdrop{display:block;position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;pointer-events:none}
html[data-theme="dark"] .match-backdrop::before{content:"";position:absolute;inset:-8%;background:linear-gradient(90deg,#07101155,#07101133),url("assets/match-stadium.jpg") center/cover;animation:match-stadium-drift 16s ease-in-out infinite alternate;transform:translateY(var(--stadium-pan,0%)) scale(var(--stadium-scale,1.08));transition:transform .18s ease-out;transform-origin:70% center;will-change:transform}
@keyframes match-stadium-drift{from{translate:-.6% .3%}to{translate:.6% -.3%}}
@media(prefers-reduced-motion:reduce){html[data-theme="dark"] .match-backdrop::before{animation:none;transform:none;transition:none;will-change:auto}}

/* Matchs joués : photographie intégrée au fond des résultats. */
.match-results,html[data-theme="dark"] .match-results{background:linear-gradient(90deg,rgba(7,12,11,.93),rgba(7,12,11,.75) 48%,rgba(7,12,11,.4)),url("assets/hero-slide-ouragan.jpg") center 38%/cover no-repeat;color:#fff;border-color:#b46c30;box-shadow:0 8px 24px #0003}
.match-results .results-head,.match-results .result-row,html[data-theme="dark"] .match-results .result-row{border-color:#ffffff33}
.match-results .result-row time,.match-results .result-row div span,html[data-theme="dark"] .match-results .result-row time,html[data-theme="dark"] .match-results .result-row div span{color:#e7dace}
.match-results .results-head strong{text-shadow:0 2px 12px #0009}
.match-results .results-close{background:#101513d9;color:#ffab64}
@media(max-width:560px){
 .match-results,html[data-theme="dark"] .match-results{background-position:center,65% 35%}
}

/* Notre club : les équipes défilent en fond avec un fondu en boucle. */
.club-profile,html[data-theme="dark"] .club-profile{position:relative;isolation:isolate;background:#080d0b;color:#fff;border-color:#b46c30}
.club-backdrop{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;pointer-events:none;background:#080d0b}
.club-backdrop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;opacity:0;animation:club-team-fade 24s linear infinite}
.club-backdrop img:nth-child(2){animation-delay:-18s}
.club-backdrop img:nth-child(3){animation-delay:-12s}
.club-backdrop img:nth-child(4){animation-delay:-6s}
.club-backdrop::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#080d0bd9,#080d0b88 48%,#080d0b38)}
@keyframes club-team-fade{0%,20%{opacity:1}25%,95%{opacity:0}100%{opacity:1}}
.club-profile-toggle{min-height:170px}
.club-profile .club-profile-motto,html[data-theme="dark"] .club-profile .club-profile-motto{color:#e7dace}
.club-profile-action{padding:8px;border-radius:16px;background:#101513db;color:#ffab64}
.club-profile .club-facts>div,html[data-theme="dark"] .club-profile .club-facts>div,.club-profile .academy-block,.club-profile .club-objectives{background:#0c1311ed;color:#fff;border-color:#ffffff33}
.club-profile .club-objectives ul,html[data-theme="dark"] .club-profile .club-objectives ul{color:#e7dace}
.club-profile .club-color.black{border:1px solid #aaa}
@media(max-width:560px){.club-profile-toggle{min-height:130px}.club-backdrop img{object-position:center 40%}}
@media(prefers-reduced-motion:reduce){.club-backdrop img{animation:none;opacity:0}.club-backdrop img:first-child{opacity:1}}

/* Navigation vers les rubriques du site. */
.header{overflow:visible}
.menu-toggle{border:0;background:transparent;color:inherit;cursor:pointer;font-family:inherit}
.menu-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
html.menu-is-open{overflow:hidden}
.site-menu{position:fixed;inset:auto 0 0;width:min(100%,480px);max-width:100%;max-height:90dvh;margin:0 auto;padding:0;border:0;border-radius:30px 30px 0 0;background:#fff8f2;color:#171b19;box-shadow:0 -12px 70px #0004;overflow-y:auto;overscroll-behavior:contain}
.site-menu::backdrop{background:#060d10a8;backdrop-filter:blur(7px)}
.site-menu[open]{animation:menu-sheet-in .32s cubic-bezier(.2,.8,.2,1) both}
.menu-sheet{padding:10px 22px max(24px,env(safe-area-inset-bottom));background:radial-gradient(ellipse at 100% 0,#f5822020,transparent 55%)}
.menu-handle{width:38px;height:4px;margin:0 auto 22px;border-radius:10px;background:#998d8066}
.menu-heading{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.menu-heading img{object-fit:contain;flex-shrink:0}
.menu-heading small{font:800 9px Inter,sans-serif;letter-spacing:.13em;color:#bf560a}
.menu-heading h2{margin:3px 0 0;font:800 italic 30px/1 "Barlow Condensed",sans-serif}
.menu-close{margin-left:auto;flex-shrink:0;width:44px;height:44px;border:0;border-radius:50%;background:#171b190c;color:inherit;font-size:28px;cursor:pointer}
.menu-apps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 10px}
.menu-apps a{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;color:inherit;font:600 11px/1.3 Inter,sans-serif;border-radius:16px;-webkit-tap-highlight-color:transparent}
.menu-app-icon{display:grid;place-items:center;width:62px;height:62px;border:1px solid #e7dace;border-radius:19px;background:linear-gradient(145deg,#fff,#f3e7db);box-shadow:0 5px 12px #21150809;transition:transform .18s,background .18s;color:#bf560a}
.menu-apps a:first-child .menu-app-icon{background:linear-gradient(140deg,#ffab53,#f57718);border-color:#ffad61;color:#171b19;box-shadow:0 7px 18px #f5822030}
.menu-app-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.menu-apps a:hover .menu-app-icon{transform:translateY(-3px)}
.menu-apps a:active .menu-app-icon{transform:scale(.93)}
.menu-apps a:focus-visible,.menu-close:focus-visible{outline:2px solid var(--orange);outline-offset:5px}
.menu-signature{text-align:center;margin:27px 0 0;font:700 9px Inter,sans-serif;letter-spacing:.16em;opacity:.5}
html[data-theme="dark"] .site-menu{background:#171d1c;color:#fff5eb}
html[data-theme="dark"] .menu-heading small{color:#ffa55b}
html[data-theme="dark"] .menu-app-icon{background:linear-gradient(145deg,#333b36,#222925);border-color:#ffffff12;color:#ffac66}
html[data-theme="dark"] .menu-apps a:first-child .menu-app-icon{background:linear-gradient(140deg,#ffab53,#f57718);color:#171b19}
html[data-theme="dark"] .menu-close{background:#ffffff0d}
@keyframes menu-sheet-in{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.site-menu[open]{animation:none}.menu-app-icon{transition:none}}
main>[id]{scroll-margin-top:24px}
.contact-section h2{margin:0 0 10px;font:800 italic 30px "Barlow Condensed"}
.contact-section p{font-size:13px}
.contact-section>a{display:inline-block;padding:12px 0;color:var(--orange);font-weight:700;overflow-wrap:anywhere}

/* Boutons et résultats réunis sur la même photographie. */
.match-hub,html[data-theme="dark"] .match-hub{margin:16px 0;padding:12px;overflow:hidden;border:1px solid #b46c30;border-radius:18px;background:linear-gradient(180deg,#07100b12,#07100b33 40%,#07100bb3),url("assets/hero-slide-ouragan.jpg") center 38%/cover no-repeat;color:#fff;box-shadow:0 8px 24px #0003}
.match-hub .shortcut-grid,html[data-theme="dark"] .match-hub .shortcut-grid{margin:0;gap:6px}
.match-hub .shortcut,html[data-theme="dark"] .match-hub .shortcut{display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:125px;padding:8px 3px;background:#101713a8;backdrop-filter:none;color:#fff;border:1px solid #ffc18a88;box-shadow:none;text-shadow:0 2px 5px #0008}
.match-hub .shortcut:hover,.match-hub .shortcut:focus-visible,.match-hub .shortcut[aria-expanded="true"],html[data-theme="dark"] .match-hub .shortcut:hover,html[data-theme="dark"] .match-hub .shortcut:focus-visible,html[data-theme="dark"] .match-hub .shortcut[aria-expanded="true"]{background:#943e0ad9;border-color:#ffb36e;outline-offset:3px}
.match-hub .match-results,html[data-theme="dark"] .match-hub .match-results{margin:12px 0 0;padding:14px 2px 0;background:transparent;border:0;border-top:1px solid #ffc18a55;border-radius:0;box-shadow:none;scroll-margin-top:24px}
@media(max-width:560px){.match-hub,html[data-theme="dark"] .match-hub{padding:8px;background-position:center,65% 35%}.match-hub .shortcut-grid,html[data-theme="dark"] .match-hub .shortcut-grid{gap:4px}.match-hub .shortcut,html[data-theme="dark"] .match-hub .shortcut{min-height:110px}}

.match-hub .shortcut .picto,html[data-theme="dark"] .match-hub .shortcut .picto{width:clamp(34px,5.5cqw,46px);height:clamp(34px,5.5cqw,46px);margin-bottom:5px;background:transparent;border:0;box-shadow:none;color:#ffad66}
.match-hub .shortcut .picto svg,html[data-theme="dark"] .match-hub .shortcut .picto svg{width:clamp(28px,4.5cqw,36px);height:clamp(28px,4.5cqw,36px)}

/* Ligne basse horizontale à gauche, remontant en arc vers la droite. */
main > .panel,
html[data-theme="dark"] main > .panel{
  border-radius:8px 8px 100% 0 / 8px 8px 32px 0;
  border-bottom:2px solid var(--orange);
  padding-bottom:38px;
  margin-bottom:18px;
}
main > .hero,
html[data-theme="dark"] main > .hero{
  border-radius:8px 8px 100% 0 / 8px 8px 32px 0;
  border-bottom:2px solid var(--orange);
}
@media(max-width:560px){
  main > .panel,
  html[data-theme="dark"] main > .panel{
    border-radius:6px 6px 100% 0 / 6px 6px 22px 0;
    padding-bottom:28px;
    margin-bottom:14px;
  }
  main > .hero,
  html[data-theme="dark"] main > .hero{
    border-radius:6px 6px 100% 0 / 6px 6px 22px 0;
  }
}

/* Ombre discrète pour souligner les blocs en arc. */
main > .panel,
main > .hero{
  box-shadow:0 5px 12px rgba(38,24,14,.12),0 1px 3px rgba(38,24,14,.06);
}
html[data-theme="dark"] main > .panel,
html[data-theme="dark"] main > .hero{
  box-shadow:0 5px 14px rgba(0,0,0,.28),0 1px 3px rgba(0,0,0,.16);
}

/* Un seul fond fixe couvre tout l’écran, sous la page qui défile. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-color:#fffaf5;
  background-image:url("assets/background-arcs.svg"),radial-gradient(circle,#9860380a .6px,transparent .9px);
  background-size:100% 100%,5px 5px;
  background-repeat:no-repeat,repeat;
}
html[data-theme="dark"] body::before{background-color:#f6eee5}
/* Vagues discrètes, fixes derrière le contenu. */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:url("assets/decor/waves.svg") center/100% clamp(180px,30vh,320px) repeat-y;
  opacity:.18;
}
.page,
html[data-theme="dark"] .page{background:transparent}
.page-wave-watermark{display:none}
.page-wave-watermark>span{background:none}

/* Le fond du bloc Matchs se déplace indépendamment des boutons. */
.match-hub,html[data-theme="dark"] .match-hub{position:relative;isolation:isolate;background:#101713}
.match-hub-backdrop{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;pointer-events:none}
.match-hub-backdrop::before{content:"";position:absolute;inset:-9%;background:linear-gradient(180deg,#07100b12,#07100b33 40%,#07100bb3),url("assets/hero-slide-ouragan.jpg") center 38%/cover no-repeat;transform:translateY(var(--hub-pan,0%)) scale(var(--hub-scale,1.06));transition:transform .18s ease-out;animation:match-hub-drift 10s ease-in-out infinite alternate;will-change:transform;transform-origin:65% center}
@keyframes match-hub-drift{from{translate:-1% .5%}to{translate:1% -.5%}}
/* Les photos des articles restent entières, sans recadrage des visages. */
.news-reader>img{height:auto;max-height:none;object-fit:contain;align-self:start}
@media(max-width:560px){.match-hub-backdrop::before{background-position:center,65% 35%}}
@media(prefers-reduced-motion:reduce){.match-hub-backdrop::before{animation:none;transform:none;transition:none;will-change:auto}}

/* Signature transparente sur le bandeau animé. */
.hero-signature{position:absolute;right:3%;bottom:9%;z-index:3;width:23%;max-width:235px;height:auto;opacity:.88;pointer-events:none;filter:drop-shadow(0 2px 5px #0009);transform:rotate(-5deg)}
/* Contact : une invitation illustrée, puis le formulaire au clic. */
main>.contact-section,html[data-theme="dark"] main>.contact-section{padding:0 20px 38px;background:linear-gradient(90deg,#080e10dc,#080e1077 60%,#080e1022),url("assets/contact-club.png") center 60%/cover no-repeat;color:#fff}
.contact-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:145px;padding:24px 0 12px;cursor:pointer;list-style:none}
.contact-heading::-webkit-details-marker{display:none}
.contact-heading>span:first-child{display:flex;flex-direction:column;gap:9px}
.contact-heading small{font:800 10px Inter,sans-serif;letter-spacing:.13em;color:#ffb270}
.contact-heading strong{font:800 italic 32px/1 "Barlow Condensed",sans-serif}
.contact-heading>span>span{font-size:12px;color:#f5e7d8}
.contact-open{display:flex;align-items:center;gap:9px;padding:12px;border:1px solid #ffb27088;border-radius:12px;background:#1319149c}
.contact-open svg{width:22px;height:22px;fill:none;stroke:#ffb270;stroke-width:1.8}
.contact-open span{font-size:10px;font-weight:800;white-space:nowrap}
.contact-open b{font-size:22px;transition:transform .2s}
.contact-details[open] .contact-open b{transform:rotate(45deg)}
.contact-heading:focus-visible{outline:2px solid #ffb270;outline-offset:4px}
.contact-form{display:grid;gap:15px;padding:20px;border:1px solid #ffffff25;border-radius:14px;background:#0c1413eb}
.contact-fields{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.contact-form label{display:grid;gap:7px;min-width:0;font-size:12px;font-weight:700}
.contact-form label>span{font-weight:400;color:#c3c8c4}
.contact-form input,.contact-form textarea{width:100%;min-height:44px;padding:12px;border:1px solid #ffffff40;border-radius:9px;background:#ffffff0d;color:#fff;font:400 16px/1.4 Inter,sans-serif}
.contact-form textarea{resize:vertical}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#babfbd}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid #ffb270;outline-offset:2px}
.contact-form .button{justify-self:start;min-height:44px;border:0;cursor:pointer}
.contact-form .contact-help{margin:0;color:#d4d9d5;font-size:11px;line-height:1.5;overflow-wrap:anywhere}
.contact-help a{text-decoration:underline;color:#ffb270}
@media(max-width:560px){
  main>.contact-section,html[data-theme="dark"] main>.contact-section{padding:0 12px 28px}
  .contact-heading{min-height:125px;align-items:flex-start;justify-content:center;flex-direction:column;gap:16px}
  .contact-heading strong{font-size:28px}
  .contact-fields{grid-template-columns:1fr}
  .contact-form{padding:14px}
  .hero-signature{width:25%;right:3%;bottom:10%}
}
@media(prefers-reduced-motion:reduce){.contact-open b{transition:none}}

/* Boutique des supporters et panier de réservation. */
body.shop-is-open{overflow:hidden}
.shop{width:min(960px,calc(100% - 24px));max-height:90dvh;padding:26px;border:1px solid #e4b58f;border-radius:22px;background:#fffaf5;color:#171b18;box-shadow:0 24px 90px #0006}
.shop::backdrop{background:#07100bd9;backdrop-filter:blur(6px)}
.shop-top{position:sticky;top:-26px;z-index:5;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:26px 0 10px;background:#fffaf5}
.shop-top small{font-size:10px;font-weight:800;letter-spacing:.15em;color:#a64d0a}
.shop h2{font:800 italic clamp(26px,5vw,38px)/1.1 'Barlow Condensed',sans-serif;margin:7px 0 16px}
.shop h3{font:700 23px 'Barlow Condensed',sans-serif;margin:14px 0 6px}
.shop p{font-size:13px;line-height:1.6}
.shop button,.shop select{font:700 13px Inter,Arial,sans-serif;min-height:44px;border:1px solid #d6b9a1;border-radius:10px;padding:10px 13px}
.shop button{cursor:pointer;background:#f58220;color:#171b18}
.shop button:hover{background:#ffad62}
.shop button:focus-visible,.shop a:focus-visible,.shop select:focus-visible{outline:3px solid #186e58;outline-offset:3px}
.shop button:disabled{opacity:.45;cursor:default}
.shop-top button{background:transparent;flex-shrink:0}
.shop-cart-link{display:inline-block;background:#17261f;color:#fff;padding:12px 16px;border-radius:30px;font-size:13px;font-weight:700}
.shop-products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:22px}
.shop-products article{display:flex;flex-direction:column;min-width:0;padding:12px;border:1px solid #ead8c8;border-radius:16px;background:#fff}
.product-art{aspect-ratio:2/3;border-radius:10px;background-image:url('assets/boutique-ouragan.png');background-size:300% 100%;background-repeat:no-repeat}
.art-shirt{background-position:left center}.art-flag{background-position:center}.art-perfume{background-position:right center}
.shop-products p{margin:0 0 12px;color:#65574b}
.shop-products label{display:flex;align-items:center;gap:12px;font-size:13px;margin-bottom:12px}
.shop select{background:#fff;color:#171b18;flex:1;min-width:0}
.shop-price{display:block;margin-top:auto;padding:12px 0;font-size:12px;font-weight:700;color:#65574b}
.shop .shop-note{font-size:11px;color:#716051}
#shop-cart{margin-top:24px;padding:20px;border:1px solid #ddc6b2;border-radius:16px;background:#f6ecdf}
.cart-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #ddc6b2;font-size:13px}
.cart-row>div{display:flex;align-items:center;gap:9px;flex-shrink:0}
.cart-row button{background:#fff}
#cart-status{color:#285f38;min-height:20px}
@media(max-width:620px){.shop{padding:16px}.shop-top{top:-16px;padding-top:16px}.shop-products{grid-template-columns:1fr}.product-art{width:min(100%,260px);align-self:center}.cart-row{align-items:flex-start;flex-direction:column}#shop-cart{padding:14px}}

/* Aperçu de la boutique directement dans le bloc de soutien. */
.support .support-cart{width:52px;height:52px;display:grid;place-items:center;border-radius:15px;background:#df6812;box-shadow:0 5px 15px #df681230}
.support-cart svg{width:34px;height:34px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.support .support-preview{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:16px;min-width:0;container-type:inline-size}
.support-product{min-width:0;overflow:hidden;border:1px solid #e8ccb5;border-radius:14px;background:#f8f3ed;box-shadow:0 4px 12px #00000014}
.support-product .product-art{width:100%;border-radius:0}
.support .support-product>span,html[data-theme="dark"] .support .support-product>span{display:block;padding:9px 1px;background:#17231d;font:800 clamp(5px,1.45cqw,10px) Inter,Arial,sans-serif;letter-spacing:0;text-align:center;color:#fff}
@media(max-width:560px){.support .support-cart{width:38px;height:42px;border-radius:11px}.support-cart svg{width:28px;height:28px}.support .support-preview{gap:3px;margin-top:12px}.support-product{border-radius:6px}.support .support-product>span{padding:7px 0}}

.art-cap,.art-scarf,.art-mug{background-image:url("assets/boutique-accessoires-ouragan.png")}
.art-cap{background-position:left center}.art-scarf{background-position:center}.art-mug{background-position:right center}

/* Le mot du président : ambiance stade, lumière orange et texte protégé. */
main > .president-message,
html[data-theme="dark"] main > .president-message{
  background-color:#080e0b;
  background-image:linear-gradient(90deg,rgba(8,14,11,.86),rgba(8,14,11,.42) 55%,rgba(8,14,11,.12)),url("assets/president-stade-aerien.png");
  background-position:center,right center;
  background-size:cover,contain;
  background-repeat:no-repeat;
  min-height:260px;
  color:#fff;
  border-color:#b46c30;
}
.president-message .president-message-head strong{color:#fff;text-shadow:0 2px 12px #0008}
.president-message .president-message-head>span{color:#f2e3d6}
.president-message .president-content{padding:18px;border:1px solid #ffffff24;border-radius:14px;background:#080e0bea}
@media(max-width:560px){.president-message .president-content{padding:14px}}

/* Informations et demande de billets sous le bouton du match. */
.match-ticket-details>summary{cursor:pointer;list-style:none}
.match-ticket-details>summary::-webkit-details-marker{display:none}
.match-ticket-details>summary b{display:inline-block;transition:transform .2s}
.match-ticket-details[open]>summary b{transform:rotate(45deg)}
.match-ticket-details>summary:focus-visible{outline:3px solid #ffae66;outline-offset:4px}
.match-ticket-display{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:14px;padding:20px;border:1px solid #e6a77066;border-radius:14px;background:#0b1514f2;color:#fff;text-align:left}
.match-ticket-display h3{font:800 24px 'Barlow Condensed',sans-serif;margin:0 0 12px;color:#ffab64}
.match-ticket-display strong{font-size:14px}
.match-ticket-display dl{margin:16px 0 0}
.match-ticket-display dl>div{padding:10px 0;border-bottom:1px solid #ffffff20}
.match-ticket-display dt{font-size:11px;color:#c8beb5}
.match-ticket-display dd{margin:5px 0 0;font-size:13px}
.match-ticket-display p{font-size:12px;line-height:1.5}
.match-ticket-display label{display:grid;gap:6px;margin-top:12px;font-size:12px;font-weight:700}
.match-ticket-display input,.match-ticket-display select{width:100%;min-width:0;min-height:44px;padding:10px;border:1px solid #ffffff50;border-radius:8px;background:#fff;color:#111;font:16px Inter,Arial,sans-serif}
.match-ticket-display button{width:100%;min-height:44px;margin-top:14px;padding:12px;border:0;border-radius:10px;background:#f58220;color:#111;font-weight:800;cursor:pointer}
.match-ticket-display :is(input,select,button):focus-visible{outline:3px solid #ffae66;outline-offset:3px}
.match-ticket-display .ticket-help{font-size:11px;color:#d1c6bb}
@media(max-width:560px){.match-ticket-display{grid-template-columns:1fr;padding:14px;gap:18px}}
@media(prefers-reduced-motion:reduce){.match-ticket-details>summary b{transition:none}}

/* Quatre rubriques sportives, chacune avec son panneau sous le bandeau. */
.match-hub .shortcut-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.match-hub .shortcut[aria-expanded="true"]{background:#f5822038;box-shadow:inset 0 -3px #ffab64;border-radius:10px}
.hub-teams{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
.hub-teams figure{margin:0;overflow:hidden;border:1px solid #ffffff30;border-radius:10px;background:#101b16}
.hub-teams img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.hub-teams figcaption{padding:10px;text-align:center;font-size:12px;font-weight:800;color:#fff}
.hub-note{font-size:13px;line-height:1.6;color:#e7dace}
.hub-subtitle{font:700 19px 'Barlow Condensed',sans-serif;color:#fff}
.hub-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.hub-stats>div{display:grid;gap:6px;padding:14px 5px;text-align:center;background:#0b1514dd;border-radius:10px}
.hub-stats strong{font-size:24px;color:#ffab64}.hub-stats span{font-size:11px;color:#fff}
.hub-calendar>div{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid #ffffff30}
.hub-calendar time{flex:0 0 55px;color:#ffab64;font-size:10px;text-align:center}.hub-calendar time strong{display:block;font-size:25px}
.hub-calendar span{display:grid;gap:6px;font-size:13px;color:#fff}.hub-calendar small{color:#e7dace}
@media(max-width:560px){.hub-teams{grid-template-columns:repeat(2,minmax(0,1fr))}.hub-stats span{font-size:10px}}

/* Ambiance à gauche, grands raccourcis panier et compte à droite. */
.bottom-nav{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:12px 18px}
.bottom-nav>a{flex:0 0 52px;font-size:9px}
.bottom-nav>a>span{width:48px;height:48px;margin:0 auto 4px}
.bottom-nav>a svg{width:44px;height:44px}
.bottom-nav .theme-toolbar{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;min-width:0;margin-right:auto;padding:0}
.bottom-nav .theme-caption{display:block;width:auto;height:auto;margin:0;font:700 10px 'Barlow Condensed',sans-serif;letter-spacing:.08em}
.bottom-nav .theme-toggle{font-size:10px;min-height:44px}
.bottom-nav .theme-choice{display:flex;width:auto;height:auto;margin:0;padding:7px 8px;gap:4px;color:inherit}
.bottom-nav .theme-choice>span{display:inline;width:auto;height:auto;margin:0;font-size:16px;color:inherit}
@media(max-width:380px){.bottom-nav{gap:8px;padding:10px 8px}.bottom-nav>a{flex-basis:46px}.bottom-nav .theme-choice{padding:7px 5px;gap:3px}.bottom-nav .theme-toggle{font-size:9px}}

/* Quantité du panier toujours visible sur le caddie du bas. */
#bottom-shop-open>span{position:relative}
.bottom-nav #bottom-cart-count{position:absolute;top:-5px;right:-9px;display:grid;place-items:center;width:auto;min-width:22px;height:22px;margin:0;padding:0 5px;border-radius:999px;background:#f58220;color:#111;font:800 11px Inter,Arial,sans-serif;border:2px solid #fff}
#tournament-fixtures[hidden]{display:none}
#tournament-toggle{cursor:pointer;min-height:44px;flex-shrink:0;font-family:inherit}
#tournament-toggle:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

/* Partenaires : une rencontre au stade en image de fond. */
main>.partners,html[data-theme="dark"] main>.partners{
  background:linear-gradient(90deg,#080e10b3,#080e1066 55%,#080e1026),url("assets/partenaires-sans-visages.png") center 60%/cover no-repeat;
  color:#fff;border-color:#b46c30;
}
.partners .partners-toggle{min-height:145px;color:#fff}
.partners .partners-toggle strong{text-shadow:0 2px 12px #0008}
.partners .partners-toggle small{color:#ffb270}
.partners .partners-content{margin-top:16px;padding:18px;border:1px solid #ffffff30;border-radius:14px;background:#0b1412ed}
.partners .partners-intro p{color:#e7dace}
@media(max-width:560px){.partners .partners-toggle{min-height:125px;align-items:flex-start;justify-content:center;flex-direction:column;gap:16px}.partners .partners-content{padding:14px}}

/* Fonds animés pour les rubriques immersives. */
main > .president-message,
main > .contact-section,
main > .support,
main > .partners{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background-color:#080e0b;
  background-image:none;
}
main > .president-message::before,
main > .contact-section::before,
main > .support::before,
main > .partners::before{
  content:"";
  position:absolute;
  inset:-8%;
  z-index:0;
  pointer-events:none;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  transform:translate(0,.3%) scale(1.06);
  animation:immersive-panel-drift 18s ease-in-out infinite alternate;
  will-change:transform;
}
main > .president-message::before{
  background-image:linear-gradient(90deg,rgba(8,14,11,.86),rgba(8,14,11,.42) 55%,rgba(8,14,11,.12)),url("assets/president-stade-aerien.png");
}
main > .contact-section::before{
  background-image:linear-gradient(90deg,#080e10dc,#080e1077 60%,#080e1022),url("assets/contact-club.png");
  background-position:center 60%;
}
main > .support::before{
  background-image:linear-gradient(90deg,#080e10e8,#080e1099 58%,#080e104d),url("assets/footer-supporters.jpg");
  background-position:center 48%;
}
main > .partners::before{
  background-image:linear-gradient(90deg,#080e10b3,#080e1066 55%,#080e1026),url("assets/partenaires-sans-visages.png");
  background-position:center 60%;
}
main > .president-message > *,
main > .contact-section > *,
main > .support > *,
main > .partners > *{
  position:relative;
  z-index:1;
}
main > .support{color:#fff;background-color:#080e0b}
main > .support .support-copy span{color:#f1e7dd}
@keyframes immersive-panel-drift{
  from{transform:translate(-.7%,.4%) scale(1.06)}
  to{transform:translate(.7%,-.4%) scale(1.11)}
}
@media(prefers-reduced-motion:reduce){
  main > .president-message::before,
  main > .contact-section::before,
  main > .support::before,
  main > .partners::before{animation:none;transform:none;will-change:auto}
}

/* Actualités : titre plus présent et fond animé discret. */
main > .news{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background-color:#080e0b;
  background-image:none;
  color:#fff;
  border-color:#b46c30;
}
main > .news::before{
  content:"";
  position:absolute;
  inset:-8%;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(90deg,#080e10e8,#080e1085 58%,#080e1040),url("assets/hero-slide-ouragan.jpg") center/cover no-repeat;
  animation:news-panel-drift 18s ease-in-out infinite alternate;
  will-change:transform;
}
main > .news > *{position:relative;z-index:1}
main > .news .section-head strong{font-size:22px;color:#fff}
@keyframes news-panel-drift{from{transform:translate(-.7%,.4%) scale(1.06)}to{transform:translate(.7%,-.4%) scale(1.11)}}
@media(max-width:560px){main > .news .section-head strong{font-size:20px}}
@media(prefers-reduced-motion:reduce){main > .news::before{animation:none;transform:none;will-change:auto}}

/* Pied de page : mouvement doux de la foule et de la signature. */
.club-signature-supporters{animation:footer-crowd-soft 16s ease-in-out infinite alternate;transform-origin:center}
.club-signature-wordmark{animation:footer-wordmark-soft 10s ease-in-out infinite alternate;transform-origin:center}
@keyframes footer-crowd-soft{from{transform:translate(-.8%,.2%) scale(1.02)}to{transform:translate(.8%,-.2%) scale(1.06)}}
@keyframes footer-wordmark-soft{from{transform:translateY(1px) scale(.99)}to{transform:translateY(-2px) scale(1.015)}}
@media(prefers-reduced-motion:reduce){.club-signature-supporters,.club-signature-wordmark{animation:none;transform:none}}

/* Foule discrète dans le premier bandeau, près du logo. */
.header::before{
  content:"";
  position:absolute;
  left:70px;
  top:0;
  width:80%;
  height:100%;
  z-index:0;
  pointer-events:none;
  opacity:.52;
  filter:saturate(1.18) contrast(1.04);
  background:linear-gradient(90deg,#080e1022,#080e1066 42%,#080e1018),url("assets/accueil/bandeau-club.png") center/cover no-repeat;
  animation:header-crowd-soft 18s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes header-crowd-soft{from{transform:translate(-.6%,.2%) scale(1.03)}to{transform:translate(.8%,-.2%) scale(1.08)}}
@media(max-width:560px){.header::before{left:54px;width:88%;opacity:.38}}
@media(prefers-reduced-motion:reduce){.header::before{animation:none;transform:none;will-change:auto}}

/* Mouvement discret du visuel principal. */
.hero-animation{animation:hero-video-loop 18s ease-in-out infinite,hero-football-drift-soft 14s ease-in-out infinite alternate;transform-origin:center;will-change:transform}
@keyframes hero-football-drift-soft{from{transform:translate(-.35%,.2%) scale(1.02)}to{transform:translate(.35%,-.2%) scale(1.055)}}
@media(prefers-reduced-motion:reduce){.hero-animation,.hero-still{animation:none;opacity:1;transform:none;will-change:auto}}

/* Boucle vidéo + composition + photo d'action dans le bandeau. */
.hero-animation,.hero-still,.hero-action{transition:none;}
.hero-animation{animation:hero-video-triple 27s ease-in-out infinite,hero-football-drift-soft 14s ease-in-out infinite alternate}
.hero-still{animation:hero-panorama-triple 27s ease-in-out infinite;filter:saturate(1.08) contrast(1.04)}
.hero-action{opacity:0;object-position:center 42%;filter:saturate(1.06) contrast(1.03) brightness(.98);animation:hero-action-triple 27s ease-in-out infinite;will-change:opacity,transform}
@keyframes hero-video-triple{0%,25%{opacity:1}33%,69%{opacity:0}77%,100%{opacity:1}}
@keyframes hero-panorama-triple{0%,25%{opacity:0}33%,58%{opacity:1}66%,100%{opacity:0}}
@keyframes hero-action-triple{0%,58%{opacity:0}66%,91%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .hero-animation{animation:none;opacity:1;transform:none;will-change:auto}
  .hero-still,.hero-action{animation:none;opacity:0;transform:none;will-change:auto}
}

/* La composition contient déjà tous ses textes et éléments graphiques. */
.hero-composition{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center top;transform-origin:center top;animation:hero-composition-drift 18s ease-in-out infinite alternate;filter:saturate(1.04) contrast(1.03);will-change:transform}
@keyframes hero-composition-drift{from{transform:scale(1.01)}to{transform:scale(1.045)}}
@media(prefers-reduced-motion:reduce){.hero-composition{animation:none;transform:none;will-change:auto}}

/* Rotation douce entre les deux visuels autonomes du bandeau. */
.hero-composition,.hero-composition-alt{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center top;transform-origin:center top;will-change:opacity,transform}
.hero-composition{animation:hero-composition-cycle 24s ease-in-out infinite}
.hero-composition-alt{opacity:0;animation:hero-composition-alt-cycle 24s ease-in-out infinite;filter:saturate(1.06) contrast(1.04)}
@keyframes hero-composition-cycle{0%,38%{opacity:1}48%,88%{opacity:0}96%,100%{opacity:1}}
@keyframes hero-composition-alt-cycle{0%,38%{opacity:0}48%,88%{opacity:1}96%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.hero-composition{animation:none;opacity:1;transform:none}.hero-composition-alt,.hero-overlay-copy{animation:none;opacity:0;transform:none}}

/* La composition reste entière ; seule la photo d’action est abaissée. */
.hero-composition{object-position:center top;transform-origin:center top;transform:scale(1.045)}
.hero-composition-alt{object-position:center top;transform-origin:center top;transform:scale(1.045) translateY(2.5%)}
.hero-overlay-copy{position:absolute;left:clamp(18px,3.5cqw,36px);top:clamp(48px,9cqw,92px);z-index:3;color:#fff;opacity:0;animation:hero-copy-cycle 24s ease-in-out infinite;text-shadow:0 3px 10px #000b}
.hero-overlay-copy p{font:800 italic 30px "Barlow Condensed";margin:0}
.hero-overlay-copy h1{font:800 italic 42px "Barlow Condensed";color:var(--orange);margin:-4px 0 5px}
.hero-overlay-copy .small-line{margin:10px 0 13px}
.hero-overlay-copy .hero-motto{font:500 16px/1.2 "Barlow Condensed";letter-spacing:.08em}
@keyframes hero-copy-cycle{0%,38%{opacity:0}48%,88%{opacity:1}96%,100%{opacity:0}}
.hero-cta{position:absolute;left:clamp(18px,3.5cqw,36px);bottom:clamp(20px,4cqw,42px);z-index:3;display:inline-flex;align-items:center;gap:12px;padding:12px 18px;border-radius:999px;background:linear-gradient(90deg,#f58220,#df6812);color:#fff;font-size:11px;font-weight:800;box-shadow:0 7px 18px #0008;text-shadow:0 1px 3px #0008}
.hero-cta b{font-size:22px;line-height:.7}
@media(max-width:560px){.hero-overlay-copy{left:16px;top:42px}.hero-overlay-copy p{font-size:24px}.hero-overlay-copy h1{font-size:34px}.hero-overlay-copy .hero-motto{font-size:13px}.hero-cta{left:16px;bottom:18px;padding:10px 14px;font-size:9px}.hero-cta b{font-size:18px}}

/* Rotation complète : composition, photos du club et vidéo. */
.hero-composition,.hero-composition-alt,.hero-photo-three,.hero-photo-four,.hero-photo-five,.hero-video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center top;transform-origin:center top;will-change:opacity,transform}
.hero-composition{animation:hero-slide-one 48s ease-in-out infinite}
.hero-composition-alt{object-position:center top;transform-origin:center top;transform:scale(1.045) translateY(2.5%);animation:hero-slide-two 48s ease-in-out infinite}
.hero-photo-three{animation:hero-slide-three 48s ease-in-out infinite;filter:saturate(1.06) contrast(1.04)}
.hero-photo-four{animation:hero-slide-four 48s ease-in-out infinite;filter:saturate(1.06) contrast(1.04)}
.hero-photo-five{animation:hero-slide-five 48s ease-in-out infinite;filter:saturate(1.06) contrast(1.04)}
.hero-video{opacity:0;animation:hero-slide-six 48s ease-in-out infinite;object-position:center}
.hero-overlay-copy{animation:hero-copy-six-cycle 48s ease-in-out infinite}
@keyframes hero-slide-one{0%,13%{opacity:1}17%,96%{opacity:0}100%{opacity:1}}
@keyframes hero-slide-two{0%,13%{opacity:0}17%,29%{opacity:1}33%,100%{opacity:0}}
@keyframes hero-slide-three{0%,29%{opacity:0}33%,45%{opacity:1}49%,100%{opacity:0}}
@keyframes hero-slide-four{0%,45%{opacity:0}49%,61%{opacity:1}65%,100%{opacity:0}}
@keyframes hero-slide-five{0%,61%{opacity:0}65%,77%{opacity:1}81%,100%{opacity:0}}
@keyframes hero-slide-six{0%,77%{opacity:0}81%,93%{opacity:1}97%,100%{opacity:0}}
@keyframes hero-copy-six-cycle{0%,13%{opacity:0}17%,96%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .hero-composition{animation:none;opacity:1;transform:none}
  .hero-composition-alt,.hero-photo-three,.hero-photo-four,.hero-photo-five,.hero-video,.hero-overlay-copy,.hero-composition-slogan{animation:none;opacity:0;transform:none}
}

/* Boucle photo uniquement, sans lecteur vidéo visible. */
.hero-composition{animation:hero-photo-one-cycle 40s ease-in-out infinite}
.hero-composition-slogan{position:absolute;left:50%;top:20%;z-index:3;width:min(58%,620px);padding:8px 18px;text-align:center;color:#fff;font:600 clamp(13px,2.2cqw,25px)/1.1 "Barlow Condensed",sans-serif;letter-spacing:.22em;text-shadow:0 2px 8px #000;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#070707dd 18%,#070707dd 82%,transparent);animation:hero-composition-slogan-cycle 40s ease-in-out infinite}
.hero-composition-alt{animation:hero-photo-two-cycle 40s ease-in-out infinite}
.hero-photo-three{animation:hero-photo-three-cycle 40s ease-in-out infinite}
.hero-photo-four{animation:hero-photo-four-cycle 40s ease-in-out infinite}
.hero-photo-five{animation:hero-photo-five-cycle 40s ease-in-out infinite}
.hero-overlay-copy{animation:hero-copy-photo-cycle 40s ease-in-out infinite}
@keyframes hero-photo-one-cycle{0%,18%{opacity:1}22%,98%{opacity:0}100%{opacity:1}}
@keyframes hero-photo-two-cycle{0%,18%{opacity:0}22%,38%{opacity:1}42%,100%{opacity:0}}
@keyframes hero-photo-three-cycle{0%,38%{opacity:0}42%,58%{opacity:1}62%,100%{opacity:0}}
@keyframes hero-photo-four-cycle{0%,58%{opacity:0}62%,78%{opacity:1}82%,100%{opacity:0}}
@keyframes hero-photo-five-cycle{0%,78%{opacity:0}82%,98%{opacity:1}100%{opacity:0}}
@keyframes hero-copy-photo-cycle{0%,18%{opacity:0}22%,100%{opacity:1}}
@keyframes hero-composition-slogan-cycle{0%,18%{opacity:1}22%,100%{opacity:0}}
@media(max-width:560px){.hero-composition-slogan{top:19%;width:72%;padding:6px 8px;font-size:12px;letter-spacing:.12em}}
@media(prefers-reduced-motion:reduce){.hero-composition-slogan{opacity:1;animation:none;transform:translateX(-50%)}}

/* Diaporama du bandeau : la dernière photo reste visible jusqu’au retour à la première. */
.hero-composition{animation:hero-six-one 48s ease-in-out infinite}
.hero-composition,.hero-composition-alt,.hero-photo-three,.hero-photo-four,.hero-photo-five{animation-duration:48s,16s;animation-timing-function:ease-in-out,ease-in-out;animation-iteration-count:infinite,infinite;animation-direction:normal,alternate;will-change:opacity,transform}
.hero-composition-alt{animation-name:hero-six-two,hero-banner-breathe-two}
.hero-photo-three{animation-name:hero-six-three,hero-banner-breathe-three}
.hero-photo-four{animation-name:hero-six-four,hero-banner-breathe-four}
.hero-photo-five{animation-name:hero-six-five,hero-banner-breathe-five}
.hero-composition{animation-name:hero-six-one,hero-banner-breathe-one}
.hero-video{opacity:0;animation:hero-six-video 48s ease-in-out infinite;object-position:center;pointer-events:none}
.hero-video:not(.is-ready){visibility:hidden}
.hero-video[hidden]{display:none!important}
.hero-video::-webkit-media-controls,.hero-video::-webkit-media-controls-panel,.hero-video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.hero-overlay-copy{animation:hero-six-copy 48s ease-in-out infinite}
.hero-composition-slogan{animation:hero-six-slogan 48s ease-in-out infinite}
@keyframes hero-six-one{0%,13%{opacity:1}17%,96%{opacity:0}100%{opacity:1}}
@keyframes hero-six-two{0%,13%{opacity:0}17%,29%{opacity:1}33%,100%{opacity:0}}
@keyframes hero-six-three{0%,29%{opacity:0}33%,45%{opacity:1}49%,100%{opacity:0}}
@keyframes hero-six-four{0%,45%{opacity:0}49%,61%{opacity:1}65%,100%{opacity:0}}
@keyframes hero-six-five{0%,61%{opacity:0}65%,96%{opacity:1}100%{opacity:0}}
@keyframes hero-six-video{0%,77%{opacity:0}81%,93%{opacity:1}97%,100%{opacity:0}}
@keyframes hero-banner-breathe-one{from{transform:scale(1.02) translate3d(-.4%,.2%,0)}to{transform:scale(1.07) translate3d(.5%,-.3%,0)}}
@keyframes hero-banner-breathe-two{from{transform:scale(1.045) translate3d(.5%,2.5%,0)}to{transform:scale(1.095) translate3d(-.5%,2%,0)}}
@keyframes hero-banner-breathe-three{from{transform:scale(1.02) translate3d(-.6%,0,0)}to{transform:scale(1.075) translate3d(.4%,-.4%,0)}}
@keyframes hero-banner-breathe-four{from{transform:scale(1.04) translate3d(.4%,.3%,0)}to{transform:scale(1.09) translate3d(-.5%,-.2%,0)}}
@keyframes hero-banner-breathe-five{from{transform:scale(1.025) translate3d(-.4%,-.2%,0)}to{transform:scale(1.08) translate3d(.5%,.3%,0)}}
@keyframes hero-six-copy{0%,13%{opacity:0}17%,100%{opacity:1}}
@keyframes hero-six-slogan{0%,13%{opacity:1}17%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .hero-composition{animation:none;opacity:1}
  .hero-composition-alt,.hero-photo-three,.hero-photo-four,.hero-photo-five,.hero-video,.hero-overlay-copy,.hero-composition-slogan{animation:none;opacity:0}
}


/* Le bandeau conserve son identité dans les deux ambiances. */
html[data-theme] .header-impact b{color:#fff}
html[data-theme] .header-impact strong{color:#f58220}
html[data-theme] .header-impact{left:26cqw;right:24cqw}

/* Silhouettes de supporters sur noir, comme le bandeau de référence. */
html[data-theme] .header{background:#090909}
html[data-theme] .header::before{
  inset:0;width:100%;height:100%;opacity:1;
  background:radial-gradient(ellipse at top left,rgba(0,0,0,.68) 0%,rgba(0,0,0,.42) 18%,rgba(0,0,0,.12) 34%,transparent 52%),url("assets/bandeau-supporters-original.png") center top/cover no-repeat;
  filter:none;
  animation:none;transform:none;will-change:auto;
}

/* Actualité vidéo de la direction du club. */
.news-video-preview{padding:0;border:0;cursor:pointer;text-align:left}
.news-video-preview video{display:block;width:100%;height:100%;object-fit:contain;background:#171717}
.news-video-preview:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
.news-video-reader{grid-template-columns:1fr;padding-top:45px}
.news-video-reader>video{display:block;width:100%;max-height:65vh;background:#000;border-radius:13px}

.site-update-notice{margin:0;padding:10px 16px;background:#21170f;color:#ffcfaa;border-bottom:1px solid #75431f;text-align:center;font-size:12px;line-height:1.5}

/* Les onze photos du bandeau défilent pendant huit secondes chacune. */
.hero-added-photo{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center top;transform-origin:center top;opacity:0;pointer-events:none}
.hero .hero-composition{object-position:center 10px;background:url("photo/accueil/composition-principale.png") center top/cover no-repeat;animation:hero-gallery-1 88s ease-in-out infinite,hero-banner-breathe-one 16s ease-in-out infinite alternate}
@keyframes hero-gallery-1{0%,7.2727%{opacity:1}9.0909%,98.1818%{opacity:0}100%{opacity:1}}
.hero .hero-composition-alt{animation:hero-gallery-2 88s ease-in-out infinite,hero-banner-breathe-two 16s ease-in-out infinite alternate}
@keyframes hero-gallery-2{0%,7.2727%{opacity:0}9.0909%,16.3636%{opacity:1}18.1818%,100%{opacity:0}}
.hero .hero-photo-three{animation:hero-gallery-3 88s ease-in-out infinite,hero-banner-breathe-three 16s ease-in-out infinite alternate}
@keyframes hero-gallery-3{0%,16.3636%{opacity:0}18.1818%,25.4545%{opacity:1}27.2727%,100%{opacity:0}}
.hero .hero-photo-four{animation:hero-gallery-4 88s ease-in-out infinite,hero-banner-breathe-four 16s ease-in-out infinite alternate}
@keyframes hero-gallery-4{0%,25.4545%{opacity:0}27.2727%,34.5455%{opacity:1}36.3636%,100%{opacity:0}}
.hero .hero-photo-five{animation:hero-gallery-5 88s ease-in-out infinite,hero-banner-breathe-five 16s ease-in-out infinite alternate}
@keyframes hero-gallery-5{0%,34.5455%{opacity:0}36.3636%,43.6364%{opacity:1}45.4545%,100%{opacity:0}}
.hero .hero-added-photo-1{animation:hero-gallery-6 88s ease-in-out infinite,hero-banner-breathe-one 16s ease-in-out infinite alternate}
@keyframes hero-gallery-6{0%,43.6364%{opacity:0}45.4545%,52.7273%{opacity:1}54.5455%,100%{opacity:0}}
.hero .hero-added-photo-2{animation:hero-gallery-7 88s ease-in-out infinite,hero-banner-breathe-two 16s ease-in-out infinite alternate}
@keyframes hero-gallery-7{0%,52.7273%{opacity:0}54.5455%,61.8182%{opacity:1}63.6364%,100%{opacity:0}}
.hero .hero-added-photo-3{animation:hero-gallery-8 88s ease-in-out infinite,hero-banner-breathe-three 16s ease-in-out infinite alternate}
@keyframes hero-gallery-8{0%,61.8182%{opacity:0}63.6364%,70.9091%{opacity:1}72.7273%,100%{opacity:0}}
.hero .hero-added-photo-4{animation:hero-gallery-9 88s ease-in-out infinite,hero-banner-breathe-four 16s ease-in-out infinite alternate}
@keyframes hero-gallery-9{0%,70.9091%{opacity:0}72.7273%,80.0000%{opacity:1}81.8182%,100%{opacity:0}}
.hero .hero-added-photo-5{animation:hero-gallery-10 88s ease-in-out infinite,hero-banner-breathe-five 16s ease-in-out infinite alternate}
@keyframes hero-gallery-10{0%,80.0000%{opacity:0}81.8182%,89.0909%{opacity:1}90.9091%,100%{opacity:0}}
.hero .hero-added-photo-6{animation:hero-gallery-11 88s ease-in-out infinite,hero-banner-breathe-one 16s ease-in-out infinite alternate}
@keyframes hero-gallery-11{0%,89.0909%{opacity:0}90.9091%,98.1818%{opacity:1}100%{opacity:0}}
.hero .hero-composition-slogan{animation:hero-gallery-1 88s ease-in-out infinite}
.hero .hero-overlay-copy{animation:hero-gallery-copy 88s ease-in-out infinite}
@keyframes hero-gallery-copy{0%,7.2727%{opacity:0}9.0909%,98.1818%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
.hero .hero-composition,.hero .hero-composition-alt,.hero .hero-photo-three,.hero .hero-photo-four,.hero .hero-photo-five,.hero .hero-added-photo-1,.hero .hero-added-photo-2,.hero .hero-added-photo-3,.hero .hero-added-photo-4,.hero .hero-added-photo-5,.hero .hero-added-photo-6{animation:none;opacity:0;transform:none}
.hero .hero-composition{opacity:1}
.hero .hero-composition-slogan,.hero .hero-overlay-copy{animation:none;opacity:0}
}

/* Portrait U13 : afficher le joueur et sa récompense en entier. */
.gallery-card-portrait{background:#151915}
.gallery-card-portrait img{width:100%;height:100%;margin-left:0;object-fit:contain;object-position:center;animation:none;translate:none;transform:none}