@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root{--violet:#8019f4;--ink:#080e34}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:white}body{font-family:Inter,Arial,sans-serif;color:var(--ink)}.site{min-height:100vh;display:flex;flex-direction:column;overflow:hidden}.header{height:80px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(25px,3.1vw,54px);background:#fff;position:relative;z-index:5;gap:24px}.brand{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;flex-shrink:0}.brand svg{width:82px;height:52px}.brand strong{font-size:22px;line-height:.92;letter-spacing:-.8px;font-weight:900}.header nav{display:flex;align-items:center;gap:clamp(16px,2.4vw,39px);height:100%}.header nav a{color:var(--ink);font-size:clamp(10px,.83vw,13px);font-weight:800;text-decoration:none;white-space:nowrap;height:100%;display:flex;align-items:center;position:relative}.header nav a.active{color:var(--violet)}.header nav a.active:after{content:"";height:3px;position:absolute;bottom:19px;left:0;right:0;background:var(--violet)}.right{display:flex;align-items:center;gap:12px}.social{border:3px solid #071036;border-radius:50%;width:35px;height:35px;display:grid;place-items:center;font-size:25px;line-height:1;font-weight:800}.social.facebook{font-family:Arial;font-size:23px}.inscrire{margin-left:20px;border-radius:10px;background:#6817f9;color:white;text-decoration:none;white-space:nowrap;padding:17px 27px;box-shadow:0 7px 18px #6717f938;font-size:14px;font-weight:800}.inscrire span{margin-left:14px}main{flex:1;display:flex;flex-direction:column;min-height:0}.hero{height:53vh;min-height:385px;max-height:520px;position:relative;background:#08172b;overflow:hidden}.hero-map{position:absolute;inset:0;background-image:url('assets/evenement-carte-artistique.webp');background-size:cover;background-position:center 49%;filter:saturate(1.2) contrast(1.08)}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,16,35,.97) 0%,rgba(4,20,41,.92) 23%,rgba(4,20,41,.72) 38%,rgba(3,18,36,.16) 62%,rgba(2,14,32,.14) 100%),linear-gradient(0deg,rgba(4,12,29,.25),transparent 35%)}.hero-content{position:relative;z-index:1;color:white;margin-left:clamp(36px,4.8vw,84px);padding-top:clamp(35px,4vh,60px);max-width:760px}.kicker{font-size:clamp(15px,1.3vw,21px);font-weight:800;letter-spacing:1px;display:flex;align-items:center;gap:18px}.kicker span{height:2px;width:50px;background:white;opacity:.7}.hero h1{font-size:clamp(45px,4.1vw,70px);line-height:1.01;letter-spacing:-3px;font-style:italic;font-weight:900;margin:14px 0 12px}.hero h1 em{color:#b22cf9;font-style:italic;white-space:nowrap}.subtitle{font:italic clamp(21px,1.85vw,30px)/1.15 Georgia,serif;margin:14px 0 10px}.accent{width:210px;height:7px;border-top:5px solid #ad20ff;border-radius:100%;transform:rotate(-2deg);margin:16px 0}.meta{display:flex;align-items:center;gap:20px;margin-top:8px}.meta>div{display:flex;align-items:center;gap:10px;padding-right:20px;border-right:1px solid #cbd1d6;white-space:nowrap;font-size:clamp(11px,.94vw,15px);font-weight:800}.meta>div:last-child{border:0}.meta svg{width:33px;height:33px;fill:none;stroke:#ae2cff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.north{position:absolute;top:22px;right:38px;color:white;font-size:22px;display:grid;justify-items:center;z-index:2;text-shadow:0 1px 4px #000}.north small{font-size:17px}.hero-waves{position:absolute;bottom:-1px;left:0;width:100%;height:88px;z-index:3}.hero-waves svg{width:100%;height:100%}.history{position:relative;flex:1;min-height:265px;background:linear-gradient(180deg,#fff 0%,#fff 72%,#f7efff 100%);padding:clamp(8px,1.5vh,18px) clamp(45px,5.5vw,95px) 76px}.history-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;position:relative;z-index:2}.history article{display:grid;grid-template-columns:68px minmax(0,1fr);gap:16px;padding:0 25px 0 0;min-height:165px;border-right:1px solid #caa2ff}.history article:last-child{border:0;padding-right:0}.ico{width:64px;height:64px;background:#f5ebff;box-shadow:0 4px 12px #7325cf1c;border-radius:18px;display:grid;place-items:center}.ico svg{width:43px;height:43px;stroke:#921bff;stroke-width:2.7;fill:none;stroke-linejoin:round;stroke-linecap:round}.history p{font-size:clamp(12px,1.02vw,16px);font-weight:600;line-height:1.38;margin:9px 0 0}.history p strong{color:#8515fa}.village{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:min(48vw,670px);height:120px;background:url('assets/evenement-village.webp') center bottom/contain no-repeat;z-index:1}.lower-lines{position:absolute;inset:auto 0 0;height:120px;opacity:.4;background:repeating-radial-gradient(ellipse 40% 90% at 50% 115%,transparent 0 13px,#bb8bff 14px 15px,transparent 16px 26px)}.lav{position:absolute;bottom:0;width:150px;height:230px;background:url('assets/lavande-event.webp') left bottom/contain no-repeat;z-index:1;pointer-events:none}.lav.left{left:0}.lav.right{right:0;transform:scaleX(-1)}
@media(min-width:1200px) and (max-height:850px){.header{height:69px}.hero{height:49vh;min-height:330px}.hero-content{padding-top:27px}.hero h1{font-size:clamp(45px,3.8vw,62px)}.history{padding-top:5px;padding-bottom:65px}.history article{min-height:150px}.history p{font-size:clamp(11px,.9vw,14px)}.village{height:94px}}
@media(max-width:1120px){.header{height:auto;min-height:75px;flex-wrap:wrap;padding:12px 25px}.header nav{order:3;justify-content:center;width:100%;height:36px;overflow:auto;gap:20px}.header nav a.active:after{bottom:0}.right{margin-left:auto}.hero{height:440px}.history article{grid-template-columns:1fr;gap:5px}.history p{font-size:13px}}
@media(max-width:700px){.header{padding:10px 14px}.brand svg{width:49px;height:38px}.brand strong{font-size:15px}.social{display:none}.inscrire{margin-left:0;padding:12px 14px;font-size:11px}.header nav{justify-content:flex-start;gap:17px}.header nav a{font-size:10px}.hero{height:540px;max-height:none;min-height:0}.hero-map{background-position:57% center}.hero-shade{background:linear-gradient(90deg,rgba(3,16,35,.91),rgba(3,16,35,.4)),linear-gradient(0deg,rgba(3,16,35,.6),transparent)}.hero-content{margin-left:22px;padding-top:44px;margin-right:15px}.hero h1{font-size:clamp(39px,9vw,56px);letter-spacing:-2px}.hero h1 em{white-space:normal}.subtitle{font-size:22px}.meta{align-items:flex-start;flex-direction:column;gap:8px}.meta>div{border:0;font-size:12px}.meta svg{width:24px;height:24px}.history{padding:20px 24px 145px}.history-grid{grid-template-columns:1fr;gap:20px}.history article{grid-template-columns:55px 1fr;border-right:0;border-bottom:1px solid #d6baff;padding:0 0 18px;min-height:0}.ico{width:50px;height:50px;border-radius:12px}.ico svg{width:32px;height:32px}.history p{font-size:14px;line-height:1.5;margin:0}.village{width:90vw;height:115px}.lav{width:85px;height:130px}}
@media(prefers-reduced-motion:no-preference){.inscrire{transition:transform .2s,box-shadow .2s}.inscrire:hover{transform:translateY(-2px);box-shadow:0 12px 25px #6717f955}}

/* Rééquilibrage écran desktop — 31 octobre 2026 */
@media (min-width:1121px){
 html,body{height:100%;overflow:hidden}
 .site{height:100vh;min-height:0}
 .header{height:clamp(58px,7.8vh,76px);min-height:0}
 main{height:calc(100vh - clamp(58px,7.8vh,76px));flex:1;min-height:0}
 .hero{height:53%;min-height:0;max-height:none;flex:0 0 53%}
 .hero-map{background-size:100% auto;background-position:center center}
 .hero-content{padding-top:clamp(18px,2.2vh,28px);margin-left:clamp(42px,4.8vw,80px);max-width:620px}
 .kicker{font-size:clamp(13px,1.1vw,18px)}
 .hero h1{font-size:clamp(43px,3.6vw,62px);line-height:.98;letter-spacing:-2.5px;margin:10px 0 8px}
 .subtitle{font-size:clamp(20px,1.6vw,27px);line-height:1.12;margin:8px 0}
 .accent{margin:11px 0 6px;width:175px;height:5px;border-top-width:4px}
 .meta{gap:12px;margin-top:7px;position:relative;z-index:5}
 .meta>div{font-size:clamp(10px,.85vw,13px);gap:6px;padding-right:12px}
 .meta svg{width:26px;height:26px}
 .hero-waves{height:clamp(37px,5.5vh,53px);pointer-events:none}
 .history{height:47%;min-height:0;flex:0 0 47%;padding:clamp(9px,1.4vh,14px) clamp(42px,5.1vw,85px) 0}
 .history-grid{gap:clamp(12px,1.6vw,27px)}
 .history article{grid-template-columns:clamp(44px,3.6vw,58px) minmax(0,1fr);gap:clamp(9px,1vw,16px);min-height:0;padding-right:clamp(8px,1.2vw,20px)}
 .ico{width:clamp(42px,3.5vw,55px);height:clamp(42px,3.5vw,55px);border-radius:14px}
 .ico svg{width:70%;height:70%}
 .history p{font-size:clamp(11px,.89vw,14px);line-height:1.35;margin:2px 0 0;font-weight:600}
 .village{height:clamp(64px,10.5vh,96px);bottom:0;width:min(40vw,580px)}
 .lav{width:clamp(65px,8vw,125px);height:clamp(95px,20vh,170px)}
 .lower-lines{height:clamp(50px,11vh,90px)}
}
@media(min-width:1121px) and (max-height:740px){
 .hero{height:51%;flex-basis:51%}.history{height:49%;flex-basis:49%}
 .hero h1{font-size:clamp(38px,3.2vw,54px)}.subtitle{font-size:20px}
 .history p{font-size:clamp(10px,.82vw,13px)}.village{height:70px}
}
/* V3 — proportions recalées sur la maquette 742×422 (bureau) */
@media (min-width:1121px){
 html,body{height:100%;overflow:hidden}
 .site{height:100dvh;min-height:0}
 .header{height:9.1dvh;min-height:58px;max-height:80px;padding-left:3.4vw;padding-right:3.4vw}
 .brand svg{width:clamp(54px,4.3vw,76px)}.brand strong{font-size:clamp(16px,1.2vw,21px)}
 .header nav{gap:clamp(13px,1.7vw,29px)}
 .header nav a{font-size:clamp(10px,.75vw,13px)}
 .inscrire{padding:clamp(11px,1.2vh,16px) clamp(15px,1.5vw,25px)}
 main{height:calc(100dvh - min(9.1dvh,80px));min-height:0;flex:1}
 .hero{height:60%;flex:0 0 60%;min-height:0;max-height:none}
 .hero-map{background-size:100% 100%;background-position:center;filter:saturate(1.05) contrast(1.04)}
 .hero-shade{background:linear-gradient(90deg,rgba(4,14,29,.98) 0%,rgba(4,15,31,.96) 19%,rgba(4,15,31,.83) 30%,rgba(4,15,31,.42) 43%,transparent 62%)}
 .hero-content{margin-left:4.8vw;padding-top:clamp(22px,3.8vh,42px);max-width:39vw}
 .kicker{font-size:clamp(12px,1.0vw,18px);letter-spacing:.04em}
 .hero h1{font-size:clamp(43px,3.9vw,68px);line-height:1.01;letter-spacing:-.04em;margin:clamp(11px,1.8vh,18px) 0 8px}
 .subtitle{font-size:clamp(17px,1.6vw,27px);line-height:1.14;margin:8px 0 8px}
 .accent{margin:clamp(10px,1.5vh,15px) 0 8px;height:4px;border-top-width:3px;width:clamp(120px,14vw,220px)}
 .meta{margin-top:clamp(10px,1.3vh,15px);gap:clamp(8px,1.3vw,20px)}
 .meta>div{font-size:clamp(10px,.82vw,14px);padding-right:clamp(8px,1vw,17px);gap:7px}
 .meta svg{width:clamp(22px,1.65vw,29px);height:clamp(22px,1.65vw,29px)}
 .hero-waves{display:none}.north{display:none}
 .history{height:40%;flex:0 0 40%;min-height:0;padding:clamp(12px,2.3vh,22px) 4.5vw 0;background:linear-gradient(#fff 5%,#fff 60%,#fbf6ff)}
 .history-grid{gap:clamp(15px,2vw,32px)}
 .history article{grid-template-columns:clamp(40px,3vw,52px) minmax(0,1fr);gap:clamp(10px,1vw,16px);padding-right:clamp(12px,1.5vw,25px);min-height:0}
 .ico{width:clamp(39px,3vw,52px);height:clamp(39px,3vw,52px);border-radius:12px}
 .ico svg{width:65%;height:65%}
 .history p{font-size:clamp(11px,.86vw,15px);line-height:1.35;margin:0;font-weight:600}
 .village{height:clamp(62px,12vh,115px);width:min(50vw,700px);bottom:0}
 .lav{width:clamp(60px,7vw,130px);height:clamp(90px,20vh,180px)}
 .lower-lines{height:clamp(55px,12vh,110px)}
}
@media(min-width:1121px) and (max-height:760px){
 .hero{height:58%;flex-basis:58%}.history{height:42%;flex-basis:42%}
 .hero-content{padding-top:20px}.hero h1{font-size:clamp(40px,3.4vw,58px)}
 .history p{font-size:clamp(10px,.82vw,13px)}.village{height:70px}
}
/* Version 4 : composition recalée sur la maquette, sans déformation des photographies */
@media (min-width:1121px){
 .header{height:8.2dvh;min-height:60px;max-height:76px}
 main{height:calc(100dvh - clamp(60px,8.2dvh,76px))}
 .hero{height:59%;flex:0 0 59%;background:#071626}
 .hero-map{inset:0 0 0 24%;background-size:cover;background-position:center 49%;filter:saturate(1.12) contrast(1.04)}
 .hero-shade{background:linear-gradient(90deg,#061426 0%,#071527f7 22%,#08192bc9 34%,#06172975 46%,#0615270a 68%),linear-gradient(0deg,#06152924,transparent 38%)}
 .hero-content{max-width:49vw;margin-left:4.7vw;padding-top:clamp(24px,3.5vh,36px)}
 .hero h1{font-size:clamp(45px,3.9vw,64px);margin:12px 0 10px;line-height:1.02}
 .subtitle{font-size:clamp(20px,1.62vw,26px);margin:9px 0 8px}
 .accent{margin:14px 0 11px}
 .meta{margin-top:12px}
 .hero-waves{display:block;height:clamp(35px,5.5vh,53px);bottom:-1px}
 .north{display:none}
 .history{height:41%;flex:0 0 41%;padding:clamp(18px,2.4vh,26px) 4.5vw 0;background:linear-gradient(#fff 0%,#fff 60%,#f8f2ff 100%)}
 .history-grid{gap:clamp(14px,2vw,32px)}
 .history article{grid-template-columns:clamp(45px,3.2vw,56px) minmax(0,1fr);gap:clamp(10px,1vw,17px);padding-right:clamp(12px,1.5vw,25px)}
 .history p{font-size:clamp(12px,.86vw,15px);line-height:1.37;font-weight:600}
 .village{width:min(55vw,740px);height:clamp(96px,15vh,140px);bottom:-1px}
 .lav{width:clamp(100px,10vw,170px);height:clamp(130px,23vh,220px)}
 .lower-lines{height:clamp(85px,16vh,145px)}
}
@media (min-width:1121px) and (max-height:750px){.hero{height:57%;flex-basis:57%}.history{height:43%;flex-basis:43%}.hero-content{padding-top:18px}.hero h1{font-size:clamp(40px,3.5vw,57px)}.history p{font-size:clamp(11px,.8vw,13px)}.village{height:100px}}
/* V5 — panorama cartographique : recul du cadrage sans agrandir la page */
@media (min-width:1121px){
 .hero-map{
   inset:0;
   background-size:100% 122%;
   background-position:center 47%;
   filter:saturate(1.09) contrast(1.035);
 }
 .hero-shade{
   background:
     linear-gradient(90deg,rgba(4,16,33,.98) 0%,rgba(4,16,33,.95) 18%,rgba(4,16,33,.77) 29%,rgba(4,16,33,.32) 42%,rgba(4,16,33,.02) 60%),
     linear-gradient(0deg,rgba(4,16,33,.67) 0%,rgba(4,16,33,0) 19%);
 }
 .hero-content{z-index:4}
 .hero-waves{z-index:3}
}
/* V6 : afficher la carte complète, sans zoom ni déformation */
@media(min-width:1121px){
 .hero{background:#07172b}
 .hero-map{background-size:auto 100%!important;background-repeat:no-repeat!important;background-position:right center!important;filter:saturate(1.07) contrast(1.03)!important}
 .hero-shade{background:linear-gradient(90deg,#061428 0%,#061428 24%,rgba(6,20,40,.97) 34%,rgba(6,20,40,.65) 49%,rgba(6,20,40,.08) 70%,transparent 100%)!important}
 .hero-content{max-width:600px}
 .north{display:none}
}

/* V7 — raccord discret entre fond nuit et cartographie ; suppression du texte incrusté dans le visuel */
@media(min-width:1121px){
 .hero-map::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:
   linear-gradient(0deg, #061428 0%,rgba(6,20,40,.98) 8%,rgba(6,20,40,.80) 18%,rgba(6,20,40,0) 33%) left bottom / 31% 33% no-repeat,
   linear-gradient(90deg,#061428 0%,rgba(6,20,40,.98) 17%,rgba(6,20,40,.72) 46%,transparent 100%) left center / 20% 100% no-repeat;
 }
 .hero-shade{background:linear-gradient(90deg,#061428 0%,#061428 25%,rgba(6,20,40,.99) 37%,rgba(6,20,40,.82) 44%,rgba(6,20,40,.25) 57%,transparent 72%)!important}
}

/* V8 — fondu du raccord, suppression du bord vertical, carte non déformée */
@media(min-width:1121px){
 .hero-map{
   inset:0 0 0 auto!important;
   width:auto!important;
   height:100%!important;
   aspect-ratio:1002/490;
   background-size:100% 100%!important;
   background-position:center!important;
   -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.08) 4%,rgba(0,0,0,.55) 13%,#000 24%);
   mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.08) 4%,rgba(0,0,0,.55) 13%,#000 24%);
 }
 .hero-map::after{display:none!important}
 .hero-shade{background:linear-gradient(90deg,#061428 0%,#061428 25%,rgba(6,20,40,.80) 39%,rgba(6,20,40,.24) 53%,transparent 70%)!important}
}

/* V9 — éclaircir seulement le raccord pour mieux révéler la limite violette.
   Le cadrage de la carte et les dimensions de la page restent ceux de V8. */
@media (min-width:1121px){
 .hero-map{
   -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.22) 3%,rgba(0,0,0,.78) 10%,#000 17%)!important;
   mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.22) 3%,rgba(0,0,0,.78) 10%,#000 17%)!important;
 }
 .hero-shade{
   background:linear-gradient(90deg,#061428 0%,#061428 24%,rgba(6,20,40,.70) 36%,rgba(6,20,40,.10) 48%,transparent 62%)!important;
 }
}

/* V10 : raccord réellement éclairci et tracé violet plus visible.
   Ce réglage remplace explicitement les filtres et fondus V8/V9. */
@media (min-width:1121px) {
  .hero-map {
    filter: brightness(1.38) saturate(1.22) contrast(1.03) !important;
    -webkit-mask-image: linear-gradient(to right,
      transparent 0%, rgba(0,0,0,.55) 4%, #000 13%) !important;
    mask-image: linear-gradient(to right,
      transparent 0%, rgba(0,0,0,.55) 4%, #000 13%) !important;
  }
  .hero-shade {
    background: linear-gradient(to right,
      #061428 0%, #061428 27%,
      rgba(6,20,40,.88) 33%,
      rgba(6,20,40,.34) 39%,
      rgba(6,20,40,.04) 46%,
      transparent 53%) !important;
  }
}
