/* ------------------------------------------------------------------ *
 * responsive.css — Phase 1 mobile responsiveness overlay (revised v2)
 *
 * Loaded LAST. STRICT RULE: the only thing this file changes on desktop
 * is the legacy `body { min-width: 1200px }` (which forced horizontal
 * scroll on small screens but was otherwise pointless). Every other
 * rule lives inside `@media (max-width: 768px)` so desktop layouts
 * — especially the home page's hand-tuned 1085 px banner — are 100%
 * untouched.
 *
 * Why the strict scope? The legacy home.css uses `width + padding` math
 * that only adds up in CSS `content-box` mode. A global
 * `box-sizing: border-box` reset would break it. So we apply
 * border-box only inside the mobile breakpoint, where the layout is
 * being rebuilt anyway.
 * ------------------------------------------------------------------ */

/* The only always-on override: strip the legacy body min-width so
   mobile browsers can size the viewport correctly. */
html, body {
  min-width: 0 !important;
}

/* Hamburger menu button — hidden on desktop, shown only on mobile via
   the media query below. */
.hamburger-btn {
  display: none;
}

/* ---- Mobile-only overrides ------------------------------------------ */
@media (max-width: 768px) {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  body {
    font-size: 14px;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  /* --- Top header: logo on the left, hamburger on the right ---------- */
  #topheader {
    height: auto !important;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
  }
  #logo {
    float: none !important;
    text-align: left;
  }
  #logo img {
    float: none !important;
    display: inline-block;
    max-height: 36px;
    width: auto;
  }

  /* Hamburger button — 24×24 px, three white bars that animate to an X
     when the menu is open. */
  .hamburger-btn {
    display: inline-block;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
  }
  .hamburger-btn span {
    position: absolute;
    left: 6px;
    right: 6px;
    height: 2px;
    background: #ffffff;
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
  }
  .hamburger-btn span:nth-child(1) { top: 9px; }
  .hamburger-btn span:nth-child(2) { top: 15px; }
  .hamburger-btn span:nth-child(3) { top: 21px; }
  .hamburger-btn.is-open span:nth-child(1) { top: 15px; transform: rotate(45deg); }
  .hamburger-btn.is-open span:nth-child(2) { opacity: 0; }
  .hamburger-btn.is-open span:nth-child(3) { top: 15px; transform: rotate(-45deg); }

  /* Mobile nav: hidden by default, becomes a full-width drawer below the
     header when the user taps the hamburger. */
  #upnavigation,
  #upnavigation * {
    float: none !important;
  }
  #upnavigation {
    display: none;
    width: 100%;
    margin: 0 !important;
    padding: 0;
    background: #2c2f34;
    flex-basis: 100%;
  }
  #upnavigation.is-open {
    display: block;
  }
  #upnavigation ul {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #upnavigation li {
    display: block;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
  }
  #upnavigation a {
    display: block;
    height: auto !important;
    line-height: 1.4 !important;
    padding: 12px 16px;
    color: #ffffff;
  }
  /* Bring the user-icon variant in line with the larger touch target */
  #upnavigation a.nav-user {
    justify-content: center;
  }

  /* --- Footer --- */
  #footer #footer1 {
    width: 100% !important;
    max-width: 100%;
  }
  #menu-bas #langues {
    padding: 0;
  }
  #menu-bas #langues ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 8px;
    padding: 8px;
    margin: 0;
  }
  #menu-bas #langues li {
    margin: 2px;
  }

  /* --- Day-page extras --- */
  img[src*="confidentiel.jpg"] {
    display: none !important;
  }
  .resulttable {
    font-size: 11px;
  }

  /* --- Contact page --- */
  #contact-top,
  #contact_form {
    width: 100% !important;
    max-width: 100%;
  }
  #contactForm dl {
    grid-template-columns: 1fr !important;
  }
  #contactForm dt {
    text-align: left !important;
  }

  /* --- Statistics index (two-box layout stacks) --- */
  .statistique-listes {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .statistique-liste,
  .statistique-listes__col {
    width: auto !important;
    max-width: 100%;
  }

  /* --- Statistics type page (form fields stack) --- */
  .stat-form {
    padding: 12px !important;
  }
  .stat-form__row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .stat-form__row input[type="text"] {
    width: 100% !important;
  }
  .stat-form__back {
    margin-left: 0 !important;
  }
  .cb-group__items {
    grid-template-columns: 1fr !important;
  }

  /* --- Home page marketing partials -----------------------------------
     The legacy _content_fr/en partials use fixed widths (943/1085/600/...)
     and float-based layouts. Below 768 px we strip ALL of those by ID/class
     and let blocks stack vertically. Inline `style="width:540px ..."` and
     `style="float:left"` in the partials need !important to override. ---- */
  #bannerwarpper,
  #banner,
  #banner_top,
  #slideshow,
  #right_top-part,
  #index-content,
  #index-content > div,
  #home_analyse_part,
  #home_analyse_left_part,
  #home_right,
  #home_donnees_part,
  #home_donnees_left_part,
  #home_donnees_right_part,
  #home_diffusion_part,
  #home_diffusion_left_part,
  #home_diffusion_right_part,
  #home_Personnalisation_part,
  #home_Personnalisation_left_part,
  #home_Personnalisation_right_part,
  #home_strategies_part,
  #home_strategies_left_part,
  #home_strategies_right_part,
  .tabservices,
  .tabservices .img,
  .tabservices .text,
  .BG-sep,
  .colonne,
  .colonne1,
  .col1,
  .encart,
  .encartimg,
  .encarttitre,
  .encarttext {
    position: relative !important;   /* override #bannerwarpper { position: absolute } from header.css */
    float: none !important;
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 5px !important;
    text-align: center;
    clear: both;
  }

  /* Slideshow: absolutely-positioned overlap doesn't work on a fluid
     mobile container, so we skip the JS cross-fade and hard-cut between
     images. The slideSwitch() JS adds `.active` to the new image and
     `.last-active` to the old one before animating opacity from 0→1
     over 1 s; on mobile we override that with !important to make the
     incoming image instantly visible and the outgoing one instantly hidden. */
  #slideshow {
    position: relative !important;
    height: auto !important;
    min-height: 200px;
  }
  #slideshow IMG {
    position: relative !important;
    max-width: 100% !important;
    height: auto !important;
    display: none;
  }
  #slideshow IMG.active {
    display: block !important;
    margin: 0 auto;
    opacity: 1 !important;   /* override JS's opacity:0 start of the fade */
  }
  #slideshow IMG.last-active {
    display: none !important; /* hard-hide the outgoing image immediately */
  }

  /* The decorative football-background image on #banner — keep solid color
     only, don't try to render the photo at scale. */
  #banner {
    height: auto !important;
    padding: 20px 12px !important;
  }
  #banner_top {
    padding: 0 !important;
  }

  /* Right-side promo text */
  #right_top-part {
    background: none !important;
    margin-top: 16px;
    padding: 12px !important;
  }

  /* Home content cards — stack the .encart cards instead of floating
     them side by side. Strip absolutely-positioned "Back to top" arrows. */
  a.top {
    float: none !important;
  }
  a.top img {
    display: none;
  }

  /* .text5 reserves 432 px of top padding on desktop for a tall background
     image — that's just a giant empty gap on a phone. */
  .text5 {
    padding: 16px !important;
    font-size: 16px !important;
    background-image: none !important;
  }

  /* .text7 (width: 450 px, float: right) and .text8 (width: 700 px,
     float: left) are headline strips on the marketing page — full-width
     on phones. */
  .text7,
  .text8 {
    width: 100% !important;
    float: none !important;
    height: auto !important;
    font-size: 15px !important;
    padding: 8px !important;
  }

  /* Catch-all for any inline `style="width: 540px; ..."` etc. in the
     marketing partials. */
  #view-content [style*="width:"] {
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}