/* Additions on top of the original Louïz Radio stylesheet -- day filter tabs
   on /radio, merged-rerun schedule styling, podcast search box, and the
   contact form / map on /contact. Uses the site's own CSS custom properties
   (--color-brand, --color-text, --color-border, etc.) so it stays visually
   consistent with the rest of the design. */

/* The original stylesheet escalates the banner's top padding at wider
   viewports (up to 162px at 1200px+), which reads as a lot of dead space
   between the header and the page title. Pinned to one compact value at
   every width instead of letting it keep growing on bigger screens.
   (A few pixels taller than the first pass so the wave decoration behind
   the title isn't clipped.) */
.c-banner__content {
  padding-block: 3rem 2.5rem !important;
}

/* /podcasts: the section right after the banner (search box + grid) was
   inheriting the theme's generic between-sections padding (up to 90px on
   wide screens), stacked on top of the banner's own bottom padding -- a lot
   of blank space before the search box even appears. Toned down just for
   this one section (see podcasts_search.py). */
.c-section--podcastsintro {
  padding-top: 2rem !important;
}

.c-radiotabs {
  margin-bottom: 2rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.c-radiotabs__list {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.c-radiotabs__btn {
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
  padding: 0.5em 1.1em;
  border-radius: 999px;
  border: 1px solid var(--color-border, #9f9999);
  background: transparent;
  color: var(--color-text, #0f0907);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.c-radiotabs__btn:hover {
  border-color: var(--color-brand, #ab6353);
}
.c-radiotabs__btn.is-active {
  background: var(--color-brand, #ab6353);
  border-color: var(--color-brand, #ab6353);
  color: var(--color-white, #fff);
}

.c-radioday {
  margin-bottom: 1rem;
}

/* Programme grid: rounded corners on the photo (per Piery). A fixed 25px
   rather than 25% -- these photos are landscape (600x400), and a
   percentage radius on a non-square image stretches into an odd oval
   rather than simply "rounded corners". Easy to switch to a % value
   instead if that's not what was pictured. */
.c-programmeitem__image {
  border-radius: 25px;
}

.c-programmeitem__schedule--multi {
  color: var(--color-brand-dark, #8c5144);
  font-weight: 600;
}

/* Podcast search box (on /podcasts) */
.c-podsearch {
  margin-bottom: 2rem;
  max-width: 28rem;
}
.c-podsearch__input {
  width: 100%;
  font: inherit;
  padding: 0.65em 1em;
  border-radius: 999px;
  border: 1px solid var(--color-border, #9f9999);
  background: var(--color-white, #fff);
  color: var(--color-text, #0f0907);
}
.c-podsearch__input:focus {
  outline: none;
  border-color: var(--color-brand, #ab6353);
}
.c-podsearch__empty {
  display: none;
  color: var(--color-text-offset, #766f6f);
  margin-top: 1rem;
}

/* Contact form */
.c-contactform {
  display: grid;
  gap: 1rem;
  max-width: 32rem;
}
.c-contactform__field {
  display: grid;
  gap: 0.35rem;
}
.c-contactform__field label {
  font-weight: 600;
  font-size: 0.9rem;
}
.c-contactform__field input,
.c-contactform__field textarea {
  font: inherit;
  padding: 0.6em 0.8em;
  border-radius: 0.5rem;
  border: 1px solid var(--color-border, #9f9999);
  background: var(--color-white, #fff);
  color: var(--color-text, #0f0907);
}
.c-contactform__field input:focus,
.c-contactform__field textarea:focus {
  outline: none;
  border-color: var(--color-brand, #ab6353);
}
.c-contactform__submit {
  justify-self: start;
  font: inherit;
  cursor: pointer;
  padding: 0.65em 1.6em;
  border-radius: 999px;
  border: 1px solid var(--color-brand, #ab6353);
  background: var(--color-brand, #ab6353);
  color: var(--color-white, #fff);
}
.c-contactform__submit:hover {
  background: var(--color-brand-dark, #8c5144);
  border-color: var(--color-brand-dark, #8c5144);
}
.c-contactform__notice {
  padding: 0.8em 1em;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  max-width: 32rem;
}
.c-contactform__notice--success {
  background: var(--color-green-light, #d0e8e4);
  color: var(--color-green-dark, #306b61);
}
.c-contactform__notice--error {
  background: var(--color-red-light, #f2dfd9);
  color: var(--color-red-dark, #8c5144);
}

.c-contactmap {
  margin-top: 0;
}
.c-contactmap iframe {
  width: 100%;
  height: 320px;
  border: 0;
  border-radius: 0.5rem;
}

/* "Ecouter live" button: was a modal opening the (broken, third-party-
   widget-dependent) /live/ page in an iframe -- replaced by a plain <audio>
   element playing the station's real stream directly (see header.php), so
   there's no overlay to style any more. A small highlight while playing is
   enough. */
.js-listenlive.is-playing {
  background: var(--color-white, #fff);
  color: var(--color-brand);
}

/* Menu (desktop, top bar): the top bar now has a white background (see
   .c-siteheader further down), so the theme's own white nav-link color and
   white underline (main.css: .c-mainnav__link / .is-active) would be
   invisible here -- overridden to dark text with a brand-pink underline,
   for the current page (.is-active) and for hover/focus alike, so the menu
   still shows both where you are and where you're about to go (per Piery). */
.c-mainnav__link {
  color: var(--color-text, #0b0a0a);
}
.c-mainnav__link.is-active,
.c-mainnav__link:hover,
.c-mainnav__link:focus {
  color: var(--color-text, #0b0a0a);
  text-decoration: underline;
  text-decoration-color: var(--color-brand, #c35067);
  text-underline-offset: 6px;
}

/* Menu (mobile flyout): untouched by the white-header redesign above -- the
   flyout (.c-mobilemenu) keeps its own independent pink background from
   main.css, so its links keep their original white underline. */
.c-mobilenav__link:hover,
.c-mobilenav__link:focus {
  text-decoration: underline;
  text-decoration-color: var(--color-text-inverse, #fff);
}

/* The menu stays pinned at the very top of every page, always on top of
   everything -- nothing ever covers it. Everything else (the title/banner,
   and on the homepage the photo collage) is ordinary, un-pinned content: it
   scrolls normally and passes behind the fixed menu, exactly like content
   under any regular sticky header. JS only reserves room for the menu's
   height (see the <script> right after the header in each page) so nothing
   starts out hidden underneath it before any scrolling happens.
   Replaces an earlier "elevator" effect (title/banner also pinned, with the
   rest of the page's content scrolling up to cover it) that Piery asked to
   scrap in favour of this simpler behaviour. */
.c-siteheader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

/* Piery: split the header visually -- the top bar (logo, menu, "Ecouter
   live") sits on a white background with dark text, while the page-title
   band below it (with the wave graphic) and the rest of the site keep the
   original pink theme untouched. Only the top bar itself (.c-siteheader)
   changes here; the mobile flyout menu (.c-mobilemenu, in main.css) has its
   own independent pink background and is intentionally left as is. */
.c-siteheader {
  background-color: var(--color-white, #fff);
  box-shadow: 0 2px 10px rgba(15, 9, 7, 0.08);
}

/* New circular badge logo (uploads/logo-louiz.png, replacing the old
   wordmark SVG -- see build_site.py), background already made transparent.
   Sized generously so it actually reads on the new white top bar, and
   given a small negative vertical margin so its own transparent padding
   doesn't visibly enlarge the header bar. */
.c-siteheader__logo--img {
  margin-block: -0.5rem;
}
.c-siteheader__logo--img img {
  display: block;
  height: 88px;
  width: auto;
}
@media (max-width: 47.9375em) {
  .c-siteheader__logo--img img {
    height: 52px;
  }
}

/* Hamburger icon, top bar only -- the flyout's own close icon (.c-closenav,
   further down in header.php) is untouched and stays white on its still-
   pink background. */
.c-siteheader__hamburger svg path {
  fill: var(--color-text, #0b0a0a);
}

/* "Ecouter live" button: two copies of it exist in header.php, one in the
   top bar (.c-siteheader__actions) and one in the mobile flyout's footer
   (.c-mobilemenu__footer) -- only the top-bar copy needs re-coloring for
   the new white background; the flyout copy sits on the still-pink
   .c-mobilemenu and keeps its original white .c-button--inverse styling.
   Scoping to .c-siteheader__actions (rather than .c-siteheader as a whole)
   is what keeps the two copies independent. */
.c-siteheader__actions .js-listenlive {
  --button-text-color: var(--color-brand);
  --button-border-color: var(--color-brand);
}
.c-siteheader__actions .js-listenlive:hover,
.c-siteheader__actions .js-listenlive:focus {
  --button-text-color: var(--color-brand-dark);
  --button-border-color: var(--color-brand-dark);
}
.c-siteheader__actions .js-listenlive.is-playing {
  background: var(--color-brand);
  color: var(--color-white, #fff);
}

/* Homepage photo collage: was 4 raw <img> with zero text, just placed side
   by side. Kept the original site's varied grid-area layout (still targets
   the same a/b/c/d areas, now on the wrapping <figure> instead of the bare
   <img>) and added a caption overlay (shown on hover/focus) plus a bit of
   depth (shadow, soft zoom) so it reads as a designed feature, not a
   leftover image dump. */
.c-homecollage > figure.c-homecollage__item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 0.75rem;
  box-shadow: 0 14px 34px -18px rgba(15, 9, 7, 0.5);
}
.c-homecollage > figure.c-homecollage__item:nth-child(1) { grid-area: a; }
.c-homecollage > figure.c-homecollage__item:nth-child(2) { grid-area: b; }
.c-homecollage > figure.c-homecollage__item:nth-child(3) { grid-area: c; }
.c-homecollage > figure.c-homecollage__item:nth-child(4) { grid-area: d; }
.c-homecollage__item .c-homecollage__img {
  transition: transform 0.5s ease;
}
.c-homecollage__item:hover .c-homecollage__img,
.c-homecollage__item:focus-within .c-homecollage__img {
  transform: scale(1.06);
}
.c-homecollage__caption {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  padding: 1.5rem 1rem 0.85rem;
  background: linear-gradient(to top, rgba(15, 9, 7, 0.72), rgba(15, 9, 7, 0));
  color: var(--color-white, #fff);
  font-size: 0.85rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.c-homecollage__item:hover .c-homecollage__caption,
.c-homecollage__item:focus-within .c-homecollage__caption {
  opacity: 1;
  transform: translateY(0);
}

/* Studio photo carousel: same idea -- each slide gets a real caption (the
   original had alt="imgCaption", a literal unfixed placeholder, and no
   visible text) shown as an overlay, plus a matching shadow/zoom touch. */
.c-studiofig {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 0.75rem;
  box-shadow: 0 14px 34px -18px rgba(15, 9, 7, 0.5);
}
.c-studiofig img {
  display: block;
  transition: transform 0.5s ease;
}
.c-studiofig:hover img,
.c-studiofig:focus-within img {
  transform: scale(1.06);
}
.c-studiofig__caption {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  padding: 1.5rem 1rem 0.85rem;
  background: linear-gradient(to top, rgba(15, 9, 7, 0.72), rgba(15, 9, 7, 0));
  color: var(--color-white, #fff);
  font-size: 0.85rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.c-studiofig:hover .c-studiofig__caption,
.c-studiofig:focus-within .c-studiofig__caption {
  opacity: 1;
  transform: translateY(0);
}

/* A light version of the same depth touch on the team grid (L'équipe), so
   the whole site feels consistently "modernisé" rather than just two
   isolated spots. These already have real captions/names, so no overlay
   text is needed here. */
.c-team__img,
.c-partner__link {
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.c-team__img:hover,
.c-partner__link:hover {
  box-shadow: 0 14px 30px -16px rgba(15, 9, 7, 0.4);
  transform: translateY(-3px);
}

/* L'équipe: the "which show(s)" line added below each host's name/function
   in the animateurs list (see hosts_list.py) -- same subdued treatment as
   .c-host__function so it reads as a secondary detail, not competing with
   the name. */
.c-host__shows {
  color: var(--color-text-offset, #766f6f);
  font-size: 0.9rem;
  margin-block-start: 0.15rem;
}

/* Contact page: "La Radio" / "Rejoindre l'équipe ?" / "Studios" /
   "L'Association" info cards -- a rectangular pink "bande" header (full
   column width, not a rounded pill) followed by a plain body, inside a
   50/50 two-column layout (see contact_split.py --
   .l-split--half@{small,medium,large}, the theme's own ready-made even
   split), with "L'Association" spanning the full width underneath.
   Replaces an earlier full-page-width .c-infoband treatment Piery didn't
   like, after several rounds of mockups and revisions.

   Body text deliberately does NOT set its own color or font-size (unlike
   an earlier version of this card): Piery noticed the mailto links here
   looked duller than the one in "La Radio" (a plain, un-styled theme
   link) -- that was this card's own text being set in a smaller, muted
   grey that a naive read suggests only affects the label text, but in
   practice read as "the whole line, including the link, looks flatter".
   Leaving these paragraphs at the theme's own default size/color makes
   every mailto here match "La Radio" exactly, since both now just fall
   back to the site-wide `a` link style. */
.c-infocards {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.c-infocard__band {
  background: var(--color-brand, #C35067);
  color: var(--color-white, #fff);
  font-family: var(--fontstack-alt);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  margin: 0;
  padding: 0.45rem 0.9rem;
}
.c-infocard__body {
  padding: 0.85rem 0.1rem 0;
}
.c-infocard__body p {
  margin: 0 0 0.5rem;
  line-height: 1.5;
}
.c-infocard__body p:last-child {
  margin-bottom: 0;
}
.c-infocard__label {
  font-weight: 600;
  margin-bottom: 0.15rem !important;
}
/* "L'Association", below both columns, spans the full width -- same card
   look, just not confined to a half-width column -- and is itself split
   into 2 columns (legal info left, the map right -- see contact_split.py). */
.c-infocard--full {
  margin-top: 1.25rem;
}
/* "La Radio": how to listen, in 2 columns (analogue/FM, digital/streaming)
   -- auto-fit so it sits side by side when there's room and stacks below
   ~320px per column (e.g. on mobile) without a hard breakpoint. */
.c-radiocols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1rem;
}
/* The "Ecouter live" button reused inside "La Radio" (see
   listen_live_button in contact_split.py) sits inside a <p>, which would
   otherwise force it to the paragraph's own text width. */
.c-infocard__body .c-button {
  margin-top: 0.15rem;
}
/* The map is now itself a link (opens Maps in a new tab, replacing the old
   "Nous trouver" text link) -- the iframe never receives pointer events so
   the whole map area is clickable. */
a.c-contactmap {
  display: block;
  cursor: pointer;
}
a.c-contactmap iframe {
  pointer-events: none;
}

/* Team/host and podcast photos, shrunk 25% (per Piery) -- these images have
   no fixed width of their own (sizing comes purely from the grid column via
   .o-fluidimg's max-width:100%), so constrain the <img> itself instead of
   the grid. */
.c-host__img img,
.c-team__img img,
.c-podcast__media img {
  width: 75%;
  height: auto;
}

/* Homepage intro, and emission pages whose show has no listed host: the
   theme's .c-pageintro is a 2-column grid (text + a 2nd column) even when
   nothing occupies the 2nd column, which stuck the text in a ~58-66% wide
   column with blank space beside it -- and made it wrap mid-sentence well
   before the real edge of the page (see widen_home_intro /
   restructure_emission_intro in page_tweaks.py). Forces a single full-width
   column instead. */
.c-pageintro--full {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "a" !important;
}

/* Podcasts grid tile -- title, photo, episode count and description, in
   that order (per Piery). Rewritten as one coherent block after going to 4
   columns instead of 3: the theme's own title size was tuned for a wider,
   3-column tile, so at 4 columns it read oversized and each title wrapped
   to a different number of lines, throwing photos out of alignment from
   one tile to the next in the same row. Fixed here by:
   - giving every text element the same width as the photo (75% of the
     tile), so nothing runs past the photo's edges;
   - a smaller, fixed title size suited to the narrower tile, instead of
     the theme's viewport-based clamp();
   - a fixed two-line-tall box for the title (not just a 2-line clamp) so
     every tile reserves the same vertical space above the photo, whether
     its actual title needs one line or two -- this is what keeps photos
     aligned across a row.
   Typography unified on a second pass (per Piery): title AND description
   both set in Libre Franklin, the site's own brand typeface used for every
   heading elsewhere -- the description used to fall back to the generic
   system font (Helvetica Neue), and that mismatch read as unpolished. Kept
   deliberately quiet/light (smaller, softer grey, lighter weight) so the
   photo stays the focal point rather than competing with the text. */
.c-podcast__link {
  display: flex;
  flex-direction: column;
}
.c-podcast__title,
.c-podcast__episodes,
.c-podcast__summary {
  max-width: 75%;
  font-family: var(--fontstack-alt);
}
.c-podcast__title {
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.35em * 2);
  margin-block-end: 0.25rem;
}
.c-podcast__image {
  border-radius: 25px;
}
.c-podcast__media {
  margin-block-end: 1rem;
}
.c-podcast__episodes {
  font-size: 0.8rem;
  color: var(--color-text-offset, #766f6f);
  margin-block-end: 0.4rem;
}
.c-podcast__summary {
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-text-offset, #766f6f);
  margin-block-end: 0;
}
/* 4 tiles per row on large screens instead of 3 (see widen_podcast_grid in
   podcasts_search.py) needs a tighter gap to feel comfortable -- scoped to
   just this grid rather than the shared --grid-gutter variable, which every
   other grid on the site (team page, homepage collage...) also uses. */
.c-podcastsgrid.l-grid--gap {
  gap: 1.25rem;
}

/* Emission pages: the show's own host(s), moved into the sidebar next to
   the title/description (see restructure_emission_intro in page_tweaks.py).
   Small circular avatars in a simple stacked list -- deliberately smaller
   and lighter than the big photo cards this used to be, further down the
   page. */
.c-hostlist--sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.c-hostlist--sidebar .c-host {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.c-hostlist--sidebar .c-host__img {
  flex: none;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  width: 56px;
  height: 56px;
}
.c-hostlist--sidebar .c-host__img img {
  width: 56px;
  height: 56px;
  object-fit: cover;
}
.c-hostlist--sidebar .c-host__name {
  font-size: 0.95rem;
  margin: 0;
}
.c-hostlist--sidebar .c-host__function {
  font-size: 0.8rem;
  margin: 0;
  color: var(--color-text-offset, #766f6f);
}

/* Footer "Nous contacter" column, replacing what used to be a duplicate of
   the main menu right next to "Restez connectés". */
.c-footercontact {
  margin: 0;
  font-style: normal;
}
.c-footercontact p {
  margin: 0 0 0.5rem;
}
.c-footercontact__link {
  color: inherit;
  text-decoration: underline;
}
.c-footercontact__link:hover {
  text-decoration: none;
}