:root{
  /* Palette claire */
  --bg: #f6f7fb;
  --paper: rgba(255,255,255,.86);
  --paper-strong: rgba(255,255,255,.94);
  --text: #111827;        /* gris très foncé */
  --muted: #4b5563;       /* gris */
  --line: rgba(17,24,39,.10);
  --accent: #1f6feb;      /* bleu doux */
  --accent2:#16a34a;      /* vert discret */
  --shadow: 0 10px 26px rgba(17,24,39,.10);
  --radius: 18px;

  --topbar-h: 68px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;

  /* Image + voile clair pour la lisibilité */
  background:
    linear-gradient(180deg, rgba(246,247,251,.80), rgba(246,247,251,.80)),
    url("../assets/img/besancon.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.wrap{max-width: 1020px; margin:0 auto; padding: 18px;}
.hidden{display:none !important;}
.muted{color:var(--muted)}
.spacer{height:18px}

/* Topbar */
.topbar{
  position: sticky; top:0; z-index:10;
  height: var(--topbar-h);
  display:flex; align-items:center;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
}

/* Marque */
.brand{display:flex; align-items:center; gap:12px;}
.brand__logo{
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 8px 18px rgba(17,24,39,.08);
}
.brand__title{font-weight:800; letter-spacing:.2px}
.brand__subtitle{font-size:.92rem; color:var(--muted)}

/* Navigation */
.nav{
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
}
.nav__inner{
  display:flex; gap:10px; flex-wrap:wrap;
  padding-top:10px; padding-bottom:10px;
}
.nav__link{
  text-decoration:none; color:var(--muted);
  padding:10px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.nav__link:hover{
  color:var(--text);
  border-color: var(--line);
  background: rgba(17,24,39,.03);
}
.nav__link--active{
  color:var(--text);
  border-color: rgba(31,111,235,.22);
  background: rgba(31,111,235,.08);
}

/* Hero clair, respirant, avec petite croix discrète */
.hero{
  margin-top: 18px;
  padding: 18px;
  border-radius: calc(var(--radius) + 6px);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  position: relative;
  overflow:hidden;
}
.hero{
  position: relative;
  overflow: hidden;

  /* On réserve de la place à droite pour que l'image n'empiète jamais sur les cartes */
  padding-right: 300px;
}

.hero > *{
  position: relative;
  z-index: 1; /* tout le contenu au-dessus */
}

.hero::before{
  content:"";
  position:absolute;
  right: 18px;
  top: 18px;

  width: 260px;
  height: 180px;

  background: url("../assets/img/escalejeunes_gravurecolor.png") center / contain no-repeat;

  opacity: 1;          /* 100% opaque */
  z-index: 0;          /* derrière le texte/cartes */
  pointer-events:none;
}


/* Sur mobile : on réduit fortement (ou on masque) pour éviter tout chevauchement */
@media (max-width: 760px){
  .hero{
    padding-right: 18px;   /* on ne réserve plus une grande marge à droite */
    padding-top: 190px;    /* on réserve une place en haut pour l'image */
  }

  .hero::before{
    left: 50%;
    right: auto;
    top: 14px;
    transform: translateX(-50%);

    width: 260px;
    height: 160px;
  }
}



.hero h1{margin: 6px 0 8px; font-size: 2rem;}
.hero p{margin:0 0 14px; color:var(--muted); max-width: 75ch;}

.hero__grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}

.grid2{
  display:grid; gap:12px;
  grid-template-columns: repeat(2, minmax(0,1fr));
  margin-top: 12px;
}
@media (max-width: 760px){
  .hero__grid, .grid2{grid-template-columns: 1fr;}
  body{background-attachment: scroll;}
}

/* Cartes/panels blancs */
.card, .panel{
  background: var(--paper-strong);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card{
  padding: 14px 14px;
  text-decoration:none;
  color:var(--text);
  transition: transform .08s ease, box-shadow .08s ease;
}
.card h2, .card h3{margin: 4px 0 8px;}
.card p{margin:0; color:var(--muted)}
.card:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(17,24,39,.12);
  border-color: rgba(31,111,235,.20);
}

.panel{padding: 14px;}
.panel__head{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.panel h1{margin:0; font-size: 1.55rem;}
.panel h2{margin:0; font-size: 1.15rem;}

/* Toolbar */
.toolbar{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-bottom: 12px;
}
.input, .select{
  padding: 10px 12px;
  border-radius: 12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.85);
  color: var(--text);
  outline: none;
}
.input{flex: 1 1 220px;}
.select{flex: 0 0 200px;}
.input::placeholder{color: rgba(75,85,99,.75);}

/* Listes */
.list{display:grid; gap:10px;}
.item{
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,.96);
}
.item__top{
  display:flex; justify-content:space-between; gap:10px; align-items:flex-start;
}

/* Badges plus doux */
.badge{
  display:inline-flex; gap:6px; align-items:center;
  font-size:.85rem;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid var(--line);
  color: var(--muted);
  background: rgba(17,24,39,.03);
  white-space:nowrap;
}
.badge--urgent{
  border-color: rgba(220,38,38,.20);
  color: #991b1b;
  background: rgba(220,38,38,.08);
}
.badge--ok{
  border-color: rgba(22,163,74,.22);
  color: #166534;
  background: rgba(22,163,74,.08);
}
.badge--need{
  border-color: rgba(31,111,235,.22);
  color: #1d4ed8;
  background: rgba(31,111,235,.09);
}

.item h3{margin: 2px 0 6px;}
.item p{margin:0; color: var(--muted);}

/* Boutons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 12px;
  border-radius: 12px;
  border:1px solid rgba(31,111,235,.25);
  background: rgba(31,111,235,.10);
  color: var(--text);
  text-decoration:none;
  cursor:pointer;
}
.btn:hover{background: rgba(31,111,235,.14);}
.btn--ghost{
  border-color: var(--line);
  background: rgba(17,24,39,.03);
}
.btn--ghost:hover{background: rgba(17,24,39,.05);}

.link{color: var(--accent); text-decoration:none;}
.link:hover{text-decoration:underline;}

/* Notice */
.notice{
  padding: 12px;
  border-radius: 14px;
  border:1px solid rgba(22,163,74,.20);
  background: rgba(22,163,74,.08);
  color: var(--text);
}

/* Footer */
.footer{padding: 18px 0 26px;}
.footer__inner{
  display:flex; gap:10px; align-items:center;
  color: var(--muted);
}
.brand-logo{
  width: 40px;
  height: 40px;
  display:block;
  object-fit: contain;
}
.card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.card__icon{
  width: 42px;
  height: 42px;
  object-fit: contain;
  opacity: .92;
}

.item__left{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.item__icon{
  width: 36px;
  height: 36px;
  object-fit: contain;
  opacity: .95;
}

/* --- Cartes dépliables --- */
.item--expand {
  padding: 0;
  overflow: hidden;
}

.item--expand > summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 18px;
  outline: none;
}

.item--expand > summary::-webkit-details-marker {
  display: none;
}

.item--expand[open] > summary {
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.item__body {
  padding: 14px 18px 18px 18px;
}

.item__meta {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.item__icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  opacity: 0.9;
}

.item__img {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: 14px;
  margin-top: 12px;
  border: 1px solid rgba(0,0,0,0.06);
}

.item__link {
  display: inline-block;
  margin-top: 10px;
}
.item {
  cursor: pointer;
}

.item__summary {
  list-style: none;
}

.item__summary::-webkit-details-marker {
  display: none;
}

.item[open] {
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

.item__details {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

/* === Cartes avec image (toujours visible, taille fixe) === */

.item--with-image{
  display:flex;
  gap:16px;
  align-items:flex-start; /* important : ne pas étirer l’image */
}

.item__image{
  flex: 0 0 160px;        /* largeur fixe */
  width:160px;
  height:110px;           /* hauteur fixe => plus d’image géante */
  border-radius:12px;
  overflow:hidden;
  align-self:flex-start;  /* important */
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(17,24,39,.03);
}

.item__image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Mobile : image au-dessus */
@media (max-width: 700px){
  .item--with-image{flex-direction:column;}
  .item__image{
    width:100%;
    flex: 0 0 auto;
    height:180px;
  }
}

/* --- Vignettes (images visibles même sans ouvrir la bulle) --- */
.item__summary {
  list-style: none;
  cursor: pointer;
}
.item__summary::-webkit-details-marker {
  display: none;
}

/* corps de la bulle (texte + vignette) */
.item__body {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.item__main {
  flex: 1;
  min-width: 0;
}

.item__thumb {
  flex: 0 0 200px;
  width: 200px;
}
.item__thumb img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.08);
  display: block;
}

/* grande image dans les détails */
.item__media {
  margin: 10px 0 14px;
}
.item__media img {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.08);
  display: block;
}

/* responsive */
@media (max-width: 900px) {
  .item__body {
    flex-direction: column;
  }
  .item__thumb {
    width: 100%;
    flex-basis: auto;
  }
  .item__thumb img {
    height: 180px;
  }
}

/* ========== FIX MOBILE : annonces/activités avec item__grid ========== */
@media (max-width: 600px) {

  /* Sur mobile : une seule colonne (texte puis image) */
  .item__grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: start !important;
  }

  /* L'image ne doit jamais déborder ni chevaucher */
  .item__media{
    width: 100% !important;
    max-width: 100% !important;
  }

/* Miniature visible sans ouvrir (la classe est sur <img>) */
.item__thumb{
  flex: 0 0 200px;
  width: 200px;
  height: 120px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.08);
  display: block;
}

/* Sur petits écrans : miniature en dessous du texte */
@media (max-width: 900px){
  .item__thumb{
    width: 100%;
    flex: 0 0 auto;
    height: 180px;
  }
}


  /* Si vous forcez une hauteur ailleurs, on garde un rendu propre */
  .item__media .item__thumb{
    aspect-ratio: 16 / 9;         /* optionnel, joli pour les miniatures */
  }
}

/* ===== Topbar panoramas : centré + responsive propre ===== */

.topbar--panorama .topbar__inner--panorama{
  display: grid;
  grid-template-columns: minmax(140px, 240px) auto minmax(140px, 240px);
  align-items: center;
  gap: 14px;
}

/* Images gauche/droite : taille maîtrisée */
.topbar--panorama .topbar__panorama{
  width: 100%;
  max-width: 240px;
  height: 56px;
  object-fit: contain;
  display: block;
}
.topbar--panorama .topbar__panorama--left{ justify-self: end; }
.topbar--panorama .topbar__panorama--right{ justify-self: start; }

.topbar--panorama .brand--center{
  text-align: center;
}
.topbar--panorama .brand--center .brand__title{
  font-weight: 800;
}

/* Mobile : on met le titre au-dessus, et les 2 panoramas en dessous sur une ligne */
@media (max-width: 700px){
  .topbar--panorama .topbar__inner--panorama{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand brand"
      "left  right";
    justify-items: center;
    gap: 8px 10px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .topbar--panorama .brand--center{ grid-area: brand; }
  .topbar--panorama .topbar__panorama--left{ grid-area: left; justify-self: end; }
  .topbar--panorama .topbar__panorama--right{ grid-area: right; justify-self: start; }

  .topbar--panorama .topbar__panorama{
    max-width: 170px;
    height: 36px;
  }
}
/* Logo texte -> image (escale.png) */
.brand__mark{
  display:block;
  height: 52px;        /* ajustez si vous voulez plus petit/grand */
  width: auto;
  max-width: 260px;
  object-fit: contain;
}
@media (max-width: 700px){
  .brand__mark{ height: 44px; max-width: 220px; }
}

/* === Layout standard des cartes avec vignette (DESKTOP) === */
.item__grid{
  display: grid;
  grid-template-columns: 1fr 220px; /* texte | vignette */
  gap: 16px;
  align-items: start;
}

.item__media{
  width: 220px;
  justify-self: end;
}

img.item__thumb{
  display:block;
  width: 220px;
  height: 130px;      /* taille “vignette” */
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.08);
}

/* === MOBILE : texte puis image en dessous, pleine largeur === */
@media (max-width: 700px){
  .item__grid{
    grid-template-columns: 1fr;
  }
  .item__media{
    width: 100%;
    justify-self: stretch;
  }
  img.item__thumb{
    width: 100%;
    height: 180px;
  }
}

/* =========================================================
   EN-TÊTE : VERSION MOBILE SIMPLIFIÉE
   - on garde uniquement escale.png
   - on supprime les panoramas
   ========================================================= */

@media (max-width: 700px){

  /* On cache complètement les panoramas */
  .topbar__panorama{
    display: none !important;
  }

  /* On simplifie la grille : une seule colonne */
  .topbar--panorama .topbar__inner--panorama{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* Le logo central reste seul et bien centré */
  .topbar--panorama .brand--center{
    text-align: center;
  }

  .brand__mark{
    height: 42px;        /* taille adaptée au mobile */
    max-width: 220px;
  }
}

/* =========================
   HEADER : diapo (ordi) / logo (mobile)
   ========================= */

.topbar__inner--diapo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.topbar__diapo {
  display: block;
  width: min(1700px, 100%);
  height: auto;
}

/* Par défaut : on cache la version mobile */
.brand--mobile {
  display: none;
}

/* Mobile : on garde seulement escale.png */
@media (max-width: 720px) {
  .topbar__diapo {
    display: none;
  }

  .brand--mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 6px 0;   /* espace respirant mais contenu */
  }

  .brand--mobile .brand__mark {
    height: 42px;     /* ← clé du problème */
    max-width: 220px;
    width: auto;
    object-fit: contain;
  }
}

/* =========================
   HEADER : desktop / mobile
   ========================= */

/* Desktop */
.topbar__diapo {
  display: block;
  width: min(1700px, 100%);
  height: auto;
}

/* Mobile : caché par défaut */
.topbar__diapo--mobile {
  display: none;
}

/* ---------- MOBILE ---------- */
@media (max-width: 720px) {

  /* On cache la grande banderole */
  .topbar__diapo {
    display: none;
  }

  /* On affiche la frise mobile */
  .topbar__diapo--mobile {
    display: block;
    width: 100%;
    max-height: 110px;   /* ← CLEF : évite l’effet “énorme” */
    object-fit: contain;
  }

  .topbar__inner--diapo {
    padding: 6px 0;
  }
}

.thumblink { display: inline-block; }
.thumblink img { cursor: zoom-in; }

.files__list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}

.files__link {
  display: inline-block;
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
}

.files__link:hover {
  text-decoration: underline;
}