/* FLOW WEB — mobile-first responsive fixes.
   New file, loaded on every page, so the existing "charte" stylesheets
   (style_general.css, style_distrib_prod.css, page_films.css,
   style_accueil.css) stay untouched and desktop rendering at >=768px
   is unaffected unless explicitly noted below. */

/* ---------- utility ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- decorative pattern on short pages (about us, contact) ----------
   style_distrib_prod.css sets body{background-image:url(images/background.png)}
   with default position (0% 0%, top-left) and default repeat, full-bleed
   behind the whole body -- that's the exact live mechanism (verified
   directly against flowartsales.com) and is left completely untouched here,
   at every width, for all pages that load that stylesheet (distribution x3,
   production, and also about us/contact themselves).

   On wide screens this is harmless on about us/contact because the actual
   text column sits centered with margin on either side, so the image (which
   starts painting from the body's left edge) doesn't line up with the text.
   Below 768px that margin disappears -- the text column goes full-width --
   so the same top-anchored image now paints directly behind the text.
   Confirmed on a real phone (Safari/iOS), not just emulated: the blob lands
   on "want us to produce your film" etc. A fixed background-position shift
   was tried first to dodge it, and a cropped-and-repositioned copy placed
   before the footer was tried second -- both still left the ORIGINAL
   full-bleed body background active underneath (style_distrib_prod.css's
   rule was never scoped away from these two pages), so neither fix actually
   removed the thing that was overlapping the text; same root cause as the
   very first background bug this session, reintroduced by not re-checking
   it here. Simplest correct fix: don't try to reposition or recreate
   anything on mobile -- just turn the pattern off there for these two
   pages specifically, and leave >=768px exactly as it already is. */
@media (max-width: 767.98px) {
  body.short-page {
    background-image: none;
  }
}

/* ---------- item 1: header 3-column nav -> hamburger on mobile ---------- */
.flow-nav-toggle {
  display: none;
}
.flow-mobile-nav {
  display: none;
}

/* Unconditional (not just mobile): the search toggle/panel below is
   positioned absolute against .hautdepage on every page at every width,
   not just <768px like the hamburger. */
.hautdepage {
  position: relative;
}

@media (max-width: 767.98px) {
  .hautdepage .hdp[id="1"],
  .hautdepage .hdp[id="3"] {
    display: none;
  }
  .hautdepage .hdp[id="2"] {
    width: 100%;
  }

  .flow-nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 20;
  }
  .flow-nav-toggle span {
    display: block;
    width: 24px;
    height: 3px;
    background-color: #063084;
    border-radius: 2px;
  }

  .flow-mobile-nav {
    width: 100%;
    background-color: #ffffff;
  }
  .flow-mobile-nav.open {
    display: flex;
    flex-direction: column;
  }
  .flow-mobile-nav a {
    display: block;
    min-height: 44px;
    box-sizing: border-box;
    padding: 12px 20px;
    font-family: "Homemade Apple", cursive;
    font-size: 25px;
    text-align: center;
    color: #063084;
    text-decoration: none;
    border-top: 1px solid rgba(6, 48, 132, 0.15);
  }
  .flow-mobile-nav a:hover,
  .flow-mobile-nav a:active {
    color: #7196B0;
  }
}

/* ---------- Distribution/Production dropdowns ("nav" header variant) ----------
   Used on the home page and on the 4 destination pages (catalogue,
   line up, shorts, in development) -- shared here rather than in any one
   page's own stylesheet since it's no longer home-page-only. Desktop:
   CSS :hover shows the menu; header.js also toggles an "open" class on
   click, so it works with hover OR click, and closes on outside click.
   The .hdp[id="1"]/[id="3"] mobile hide-rule above already hides these
   desktop dropdown buttons below 768px along with the plain-link
   variants -- the hamburger panel's accordion version (further below)
   is what's used there instead. */
.hdp-dropdown {
  position: relative;
}

.flow-dropdown-toggle {
  background: none;
  border: none;
  font-family: "Homemade Apple", cursive;
  font-size: inherit;
  color: #063084;
  cursor: pointer;
  padding: 0;
}

.flow-dropdown-toggle:hover {
  color: #7196B0;
}

.flow-dropdown-toggle::after {
  content: ' \25BE';
  font-size: 0.6em;
}

.flow-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  padding: 8px 0;
  min-width: 180px;
  z-index: 30;
}

.hdp-dropdown:hover .flow-dropdown-menu,
.hdp-dropdown.open .flow-dropdown-menu {
  display: block;
}

.flow-dropdown-menu a {
  display: block;
  padding: 8px 20px;
  font-size: 18px;
  font-family: "Homemade Apple", cursive;
  color: #063084;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
}

.flow-dropdown-menu a:hover {
  color: #7196B0;
}

/* Highlights whichever category (Distribution/Production) the current
   page belongs to -- data-active="distribution"/"production" on the
   header.js include, same yellow already used for the pagination
   #current button elsewhere on the site. */
.hdp-active > .flow-dropdown-toggle {
  background-color: #F9E701;
  color: #063084;
  padding: 4px 14px;
  border-radius: 4px;
}

.hdp-active > .flow-dropdown-toggle:hover {
  color: #063084;
}

/* Mobile accordion version, inside the hamburger panel (.flow-mobile-nav
   is already display:none until opened / mobile-only, no separate media
   query needed here). */
.flow-mobile-dropdown-toggle {
  display: block;
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 12px 20px;
  background: none;
  border: none;
  border-top: 1px solid rgba(6, 48, 132, 0.15);
  font-family: "Homemade Apple", cursive;
  font-size: 25px;
  text-align: center;
  color: #063084;
  cursor: pointer;
}

.flow-mobile-dropdown-toggle::after {
  content: ' \25BE';
  font-size: 0.6em;
}

.flow-mobile-dropdown-toggle.hdp-active {
  background-color: #F9E701;
  color: #063084;
}

.flow-mobile-dropdown-panel {
  display: none;
  background-color: rgba(6, 48, 132, 0.05);
}

.flow-mobile-dropdown-panel.open {
  display: block;
}

.flow-mobile-dropdown-panel a {
  display: block;
  min-height: 44px;
  box-sizing: border-box;
  padding: 10px 20px;
  font-family: "Homemade Apple", cursive;
  font-size: 20px;
  text-align: center;
  color: #063084;
  text-decoration: none;
  border-top: 1px solid rgba(6, 48, 132, 0.08);
}

.flow-mobile-dropdown-panel a:hover {
  color: #7196B0;
}

/* ---------- search (every page) ----------
   Toggle button + panel, injected by partials/header.js into every
   .hautdepage regardless of variant -- shared here (not a page-specific
   stylesheet) for the same reason the dropdown CSS above is shared: it's
   no longer scoped to one page. Positioned absolute against .hautdepage
   (position:relative set unconditionally near the top of this file), so
   it never disturbs the 3-column flex layout.

   The right column's content (production text, or the Distribution/
   Production dropdown, especially with its yellow .hdp-active pill,
   which is wider than the plain text) can otherwise reach far enough
   right to sit under the search icon -- measured directly: overlapping
   by 16px at 800px wide on the Shorts page, where "production" is both
   the active (yellow, padded) dropdown AND on the same side as the
   icon. Reserving room on .hautdepage itself (not just moving the icon)
   shrinks all 3 flex columns proportionally, pushing that content left
   clear of the icon regardless of which side is active. Desktop only --
   below 768px columns 1/3 are hidden entirely (mobile hamburger instead),
   so there's nothing for the icon to collide with there. */
@media (min-width: 768px) {
  .hautdepage {
    padding-right: 60px;
  }
}

.flow-search-toggle {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 25;
}

.flow-search-icon {
  display: block;
  width: 16px;
  height: 16px;
  border: 2px solid #063084;
  border-radius: 50%;
  position: relative;
}

.flow-search-icon::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 8px;
  bottom: -7px;
  right: -1px;
  background-color: #063084;
  border-radius: 1px;
  transform: rotate(-45deg);
}

.flow-search-toggle:hover .flow-search-icon,
.flow-search-toggle:hover .flow-search-icon::after {
  border-color: #7196B0;
  background-color: #7196B0;
}

.flow-search-panel {
  display: none;
  position: absolute;
  top: 100%;
  right: 15px;
  width: 280px;
  max-width: calc(100vw - 30px);
  box-sizing: border-box;
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  padding: 12px;
  z-index: 40;
}

.flow-search-panel.open {
  display: block;
}

.flow-search-input {
  display: block;
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 8px 12px;
  font-size: 16px;
  font-family: 'Inclusive Sans', sans-serif;
  color: #063084;
  border: 1px solid rgba(6, 48, 132, 0.3);
  border-radius: 4px;
}

.flow-search-results {
  margin-top: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.flow-search-result {
  display: block;
  min-height: 44px;
  box-sizing: border-box;
  padding: 10px 8px;
  font-family: "Homemade Apple", cursive;
  font-size: 18px;
  color: #063084;
  text-decoration: none;
  border-bottom: 1px solid rgba(6, 48, 132, 0.1);
}

.flow-search-result:last-child {
  border-bottom: none;
}

.flow-search-result:hover {
  color: #7196B0;
}

/* Director name only, not the title: the site's actual body-text font
   (verified via computed style on a film page's .synopsis p -- Raleway,
   from style_general.css's body rule -- not Red Rose/Inclusive Sans as
   CLAUDE.md's charter section says, which isn't what actually renders).
   font-size dropped slightly below the title's 18px so it doesn't read
   as equally emphasized next to the cursive title. */
.flow-search-result-director {
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
}

.flow-search-empty {
  margin: 8px 0;
  font-family: 'Inclusive Sans', sans-serif;
  font-size: 14px;
  color: #063084;
  text-align: center;
}

@media (max-width: 767.98px) {
  .flow-search-panel {
    right: 8px;
    width: calc(100vw - 16px);
  }
}

/* ---------- item 4: film detail page — single column below 768px ---------- */
@media (max-width: 767.98px) {
  .block {
    flex-direction: column;
  }
  /* scoped to .block .affiche: .affiche alone is also used (with a
     different meaning, width:20%) by the distribution/production
     listing pages and must not be touched here */
  .block .affiche {
    width: 100%;
  }
  .synopsis {
    width: 100%;
  }
  .synopsis p {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  #screening,
  #dl_technique {
    float: none;
    width: 100%;
    margin-left: 0;
    text-align: center;
  }
}

/* ---------- item 5: distribution pagination — 44x44px minimum touch target ---------- */
@media (max-width: 767.98px) {
  .navigation {
    clear: both;
    width: auto;
    display: flex;
    justify-content: center;
    gap: 10px;
  }
  .b_nv {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
  }
}

/* ---------- viewport-fit: accueil / about us / contact only ----------
   Goal: header and footer (nav links, about us/contact links) always
   visible, zero page-level scroll, on these 3 pages only -- explicitly
   NOT the catalogue/listing pages or individual film pages, which have
   too much content to ever fit one screen and aren't meant to.

   Scoped to a dedicated .viewport-fit class (added only to these 3
   pages' <body>), not to .short-page: .short-page is also used by
   page_lineup.html and page_indevelopment.html (for the decorative
   background suppression above), and those two must stay untouched.

   Mechanism: body becomes a column flexbox pinned to exactly one
   viewport tall (100dvh accounts for mobile browser chrome; 100vh is
   the fallback for browsers without dvh support). header.js/footer.js's
   injected markup and the page's own <script> tags are non-flex (already
   display:none by default) so they don't interfere. Everything between
   header and footer is wrapped in a single .vf-scroll div, which is the
   one flexible child (flex:1) and absorbs any remaining space -- on
   accueil and contact this fits with room to spare at normal desktop/
   mobile sizes (verified), so .vf-scroll never actually needs to scroll
   there. About Us is the one exception: its real content (7 intro
   paragraphs + two full bios) is roughly 900 words, which cannot fit
   legibly in a single screen at any reasonable font size -- rather than
   shrinking that text to the point of being unreadable, or letting the
   whole page scroll (defeating the point), .vf-scroll scrolls
   internally there. Header and footer -- the actual "reach these links
   without scrolling" requirement -- stay pinned and visible regardless. */
body.viewport-fit {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

body.viewport-fit .vf-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Accueil only: its content (just the video) is shorter than the
   available space at most screen sizes, which otherwise left it
   stranded at the top with a large dead gap above the footer.
   display:flex here doesn't conflict with the scroll behavior above --
   on the rare viewport short enough that the video doesn't fit,
   overflow-y:auto still kicks in and this simply has no visible effect.
   Not applied to Contact/About Us: centering a flex column that's
   taller than its box pushes the start of the content off-screen
   above the scrollable area, which would be wrong for pages that
   *do* need their inner scroll. */
.vf-scroll.vf-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Shrink the purely-decorative hero strip on these 3 pages only --
   .image_illustration's padding:10% (of width) is fine on pages with
   room to spare (catalogue/film pages), but on a fixed one-screen
   budget it was eating 250px+ for an empty div. Left untouched
   everywhere else. */
body.viewport-fit .image_illustration {
  padding: 2% 10%;
}

/* Accueil's black banner + header, and every page's footer, also get a
   little air taken out -- scoped here so catalogue/film pages (which
   share .bas_de_page/.hautdepage) are unaffected. */
body.viewport-fit .hautdepage {
  padding-top: 0.6%;
  padding-bottom: 0.6%;
}

body.viewport-fit .hdp img {
  height: 56px;
}

body.viewport-fit .bas_de_page {
  padding: 1% 2%;
}

body.viewport-fit .flow-video-teaser {
  margin: 6px auto;
}

body.viewport-fit h1 {
  margin: 0.2em 0;
}

/* Contact form: same fields, tighter vertical rhythm. */
body.viewport-fit .contact-form-wrap {
  padding: 14px 20px;
}

body.viewport-fit .contact-form-wrap h3 {
  margin-bottom: 4px;
}

body.viewport-fit #flow-contact-form label {
  margin-top: 8px;
  margin-bottom: 2px;
}

body.viewport-fit #flow-contact-form input,
body.viewport-fit #flow-contact-form select,
body.viewport-fit #flow-contact-form textarea {
  padding: 5px 8px;
}

body.viewport-fit #flow-contact-form textarea {
  height: 60px;
}

body.viewport-fit .contact-form-submit {
  margin-top: 10px;
  padding: 7px 20px;
}

body.viewport-fit .contact-info-block {
  margin-bottom: 14px;
}

body.viewport-fit .contact-legal {
  margin-top: 10px;
  padding: 6px 5% 0;
}

body.viewport-fit .about-team {
  margin-top: 24px;
}

body.viewport-fit .about-bio-photo {
  width: 140px;
  height: 140px;
  margin-bottom: 10px;
}

body.viewport-fit .about-intro p {
  margin: 0 0 0.6em;
}

/* Mobile-only: contact-content stacks (form above info) instead of
   sitting side by side, so it needs tighter vertical rhythm than
   desktop just to get close to fitting -- desktop already fits exactly
   with the shared rules above and doesn't need this. */
@media (max-width: 767.98px) {
  body.viewport-fit .contact-content {
    gap: 14px;
  }
  body.viewport-fit .contact-form-wrap {
    padding: 10px 16px;
  }
  body.viewport-fit #flow-contact-form label {
    margin-top: 5px;
    margin-bottom: 1px;
  }
  body.viewport-fit #flow-contact-form input,
  body.viewport-fit #flow-contact-form select {
    padding: 4px 8px;
  }
  body.viewport-fit #flow-contact-form textarea {
    height: 40px;
    padding: 4px 8px;
  }
  body.viewport-fit .contact-form-submit {
    margin-top: 6px;
    padding: 6px 18px;
  }
  body.viewport-fit .contact-info-block {
    margin-bottom: 8px;
  }
  body.viewport-fit .contact-info-block h5,
  body.viewport-fit .reseaux h5 {
    margin: 0 0 3px;
  }
  body.viewport-fit .contact-info-block p {
    margin: 0 0 2px;
  }
  body.viewport-fit .contact-form-error {
    min-height: 0;
    margin: 4px 0 0;
  }
}

/* ---------- item 6: film template (Infos/Awards/Crew, where-to-watch, photos) ---------- */
@media (max-width: 767.98px) {
  .details {
    flex-direction: column;
    padding: 5%;
  }
  .details-col {
    width: 100%;
  }
  .ou_voir {
    padding: 0 5%;
  }
  .photos_carousel {
    padding: 5%;
  }
  .photos_carousel_item img {
    height: 180px;
  }
}