: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/gravure.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 (bandeau) */
.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 le bandeau
   - 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 le bandeau */
@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;
}

/* Séparateur "Activités passées" */
.list__separator{
  display:flex;
  align-items:center;
  gap:12px;
  margin: 18px 0 10px;
  color:#6b7280;
  font-weight:600;
}
.list__separator::before,
.list__separator::after{
  content:"";
  height:1px;
  flex:1;
  background: rgba(107,114,128,.25);
}

/* Activités passées : style visuel */
.item--past{
  opacity: .85;
  border: 1px solid rgba(220, 38, 38, .25); /* rouge doux */
}

.badge--past{
  background: rgba(220, 38, 38, .12);
  border: 1px solid rgba(220, 38, 38, .35);
  color: rgb(185, 28, 28);
}

/* ===== Bandeau nouveautés (discret, fermable) ===== */
.banner{
  margin: 10px 0 14px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(31,111,235,.18);
  background: rgba(31,111,235,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.banner__text{
  color: var(--text);
}

.banner__close{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.75);
  width: 34px;
  height: 34px;
  border-radius: 10px;
  cursor: pointer;
  line-height: 1;
  font-size: 20px;
}

.banner__close:hover{
  background: rgba(255,255,255,.92);
}


/* ===================================================
   VIE DE LA COMMUNAUTÉ — cartes articles + modal + carousel
   =================================================== */

/* --- Grille des articles --- */
.vie-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 700px) {
  .vie-grid { grid-template-columns: 1fr; }
}

/* --- Carte article --- */
.vie-card {
  background: var(--paper-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform .08s ease, box-shadow .08s ease;
}
.vie-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(17,24,39,.14);
  border-color: rgba(31,111,235,.22);
}

.vie-card__cover {
  width: 100%;
  height: 180px;
  overflow: hidden;
  background: var(--bg);
  flex-shrink: 0;
}
.vie-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .28s ease;
}
.vie-card:hover .vie-card__cover img {
  transform: scale(1.04);
}

.vie-card__body {
  padding: 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vie-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.vie-card__body h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
}
.vie-card__body p {
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
  flex: 1;
}
.vie-card__hint {
  font-size: .82rem;
  color: var(--accent);
  margin-top: 4px;
}

/* --- Modal --- */
.vie-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px 40px;
  overflow-y: auto;
}
.vie-modal.is-open { display: flex; }

.vie-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(17,24,39,.58);
  backdrop-filter: blur(5px);
  z-index: -1;
}

.vie-modal__inner {
  background: var(--paper-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 28px 64px rgba(17,24,39,.22);
  width: 100%;
  max-width: 720px;
  margin: auto;
  overflow: hidden;
}

.vie-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--line);
}
.vie-modal__header h2 {
  margin: 0 0 6px;
  font-size: 1.3rem;
  line-height: 1.3;
}
.vie-modal__header-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.vie-modal__close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.75);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vie-modal__close:hover { background: rgba(255,255,255,.96); }

.vie-modal__content {
  padding: 18px;
  color: var(--text);
  line-height: 1.7;
  white-space: pre-wrap;
  font-size: .97rem;
}

/* --- Carousel --- */
.vie-carousel { position: relative; background: #0d0d0d; }

.vie-carousel__viewport {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.vie-carousel__track {
  display: flex;
  height: 100%;
  transition: transform .3s ease;
}
.vie-carousel__slide {
  flex: 0 0 100%;
  height: 100%;
  position: relative;
}
.vie-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.vie-carousel__legend {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(17,24,39,.68);
  color: #fff;
  font-size: .87rem;
  padding: 8px 14px;
}

.vie-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  width: 40px; height: 40px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  z-index: 2;
  transition: background .1s;
  line-height: 1;
}
.vie-carousel__btn:hover { background: rgba(255,255,255,.97); }
.vie-carousel__btn--prev { left: 10px; }
.vie-carousel__btn--next { right: 10px; }

.vie-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 10px 0 9px;
  background: #0d0d0d;
}
.vie-carousel__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.30);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .15s;
}
.vie-carousel__dot.is-active { background: rgba(255,255,255,.92); }

/* ==================== AGENDA ==================== */
.btn--small{padding:7px 10px; font-size:.92rem; border-radius:10px;}
.agenda-bar{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 12px;}
.agenda-bar__hint{font-size:.88rem;}
.agenda-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px !important;}

/* ==================== OUTILS ==================== */
.step{font-size:1.05rem; margin:18px 0 8px;}
.seg{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.seg .btn{min-width:64px;}
.seg .btn.is-active{background: rgba(31,111,235,.22); border-color: rgba(31,111,235,.5); font-weight:700;}
.input--n{max-width:110px;}
.menu-groupe{border:1px solid var(--line); border-radius:14px; padding:10px 12px; margin:0 0 10px; background:rgba(255,255,255,.6);}
.menu-groupe legend{padding:0 6px; font-weight:700; color:var(--muted);}
.menu-groupe__items{display:flex; flex-wrap:wrap; gap:8px;}
.menu-choix{display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border:1px solid var(--line); border-radius:999px; background:#fff; cursor:pointer;}
.menu-choix:has(input:checked){border-color:rgba(31,111,235,.45); background:rgba(31,111,235,.10);}
.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:10px 0 14px;}
.stat{display:flex; flex-direction:column; align-items:center; padding:10px; border:1px solid var(--line); border-radius:14px; background:#fff;}
.stat__v{font-size:1.35rem; font-weight:800;}
.stat__l{font-size:.85rem; color:var(--muted);}
@media (max-width:620px){.stats{grid-template-columns:repeat(2,minmax(0,1fr));}}
.rayon h3{margin:14px 0 6px;}
.courses{list-style:none; margin:0; padding:0; display:grid; gap:4px;}
.courses li{display:grid; grid-template-columns:1fr auto 70px; gap:10px; align-items:center; padding:6px 8px; border-radius:10px;}
.courses li:hover{background:rgba(17,24,39,.03);}
.courses li.is-done{opacity:.5;}
.courses li.is-done .courses__nom{text-decoration:line-through;}
.courses label{display:flex; gap:8px; align-items:center; cursor:pointer;}
.courses__qte{font-weight:700; white-space:nowrap;}
.courses__cout{text-align:right; font-variant-numeric:tabular-nums;}
.actions{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0;}
.recette h4{margin:12px 0 4px;}
.recette ul{margin:4px 0; padding-left:20px;}
.ing{list-style:none; padding:0 !important; margin:0;}
.ing li{display:flex; justify-content:space-between; gap:10px; padding:3px 0; border-bottom:1px dashed var(--line);}
.prix-ligne{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:4px 0;}
.prix-ligne input{width:90px; padding:6px 8px; border-radius:8px; border:1px solid var(--line);}
.flash{position:fixed; bottom:18px; left:50%; transform:translateX(-50%); background:#111827; color:#fff; padding:10px 16px; border-radius:12px; z-index:50;}
.outils-details{margin-top:12px;}
.outils-details summary{cursor:pointer; font-weight:700; padding:8px 0;}

/* ==================== LITURGIE ==================== */
.lit-nav{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0 14px;}
.lit-nav .input{flex:0 0 auto;}
.lit-chip{display:inline-block; padding:6px 12px; border-radius:999px; font-weight:700; border:1px solid var(--line);}
.lit-chip--violet{background:#ede7f6; color:#4a2c82;}
.lit-chip--blanc{background:#fff; color:#374151; border-color:#9ca3af;}
.lit-chip--vert{background:#e3f4e8; color:#14532d;}
.lit-chip--rouge{background:#fde8e8; color:#991b1b;}
.lit-chip--rose{background:#fde7f1; color:#9d174d;}
.lit-titre{margin:6px 0 4px;}
.lit-fetes{margin:8px 0 0; padding-left:20px;}
.lit-messes{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0;}
.lit-messes .is-active{background:rgba(31,111,235,.18); border-color:rgba(31,111,235,.45);}
.lit-lecture{margin:16px 0; padding-bottom:12px; border-bottom:1px solid var(--line);}
.lit-ref{font-weight:400; color:var(--muted); font-size:.92rem; margin-left:6px;}
.lit-texte p{margin:0 0 10px; line-height:1.55;}
.lit-refrain{font-style:italic;}

/* ==================== AVENT ==================== */
.avent-top{display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;}
.avent-grille{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-top:14px;}
.avent-case{border:1px solid var(--line); border-radius:14px; background:#fff; overflow:hidden;}
.avent-case__tete{all:unset; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:100%; min-height:92px; padding:10px; cursor:pointer; text-align:center; position:relative; background:linear-gradient(180deg,#f3e8ff,#fff);}
.avent-case__tete:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
.avent-case__tete:disabled{cursor:not-allowed; background:#f3f4f6; color:#9ca3af;}
.avent-case__date{font-size:.85rem; color:var(--muted);}
.avent-case__num{font-size:1.8rem; font-weight:800; color:#6b4fa0;}
.avent-case__theme{font-size:.85rem; font-weight:700; color:#6b4fa0;}
.avent-case__cadenas{position:absolute; top:6px; right:8px; font-size:.9rem;}
.avent-case.is-today{outline:3px solid #fbbf24;}
.avent-case.is-sunday .avent-case__tete{background:linear-gradient(180deg,#ede9fe,#fff);}
.avent-case.is-open{grid-column:span 2;}
.avent-case__corps{padding:10px 12px 14px; border-top:1px solid var(--line);}
.avent-geste{font-weight:600; margin:0 0 6px;}
.avent-aujourdhui{margin-top:14px;}

/* ==================== IMPRESSION ==================== */
@media print{
  .topbar, .nav, .footer, .toolbar, .actions, .no-print, .step, #menuChoix, #prixDetails, .flash{display:none !important;}
  body{background:#fff;}
  .panel, .item{box-shadow:none; border:none;}
}

/* Recettes : filtres et repères de difficulté / prix */
.menu-filtres{margin:0 0 10px;}
.menu-filtres .is-active{background:rgba(31,111,235,.12); border-color:rgba(31,111,235,.45);}
.menu-choix span{display:flex; flex-direction:column; line-height:1.25;}
.menu-choix__meta{color:var(--muted); font-size:.78rem; font-weight:400;}