/* ===== Device layouts: iPhone (phone) vs iPad (tablet) ===== */
/* Classes set by js/app.js: html.ba-iphone / html.ba-ipad (+ ba-touch) */

html.ba-ipad body{
  font-size: 17px;
}

/* Centered readable column — tablet, not phone-widened */
html.ba-ipad .content-area,
html.ba-ipad .ba-wrap,
html.ba-ipad .p5-live-wrap,
html.ba-ipad .elec-pannes-wrap{
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

html.ba-ipad .ba-wrap{
  padding-left: 32px;
  padding-right: 32px;
}

html.ba-ipad .page-header{
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
  padding-left: 32px;
  padding-right: 32px;
}

html.ba-ipad .page-header h1{
  font-size: 30px;
}

html.ba-ipad .app-header .logo-text{
  font-size: 22px;
  letter-spacing: 3px;
}

/* ===== Accueil iPad: real tablet home =====
   2026.09.28.4 — iPad "belle table propre" (Steve).
   Everything below is scoped to html.ba-ipad AND min-width:744px, so iPhone
   (and iPad Slide Over / narrow split view) keep the phone layout untouched.
   Palette / typography identity unchanged: spacing + alignment only. */
@media (min-width: 744px){
  html.ba-ipad{
    --ba-pad-x: 40px;
    --ba-max: 1000px;
    --ba-gap: 12px;
  }

  /* Header: airy, safe-area aware, in a centred container */
  html.ba-ipad .ba-top{
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: end;
    gap: 16px 28px;
    /* status bar (safe area) + breathing room; also clears the MAJ chip */
    padding: 56px var(--ba-pad-x) 22px;
    padding-top: calc(env(safe-area-inset-top, 0px) + 56px);
    padding-left: var(--ba-pad-x);
    padding-right: var(--ba-pad-x);
    padding-bottom: 22px;
    max-width: var(--ba-max);
    margin: 0 auto;
    box-sizing: border-box;
  }
  html.ba-ipad .ba-brand{max-width: none; width: auto;}
  html.ba-ipad .ba-mark{padding: 4px 0 4px 18px;}
  html.ba-ipad .ba-word{font-size: 44px; letter-spacing: 0.06em; padding-bottom: 10px;}
  html.ba-ipad .ba-tagline{font-size: 16px; letter-spacing: 0.34em; margin-top: 12px;}
  html.ba-ipad .ba-sub{font-size: 15px; margin-top: 6px;}
  html.ba-ipad .ba-quote{
    font-size: 15px;
    max-width: 560px;
    margin-top: 12px;
    line-height: 1.45;
  }
  html.ba-ipad .ba-tools{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    align-self: end;
    width: auto;
    padding: 0 0 4px;
    gap: 10px;
  }
  html.ba-ipad .ba-lang button{
    min-width: 48px;
    min-height: 42px;
    font-size: 13px;
  }
  html.ba-ipad .ba-ac,
  html.ba-ipad .ba-upd{
    min-height: 42px;
    font-size: 13px;
    padding: 10px 16px;
  }

  /* Tabs = centred, even segmented control */
  html.ba-ipad .ba-tabs{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: calc(100% - 2 * var(--ba-pad-x));
    max-width: 540px;
    margin: 6px auto 14px;
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid rgba(62,203,255,.18) !important;
    border-radius: 999px;
    background: #07090b;
    justify-content: stretch;
  }
  html.ba-ipad .ba-tab{
    flex: none;
    width: 100%;
    min-height: 44px;
    font-size: 14px;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    letter-spacing: 0.08em;
    justify-content: center;
  }
  html.ba-ipad .ba-tab.on{
    border-color: rgba(62,203,255,.55);
    background: linear-gradient(135deg,#061018,#0d2840);
    color: #e8f7ff;
    box-shadow: 0 0 14px rgba(62,203,255,.28);
  }
  html.ba-ipad .ba-tab .u{display:none !important;}

  /* Shared centred column for everything under the header */
  html.ba-ipad .hint,
  html.ba-ipad .plus-sub,
  html.ba-ipad .az-wrap{
    max-width: var(--ba-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--ba-pad-x);
    padding-right: var(--ba-pad-x);
    box-sizing: border-box;
  }
  html.ba-ipad .hint{font-size: 14px; margin-top: 0; margin-bottom: 10px;}

  /* Quick tools: uniform grid, equal heights, centred labels.
     Portrait: 4 cols → EAG MEL MEMORY IAS / [De-icing|Corr.] (2) SIM (2) */
  html.ba-ipad #quickRow:not([style*="none"]){
    display: grid !important;
  }
  html.ba-ipad #quickRow{
    max-width: var(--ba-max);
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 var(--ba-pad-x) 16px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 60px;
    gap: var(--ba-gap) !important;
  }
  html.ba-ipad #quickRow .quick-tile{
    flex: none !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    font-size: 15px;
    border-radius: 12px;
    white-space: normal;
    text-align: center;
  }
  html.ba-ipad #quickRow .quick-split{
    grid-column: span 2;
    min-height: 0;
    height: 100%;
  }
  html.ba-ipad #quickRow .quick-split a{
    min-height: 0;
    height: 100%;
    padding: 8px 10px;
    font-size: 15px;
    white-space: nowrap;
  }
  html.ba-ipad #quickRow .quick-tile.sim{grid-column: span 2;}
  html.ba-ipad #quickRow .quick-split.ground{
    grid-column: 1 / -1;
  }
  html.ba-ipad #quickRow .quick-split.ground a{white-space: normal;}

  /* Normal / QRH / Extra lists: uniform card grid (JS sets inline display:flex) */
  html.ba-ipad .ba-list{
    max-width: var(--ba-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--ba-pad-x);
    padding-right: var(--ba-pad-x);
    box-sizing: border-box;
  }
  html.ba-ipad #panelNormal:not([hidden]),
  html.ba-ipad #panelQrh:not([hidden]),
  html.ba-ipad #panelExtra:not([hidden]){
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ba-gap);
    align-items: stretch;   /* equal card heights on each row */
    align-content: start;
  }
  html.ba-ipad .ba-list > .extra-chapter-bar,
  html.ba-ipad .ba-list > .home-chapter-bar,
  html.ba-ipad .ba-list > .extra-tools,
  html.ba-ipad .ba-list > .ba-sf-row,
  html.ba-ipad .ba-list > .x-duo,
  html.ba-ipad .ba-list > :not(.ba-block):not(.ba-fold-row):not(a.ba-row){
    grid-column: 1 / -1;
  }
  html.ba-ipad .ba-list > .home-chapter-bar,
  html.ba-ipad .ba-list > .extra-chapter-bar{margin: 2px 0 6px;}
  html.ba-ipad .ba-list > .extra-tools{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ba-gap);
    padding: 0 0 4px;
  }
  html.ba-ipad .ba-block{margin: 0 !important; gap: 8px; min-width: 0;}
  html.ba-ipad .ba-list > .ba-block > .ba-fold-row{flex: 1 1 auto;}
  html.ba-ipad .ba-list > .ba-block.open > .ba-fold-row{flex: 0 0 auto;}
  /* QRH ch.1 has the longest title ("Airplane General, Emergency Equipment,
     Doors, Windows"): give it 2 cells so the grid rows stay even
     (portrait 0 + 1(x2) = 3 cols · landscape 0 + 1(x2) + 2 = 4 cols) */
  html.ba-ipad #panelQrh > .ba-block[data-n="01"]{grid-column: span 2;}
  /* Extra (Accidents · Maintenance): two big cards side by side */
  html.ba-ipad #panelExtra:not([hidden]){grid-template-columns: repeat(2, minmax(0, 1fr)) !important;}
  /* Opened section spans the full row; its sub-items become a grid too */
  html.ba-ipad .ba-list > .ba-block.open{grid-column: 1 / -1;}
  html.ba-ipad .ba-block.open .ba-kids{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  html.ba-ipad .ba-fold-row{
    border-radius: 14px;
    min-height: 68px;
    height: 100%;
    margin: 0 !important;
  }
  html.ba-ipad .ba-fold-row .ba-fold{min-height: 68px; align-items: center;}
  html.ba-ipad .ba-row .ba-name{font-size: 16px; line-height: 1.25;}
  html.ba-ipad .ba-row{min-height: 56px; padding-top: 12px; padding-bottom: 12px; box-sizing: border-box;}
  html.ba-ipad .ba-list > .ba-block .ba-side{flex: 0 0 64px; min-width: 64px; font-size: 12px; letter-spacing: .1em;}
  html.ba-ipad .ba-list > .ba-block .ba-chev{margin-left: 4px;}
  /* Home wrapper: inner blocks centre themselves */
  html.ba-ipad #wrap.ba-wrap{max-width: none; width: 100%; align-self: stretch; box-sizing: border-box; padding-left: 0; padding-right: 0;}
}

/* ----- Chapter / tool pages (unchanged from 28.3) ----- */
/* Extra Accidents / MX side-by-side */
html.ba-ipad .x-duo{
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 14px !important;
  flex-direction: unset !important;
}
html.ba-ipad .x-big{
  min-height: 110px;
}
html.ba-ipad .x-big .t{font-size: 26px;}

/* QRH: two-column choice buttons when wide */
html.ba-ipad .choice-row{
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
html.ba-ipad .choice-row .choice-btn{
  width: 100%;
  min-height: 64px;
  font-size: 15px;
}
html.ba-ipad .choice-row.stack,
html.ba-ipad .choice-row.full{
  grid-template-columns: 1fr;
}

html.ba-ipad .box-cond .txt,
html.ba-ipad .box-obj .txt,
html.ba-ipad .step-card{
  font-size: 16px;
  line-height: 1.45;
}
html.ba-ipad .end-ok strong,
html.ba-ipad .end-except strong{
  font-size: 22px !important;
}

/* Actions grids (Électrique hub etc.) */
html.ba-ipad .actions-grid{
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
html.ba-ipad .actions-grid .action-btn{
  min-height: 88px;
  font-size: 14px;
}

html.ba-ipad .doc-card{padding: 16px 18px;}
html.ba-ipad .doc-title{font-size: 18px;}

html.ba-ipad .bottom-nav .nav-item{
  font-size: 13px;
  padding: 10px 14px;
}
html.ba-ipad .bottom-nav a.nav-docs{
  font-size: 14px !important;
  padding: 9px 16px !important;
}

html.ba-ipad #baAmdt{
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  font-size: 12px;
  padding: 10px 14px;
}
html.ba-ipad #baBack{
  width: 56px;
  height: 56px;
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
}

/* Landscape iPad (≥1024 wide): 3-col cards, quick tools on one row */
@media (min-width: 1024px) and (orientation: landscape){
  html.ba-ipad{
    --ba-max: 1180px;
    --ba-pad-x: 40px;
  }
  html.ba-ipad .ba-top{
    padding-top: 48px;
    padding-top: calc(env(safe-area-inset-top, 0px) + 48px);
    padding-bottom: 18px;
  }
  html.ba-ipad #quickRow{
    /* EAG MEL MEMORY IAS [De-icing|Corr.](2) SIM = 7 equal columns */
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  html.ba-ipad #quickRow .quick-tile.sim{grid-column: span 1;}
  html.ba-ipad #panelNormal:not([hidden]),
  html.ba-ipad #panelQrh:not([hidden]),
  html.ba-ipad #panelExtra:not([hidden]){
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  html.ba-ipad .ba-block.open .ba-kids{grid-template-columns: repeat(4, minmax(0, 1fr));}
  html.ba-ipad .mode-extra .ba-block.open .ba-kids{grid-template-columns: repeat(4, minmax(0, 1fr));}
}

/* Big iPad Pro portrait (1024 wide): a bit more width for the column */
@media (min-width: 1000px) and (orientation: portrait){
  html.ba-ipad{--ba-max: 1000px; --ba-pad-x: 48px;}
  html.ba-ipad .ba-top{
    padding-top: 64px;
    padding-top: calc(env(safe-area-inset-top, 0px) + 64px);
  }
}

/* Chapter / content pages: readable column on tablets (incl. landscape) */
@media (min-width: 1024px) and (orientation: landscape){
  html.ba-ipad .content-area,
  html.ba-ipad .page-header,
  html.ba-ipad .ba-wrap .content-area{
    max-width: 1060px;
  }
}

html.ba-iphone .content-area{
  max-width: none;
}

#baDevicePill{
  display: none;
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  pointer-events: none;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3ecbff;
  background: rgba(6,16,24,.85);
  border: 1px solid rgba(62,203,255,.45);
  border-radius: 999px;
  padding: 5px 10px;
}
html.ba-ipad #baDevicePill{display: none;}

/* iPad MAJ chip: keep top-right, clear status bar a bit more */
@media (min-width: 744px){
  html.ba-ipad #baMajBadge{
    top: calc(env(safe-area-inset-top, 0px) + 14px) !important;
    right: max(16px, env(safe-area-inset-right, 0px)) !important;
  }
  /* Chapter page headers: airy top like the home */
  html.ba-ipad .app-header{
    padding-top: calc(14px + env(safe-area-inset-top, 0px) + 18px);
    min-height: 64px;
  }
  html.ba-ipad .page-header{
    padding-top: 18px;
  }
}

/* iPad Slide Over / narrow Split View (<744px): behave exactly like the phone
   home (no extra side padding → no horizontal overflow). */
@media (max-width: 743px){
  html.ba-ipad #wrap.ba-wrap{max-width: none; width: 100%; box-sizing: border-box; padding-left: 0; padding-right: 0;}
}

/* ===== 2026.09.28.5 — ACCIDENTS / MAINTENANCE / SNAGS hub row on iPad home =====
   Same centred container + gap as #quickRow. iPhone untouched (base in index.html). */
@media (min-width: 744px){
  html.ba-ipad #baHubRow{
    max-width: var(--ba-max);
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 var(--ba-pad-x) 18px;
    gap: var(--ba-gap);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  html.ba-ipad #baHubRow a.ba-hub{min-height: 84px; border-radius: 14px; padding: 12px 10px;}
  html.ba-ipad #baHubRow .h-t{font-size: 20px;}
  html.ba-ipad #baHubRow a.mtc .h-t{font-size: 20px; letter-spacing: .04em;}
  html.ba-ipad #baHubRow a.snx .h-t{font-size: 24px;}
  html.ba-ipad #baHubRow .h-s{font-size: 13.5px; margin-top: 5px;}
}

/* 2026.10.04.1 — do not expand sections inside the iPad grid.
   Split pane (css/ipad-split.css) owns section open. 2 columns max in portrait fallback. */
@media (min-width: 744px){
  html.ba-ipad .ba-list > .ba-block.open{grid-column:auto !important;}
  html.ba-ipad .ba-block.open .ba-kids{display:none !important;}
  html.ba-ipad #panelQrh > .ba-block[data-n="01"]{grid-column:auto;}
  html.ba-ipad .ba-list > .ba-block .ba-side{
    flex:0 0 auto;
    min-width:0;
    width:auto;
  }
}
@media (min-width: 744px) and (orientation: portrait){
  html.ba-ipad:not(.ba-split-on) #panelNormal:not([hidden]),
  html.ba-ipad:not(.ba-split-on) #panelQrh:not([hidden]){
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 768px){
  html.ba-ipad .content-area:has(a.cl){
    max-width:none !important;
    width:100%;
    padding-left:max(20px, env(safe-area-inset-left, 0px));
    padding-right:max(20px, env(safe-area-inset-right, 0px));
    box-sizing:border-box;
  }
}