:root{
  --navy:#08204f;
  --navy2:#123a78;
  --gold:#c88d23;
  --gold2:#edc76d;
  --cream:#fbf7ef;
  --ink:#172033;
  --muted:#677085;
  --line:#e7dfd0;
  --white:#fff;
  --success:#236747;
  --shadow:0 18px 50px rgba(8,32,79,.13);
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  overflow-x:hidden;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 92% 2%,rgba(200,141,35,.13),transparent 27rem),
    linear-gradient(180deg,#fff 0%,var(--cream) 100%);
  line-height:1.55;
  opacity:0;
  animation:pageIn .45s ease forwards;
}
body.page-leaving{opacity:0;transition:opacity .18s ease}
a{color:inherit}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.container{width:min(1160px,calc(100% - 30px));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@keyframes pageIn{to{opacity:1}}
@keyframes floatSoft{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-12px,0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes shimmer{0%{background-position:0% 50%}100%{background-position:100% 50%}}

#scrollProgress{
  position:fixed;top:0;left:0;z-index:9999;height:3px;width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold2),var(--navy2));
  transition:width .08s linear;
}
header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.91);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(8,32,79,.08);
  transition:box-shadow .25s ease,background .25s ease;
}
header.scrolled{box-shadow:0 10px 30px rgba(8,32,79,.09);background:rgba(255,255,255,.97)}
.nav{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.brand img{width:57px;height:57px;object-fit:cover;object-position:50% 16%;border-radius:50%;border:2px solid rgba(200,141,35,.25)}
.brand-copy{display:grid;line-height:1.05}
.brand strong{color:var(--navy);letter-spacing:.08em;font-size:1.08rem}
.brand small{color:var(--gold);font-weight:800;margin-top:5px}
.menu{display:flex;align-items:center;gap:22px;list-style:none;margin:0;padding:0}
.menu a{
  position:relative;text-decoration:none;color:var(--navy);font-weight:800;font-size:.94rem;
  transition:color .2s ease;
}
.menu a:not(.cta)::after{
  content:"";position:absolute;left:0;right:100%;bottom:-7px;height:2px;
  background:var(--gold);transition:right .25s ease;
}
.menu a:hover,.menu a.active{color:var(--gold)}
.menu a:hover::after,.menu a.active::after{right:0}
.cta,.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 17px;border:0;border-radius:13px;
  text-decoration:none;font-weight:850;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.cta{background:var(--navy);color:#fff!important}
.btn.primary{background:var(--gold);color:#17120a;box-shadow:0 11px 25px rgba(200,141,35,.22)}
.btn.secondary{background:#fff;color:var(--navy);border:1px solid var(--line)}
.cta:hover,.btn:hover{transform:translateY(-2px);box-shadow:0 13px 30px rgba(8,32,79,.14)}
.hamb{
  display:none;width:45px;height:45px;border:0;border-radius:12px;background:var(--navy);color:#fff;font-size:1.25rem;
}

.hero{position:relative;padding:66px 0 43px;overflow:hidden}
.hero::before,.hero::after{
  content:"";position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none;
  animation:floatSoft 6s ease-in-out infinite;
}
.hero::before{width:220px;height:220px;background:rgba(200,141,35,.12);right:-55px;top:15px}
.hero::after{width:130px;height:130px;background:rgba(8,32,79,.08);left:-45px;bottom:10px;animation-delay:-3s}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;align-items:center;gap:48px;position:relative;z-index:1}
.hero-copy{animation:fadeUp .7s ease both}
.eyebrow{color:var(--gold);font-weight:900;text-transform:uppercase;letter-spacing:.13em;font-size:.78rem;margin-bottom:11px}
h1{margin:0;color:var(--navy);font-size:clamp(2.7rem,7vw,5.55rem);line-height:.97;letter-spacing:-.045em}
.hero p{color:var(--muted);font-size:clamp(1rem,2vw,1.17rem);max-width:720px;margin:23px 0 27px}
.hero-actions{display:flex;gap:11px;flex-wrap:wrap}
.logo-box{
  background:rgba(255,255,255,.77);border:1px solid rgba(200,141,35,.23);
  border-radius:32px;padding:23px;box-shadow:var(--shadow);
  animation:fadeUp .8s .12s ease both;
}
.logo-box img{width:100%;border-radius:20px;transition:transform .45s ease}
.logo-box:hover img{transform:scale(1.025)}

.searchbox,.panel{
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:var(--shadow)
}
.searchbox{margin-top:34px}
.filters{display:grid;grid-template-columns:1.45fr repeat(3,minmax(0,1fr));gap:12px}
.field{display:grid;gap:7px;min-width:0}
.field label{font-size:.82rem;font-weight:850;color:var(--navy)}
.field input,.field select,.field textarea{
  width:100%;min-width:0;border:1px solid #d7dde7;border-radius:13px;padding:12px 13px;background:#fff;color:var(--ink);outline:none;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--gold);box-shadow:0 0 0 4px rgba(200,141,35,.12);transform:translateY(-1px)
}
.quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.chip{
  border:1px solid var(--line);background:var(--cream);color:var(--navy);
  padding:9px 13px;border-radius:999px;font-weight:850;transition:all .2s ease
}
.chip:hover,.chip.active{background:var(--navy);color:#fff;border-color:var(--navy);transform:translateY(-1px)}
.filter-note{margin:12px 2px 0;color:var(--muted);font-size:.9rem}

section{padding:66px 0}
.section-soft{background:rgba(255,255,255,.55);border-block:1px solid rgba(8,32,79,.06)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:22px;margin-bottom:25px}
.section-head h2{margin:0;color:var(--navy);font-size:clamp(2rem,5vw,3.35rem);letter-spacing:-.035em;line-height:1.02}
.section-head p{color:var(--muted);max-width:700px;margin:9px 0 0}
.count{flex:0 0 auto;background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 13px;color:var(--navy);font-weight:850}
.section-footer{display:flex;justify-content:center;margin-top:28px}

.categories{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.cat{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;min-height:132px;
  display:grid;align-content:space-between;gap:10px;text-decoration:none;transition:transform .23s ease,box-shadow .23s ease,border-color .23s ease;
}
.cat:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--gold2)}
.cat-icon{font-size:1.55rem;line-height:1}
.cat strong{color:var(--navy);font-size:.96rem;line-height:1.18}
.cat-routes{display:flex;gap:5px;flex-wrap:wrap}
.cat-routes a{
  font-size:.66rem;padding:5px 7px;border-radius:999px;background:var(--cream);color:var(--navy);font-weight:850;text-decoration:none;
  transition:background .2s,color .2s
}
.cat-routes a:hover{background:var(--navy);color:#fff}

.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:0 9px 27px rgba(8,32,79,.075);min-width:0;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .3s ease;
}
.card:hover{transform:translateY(-7px);box-shadow:0 22px 55px rgba(8,32,79,.16);border-color:rgba(200,141,35,.48)}
.visual{
  position:relative;aspect-ratio:16/9;min-height:145px;padding:17px;display:flex;align-items:flex-end;justify-content:space-between;
  color:#fff;overflow:hidden;background:linear-gradient(135deg,var(--navy),#1d559d 55%,var(--gold));
  background-size:180% 180%;animation:shimmer 8s ease infinite alternate;
}
.visual.with-image::after{
  content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,32,79,.05),rgba(8,32,79,.84))
}
.card:hover .event-image{transform:scale(1.055)}
.event-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .55s ease}
.visual .icon,.visual .badge{position:relative;z-index:2}
.visual .icon{font-size:2.65rem;filter:drop-shadow(0 5px 10px rgba(0,0,0,.22))}
.badge{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.27);backdrop-filter:blur(7px);padding:7px 10px;border-radius:999px;font-size:.76rem;font-weight:850}
.card-body{padding:20px;min-width:0}
.card-body h3{margin:0 0 10px;color:var(--navy);font-size:1.24rem;line-height:1.23;overflow-wrap:anywhere}
.meta{display:grid;gap:7px;color:var(--muted);font-size:.91rem}
.meta span{display:flex;align-items:flex-start;gap:8px}
.card-body p{color:var(--muted);overflow-wrap:anywhere}
.permanent-note,.online-note{
  display:inline-flex!important;align-items:center;gap:7px;width:max-content;
  border-radius:999px;padding:6px 9px;font-size:.76rem;font-weight:850
}
.permanent-note{background:#eef7f2;color:var(--success);border:1px solid #cfe8da}
.online-note{background:#eef2ff;color:#304bb1;border:1px solid #d8defb}
.empty{display:none;text-align:center;padding:42px;border:1px dashed #c8ced8;border-radius:20px;color:var(--muted);background:rgba(255,255,255,.72)}
.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.full{grid-column:1/-1}.is-hidden{display:none!important}
.notice{margin-top:13px;border-left:4px solid var(--gold);background:#fff7e4;padding:11px 13px;border-radius:9px;color:#664c12;font-size:.9rem}
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}
.stat{text-align:center;background:var(--cream);padding:16px 10px;border-radius:15px}
.stat strong{display:block;color:var(--gold);font-size:1.55rem}

footer{background:var(--navy);color:rgba(255,255,255,.82);padding:34px 0;margin-top:30px}
.footer{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap}
.footer strong{color:#fff}.footer-links{display:flex;gap:16px;flex-wrap:wrap}.footer a{color:#fff;text-decoration:none}

.reveal{opacity:0;transform:translateY(25px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.8,.2,1)}
.reveal.visible{opacity:1;transform:none}



/* Actions des fiches et partage */
.card-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:15px}
.card-actions .btn{min-height:40px;padding:0 13px;font-size:.86rem}
.share-status{font-size:.78rem;color:var(--success);font-weight:800}

/* Installation de la webapp : élément de menu uniquement sur smartphone */
.mobile-install-item{display:none}
.menu-install-button{
  width:100%;border:0;background:var(--cream);color:var(--navy);border-radius:11px;
  padding:10px 12px;text-align:left;font-weight:850;cursor:pointer
}
.menu-install-button:hover{background:#f3ead8;color:var(--gold)}

/* Fenêtre d'installation PWA */
.install-overlay{
  position:fixed;inset:0;z-index:10050;display:grid;place-items:end center;
  background:rgba(6,20,48,.46);padding:16px;opacity:0;pointer-events:none;
  transition:opacity .22s ease
}
.install-overlay.open{opacity:1;pointer-events:auto}
.install-popup{
  width:min(100%,460px);background:#fff;border:1px solid var(--line);border-radius:22px;
  box-shadow:0 25px 70px rgba(8,32,79,.28);padding:20px;transform:translateY(22px);
  transition:transform .25s ease
}
.install-overlay.open .install-popup{transform:none}
.install-popup-head{display:flex;align-items:flex-start;gap:12px}
.install-popup-logo{width:58px;height:58px;object-fit:cover;object-position:50% 18%;border-radius:15px;border:1px solid var(--line)}
.install-popup-copy{min-width:0;flex:1}
.install-popup h3{margin:0 0 5px;color:var(--navy);font-size:1.18rem}
.install-popup p{margin:0;color:var(--muted);font-size:.91rem;line-height:1.42}
.install-close{border:0;background:transparent;color:var(--muted);font-size:1.35rem;line-height:1;padding:2px 4px}
.install-help{display:none;margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--cream);color:var(--navy);font-size:.84rem}
.install-help.show{display:block}
.install-never{display:flex;align-items:center;gap:8px;margin:15px 0 13px;color:var(--muted);font-size:.84rem}
.install-never input{width:17px;height:17px;accent-color:var(--navy)}
.install-actions{display:flex;gap:9px}
.install-actions .btn{flex:1;min-height:42px;padding:0 12px}

@media(max-width:760px){
  .mobile-install-item{display:block}
}

@media(max-width:1050px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:950px){
  .hero-grid,.about{grid-template-columns:1fr}
  .filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .categories{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logo-box{max-width:760px;margin-inline:auto}
}
@media(max-width:760px){
  .hamb{display:grid;place-items:center}
  .menu{
    position:absolute;top:76px;left:14px;right:14px;display:grid;gap:2px;
    background:#fff;border:1px solid var(--line);border-radius:17px;padding:12px;
    box-shadow:var(--shadow);opacity:0;transform:translateY(-12px) scale(.98);pointer-events:none;
    transition:opacity .22s ease,transform .22s ease;
  }
  .menu.open{opacity:1;transform:none;pointer-events:auto}
  .menu a{display:block;padding:10px}
  .menu a::after{display:none}
  .filters,.grid,.formgrid{grid-template-columns:minmax(0,1fr)}
  .full{grid-column:auto}
  .section-head{display:grid;align-items:start}
  .count{justify-self:start}
  .hero{padding-top:42px}
}
@media(max-width:520px){
  .container{width:min(100% - 20px,1160px)}
  .brand small{display:none}
  .categories{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .stats{grid-template-columns:minmax(0,1fr)}
  .cat{padding:10px;min-height:112px;border-radius:13px;gap:7px}
  .cat-icon{font-size:1.2rem}
  .cat strong{font-size:.79rem;line-height:1.12}
  .cat-routes{gap:3px}
  .cat-routes a{font-size:.56rem;padding:3px 5px}
  .card-actions{gap:7px}
  .card-actions .btn{min-height:38px;font-size:.8rem;padding:0 11px}
  h1{font-size:clamp(2.55rem,16vw,4rem)}
  .searchbox,.panel{padding:16px}
  .logo-box{padding:10px}
  .visual{aspect-ratio:4/3}
  section{padding:52px 0}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}


/* Grand écran d'ouverture PWA */
body.app-splashing{overflow:hidden}
.app-splash{
  position:fixed;inset:0;z-index:12000;display:none;opacity:0;
  background:#041f4f;overflow:hidden;pointer-events:none;
  transition:opacity .35s ease;
}
.app-splash.visible{display:block;opacity:1}
.app-splash.fade-out{opacity:0}
.app-splash-backdrop,.app-splash-glow{position:absolute;inset:0}
.app-splash-backdrop{
  background:
    radial-gradient(circle at 50% 28%, rgba(222,184,99,.18), transparent 24%),
    linear-gradient(180deg, rgba(4,31,79,1) 0%, rgba(2,20,55,1) 100%);
}
.app-splash-image{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(92vw,540px);height:auto;max-height:92vh;display:block;
  object-fit:contain;filter:drop-shadow(0 18px 60px rgba(0,0,0,.36));
}
.app-splash-glow{
  background:radial-gradient(circle at 50% 50%, rgba(233,203,129,.16) 0%, transparent 36%);
}
@media(min-width:861px){
  .app-splash-image{width:min(44vw,460px)}
}
@media(max-width:520px){
  .app-splash-image{width:min(96vw,500px)}
}
@media(prefers-reduced-motion:reduce){
  .app-splash,.app-splash.visible,.app-splash.fade-out{transition:none}
}


/* Notifications push Orientissimo */
.notification-button{
  background:#fff8e8;
  color:var(--navy);
  border:1px solid rgba(199,153,67,.52);
}
.notification-button:hover{
  background:#f6ead0;
  color:var(--navy);
}
.notification-button.is-active{
  background:#edf8f1;
  border-color:#b9ddc5;
  color:#24633e;
}
.notification-button.is-disabled{
  opacity:.62;
  cursor:not-allowed;
}
.mobile-notification-item{display:none}
.menu-notification-button{
  width:100%;
  border:0;
  background:transparent;
  color:var(--navy);
  text-align:left;
  font:inherit;
  font-weight:700;
  padding:10px;
  border-radius:10px;
  cursor:pointer;
}
.menu-notification-button:hover{background:#f3ead8;color:var(--gold)}
.menu-notification-button.is-active{color:#24633e}
.menu-notification-button:disabled{opacity:.55;cursor:not-allowed}

.notification-toast{
  position:fixed;
  z-index:13000;
  left:50%;
  bottom:22px;
  transform:translate(-50%,18px);
  width:min(calc(100% - 28px),520px);
  padding:13px 16px;
  border-radius:14px;
  background:#08204f;
  color:white;
  box-shadow:0 16px 48px rgba(0,0,0,.28);
  font-size:.9rem;
  line-height:1.4;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
}
.notification-toast.show{opacity:1;transform:translate(-50%,0)}
.notification-toast.success{background:#1f6542}
.notification-toast.warning{background:#7a5311}

@media(max-width:760px){
  .mobile-notification-item{display:block}
}