:root{
  --bg:#0b0f14; --card:#0f1621; --text:#eaeaea; --muted:#9aa4b2;
  --stroke:#1c2635; --chip:#121b28; --chipOn:#1a2a44; --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;
  color-scheme: dark;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; 
  height: auto;
  background-image:  repeating-linear-gradient(135deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), repeating-linear-gradient(22.5deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), linear-gradient(90deg, rgb(0 90 176 / 69%), rgb(216 186 41 / 50%), rgb(70, 70, 70), rgb(226 198 60 / 40%), rgb(188 32 21 / 69%));
  /* backdrop-filter: brightness(0.7); */
  /* background:var(--bg);  */
  color:var(--text);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  
}
header{
  position:sticky;
  top:0; z-index:10;
  /* background:linear-gradient(to bottom, rgba(11,15,20,.95), rgba(11,15,20,.9)); */
  background:linear-gradient(to bottom, rgb(0 25 50 / 80%), rgb(0 0 0 / 70%));
  /* border-bottom:1px solid var(--stroke); */
}
header.is-sticky{       backdrop-filter: blur(15px);   }

.wrap{ width:auto; /* 1100px */ margin:0 auto; padding: .1rem 1rem; }

@media screen and (min-width: 1024px) { .wrap{ padding-inline: 25%; }   }

#groupeFiltres {        border-bottom: thick solid var(--stroke);     padding-bottom: .5rem;      background: linear-gradient(to bottom, rgb(0 0 0 / 75%), rgb(30 0 0 / 60%));  }

.brand{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  text-decoration:none; color:inherit;
  font-weight:700; letter-spacing:.2px;
  font-size: clamp(18px, 3vw, 22px);
  padding:.2rem 0 .6rem;
}
.brand img{ width:64px; height:64px; display:block; }

.titre {	
    line-height: 1em;
}

.titre small{
	    font-weight: lighter;
    font-style: italic;
	
}
.toolbar{
  display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; justify-content:center;
  padding-bottom:.6rem;
}

.search, .toggle {      backdrop-filter: blur(10px);    }

.search{
  flex: 1 1 280px;
  display:flex; align-items:center; gap:.5rem;
  /* background: rgba(255,255,255,.03); */
  border:1px solid var(--stroke);
  border-radius: 999px;
  padding:.55rem .8rem;
  min-width: 240px;
}
.search input{
  width:100%;
  border:0; outline:0; background:transparent; color:var(--text);
  
  /* font-size: 14px; */
  
    padding-left: .5rem;
}
.search .hint{ color:var(--muted); font-size: 12px; white-space:nowrap; }
.chips{
  display:flex; gap:.45rem; flex-wrap:wrap; justify-content:center;
  padding: .2rem 0 .1rem;
}
.chip{
  border:1px solid var(--stroke);
  background: var(--chip);
  color: var(--text);
  border-radius: 999px;
  /* padding: .35rem .65rem; */
  padding: .4rem .8rem;
  font-size: 12px;
  cursor:pointer;
  user-select:none;
  transition: transform .06s ease, background .15s ease;
}

@media screen and (min-width: 760px)    {   .chip{      font-size: initial; }   }

.chip:active{ transform: translateY(1px); }
.chip[aria-pressed="true"]{ background: var(--chipOn); border-color: rgba(120,160,255,.35);     font-weight: bold;     filter: sepia(1);}
.chip:hover {   border: thin groove rgb(188 35 20 / 20%);     filter: invert(0.1);}

main{ max-width:1100px; margin:0 auto; padding: .8rem .9rem 1.3rem; }
.meta{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  color: var(--muted); font-size:12px; margin:.5rem .5rem .8rem .5rem;
  font-weight: bold;
}
.meta > div {       backdrop-filter: blur(1px); }

.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 760px){
  .grid{ grid-template-columns: 1fr 1fr; }
}
.card{
  /* background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); */
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  min-height: 220px;
  
  display: flex;
  flex-direction: column;
  
  backdrop-filter: blur(0.5px);
      background: repeating-linear-gradient(180deg, rgba(60, 102, 231, 0.08) 0px, rgba(60, 102, 231, 0.08) 1px, transparent 1px, transparent 9px), repeating-linear-gradient(45deg, rgba(60, 102, 231, 0.08) 0px, rgba(60, 102, 231, 0.08) 1px, transparent 1px, transparent 9px), linear-gradient(0deg, rgb(188 35 20 / 50%), rgb(11 73 132 / 85%));
  
}
.cardHead{
  /* display:flex; align-items:baseline; justify-content:space-between; */
display: grid;
  grid-template-columns: 1fr auto; /* gauche prend tout, droite au minimum */
  align-items: start;
  /* gap:.7rem; */
  /* padding:.75rem .85rem .55rem; */
  padding:.9rem .85rem .75rem;
      grid-template-areas:
        "main actions"
        "sub sub";
}

.headLeft{
  min-width: 0;      /* important pour éviter overflow */
     width: 100%;
    grid-area: main;
    place-self: center;
}

.title{
  font-size: 14px;  font-weight: 700; margin:0;
  /* line-height:1.2; */
}
@media screen and (min-width: 560px)  {    .title{    font-size: initial; }     }

.title a{
  color: inherit; text-decoration:none;
  border-bottom:1px dashed rgba(255,255,255,.18);
}
.title a:hover{ border-bottom-color: #f3c31c; }
.sub{
  font-size: 12px; color: var(--muted); 
  margin-top:.5rem;
  display:flex; 
  gap:.2rem; 
  flex-wrap:wrap;
  width: 100%;
      grid-area: sub;
}

.tagsInline {   display: contents;  }

.badge{
  border:1px solid var(--stroke);
  background: #59450030;
  border-radius: 999px;
  padding: .15rem .5rem;
  font-size: 9px;
  color: var(--muted);
}
.actions{
  display:flex; gap:.35rem; align-items:center; flex: 0 0 auto;
}

.actionsHead {      justify-self: end; /* reste collé à droite */
  display: flex;
  gap: .5rem;
  align-items: center;  }

.btn{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  color: var(--text);
  border-radius: 10px;
  padding: .35rem .55rem;
  font-size: 12px;
  cursor:pointer;
}
.btn:hover{ background: rgba(255,255,255,.06); }
.media{
  width:100%;
  /* aspect-ratio: 16/10; */
  background:#000;
  display:grid; place-items:center;
  position:relative;
  /* center vertical*/
  display: flex;
  align-items: center;   /* centre le contenu verticalement */
  justify-content: center;
  flex: 1;               /* prend l’espace restant */
      min-height: 200px;
}
.media img{
  width:100%; height:100%;
  object-fit: contain;
  display:block;
  transition: opacity 0.4s ease-out;
}
.media img.loading{ opacity: 0;    }
    
    
.media video{
  width:100%; height:100%;
  object-fit: contain;
  background:#000;
  display:block;
}
.media iframe{
  width:100%; height:100%;
  border:0;
  display:block;
  background:#000;
  aspect-ratio: 16 / 10;
      min-height: 200px; /* Pour que ca reste proche du final même en au cas ou c pas encore chargé */
}
.overlay{
  position:absolute; 
  /* inset:auto 0 0 0; */
  top: 0;    left: 0;
  padding:.35rem .2rem;
  font-size:11px;
  color: rgba(255,255,255,.88);
  /* background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0)); */
  /* display:flex; */
  /* gap:.6rem;  */
  display: grid;
  justify-content:space-between; 
  align-items:center;
      text-shadow: 1px 1px 4px black;
}
.overlay small{ color: rgba(255,255,255,.72); }
footer{
  max-width:1100px; margin:0 auto;
  padding: .4rem .9rem 1rem;
  color: var(--muted);
  font-size: smaller;
  text-align:center;
      background-color: #00000052;
    background-clip: content-box;
}
.empty{
  color: var(--muted);
  border:1px dashed var(--stroke);
  border-radius: var(--radius);
  padding: 1rem;
  text-align:center;
}




/* --- enhancements v2 --- */

/* Toolbar controls */
.controls{
  display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; justify-content:center;
  padding-bottom:.6rem;
}
select, .toggle{

  color: var(--text);
  border-radius: 999px;
  padding:.5rem .7rem;
  font-size: 13px;
}
select {
    border:1px solid var(--stroke);
    background: rgba(255,255,255,.03);
}
.toggle{
  display:inline-flex; align-items:center; gap:.5rem;
  cursor:pointer; user-select:none;
}
.toggle input{ accent-color: #7aa0ff; }

/* Two-level chips */
.chipsBlock{ display:flex; flex-direction:column; gap:.45rem; 
    padding-block: 0.5rem; }
.chipsRow{ display:flex; 
 /* gap:.5rem;   */
 gap:.7rem;  
 flex-wrap:wrap; justify-content:start; }
 
 #areaChips {    justify-content:center;     }

/* Star button */
.star{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  color: var(--text);
  border-radius: 10px;
  padding: .35rem .55rem;
  font-size: 14px;
  cursor:pointer;
  line-height: 1;
}
.star[aria-pressed="true"]{
    /* background: rgba(122,160,255,.18); border-color: rgba(120,160,255,.35);  */
    background: rgb(255 200 0 / 25%);
    }

/* Compact (dense) mode */
body.compact main{ padding: .65rem .75rem 1.1rem; }
body.compact .grid{ gap: .55rem; }
body.compact .card{ min-height: 180px; }
@media (min-width: 760px){
  body.compact .grid{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1040px){
  body.compact .grid{ grid-template-columns: 1fr 1fr 1fr; }
}

/* Disabled badge (if shown) */
.badge.disabled{ border-color: rgba(255,150,150,.35); color: rgba(255,190,190,.9); }


/* --- enhancements v3 --- */
/* Region chips different color (square, no border unless selected) */
.chip.region{
  background: rgb(255 122 122 / 18%);
  border: none;
  border-radius: 0;
  padding: .8rem 0.5rem;
  /* font-size: initial; */
      width: 19%; /* les 4 a la fin */
}

.chip.region:first-of-type  {       border-top-left-radius: 10px; width:24%;  }
.chip.region:last-of-type  {       border-top-right-radius: 10px;   }

@media screen and (min-width: 560px) {
    
    .chip.region{
  padding: .7rem 2rem;
  font-size: initial;
  
    }
}

.chip.region:hover{
    border-bottom: 1px solid #f3c31c;
      /* backdrop-filter: contrast(0.9); */
        filter: saturate(0.5);
}
.chip.region[aria-pressed="true"]{
  /* background: rgb(255 122 122 / 32%); */
  background: rgb(188 35 20 / 20%);
  /* border: 1px solid rgb(255 122 122 / 55%); */
    border-bottom: medium solid #f3c31c;
        font-weight: bold;
}


/* Region chips different color */
/* Compact mode: hide badges and action buttons in card head */
body.compact .cardHead .sub{ display:none !important; }
body.compact .cardHead .actions{ display:none !important; }


/* --- enhancements v4 --- */

/* Action bar under media */
.actionsBar{
  display:flex;
  /* gap:.4rem; */
  gap: 1rem;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  padding:.55rem .75rem .7rem;
  border-top:1px solid var(--stroke);
}
.actionsBar .btn, .actionsBar .star{
  border-radius: 10px;
}



/* Compact mode: hide sub badges and bottom buttons (keep share always) */
body.compact .cardHead .sub{ display:none !important; }
/* body.compact .actionsBar .btn{ display:none !important; } */
/* body.compact .actionsBar .star{ display:none !important; } */
body.compact .actionsBar { display:none !important; }
/* (keep star visible in compact for quick fav) */

/* Pagination */
.pager{
  display:flex;
  gap:.5rem;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  margin: 1rem 0 0;
}
.pager .btn{
  border: 3px solid #1c3864;
  /* background: rgba(255,255,255,.03); */
  background: #ecbb09;
  color: var(--stroke);
  border-radius: 10px;
  padding: .35rem 1rem;
  /* font-size: 12px; */
  cursor:pointer;
}
.pager .btn[disabled]{
  opacity:.25;
  cursor:not-allowed;
}
.pager .label{
  color: var(--muted);
  font-size: 12px;
  padding:.1rem .25rem;
}


/* --- temporary: hide sort dropdown --- */
#sort{ display:none !important; }




/* Favorites chip color */
.chip.favs{
  background: rgba(255,215,0,.14);
  border: none;
  border-radius: 999px;
}
.chip.favs[aria-pressed="true"]{
  background: rgba(255,215,0,.26);
  border: 1px solid rgba(255,215,0,.45);
}


@media (max-width: 560px){ .toolbar{ justify-content:stretch; } .search{ flex: 1 1 100%; width:100%; min-width: 0; } }


/* --- header layout v5 --- */
.controls{
  display:flex;
  flex-wrap: nowrap;
  align-items:center;
  justify-content: space-between;
  gap:.6rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom:.5rem;
}
.controls::-webkit-scrollbar{ height:0; }
.search{
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}
.search input{ min-width: 0; }
#count{ display:none !important; }

.filtersPanel{
 /*  margin-top: .55rem; */
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  /* background: rgba(255,255,255,.02); */
  background: rgb(0 77 255 / 10%);
  overflow: hidden;
}
.filtersSummary{
  list-style: none;
  cursor: pointer;
  padding: .65rem .8rem;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:.6rem;
  user-select:none;
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid var(--stroke);
  font-size: 13px;
  color: var(--text);
}
/* Right side now contains a button + a chevron */
.filtersSummaryRight{
  display:flex;
  align-items:center;
  gap:.5rem;
  color: var(--muted);
}

/* Rotate only the chevron, not the whole right block */
.filtersSummaryRight .chev{
  display:inline-block;
  transition: transform .15s ease;
}
.filtersPanel[open] .filtersSummaryRight .chev{ transform: rotate(180deg); }

/* Small reset button inside summary */
.filtersReset{
  /* padding: .25rem .5rem; */
  /* font-size: 10px; */
  /* border-radius: 10px; */
  white-space: nowrap;
  /* background: none; */
     filter: hue-rotate(45deg);
     backdrop-filter: contrast(0.8);
}

@media screen and (min-width: 760px)    {   .filtersReset{  
padding-inline: 2rem;   }
}

/* Bouton reset désactivé */
#resetFilters[disabled]{
  opacity: 0;
  pointer-events: none;
}


.filtersContent{
  padding: .7rem .8rem .8rem;
  display:flex;
  flex-direction: column;
  gap:.75rem;
}
.filtersGroup{ display:flex; flex-direction: column; gap:.45rem; }
.filtersLabel{ font-size: 12px; color: var(--muted); }

.chip.opt{ background: rgba(255,255,255,.03); }
.chip.opt[aria-pressed="true"]{ background: rgba(255,255,255,.08);     font-weight: bold;}

@media (max-width: 560px){
  .controls{ gap:.5rem; }
  .toggle{ white-space: nowrap; }
  .search{ width: 100%; }
}


/* Category info banner (minimal, centered, responsive) */
.category-info {
  margin: 12px auto 16px;
  max-width: min(600px, calc(100% - 24px));
}

.category-info__inner {
  /* border: 1px solid var(--stroke); */
  /* border-radius: 14px; */
    background: #dcb320;
    box-shadow: var(--shadow);
    color: black;
    padding: 1em 1.5em;    line-height: 1;
}
/* Animation douce apparition category info */
.category-info__inner, #meteoVolcan > span{
  animation: categoryFadeIn .5s ease forwards;
}

@keyframes categoryFadeIn{
  from{
    opacity: 0;
    transform: translateY(6px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}


.category-info__title {
  font-weight: bold;
  margin-bottom: 6px;
}

.category-info__weather {
  margin-top: 8px;
  font-size: 0.95rem;
  text-align:center;background-color: #d2691e21;
    padding: 0.6em;
}