/* TeX Gyre Heros — GUST Font License, voir fonts/README-texgyreheros.txt */
@font-face{font-family:"TeX Gyre Heros Web";src:url("fonts/texgyreheros-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"TeX Gyre Heros Web";src:url("fonts/texgyreheros-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root{
  --bg:#e9eff6; --red:#6e0d03; --ink:#0b1626; --mute:#5e6a7a; --line:#0b1626;
  --m:32px; --g:24px; --fs:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg)}
body{color:var(--ink);font-family:"TeX Gyre Heros Web","Neue Haas Grotesk Display","Neue Haas Grotesk Text","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:var(--fs);font-weight:400;line-height:1.35;-webkit-font-smoothing:antialiased}
h1,p,address{font:inherit;font-style:normal}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
img{display:block;width:100%;height:auto}
figure{margin:0}

.page{min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;padding:var(--m)}
.head,.foot,.images{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g)}
.c-dates{grid-column:1/7}
.c-venue{grid-column:7/13;text-align:right}

.stage{display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,4vh,56px) 0 clamp(36px,5vh,64px)}

/* row 1 — two images, slight vertical offset */
.images{align-items:start}
.img--hands{grid-column:3/7}
.img--painting{grid-column:7/11}
.images img{aspect-ratio:1/1;object-fit:cover}

/* rows 2–3 */
.titles{text-align:center;margin-top:clamp(28px,3vw,46px)}
.title{font-weight:400;letter-spacing:-.035em;line-height:.95}
.sub{font-weight:400;letter-spacing:-.035em;line-height:1}
.soon{margin-top:clamp(14px,1.4vw,20px);font-size:15px;color:var(--mute)}

/* v5 : TERRA AMATA dominant */
.v5 .title{color:#000;font-size:clamp(44px,7.9vw,130px);letter-spacing:-.035em;line-height:.9}
.v5 .sub{color:var(--red);font-size:clamp(23px,2.7vw,40px);font-weight:400;letter-spacing:-.02em;margin-top:clamp(20px,2.4vw,38px)}

/* hierarchy 1 : title large, subtitle larger */
.h1 .title{font-size:clamp(28px,3.6vw,56px)}
.h1 .sub{font-size:clamp(40px,6.6vw,104px);margin-top:.12em}
/* hierarchy 2 : title very large, subtitle large */
.h2 .title{font-size:clamp(48px,8vw,128px)}
.h2 .sub{font-size:clamp(24px,3vw,44px);margin-top:.4em;font-weight:400}

/* countdown — chiffres néon (DSEG7 Classic, SIL OFL) posés sur les deux images */
@font-face{font-family:"DSEG7 Classic";src:url("fonts/dseg7classic-bold.woff2") format("woff2");font-weight:400;font-style:normal;font-display:block}
.images{position:relative}
.countdown{--pink:#ff2da6;--cd:clamp(34px,5.3vw,82px);position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:3;
  display:flex;justify-content:center;align-items:center;gap:.12em;pointer-events:none;
  font-family:"DSEG7 Classic",monospace;font-size:var(--cd);line-height:1;white-space:nowrap;color:var(--pink);
  text-shadow:0 0 .03em rgba(255,255,255,.55),0 0 .07em var(--pink),0 0 .18em rgba(255,45,166,.85),0 0 .42em rgba(255,45,166,.55),
              0 0 .1em rgba(20,0,12,.75),0 0 .3em rgba(20,0,12,.45),0 0 .7em rgba(20,0,12,.3)}
.countdown__static{font-family:inherit;font-size:.6em}
.cd-colon{margin:0 -.04em}
.cd-group{position:relative;display:block}
.cd-ghost{display:block;color:rgba(255,45,166,.13);text-shadow:none}
.cd-live{position:absolute;inset:0}

/* footer / signup */
.foot{align-items:end}
.signup{grid-column:4/10;display:flex;align-items:baseline;gap:var(--g);position:relative}
.signup input[type=email]{flex:1;min-width:0;font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0 0 6px;outline:none;-webkit-appearance:none}
.signup input::placeholder{color:var(--mute);opacity:1}
.signup button{font:inherit;color:var(--ink);background:none;border:0;border-radius:0;padding:0 0 6px;cursor:pointer;white-space:nowrap}
.signup button:hover{text-decoration:underline;text-underline-offset:3px}
.signup button:disabled{color:var(--mute);cursor:default}
.signup__msg{position:absolute;left:0;top:calc(100% + 8px);color:var(--mute);font-size:13px}
.signup.is-done input,.signup.is-done button{visibility:hidden}
.signup.is-done .signup__msg{top:auto;bottom:6px;left:0;right:0;text-align:center;color:var(--ink);font-size:inherit}

.hp,.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* merci */
.merci{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.merci .title{color:#000;font-size:clamp(40px,7vw,112px);letter-spacing:-.035em}
.merci .sub{font-size:clamp(16px,1.4vw,20px);font-weight:400;letter-spacing:0;margin-top:20px}

@media (max-width:760px){
  :root{--m:20px;--g:12px;--fs:13px}
  .c-dates{grid-column:1/13}
  .c-venue{grid-column:1/13;text-align:left;margin-top:2px}
  .stage{padding:48px 0 64px;justify-content:center}
  .images{column-gap:10px}
  .img--hands{grid-column:1/7}
  .img--painting{grid-column:7/13}
  .titles{margin-top:40px}
  .h1 .title{font-size:clamp(24px,7.4vw,34px)}
  .h1 .sub{font-size:clamp(30px,10.2vw,46px);text-wrap:balance}
  .h2 .title{font-size:clamp(40px,13vw,60px)}
  .h2 .sub{font-size:clamp(20px,6vw,28px)}
  .v5 .title{font-size:clamp(36px,12.4vw,62px)}
  .v5 .sub{font-size:clamp(21px,6.1vw,28px)}
  .countdown{--cd:clamp(22px,8.2vw,38px)}
  .v5 .sub{margin-top:20px}
  .signup{grid-column:1/13}
}

/* v14 — bouton « + » vers En savoir plus */
.more{display:inline-block;width:clamp(60px,5.6vw,84px);height:clamp(60px,5.6vw,84px);margin-top:clamp(22px,2.4vw,36px);color:#000;border-radius:50%;transition:color .2s,background-color .2s,transform .25s}
.more svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;vector-effect:non-scaling-stroke}
.more svg *{vector-effect:non-scaling-stroke}
.more:hover,.more:focus-visible{background:#000;color:var(--bg);transform:rotate(90deg);text-decoration:none}
.more:focus-visible{outline:1px solid #000;outline-offset:4px}
@media (prefers-reduced-motion:reduce){.more{transition:none}.more:hover{transform:none}}

/* page En savoir plus */
.infos .stage{justify-content:flex-start}
.back{grid-column:1/13;margin-top:clamp(18px,2vw,28px)}
.infos .titles{margin-top:clamp(20px,3vw,40px)}
.portrait{width:min(420px,72vw);margin:clamp(36px,4vw,60px) auto 0}
.portrait img{aspect-ratio:842/1200;object-fit:cover}
.portrait figcaption{margin-top:8px;color:var(--mute);font-size:13px;text-align:left}
.infos-body{max-width:640px;margin:clamp(36px,4vw,56px) auto 0;text-align:center;color:var(--mute)}
.infos .foot{justify-content:center}
.infos .foot p{grid-column:1/13;text-align:center;color:var(--mute)}
@media (max-width:760px){.more{width:60px;height:60px;margin-top:28px}}
.v5 .stage{padding-top:clamp(20px,3vh,44px);padding-bottom:clamp(20px,3vh,40px)}
.v5 .more{margin-top:clamp(16px,2.2vh,30px)}
.infos .stage{padding-bottom:clamp(36px,5vh,64px)}
/* desktop : le + se place à droite du bloc titre, sans allonger la page */
@media (min-width:761px){
  .v5 .stage{padding:clamp(28px,4vh,56px) 0 clamp(36px,5vh,64px)}
  .v5:not(.infos) .titles{position:relative}
  .v5:not(.infos) .more{position:absolute;right:calc((100% - 6 * (100% - 11 * var(--g)) / 12 - 5 * var(--g)) / 4);top:50%;margin:0;transform:translate(50%,-50%)}
  .v5:not(.infos) .more:hover,.v5:not(.infos) .more:focus-visible{transform:translate(50%,-50%) rotate(90deg)}
}
/* v16 : + plus grand, plus proche du titre, un peu plus bas */
@media (min-width:761px){
  .v5:not(.infos) .more{--t:min(7.9vw,130px);width:clamp(64px,6.6vw,104px);height:clamp(64px,6.6vw,104px);
    right:auto;left:calc(50% + 3.28 * var(--t) + clamp(12px,1.4vw,22px));top:calc(.9 * var(--t));transform:translateY(-62%)}
  .v5:not(.infos) .more:hover,.v5:not(.infos) .more:focus-visible{transform:translateY(-62%) rotate(90deg)}
}
@media (max-width:760px){.more{width:72px;height:72px}}
/* v17 : + un peu plus loin du titre et plus bas */
@media (min-width:761px){
  .v5:not(.infos) .more{left:calc(50% + 3.28 * var(--t) + clamp(24px,3vw,48px));transform:translateY(-40%)}
  .v5:not(.infos) .more:hover,.v5:not(.infos) .more:focus-visible{transform:translateY(-40%) rotate(90deg)}
}
/* v18 : + blanc, trait épais, survol rose néon */
.more{color:#fff}
.more svg{stroke-width:3.5}
.more:hover,.more:focus-visible,.more.is-hover{background:#ff2da6;color:#fff;box-shadow:0 0 .5em rgba(255,45,166,.75),0 0 1.4em rgba(255,45,166,.45)}
.more:focus-visible{outline:2px solid #ff2da6;outline-offset:5px}
.more.is-hover{transform:rotate(90deg)}
@media (min-width:761px){
  .v5:not(.infos) .more{left:calc(50% + 3.28 * var(--t) + clamp(32px,3.9vw,62px))}
  .v5:not(.infos) .more.is-hover{transform:translateY(-40%) rotate(90deg)}
}
@media (prefers-reduced-motion:reduce){.more.is-hover,.v5:not(.infos) .more:hover{transform:none}}
/* v19 : + noir au repos, sur la ligne du titre ; titre + sous-titre décalés pour centrer l'ensemble */
.more{color:#000}
@media (min-width:761px){
  .v5:not(.infos) .titles{--sz:clamp(64px,6.6vw,104px);--gap:clamp(24px,2.8vw,48px);transform:translateX(calc(-.5 * (var(--sz) + var(--gap))))}
  .v5:not(.infos) .more{width:var(--sz);height:var(--sz);left:calc(50% + 3.28 * var(--t) + var(--gap));top:calc(.46 * var(--t));transform:translateY(-50%)}
  .v5:not(.infos) .more:hover,.v5:not(.infos) .more:focus-visible,.v5:not(.infos) .more.is-hover{transform:translateY(-50%) rotate(90deg)}
}
@media (prefers-reduced-motion:reduce){.v5:not(.infos) .more:hover,.v5:not(.infos) .more:focus-visible{transform:translateY(-50%)}}
/* v20 : sous-titre recentré ; bas du + calé sur la ligne de base du titre */
@media (min-width:761px){
  .v5:not(.infos) .sub{transform:translateX(calc(.5 * (var(--sz) + var(--gap))))}
  .v5:not(.infos) .more{top:calc(.89 * var(--t));transform:translateY(-100%)}
  .v5:not(.infos) .more:hover,.v5:not(.infos) .more:focus-visible,.v5:not(.infos) .more.is-hover{transform:translateY(-100%) rotate(90deg)}
}
@media (min-width:761px) and (prefers-reduced-motion:reduce){.v5:not(.infos) .more:hover,.v5:not(.infos) .more:focus-visible{transform:translateY(-100%)}}
/* v21 : + plus petit et un peu plus loin du titre */
@media (min-width:761px){.v5:not(.infos) .titles{--sz:clamp(56px,5.55vw,88px);--gap:clamp(30px,3.6vw,62px)}}
@media (max-width:760px){.more{width:64px;height:64px}}
/* v22 : ligne titre + croix décalée d'un poil à droite (sous-titre reste centré) */
@media (min-width:761px){
  .v5:not(.infos) .titles{transform:translateX(calc(1vw - .5 * (var(--sz) + var(--gap))))}
  .v5:not(.infos) .sub{transform:translateX(calc(.5 * (var(--sz) + var(--gap)) - 1vw))}
}
/* v23 : lien vers la galerie */
.venue-link{color:inherit;text-decoration:none;transition:color .2s}
.venue-link:hover,.venue-link:focus-visible{color:#ff2da6;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
/* v24 : texte de la page En savoir plus */
.infos .infos-body{max-width:620px;margin:clamp(40px,4.5vw,64px) auto 0;padding:0 2px;text-align:left;color:var(--ink);font-size:clamp(16px,1.2vw,18px);line-height:1.55}
.infos-body p+p{margin-top:1em}
.infos-body em{font-style:italic}
.infos-body a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color .2s}
.infos-body a:hover,.infos-body a:focus-visible{color:#ff2da6}
.infos-card{margin-bottom:2em;padding-bottom:1.4em;border-bottom:1px solid rgba(11,22,38,.25);font-size:.82em;line-height:1.45}
.infos-card p+p{margin-top:0}
.infos-card__title{font-size:1.7em;line-height:1.15;margin-bottom:.15em}
.infos-card__artist{font-size:1.15em;margin-bottom:.5em}
.infos-card__opening{color:var(--red);margin-top:.4em!important}
.infos-body .infos-privacy{margin-top:1.8em;font-size:.82em;font-style:italic;color:#555}
/* v25 : texte justifié avec césure française */
.infos-body>p{text-align:justify;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:6 3 3}
.infos-card,.infos-card p{text-align:left;hyphens:manual}
/* v26 : bloc d'infos centré */
.infos-card,.infos-card p{text-align:center}
/* v31 : mention RGPD sous le champ e-mail (Brevo, double opt-in) */
.signup__legal{grid-column:4/10;margin-top:14px;color:var(--mute);font-size:11px;line-height:1.4;text-align:center}
.signup__legal a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;transition:color .2s}
.signup__legal a:hover,.signup__legal a:focus-visible{color:#ff2da6}
.signup:not(.is-done) .signup__msg{top:auto;bottom:calc(100% + 8px)}
.signup.is-done .signup__msg{font-size:13px;line-height:1.3}
.merci .soon{max-width:520px;margin-left:auto;margin-right:auto}
@media (max-width:760px){.signup__legal{grid-column:1/13;font-size:10.5px;text-align:left}}