/* Desktop-lock overrides (load last) */
@media (min-width: 600px), (orientation: landscape) {
  /* Force two columns for forms */
  .form-grid { 
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 16px !important;
    row-gap: 16px !important;
  }
  /* Keep generic two-column grids */
  .grid-two {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 16px !important;
    row-gap: 16px !important;
  }
  /* ICC grid in two columns minimum (desktop look) */
  .icc-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    max-width: 1100px !important; /* prevent over-expansion */
    margin-left: auto !important; margin-right: auto !important;
  }
  /* Show stepper labels */
  .stepper .label{ display: inline !important; opacity: 1 !important; visibility: visible !important; }
}


/* === Desktop-lock: fix column width to restore ~627px blocks === */
@media (min-width: 600px), (orientation: landscape) {
  :root { --colW: 1270px !important; --gutter: 16px !important; }
  body.simulation .container,
  body.simulation :is(nav.stepper, .card.section, .section-cta-outside),
  body.projections-frontalier :is(h1, nav.stepper, .stack, .card.section, .chart-card, .section-cta-outside),
  body.projections-resident   :is(h1, nav.stepper, .stack, .card.section, .chart-card, .section-cta-outside){
    max-width: var(--colW) !important;
    width: 100% !important;
    margin-inline: auto !important;
    padding-inline: var(--gutter) !important;
    box-sizing: border-box;
  }
}

/* === Fixes: projections CTA alignment + "Bon à savoir" two columns === */
@media (min-width: 600px), (orientation: landscape) {
  /* Force the CTA row to align with the main container and stretch the rails */
  .section-cta-outside {
    max-width: var(--colW, 1270px) !important;
    width: 100% !important;
    margin: 24px auto !important;
    padding-inline: var(--gutter, 16px) !important;
    box-sizing: border-box;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
  }
  .section-cta-outside .rails-only {
    flex: 1 1 auto !important;
    height: 2px !important;
    background: var(--line, #cfd8e3) !important;
    opacity: .9;
  }

  /* Keep the two intro cards side-by-side under "Bon à savoir" */
  .drawer-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    align-items: stretch !important;
  }
  .drawer-columns > .col { min-width: 0 !important; }
}

/* === Hardening: containers, CTA alignment, parrainage row, drawer columns === */
@media (min-width: 600px), (orientation: landscape) {
  :root { --colW: 1270px !important; --gutter: 16px !important; }

  /* Align major sections to the same max width */
  body.simulation :is(nav.stepper, .stack, .card.section, .section-cta-outside),
  body.projections-resident :is(h1, nav.stepper, .stack, .card.section, .section-cta-outside),
  body.projections-frontalier :is(h1, nav.stepper, .stack, .card.section, .section-cta-outside),
  body.formulaire :is(h1, nav.stepper, .stack, .card.section, .section-cta-outside){
    max-width: var(--colW) !important;
    width: 100% !important;
    margin-inline: auto !important;
    padding-inline: var(--gutter) !important;
    box-sizing: border-box;
  }

  /* CTA row: enforce grid with symmetric rails */
  .section-cta-outside {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    column-gap: 16px !important;
    margin: 24px auto !important;
  }
  .section-cta-outside .rails-only { 
    height: 2px !important; 
    background: var(--line, #cfd8e3) !important; 
    width: 100% !important; 
  }

  /* Keep two columns for general grids */
  .form-grid, .grid-two, .drawer-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
  .drawer-columns > * { min-width: 0 !important; }

  /* Exception: Parrainage row = 3 columns */
  .parrainage .form-grid {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 16px !important;
  }
}

/* === Phone input row + CTA alignment (lock) === */
@media (min-width: 600px), (orientation: landscape) {
  /* Telephone prefix + input on a single row */
  .tel-row { 
    display: grid !important;
    grid-template-columns: 112px 1fr !important;  /* prefix column + flexible input */
    column-gap: 8px !important;
    align-items: center !important;
  }
  .tel-row .tel-cc { 
    width: 112px !important; min-width: 112px !important; 
  }
  .tel-row #telephone { 
    width: 100% !important; 
  }

  /* Reinforce CTA alignment */
  .section-cta-outside {
    max-width: var(--colW, 1270px) !important;
    width: 100% !important;
    margin-inline: auto !important;
    padding-inline: var(--gutter, 16px) !important;
    box-sizing: border-box !important;
    display: grid !important; grid-template-columns: auto 1fr auto !important; column-gap: 16px !important;
    align-items: center !important;
  }
  .section-cta-outside .rails-only { width: 100% !important; height: 2px !important; background: var(--line, #cfd8e3) !important; }
}


/* Projections CTA: make the center rail fill the space between buttons */
@media (min-width: 600px), (orientation: landscape) {
  .section-cta-outside { 
    max-width: var(--colW,1270px) !important;
    width: 100% !important;
    margin-inline: auto !important;
    padding-inline: var(--gutter,16px) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    /* keep any inline justify-content, but rail grows to fill */
  }
  .section-cta-outside .rails-only {
    flex: 1 1 auto !important;
    height: 2px !important;
    background: var(--line, #cfd8e3) !important;
    opacity: .95 !important;
  }
}