/**
 * CMDC — correctifs responsive additifs (téléphone / tablette).
 * Ne s'applique qu'en dessous de 1024px pour préserver le rendu PC paysage.
 * Ne modifie pas les scripts, formulaires, menus ni la structure HTML.
 */

/* Flèche retour — dans le cadre noir (album vignettes) */
#vign_header {
  position: relative;
  /* place pour la pastille en haut à gauche, sans trou hors cadre */
  padding-top: 3.1rem !important;
}

/* Lecteur photo : fond noir (à la place du gris #222) */
#photo,
#photo figure {
  background-color: #000 !important;
}
a.back-nav {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.45rem;
  padding: 0.38rem 0.8rem 0.38rem 0.5rem;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  background: linear-gradient(145deg, rgba(255, 150, 40, 0.95), rgba(210, 95, 15, 0.92));
  border: 1px solid rgba(255, 220, 170, 0.55);
  box-shadow:
    0 0.35rem 1rem rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
a.back-nav svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
  fill: currentColor;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.2));
}
a.back-nav span {
  line-height: 1;
  padding-right: 0.1rem;
}
a.back-nav:hover,
a.back-nav:focus-visible {
  transform: translateX(-2px) scale(1.03);
  filter: brightness(1.06);
  box-shadow:
    0 0.45rem 1.15rem rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  outline: none;
}
a.back-nav:active {
  transform: translateX(-1px) scale(0.98);
}
@media screen and (max-width: 1023px) {

  /* Garde-fou : éviter le scroll horizontal accidentel */
  html {
    overflow-x: clip;
  }
  body,
  #accueil,
  .bonjour,
  #nous,
  #listing,
  #profil {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  img:not(.logo_face),
  video,
  iframe {
    max-width: 100%;
    height: auto;
  }

  /* Icône Facebook : rester carrée (ne pas s'écraser) */
  .logo_f a {
    width: auto !important;
    max-width: 100%;
    display: inline-block;
  }
  img.logo_face,
  .logo_face {
    width: min(100px, 28vw) !important;
    height: min(100px, 28vw) !important;
    max-width: min(100px, 28vw) !important;
    max-height: min(100px, 28vw) !important;
    aspect-ratio: 1 / 1;
    object-fit: contain;
  }

  /* Présentation / Infos / Statuts : min-widths trop larges */
  #nous .texte,
  #nous .miroir {
    min-width: 0 !important;
    max-width: 100%;
  }
  .cadre {
    flex-wrap: wrap;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Tableaux (comité…) : scroll interne — calendrier agenda exclus */
  #calendrier:not(.cmc-cal),
  #next_table:not(.cmc-next-list),
  #nous table,
  #comite table,
  #accueil table:not(.cmc-cal) {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Réservations : grille dates trop large (6 colonnes max-content) */
  #reserv_date {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-gap: 0.5rem 0.6rem;
    overflow-x: auto;
  }
  #reserv_date > * {
    min-width: 0;
    word-break: break-word;
  }
  #reserv_date button,
  #reserv_date .span_c6 {
    grid-column: 1 / -1;
  }

  /* Accueil / pages shell : 1 colonne si étroit (évite 2 col. en paysage téléphone) */
  #accueil {
    height: auto !important;
    min-height: calc(98.6vh - 40px - 1.7vw);
  }
  #accueil #image {
    max-width: 100%;
    min-width: 0;
  }
  #accueil .bonjour {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Login header : rester dans le viewport */
  #log:checked ~ form,
  #login form {
    width: min(92vw, 22rem) !important;
    max-width: calc(100vw - 1.5rem);
    left: 0.5rem !important;
    right: auto;
    box-sizing: border-box;
  }

  /* Affiches / galeries événements */
  #affiches {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
  }
  #affiches img {
    min-width: 0 !important;
    max-width: 42vw;
    width: auto;
  }
  .bton_affiche {
    min-width: 0 !important;
  }

  /* Distribution */
  #liste_role {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)) !important;
  }

  /* Zone membre : listing / profil (si connecté) */
  #listing form {
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  #listing form > * {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }
  #profil {
    flex-wrap: wrap;
    max-width: 100%;
  }
  #general,
  #mesure {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Téléphone réservation : autoriser le retour à la ligne */
  .nowrap {
    white-space: normal;
  }

  /* Photo viewer : hauteurs moins agressives */
  #vign_header img {
    height: auto !important;
    max-height: 14rem;
    width: auto;
    max-width: 100%;
  }

  /* Manifestation / soirée : lecteur audio ne doit pas sortir de la page */
  #vign_header {
    flex-wrap: wrap;
    max-width: 100%;
    box-sizing: border-box;
  }
  #vign_header h2,
  #vignettes h2,
  #affichet,
  #music,
  #vign_header > div {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  #affichet {
    text-align: center;
  }
  #music {
    display: flex;
    justify-content: center;
    padding: 0.6rem 0.4rem 0.8rem;
  }
  #music audio,
  #accueil audio,
  audio {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Presse / livre 3D : contenir #galerie dans le viewport */
  #livre {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  #galerie {
    left: 5vw !important;
    width: 90vw !important;
    max-width: 90vw;
  }
  #before,
  #after {
    max-width: 20vw;
  }
}

/* Portrait / très étroit : forcer colonne pour #accueil même en paysage étroit */
@media screen and (max-width: 900px) {
  #accueil {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
  }
  #accueil #image {
    width: 100% !important;
    height: auto !important;
    max-height: 42vh;
    overflow: hidden;
  }
  #accueil .bonjour {
    display: block;
    width: 100%;
    padding-left: 2vw;
    padding-right: 2vw;
  }
  #nous .cadre,
  .cadre {
    flex-direction: column !important;
  }
}

/* Téléphone très étroit */
@media screen and (max-width: 480px) {
  #reserv_date {
    grid-template-columns: 1fr !important;
  }
  #affiches img {
    max-width: 70vw;
  }
}

/* ========== Agenda modern UI (compact) ========== */
.cmc-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Image gauche : même logique que l’accueil (pas d’override max-height / object-fit) */
.cmc-agenda-page .bonjour > h2 {
  margin-top: 0.15rem;
  margin-bottom: 0.25rem;
}
.cmc-agenda-page .bonjour > p.space_top {
  margin: 0.2rem 0 0.4rem;
  font-size: 0.92em;
  line-height: 1.35;
}

.cmc-agenda {
  --cmc-cal-ink: #3a342e;
  --cmc-cal-muted: #7a7168;
  --cmc-cal-line: rgba(58, 52, 46, 0.12);
  --cmc-cal-soft: #f7f3ee;
  /* pastilles & flèches : s’adaptent à la largeur d’écran */
  --cmc-dot: clamp(1.4rem, 2.8vw + 0.55rem, 2.4rem);
  --cmc-nav: clamp(1.85rem, 3.2vw + 0.7rem, 2.65rem);
  width: 100%;
  max-width: 100%;
  margin: 0.55rem 0 0.25rem;
  color: var(--cmc-cal-ink);
  box-sizing: border-box;
}

.cmc-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.cmc-cal-arrow {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: var(--cmc-nav);
  height: var(--cmc-nav);
  padding: 0 !important;
  margin: 0;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--cmc-cal-line);
  color: chocolate !important;
  text-decoration: none !important;
  line-height: 0;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
.cmc-cal-arrow .cmc-cal-chevron {
  display: block;
  width: 55%;
  height: 55%;
  flex: 0 0 auto;
}
.cmc-cal-arrow:hover,
.cmc-cal-arrow:focus-visible {
  background: rgba(255, 190, 100, 0.28);
}

.cmc-cal-jump {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-width: 0;
  margin: 0;
}
.cmc-cal-jump select {
  min-width: 0;
  flex: 1 1 0;
  max-width: 9.5rem;
  height: var(--cmc-nav);
  padding: 0 0.35rem;
  border-radius: 999px;
  border: 1px solid var(--cmc-cal-line);
  background: #fff;
  font-size: clamp(0.75rem, 0.35vw + 0.7rem, 0.92rem);
  font-weight: 700;
  color: orange;
  text-align: center;
  text-align-last: center;
}
.cmc-cal-go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cmc-nav);
  height: var(--cmc-nav);
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: 1px solid var(--cmc-cal-line);
  background: rgba(255, 165, 0, 0.18);
  color: chocolate;
  font-size: calc(var(--cmc-nav) * 0.32);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cmc-cal-go:hover,
.cmc-cal-go:focus-visible {
  background: rgba(255, 165, 0, 0.32);
}

.cmc-cal {
  width: 100%;
  border-collapse: separate;
  border-spacing: clamp(0.08rem, 0.4vw, 0.18rem);
  table-layout: fixed;
  background: transparent;
}
.cmc-cal thead th {
  padding: 0.15rem 0;
  font-size: clamp(0.58rem, 0.3vw + 0.5rem, 0.72rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--cmc-cal-muted);
  text-align: center;
  vertical-align: middle;
}

/* Annule les paddings hérités de style.css (#calendrier td / .special a) */
#calendrier.cmc-cal td,
.cmc-cal td {
  padding: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
}
.cmc-cal .special a,
.cmc-cal a {
  padding: 0 !important;
  margin: 0 !important;
}

.cmc-cal-cell,
.cmc-cal-empty {
  height: calc(var(--cmc-dot) + 0.3rem);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.cmc-cal-empty {
  background: transparent !important;
}

/* Pastille ronde centrée — couleurs = notes ♫ (mêmes noms CSS) */
.cmc-cal-cell > a,
.cmc-cal-cell > span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: var(--cmc-dot);
  height: var(--cmc-dot);
  max-width: 100%;
  margin: 0 auto;
  padding: 0 !important;
  border-radius: 50%;
  background: var(--cmc-cal-soft);
  border: 2px solid transparent;
  box-sizing: border-box;
  text-decoration: none !important;
  vertical-align: middle;
}
.cmc-cal-daynum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: calc(var(--cmc-dot) * 0.42);
  font-weight: 600;
  color: var(--cmc-cal-ink);
  line-height: 1;
  text-align: center;
}
.cmc-cal-cell.is-weekend > a,
.cmc-cal-cell.is-weekend > span {
  background: rgba(0, 0, 0, 0.04);
}
/* « Aujourd’hui » : marqueur sombre distinct (pas une couleur de légende ♫) */
.cmc-cal-cell.is-today > a,
.cmc-cal-cell.is-today > span {
  /* double anneau ardoise — lisible même s’il y a un événement coloré */
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3.5px #2c3340;
}
.cmc-cal-cell.is-today:not(.has-event) > a,
.cmc-cal-cell.is-today:not(.has-event) > span {
  background: #fff;
  border: 2px dashed #2c3340;
  box-shadow: none;
}
.cmc-cal-cell.is-today:not(.has-event) .cmc-cal-daynum {
  color: #2c3340;
  font-weight: 800;
}
.cmc-cal-cell.has-event .cmc-cal-daynum {
  font-weight: 800;
  /* halo blanc pour lisibilité sur fond teinté */
  text-shadow:
    0 0 2px #fff,
    0 0 3px #fff,
    0 1px 0 #fff,
    1px 0 0 #fff,
    -1px 0 0 #fff;
}

/* Fonds / contours = couleurs exactes des notes (style.css) */
.cmc-cal-cell.evt-spectacle > a,
.cmc-cal-cell.evt-spectacle > span {
  background: color-mix(in srgb, red 18%, white);
  border-color: red;
}
.cmc-cal-cell.evt-manif > a,
.cmc-cal-cell.evt-manif > span {
  background: color-mix(in srgb, orange 22%, white);
  border-color: orange;
}
.cmc-cal-cell.evt-repetition > a,
.cmc-cal-cell.evt-repetition > span {
  background: color-mix(in srgb, blueviolet 18%, white);
  border-color: blueviolet;
}
.cmc-cal-cell.evt-sortie > a,
.cmc-cal-cell.evt-sortie > span {
  background: color-mix(in srgb, limegreen 20%, white);
  border-color: limegreen;
}
.cmc-cal-cell.evt-ag > a,
.cmc-cal-cell.evt-ag > span {
  background: color-mix(in srgb, coral 20%, white);
  border-color: coral;
}
.cmc-cal-cell.evt-seance > a,
.cmc-cal-cell.evt-seance > span {
  background: color-mix(in srgb, saddlebrown 18%, white);
  border-color: saddlebrown;
}
.cmc-cal-cell.evt-technique > a,
.cmc-cal-cell.evt-technique > span {
  background: color-mix(in srgb, chocolate 20%, white);
  border-color: chocolate;
}
.cmc-cal-cell.evt-theatre > a,
.cmc-cal-cell.evt-theatre > span {
  background: color-mix(in srgb, cadetblue 20%, white);
  border-color: cadetblue;
}

.cmc-cal-cell.has-event a:hover,
.cmc-cal-cell.has-event a:focus-visible {
  outline: 2px solid rgba(210, 105, 30, 0.45);
  outline-offset: 1px;
}

/* Hauteur grille fixe (6 semaines) — la légende ne saute plus */
.cmc-cal tbody {
  height: calc(6 * (var(--cmc-dot) + 0.3rem + clamp(0.08rem, 0.4vw, 0.18rem)));
}
.cmc-cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.55rem;
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0.4rem 0 0;
  border-top: 1px solid var(--cmc-cal-line);
  font-size: clamp(0.65rem, 0.3vw + 0.55rem, 0.8rem);
  min-height: 1.6rem;
}
/* Libellés = même couleur que la note (puce_*) */
.cmc-cal-legend .puce_spectacle,
.cmc-cal-legend .puce_spectacle::before { color: red; }
.cmc-cal-legend .puce_manif,
.cmc-cal-legend .puce_manif::before { color: orange; }
.cmc-cal-legend .puce_repetition,
.cmc-cal-legend .puce_repetition::before { color: blueviolet; }
.cmc-cal-legend .puce_sortie,
.cmc-cal-legend .puce_sortie::before { color: limegreen; }
.cmc-cal-legend .puce_ag,
.cmc-cal-legend .puce_ag::before { color: coral; }
.cmc-cal-legend .puce_seance,
.cmc-cal-legend .puce_seance::before { color: saddlebrown; }
.cmc-cal-legend .puce_technique,
.cmc-cal-legend .puce_technique::before { color: chocolate; }
.cmc-cal-legend .puce_theatre,
.cmc-cal-legend .puce_theatre::before { color: cadetblue; }

/* Liste prochains RDV — polices & paddings fluides (même échelle que le calendrier) */
.cmc-next-wrap {
  --cmc-next-when: clamp(0.7rem, 0.35vw + 0.62rem, 0.88rem);
  --cmc-next-what: clamp(0.8rem, 0.45vw + 0.68rem, 1.05rem);
  --cmc-next-where: clamp(0.68rem, 0.3vw + 0.58rem, 0.86rem);
  --cmc-next-pad-y: clamp(0.28rem, 0.35vw + 0.18rem, 0.55rem);
  --cmc-next-pad-x: clamp(0.42rem, 0.5vw + 0.28rem, 0.85rem);
  margin: clamp(0.25rem, 0.4vw, 0.5rem) 0 clamp(0.1rem, 0.2vw, 0.25rem);
}
.cmc-next-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(0.22rem, 0.35vw, 0.4rem);
}
.cmc-next-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.12rem clamp(0.3rem, 0.5vw, 0.55rem);
  padding: var(--cmc-next-pad-y) var(--cmc-next-pad-x);
  border-radius: clamp(0.35rem, 0.4vw, 0.55rem);
  border: 1px solid rgba(58, 52, 46, 0.1);
  background: #fff;
  line-height: 1.3;
}
.cmc-next-item.evt-spectacle { background: rgba(220, 50, 50, 0.08); }
.cmc-next-item.evt-manif { background: rgba(255, 165, 0, 0.10); }
.cmc-next-item.evt-repetition { background: rgba(138, 43, 226, 0.08); }
.cmc-next-item.evt-sortie { background: rgba(50, 205, 50, 0.08); }
.cmc-next-item.evt-ag { background: rgba(255, 127, 80, 0.10); }
.cmc-next-item.evt-seance { background: rgba(139, 69, 19, 0.08); }
.cmc-next-item.evt-technique { background: rgba(210, 105, 30, 0.08); }
.cmc-next-item.evt-theatre { background: rgba(95, 158, 160, 0.10); }
.cmc-next-when {
  flex: 0 0 auto;
  font-size: var(--cmc-next-when);
  color: #6a6158;
  white-space: nowrap;
}
.cmc-next-what {
  flex: 1 1 auto;
  font-weight: 700;
  font-size: var(--cmc-next-what);
  color: #3a342e;
  min-width: 0;
}
.cmc-next-where {
  flex: 1 1 100%;
  font-size: var(--cmc-next-where);
  color: #7a7168;
  font-style: italic;
  margin-top: -0.05rem;
}
.cmc-next-empty {
  padding: var(--cmc-next-pad-y) var(--cmc-next-pad-x);
  color: #7a7168;
  font-style: italic;
  font-size: var(--cmc-next-what);
}

/* Abonnement iCal — intégré au calendrier (texte gauche / actions droite) */
.cmc-agenda .cmc-ics,
.cmc-ics {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  margin: 0.55rem 0 0;
  padding: 0.55rem 0.7rem;
  box-sizing: border-box;
  background: var(--cmc-cal-soft, #f7f3ee);
  border: 1px solid var(--cmc-cal-line, rgba(58, 52, 46, 0.12));
  border-radius: 0.65rem;
  color: var(--cmc-cal-ink, #3a342e);
}
.cmc-ics-copy {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
.cmc-ics-title {
  margin: 0;
  font-size: clamp(0.82rem, 0.35vw + 0.72rem, 0.98rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: chocolate;
}
.cmc-ics-level {
  margin: 0.28rem 0 0;
}
.cmc-ics-badge {
  display: inline-block;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--cmc-cal-line, rgba(58, 52, 46, 0.12));
  background: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--cmc-cal-muted, #7a7168);
  white-space: nowrap;
}
.cmc-ics-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.28rem;
  flex: 0 0 auto;
  width: clamp(8.6rem, 22vw, 10.2rem);
}
.cmc-ics-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  box-sizing: border-box;
  width: 100%;
  min-height: 1.7rem;
  padding: 0.22rem 0.55rem;
  margin: 0;
  border-radius: 999px;
  border: 1px solid rgba(210, 105, 30, 0.45);
  background: chocolate;
  color: #fff !important;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cmc-ics-btn:hover,
.cmc-ics-btn:focus-visible {
  background: #a0522d;
  border-color: #a0522d;
  outline: none;
}
.cmc-ics-btn--ghost {
  background: #fff;
  color: chocolate !important;
  border-color: var(--cmc-cal-line, rgba(58, 52, 46, 0.18));
}
.cmc-ics-btn--ghost:hover,
.cmc-ics-btn--ghost:focus-visible {
  background: rgba(255, 190, 100, 0.28);
  border-color: rgba(210, 105, 30, 0.4);
  color: chocolate !important;
}
.cmc-ics-copybtn svg {
  flex: 0 0 auto;
  width: 0.95em;
  height: 0.95em;
}
@media (max-width: 560px) {
  .cmc-ics {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.45rem;
    padding: 0.55rem 0.65rem;
  }
  .cmc-ics-copy {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
  }
  .cmc-ics-title {
    font-size: 0.88rem;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .cmc-ics-actions {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .cmc-ics-btn {
    flex: 1 1 calc(50% - 0.2rem);
    min-width: 0;
  }
  .cmc-ics-btn:first-child {
    flex: 1 1 100%;
  }
}

/* Agenda téléphone : image moins haute, légende lisible, nav stable */
@media screen and (max-width: 900px) {
  .cmc-agenda-page #accueil #image,
  #accueil.cmc-agenda-page #image {
    max-height: 28vh;
  }
  .cmc-agenda {
    --cmc-dot: clamp(1.55rem, 5.2vw, 2rem);
    --cmc-nav: clamp(1.75rem, 5vw, 2.2rem);
  }
  .cmc-cal-nav {
    gap: 0.25rem;
  }
  .cmc-cal-jump {
    gap: 0.2rem;
  }
  .cmc-cal-jump select {
    max-width: none;
    flex: 1 1 0;
  }
  .cmc-agenda .cmc-ics,
  .cmc-ics {
    /* le bloc ICS reste crème lisible sur fond noir */
    color: var(--cmc-cal-ink, #3a342e);
  }
}

@media screen and (max-width: 900px) {
  .cmc-agenda #calendrier.cmc-cal,
  #calendrier.cmc-cal {
    display: table !important;
    width: 100% !important;
    overflow: visible !important;
    border-spacing: 0.1rem;
  }
  .cmc-next-list#next_table,
  #next_table.cmc-next-list {
    display: grid !important;
    overflow: visible !important;
  }
}

@media screen and (max-width: 480px) {
  .cmc-cal-legend {
    gap: 0.15rem 0.55rem;
    font-size: 0.72rem;
  }
  .cmc-next-where {
    display: none;
  }
  .cmc-cal-jump select {
    font-size: 0.78rem;
  }
  .cmc-agenda-page #accueil #image,
  #accueil.cmc-agenda-page #image {
    max-height: 22vh;
  }
  .cmc-ics-actions {
    flex-direction: column;
  }
  .cmc-ics-btn,
  .cmc-ics-btn:first-child {
    flex: 0 0 auto;
    width: 100%;
  }
}