/* ==========================================================================
   Italy World Games — compléments à la feuille de style Paris World Games
   Même DA (bleu #162a77 · rouge #e1371e · Teko / Barlow), adaptée à l'Italie :
   deux sports (football + basket), deux tournois (Pâques + été), activités de la brochure.
   ========================================================================== */

/* ---------------------------------------------------------- accueil : Colisée + deux grands blasons */
.hero__media img { object-position: 58% 30%; transform-origin: 62% 40%; }
.hero__grid { --tw: clamp(200px, 19vw, 330px); }
.hero__trio--duo { --tw: clamp(200px, 19vw, 330px); width: calc(var(--tw) * 1.9); height: calc(var(--tw) * 1.3); }
.hero__trio--duo .trio--football { left: 0; bottom: 2%; z-index: 1; --x: 0; --rot: -5deg; }
.hero__trio--duo .trio--basketball { right: 0; bottom: 8%; z-index: 2; --rot: 5deg; }
.hero__trio--duo .trio:hover { z-index: 3; transform: translate(0, -10px) rotate(0deg); }
.hero__trio--duo ~ .hero__bar,
.hero__grid .hero__bar--duo { max-width: calc(100% - var(--tw) * 1.9 - 24px); }
.countdown__label b { color: var(--white); font-weight: 700; }
.countdown--easter { box-shadow: inset 4px 0 0 var(--red); }
.countdown--summer { box-shadow: inset 4px 0 0 var(--white); }

@media (max-width: 1024px) {
	.hero__trio--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4%; width: auto; height: auto; margin-inline: 4%; }
	.hero__trio--duo .trio--football { --rot: -4deg; }
	.hero__trio--duo .trio--basketball { --rot: 4deg; --y: -12px; }
	.hero__grid .hero__bar--duo { max-width: none; }
	.hero__media img { object-position: 62% 0; }
}
@media (max-width: 640px) {
	.hero__grid .hero__bar--duo .countdown--hero { width: 100%; }
}

/* ---------------------------------------------------------- les sports : deux grandes cartes */
.sports--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sports--duo .sport__link { aspect-ratio: 4 / 3.6; }
.sports--duo .sport__text { max-width: 46ch; }
@media (max-width: 700px) { .sports--duo { grid-template-columns: 1fr; } .sports--duo .sport__link { aspect-ratio: 3 / 4; } }

/* ---------------------------------------------------------- cérémonie : dates + mascotte Romoletto */
.cer__dates { display: grid; gap: .6rem; margin: 0 0 1.6rem; padding: 0; list-style: none; }
.cer__dates li { display: flex; align-items: center; gap: .9rem; padding: .75rem 1rem .6rem; background: rgb(255 255 255 / .08); clip-path: var(--cut); --notch: 10px; }
.cer__dates .icon { flex: none; box-sizing: content-box; width: 20px; height: 20px; padding: 8px; background: var(--red); clip-path: var(--cut); --notch: 6px; }
.cer__dates small { display: block; font: 700 .8rem/1.2 var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .7); }
.cer__dates b { font: 600 1.6rem/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.mascot { position: absolute; left: -6%; bottom: -4%; z-index: 4; width: clamp(110px, 12vw, 170px); margin: 0; filter: drop-shadow(0 18px 24px rgb(0 0 0 / .5)); animation: iwg-bob 4s ease-in-out infinite; }
.mascot img { width: 100%; }
.mascot figcaption { position: absolute; left: 50%; bottom: -10px; padding: .3rem .6rem .2rem; background: var(--red); color: var(--white); font: 700 .78rem/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transform: translateX(-50%); clip-path: var(--cut); --notch: 6px; }
@keyframes iwg-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .mascot { animation: none; } }
@media (max-width: 900px) { .mascot { left: 0; bottom: -2%; } }
.cer .snap--b img { object-position: 50% 20%; }

/* ---------------------------------------------------------- bandeau chiffres : valeurs fixes (pas de compteur) */
.stat__num--static { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- activités (photos de la brochure) */
.act { flex: 0 0 clamp(250px, 24vw, 320px); scroll-snap-align: start; }
.act__in { position: relative; display: block; aspect-ratio: 3 / 4.4; overflow: hidden; color: var(--white); background: var(--navy); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%); }
.act__in > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.act__in::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(var(--navy-rgb) / .97) 10%, rgb(var(--navy-rgb) / .15) 58%, rgb(var(--navy-rgb) / 0) 75%); }
.act:hover .act__in > img { transform: scale(1.06); }
.act__price { position: absolute; top: 16px; right: 16px; z-index: 1; display: grid; justify-items: center; min-width: 76px; padding: .55rem .7rem .4rem; background: var(--white); color: var(--navy); text-align: center; clip-path: var(--cut); --notch: 8px; }
.act__price b { font: 700 2rem/.85 var(--font-display); color: var(--red); }
.act__price small { font: 700 .66rem/1.1 var(--font-label); letter-spacing: .1em; text-transform: uppercase; }
.act__body { position: absolute; inset: auto 0 0; z-index: 1; display: grid; gap: .4rem; padding: 1.3rem 1.4rem 1.7rem; }
.act__tag { justify-self: start; padding: .35rem .6rem .25rem; background: var(--red); font: 700 .78rem/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; }
.act__title { font: 700 clamp(1.9rem, 2.2vw, 2.25rem)/.88 var(--font-display); text-transform: uppercase; }
.act__text { font-size: .93rem; line-height: 1.45; color: rgb(255 255 255 / .86); }
.act__time { display: inline-flex; align-items: center; gap: .4rem; font: 700 .85rem/1 var(--font-label); letter-spacing: .1em; text-transform: uppercase; color: rgb(255 255 255 / .92); }
.act__time .icon { width: 16px; height: 16px; color: var(--red); }
.rail .act + .act { margin-left: 0; }
.acts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.acts .act__title { font-size: clamp(1.6rem, 1.8vw, 2rem); }
@media (max-width: 1180px) { .acts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .acts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .acts .act__text { display: none; } }
@media (max-width: 420px) { .acts { grid-template-columns: 1fr; } .acts .act__text { display: block; } }
.acts__note { margin: 1.4rem 0 0; font-size: .92rem; color: var(--ink-soft); }

/* ---------------------------------------------------------- vidéos « They played at Italy World Games » */
.vids { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; gap: 14px; margin: 0; padding: 0; list-style: none; }
.vids li:first-child { grid-row: span 2; }
.vid { position: relative; display: block; height: 100%; min-height: 220px; overflow: hidden; color: var(--white); text-decoration: none; background: var(--navy); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); }
.vid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.vid::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(var(--navy-rgb) / .9) 6%, rgb(var(--navy-rgb) / .1) 60%); }
.vid:hover img { transform: scale(1.05); }
.vid__play { position: absolute; left: 50%; top: 46%; z-index: 1; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--red); transform: translate(-50%, -50%); box-shadow: 0 0 0 10px rgb(var(--red-rgb) / .25); transition: transform .35s var(--ease); }
.vid:hover .vid__play { transform: translate(-50%, -50%) scale(1.08); }
.vid__play svg { width: 30px; height: 30px; margin-left: 5px; fill: var(--white); }
.vid__cap { position: absolute; inset: auto 0 0; z-index: 1; display: grid; gap: .2rem; padding: 1.2rem 1.4rem 1.5rem; }
.vid__cap small { font: 700 .8rem/1 var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.vid__cap b { font: 600 clamp(1.6rem, 2.2vw, 2.2rem)/.92 var(--font-display); text-transform: uppercase; }
.vids-sec .head { max-width: 640px; }
@media (max-width: 800px) { .vids { grid-template-columns: 1fr; } .vids li:first-child { grid-row: auto; } .vid { aspect-ratio: 16 / 10; height: auto; } }

/* ---------------------------------------------------------- séjour : en-tête avec les deux offres */
.phero__offers { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.6rem; padding: 0; list-style: none; }
.phero__offers li { display: grid; gap: .15rem; padding: .7rem 1rem .55rem; background: rgb(255 255 255 / .1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); clip-path: var(--cut); --notch: 10px; }
.phero__offers small { font: 700 .76rem/1.25 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / .75); }
.phero__offers b { font: 600 1.5rem/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.phero__offers b em { color: var(--red); }

/* ---------------------------------------------------------- séjour : ce qui est inclus, par tournoi */
.incl-block + .incl-block { margin-top: clamp(40px, 5vw, 64px); }
.incl-block__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 2rem; margin-bottom: 1.1rem; padding-bottom: .9rem; border-bottom: 2px solid var(--line); }
.incl-block__title { display: flex; align-items: center; gap: .7rem; margin: 0; font-size: clamp(2rem, 3vw, 2.6rem); }
.incl-block__title span { padding: .3rem .6rem .15rem; background: var(--red); color: var(--white); font-size: .55em; letter-spacing: .06em; clip-path: var(--cut); --notch: 6px; }
.incl-block__lead { margin: 0; color: var(--ink-soft); }
.incl__line--note { font-style: italic; }

/* ---------------------------------------------------------- séjour : formules de la brochure */
.booklets { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0 0 clamp(40px, 5vw, 64px); padding: 0; list-style: none; }
.booklet { display: inline-flex; align-items: center; gap: .8rem; padding: .7rem 1.1rem .6rem .7rem; background: var(--white); color: var(--navy); text-decoration: none; clip-path: var(--cut); --notch: 10px; transition: transform .3s var(--ease); }
.booklet:hover { transform: translateY(-3px); }
.booklet .icon { box-sizing: content-box; width: 22px; height: 22px; padding: 9px; background: var(--red); color: var(--white); clip-path: var(--cut); --notch: 6px; }
.booklet span { display: grid; }
.booklet small { font: 700 .74rem/1.2 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.booklet b { font: 600 1.45rem/1 var(--font-display); text-transform: uppercase; }
.pack { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.pack__media { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; height: 150px; background: var(--navy); }
.pack__media figure { position: relative; margin: 0; overflow: hidden; }
.pack__media img { width: 100%; height: 100%; object-fit: cover; }
.pack__media figcaption { position: absolute; inset: auto 0 0; padding: 1.2rem .6rem .4rem; background: linear-gradient(0deg, rgb(var(--navy-rgb) / .9), transparent); color: var(--white); font: 700 .7rem/1.15 var(--font-label); letter-spacing: .08em; text-transform: uppercase; }
.pack__body { display: flex; flex-direction: column; gap: .8rem; padding: 1.4rem 1.5rem 1.6rem; }
.pack__place { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font: 700 .8rem/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.pack__place .icon { width: 15px; height: 15px; color: var(--red); }
.pack .hotel__name { margin: 0; font-size: 2.1rem; }
.pack .hotel__stars { margin: 0; }
.pack .hotel__prices li { grid-template-columns: 1fr auto auto; }
.pack .hotel__extra { grid-column: auto; }
.pack__tier { margin: .2rem 0 0; font: 700 .8rem/1 var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.pack__tier + .hotel__prices { margin-top: -.2rem; }
.pack__incl { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.pack__incl li { padding: .35rem .55rem .25rem; background: var(--mist); font: 700 .72rem/1 var(--font-label); letter-spacing: .08em; text-transform: uppercase; }
.range--summer .pack { box-shadow: inset 0 6px 0 var(--red); }
.range--summer .hotels { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.range--summer .pack__body { padding: 1.3rem 1.1rem 1.4rem; }
.range--summer .hotel__name { font-size: 1.8rem; }
.range--summer .hotel__prices li { grid-template-columns: 1fr auto; }
.range--summer .hotel__prices .hotel__extra { grid-column: 1 / -1; grid-row: 2; }
@media (max-width: 1180px) { .range--summer .hotels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .range--summer .hotels { grid-template-columns: 1fr; } }
.fees { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.fees li { display: grid; gap: .25rem; padding: 1rem 1.2rem .9rem; background: rgb(255 255 255 / .08); clip-path: var(--cut); --notch: 12px; }
.fees small { font: 700 .76rem/1.2 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / .72); }
.fees b { font: 600 1.9rem/1 var(--font-display); color: var(--white); }
.fees b em { color: var(--red); }
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.tiers li { padding: 1rem 1.2rem .9rem; background: rgb(255 255 255 / .08); color: rgb(255 255 255 / .85); font-size: .95rem; clip-path: var(--cut); --notch: 12px; }
.tiers b { display: block; margin-bottom: .2rem; font: 600 1.6rem/1 var(--font-display); text-transform: uppercase; color: var(--white); }
@media (max-width: 700px) { .tiers { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- programmes (plusieurs par page) */
.prog-block + .prog-block { margin-top: clamp(40px, 5vw, 60px); }
.prog-block__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin-bottom: 1.4rem; font-size: clamp(1.9rem, 3vw, 2.5rem); color: var(--white); }
.prog-block__title small { font: 700 .85rem/1 var(--font-label); letter-spacing: .14em; color: var(--red); }

/* ---------------------------------------------------------- notre histoire : citation */
.story-quote { max-width: 24ch; margin: 0; font: 700 clamp(2.4rem, 4.6vw, 4.6rem)/.92 var(--font-display); text-transform: uppercase; color: var(--white); }
.story-quote em { color: var(--red); }
.values { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.values li { padding: .5rem .9rem .4rem; background: rgb(255 255 255 / .1); font: 700 .95rem/1 var(--font-label); letter-spacing: .08em; text-transform: uppercase; clip-path: var(--cut); --notch: 8px; }

/* ---------------------------------------------------------- v2 : mascotte à côté de « Choose your sport » */
.head-row--mascot { align-items: flex-end; }
.mascot--inline { position: relative; left: auto; bottom: auto; flex: none; width: clamp(130px, 13vw, 190px); margin: 0 4% -10px 0; filter: drop-shadow(0 18px 22px rgb(var(--navy-rgb) / .35)); }
.mascot--inline figcaption { bottom: -6px; }
@media (max-width: 700px) { .head-row--mascot { flex-wrap: nowrap; align-items: center; } .mascot--inline { width: 96px; margin: 0; } .mascot--inline figcaption { font-size: .62rem; } }
@media (max-width: 420px) { .mascot--inline { width: 78px; } }

/* ---------------------------------------------------------- v2 : cérémonie à deux photos */
.cer__collage--duo { height: clamp(420px, 38vw, 540px); }
.cer__collage--duo .snap--a { left: 2%; top: 2%; width: 47%; transform: rotate(-5deg); }
.cer__collage--duo .snap--b { left: auto; right: 2%; top: 9%; width: 47%; transform: rotate(4deg); }
html.reveal-ready .cer__collage--duo .snap--a[data-reveal].is-visible { transform: rotate(-5deg); }
html.reveal-ready .cer__collage--duo .snap--b[data-reveal].is-visible { transform: rotate(4deg); }
@media (max-width: 900px) { .cer__collage--duo { height: clamp(360px, 92vw, 520px); } }

/* ---------------------------------------------------------- v2 : grande photo « 5 matchs » au format de l'image (rien de coupé) */
.dream__main--wide { aspect-ratio: 887 / 517; }
/* les blasons restent dans les coins : aucun visage de la grande photo n'est masqué */
.dream__main--wide ~ .dream__shield { right: -3%; bottom: -4%; width: 28%; }
.dream__main--wide ~ .dream__shield--top { top: -18%; right: -4%; bottom: auto; width: 24%; }
@media (max-width: 900px) { .dream__main--wide ~ .dream__shield { right: 0; } .dream__main--wide ~ .dream__shield--top { right: 0; top: -14%; } }

/* ---------------------------------------------------------- v2 : séjour, les deux offres côte à côte */
.phero__offers--duo { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: 0 0 1.6rem; max-width: 720px; animation: pwg-rise .9s .2s var(--ease) backwards; }
.poffer { padding: 1rem 1.1rem .9rem; background: rgb(255 255 255 / .1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); clip-path: var(--cut); --notch: 12px; box-shadow: inset 4px 0 0 var(--red); }
.poffer__kicker { margin: 0 0 .5rem; font: 700 .8rem/1.35 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / .8); }
.poffer__text { margin: 0; font-size: .98rem; line-height: 1.5; color: rgb(255 255 255 / .92); }
.poffer__text b { font: 600 1.5rem/1 var(--font-display); color: var(--white); background: var(--red); padding: .1em .3em 0; }
@media (max-width: 640px) { .phero__offers--duo { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- v2 : « Choose your hotel », trois brochures à poids égal */
.bks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.bk__in { display: flex; flex-direction: column; height: 100%; background: var(--white); color: var(--navy); text-decoration: none; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); transition: transform .3s var(--ease); }
.bk__in:hover { transform: translateY(-5px); }
.bk__cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.bk__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.bk__in:hover .bk__cover img { transform: scale(1.04); }
.bk__body { display: grid; gap: .35rem; padding: 1.3rem 1.4rem 1.6rem; }
.bk__body small { font: 700 .8rem/1.2 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.bk__body b { font: 700 clamp(1.9rem, 2.4vw, 2.4rem)/.9 var(--font-display); text-transform: uppercase; }
.bk__cta { display: inline-flex; align-items: center; gap: .5rem; margin-top: .5rem; font: 600 1.2rem/1 var(--font-display); letter-spacing: .05em; text-transform: uppercase; }
.bk__cta .icon { box-sizing: content-box; width: 18px; height: 18px; padding: 7px; background: var(--red); color: var(--white); clip-path: var(--cut); --notch: 5px; }
@media (max-width: 900px) { .bks { grid-template-columns: 1fr; max-width: 460px; } }

/* ---------------------------------------------------------- v3 : défilement de photos en dernier, juste avant le pied de page */
.reels--end { padding-block: 12px; background: var(--white); }