:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
    /* LIGHT par défaut */
  --bg_image:repeating-linear-gradient(135deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 10px, transparent 10px, transparent 11px),
    repeating-linear-gradient(22.5deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 10px, transparent 10px, transparent 11px),
    linear-gradient(
      90deg,
      rgba(0, 120, 255, 0.35),
      rgba(255, 215, 0, 0.35),
      #ffffff59,
      rgba(255, 200, 0, 0.25),
      rgba(220, 60, 40, 0.35)
    ); 
    --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;
  --header-hauteur: 110px; /* Valeur de secours qui sera écrasée par le JS */
    --bleuOptions: #144e85;
    --rougeOptions: #ac1a12;
    --jauneOptions: #ecbb0b;
  
}

@media (prefers-color-scheme: dark) {
  :root {
      --bg:#0b0f14;
      --bg_image: repeating-linear-gradient(135deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, #00000000 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 / 80%), rgb(216 186 41 / 50%), rgb(70, 70, 70), rgb(226 198 60 / 50%), rgb(188 32 21 / 80%));
  }
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth;}
body{
  margin:0; 
  height: auto;
  background-image:  var(--bg_image);
  /* backdrop-filter: brightness(0.7); */
  /* background:var(--bg);  */
  color:var(--text);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  padding-bottom: var(--safe-bottom);
  overscroll-behavior-y: contain;
  
}
a, button, input, select, summary, label { touch-action: manipulation; }
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); */
  padding-top: var(--safe-top);
}
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: 20%; }   

    }
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { 
       #groupeFiltres, .controls {
        padding-inline: 6rem;  }
}
    
#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: initial;
    padding:.5rem;
}
.brand img{ width:48px; height:48px; display:block; }
@media screen and (min-width: 1024px) {
    
    .brand{  font-size: clamp(18px, 3vw, 22px);     }
    .brand img{ width:64px; height:64px; }  
  
}

/* --- TOP APP BAR --- */
.brand-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    /* padding: 10px 0;  */
    /* Optionnel : un peu d'air en haut et en bas */
}

/* Les blocs latéraux prennent un espace égal et poussent le centre */
.header-left, .header-right {
    flex: 1;
    display: flex;
}

.header-left {
    justify-content: flex-start;
        display: flow; /* pour la fleche de gauche */
}

.header-right {
    justify-content: flex-end;
}

.header-center {
    display: flex;
    justify-content: center;
    text-align: center; /* Assure que le texte reste bien centré sous l'image si besoin */
}

/* --- BOUTON D'ACTION (Droite) --- */
.header-action-btn {
    background: none;
    border: none;
    color: #529b5e; /* Couleur de ton thème */
    width: 44px;    /* Zone de clic mobile */
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    display: none; /* TRÈS IMPORTANT : Caché par défaut, activé par JS si installable */
}

.header-action-btn:active {
    background-color: rgba(255, 255, 255, 0.15);
}


/* ==========================================================================
   MODE PAYSAGE (LANDSCAPE) : HEADER VERTICAL (100px)
   ========================================================================== */
@media screen and (orientation: landscape) and (max-height: 480px) {

    /* 1. On décale le contenu principal pour faire place au header */
    body {
        padding-top: 0 !important;
        padding-left: var(--header-hauteur) !important; /* À ajuster selon la hauteur réelle de ton header */
    }

    /* 2. On prend le header portrait, et on le fait pivoter d'un bloc */
    header {
        position: fixed !important;
        top: 0 !important;
        
        /* Astuce mathématique : on le décale vers la droite avant de le tourner */
        left: var(--header-hauteur) !important; 
        
        /* Sa "largeur" devient la hauteur totale de l'écran */
        width: 100vh !important; 
        
        /* Sa "hauteur" reste son épaisseur d'origine */
        /* height: 70px !important;  */
        height: auto; 
        
        /* La magie opère ici : on le fait pivoter de 90° autour de son coin en haut à gauche */
        transform-origin: top left !important;
        transform: rotate(90deg) !important;
        
        z-index: 9999 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* Optionnel */
    }
    
    header .wrap {   transform: rotate(180deg) !important;   }
    
    main {  
      margin-inline: 2rem !important;
    }
    
    :root {
        --sideHeaderWidth: 69px;      /* largeur de ton header latéral */
        --drawerOffsetLeft: var(--sideHeaderWidth);
        --drawerPaddingY: 0 !important;
    }

    .drawer-overlay {
        left: var(--sideHeaderWidth) !important;
    }
     .drawer.active {
        margin-left: var(--sideHeaderWidth) !important;
    }
    .brand {    font-size: smaller;}
}

/* --- BOUTON RETOUR MOBILE --- */
.mobile-back-btn {
    cursor: pointer;
    align-items: center;
    justify-content: center;
    width: 44px;      /* Zone de clic idéale sur mobile (Standard Apple/Google) */
    height: 44px;
    margin-right: 8px; /* Espace avec le titre */
    text-decoration: none;
    border-radius: 50%; /* Bouton rond */
    transition: background-color 0.2s ease;
    /* Empêche la sélection de texte bleue sur mobile */
    -webkit-tap-highlight-color: transparent; 
}

.mobile-back-btn#btnRetour {     display: none;
    color: #a2a2a2;   /* Couleur de l'icône */
}

/* Effet visuel quand l'utilisateur pose le doigt dessus */
.mobile-back-btn:active {
    background-color: rgba(255, 255, 255, 0.15);
}

/* 2. On l'affiche UNIQUEMENT si l'app est installée (mode standalone ou fullscreen) */
@media (display-mode: standalone), (display-mode: fullscreen) {
    .mobile-back-btn {
        display: inline-flex; /* Mets 'flex' ou 'inline-block' si c'est ce que tu utilisais avant */
    }
}

.titre {	
    line-height: 1rem;
}

.titre small{
	    font-weight: lighter;
    font-style: italic;
    color: bisque;
    font-size: small;
}
.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;
  
   /* new  */
  text-decoration: none;
}

@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: .7rem .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: 190px;
}

.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; */
  padding: 1rem;
  color: var(--muted);
  font-size: smaller;
  text-align:center;
      background-color: #0000008f;
    /* background-clip: content-box; */
        border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}
.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__text {
     display: flex;
    align-items: center;
    gap: 1rem;
    padding-block: .5rem;
    text-align: left;
}
.category-info__text a {
    flex-shrink: 0;
    max-width: 30%;
}

.category-info__text a > img {
    width:100%;
    border-radius: 8px;
    filter: brightness(0.9) contrast(1.1);
}


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

.pwa-banner{
  position: fixed;
  left: max(12px, calc(12px + var(--safe-left)));
  right: max(12px, calc(12px + var(--safe-right)));
  bottom: max(12px, calc(24px + var(--safe-bottom)));
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: 1.5rem 2rem;
  border: 1px solid var(--stroke);
  border-radius: 16px;
  box-shadow: var(--shadow);
  /* background: linear-gradient(180deg, rgba(15,22,33,.96), rgba(7,12,20,.96)); */
  background: linear-gradient(180deg, rgb(84 11 11 / 60%), rgb(0 98 255 / 60%));
  backdrop-filter: blur(16px);
  
    max-width: 768px;
    margin: 0 auto;
}

.pwa-banner__content{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  /* font-size: 15px; */
}

.pwa-banner__content strong{
  font-size: 20px;
    text-shadow: 0 0 4px black;
    text-align: center;
}

.pwa-banner__actions{
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pwa-banner__install{
  /* background: rgba(255,215,0,.18); */
  background:   rgb(1 193 0 / 24%) !important;
  
    padding: .5rem 1rem;
    font-size: larger;
}

.pwa-banner__close{
      font-size: smaller;    background: transparent;
    border: none;
}

.pwa-offline-card{
  max-width: 760px;
  margin: 1rem auto;
}

.pwa-offline-media{
  min-height: 220px;
}

html.is-offline #status::after{
  content: " • hors ligne";
  color: #f1c40f;
}

@media (display-mode: standalone) {
  .pwa-banner{
    bottom: max(12px, calc(12px + var(--safe-bottom)));
  }
}

@media (max-width: 640px){
  .pwa-banner{
    flex-direction: column;
    align-items: stretch;
  }

  .pwa-banner__actions{
    justify-content: stretch;
  }

  .pwa-banner__actions .chip{
    width: 100%;
    text-align: center;
  }
}


/* Overlay qui prend tout l'écran */
.global-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px); /* L'effet de flou sur le fond */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s;
}

.loader-content {
    text-align: center;
    color: white;
    width: 250px;
}

/* Style de la barre de progression */
.progress-container {
    width: 100%;
    height: 6px;
    background: #222;
    border-radius: 10px;
    margin: 15px 0 5px 0;
    overflow: hidden;
}

.progress-bar {
    width: 0%; /* Piloté par le JS */
    height: 100%;
    background: linear-gradient(90deg, #ff4b2b, #ff416c);
    box-shadow: 0 0 10px rgba(255, 75, 43, 0.5);
    /* transition: width 0.3s ease; */
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

#loader-percentage {
    font-size: 0.8rem;
    color: #888;
}


/* Limite le paragraphe à 3 lignes */
.text-cropped {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Modifie ce chiffre pour afficher plus ou moins de lignes */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Annule la limite pour tout afficher */
.text-expanded {
    -webkit-line-clamp: unset;
}

/* ==========================================================================
   NAVIGATION DRAWER (Material Design & DA AlonBatCare)
   ========================================================================== */
 :root {
    --largeurDrawer: 280px;
    --drawerOffsetLeft: 0px;
    --drawerPaddingY: 15px;
    --drawerPaddingX: 20px;
}

.drawer {
    position: fixed;
    top: 0;
    left: var(--drawerOffsetLeft);

    width: min(var(--largeurDrawer), calc(100vw - var(--drawerOffsetLeft)));
    height: 100%;

    background: var(--card);
    color: var(--text);
    z-index: 1000;

    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--stroke);

    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}

.drawer.active {
    transform: translateX(0);
}

.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(3px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
}

.drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

.drawer-header {
    padding: var(--drawerPaddingY) var(--drawerPaddingX);
    border-bottom: 1px solid var(--stroke);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.drawer-menu {
    flex: 1;
    padding: 15px 10px;
    overflow-y: auto;
}

/* Liens du menu (Style "Boutons arrondis" Material You) */
.drawer-link {
    display: flex; align-items: center;
    padding: 10px 16px; margin-bottom: 5px;
    text-decoration: none; color: var(--muted);
    font-weight: 600; font-size: 0.95rem;
    border-radius: 12px;
    transition: background 0.2s, color 0.2s;
}
.drawer-link:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); }

/* État sélectionné (Accent bleu IPGP/OVPF) */
.drawer-link.selected {
    background: rgba(52, 152, 219, 0.15);
    color: #3498db;
}

.drawer-footer {
    padding: 10px;
    border-top: 1px solid var(--stroke);
    background: rgba(0,0,0,0.2);
}

/* --- Masquer le bouton d'installation du Drawer si l'app est déjà installée (PWA) --- */
html.is-standalone #drawer-install-btn {
    display: none !important;
}


#menu-burger {      background-color: transparent;
    font-size: large;
color: peachpuff;   }

/* ---------------------------------- */

/* Rend les images cliquables sans toucher à tes classes existantes */
[data-panzoom-image],
/* .card img, */
/* .sat-card-media, */
img[data-full],
a[data-full]
 {
    cursor: zoom-in;
}

.full-image-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    cursor: zoom-out;
}

.full-image-overlay img {
    max-width: 96vw;
    max-height: 92vh;
    object-fit: contain;
    border-radius: var(--radius, 12px);
    box-shadow: var(--shadow, 0 12px 40px rgba(0,0,0,.45));
}

/* ----------------- */