/* ============================================================
   BIM DAY .MA — inner-page system
   Extends css/styles.css. Loaded AFTER it on every inner page.
   The homepage hero (two heads + ASCII) is its signature and is
   deliberately NOT reused here; inner pages open on .phero.
   ============================================================ */

/* ---------- page hero ---------- */
.phero{position:relative;padding-block:clamp(120px,17vh,190px) clamp(52px,7vw,88px);
  border-bottom:1px solid var(--rule);overflow:clip}
.phero__in{position:relative;z-index:1;text-align:center}
/* Centred like the homepage hero — which is also what lets the classical heads flank the
   page instead of landing on the copy. */
.phero__crumb{justify-content:center}
.phero__t{margin-inline:auto}
.phero__l{margin-inline:auto}
.phero__meta{text-align:left}
.phero__crumb{display:flex;align-items:center;gap:.55rem;color:var(--ink-faint);
  margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.phero__crumb a{color:var(--ink-mute);text-decoration:none;transition:color .25s ease}
.phero__crumb a:hover{color:var(--green)}
.phero__crumb span[aria-hidden]{opacity:.5}
/* The hero eyebrow wears the site's own mark — the two green half-brackets of
   .sh__tag--laurel, echoing the logo lockup — not an invented dash rule. */
.phero__k{display:inline-block;position:relative;padding:9px 20px;color:#fff;
  margin-bottom:1.4rem}
.phero__k::before,.phero__k::after{content:"";position:absolute;left:0;right:0;
  height:34%;border:1px solid var(--green);pointer-events:none}
.phero__k::before{top:0;border-bottom:0}
.phero__k::after{bottom:0;border-top:0}
.phero__t{font-family:var(--disp);font-weight:600;font-size:var(--d1);line-height:1.04;
  letter-spacing:-.03em;color:var(--ink);max-width:16ch;text-wrap:balance}
.phero__t .hn-dot{color:var(--red)}
.phero__l{margin-top:1.6rem;max-width:56ch;font-size:clamp(1rem,1.5vw,1.16rem);
  line-height:1.62;color:var(--ink-quiet);text-wrap:pretty}

/* the meta strip that closes the hero — mirrors the homepage fact bands */
/* fill matches the homepage hero fact bands (.hero__info>div) — without it the
   section's aurora shows straight through and the numbers lose contrast */
.phero__meta{display:flex;flex-wrap:wrap;gap:0;margin-top:clamp(2.4rem,4vw,3.4rem);
  background-color:rgba(5,6,5,.82);backdrop-filter:blur(5px);
  border:1px dashed rgba(255,255,255,.16);border-radius:0}
.phero__meta>div{flex:1 1 200px;padding:15px 20px;border-left:1px dashed rgba(255,255,255,.16)}
.phero__meta>div:first-child{border-left:0}
.phero__meta dt{color:var(--green);font-family:var(--mono);font-weight:600;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.42rem}
.phero__meta dd{margin:0;color:var(--ink);font-size:.94rem;line-height:1.45}

/* ---------- prose ---------- */
.prose{max-width:68ch;display:grid;gap:1.25rem}
.prose p{color:var(--ink-quiet);font-size:1.02rem;line-height:1.72;text-wrap:pretty}
.prose strong{color:var(--ink);font-weight:600}
.prose h3{font-family:var(--disp);font-weight:600;font-size:clamp(1.2rem,2.2vw,1.5rem);
  color:var(--ink);letter-spacing:-.02em;margin-top:1rem}
.prose--lead p:first-child{font-size:clamp(1.1rem,1.9vw,1.32rem);color:var(--ink);
  line-height:1.55;letter-spacing:-.01em}

/* left-aligned section head (the homepage .sh is centred) */
.sh--l{text-align:left;margin-inline:0;max-width:none}
/* a section head runs the width of its section — capping it at 20ch stacked
   every question into a narrow left column */
.sh--l .sh__t{margin-inline:0;max-width:none}

/* ---------- data table ---------- */
/* Sits on the same dark plate as the homepage fact bands — without a fill the section's
   aurora bleeds through the rows and the whole grid goes muddy. */
.dtable{width:100%;border-collapse:separate;border-spacing:0;font-size:.93rem;
  background-color:rgba(5,6,5,.82);backdrop-filter:blur(5px);
  border:1px dashed rgba(255,255,255,.16)}
.dtable caption{text-align:left;color:var(--ink-mute);font-family:var(--mono);
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;padding-bottom:.85rem}
.dtable th,.dtable td{padding:14px 18px;text-align:left;vertical-align:middle;
  border-top:1px solid rgba(255,255,255,.07)}
.dtable thead th{color:var(--green);font-family:var(--mono);font-weight:600;
  font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;border-top:0;
  white-space:nowrap;padding-block:15px;
  background:rgba(255,255,255,.028);
  border-bottom:1px solid rgba(255,255,255,.12)}
/* the row label anchors the scroll on narrow screens */
.dtable tbody th{color:var(--ink);font-weight:600;font-family:var(--disp);font-size:.95rem;
  position:sticky;left:0;background-color:rgba(8,9,8,.96);
  border-right:1px solid rgba(255,255,255,.07)}
.dtable thead th:first-child{position:sticky;left:0;z-index:1;
  background-color:rgba(10,11,10,.97)}
.dtable td{color:var(--ink-quiet)}
.dtable tbody tr:hover td{background:rgba(255,255,255,.03)}
.dtable tbody tr:hover th{background-color:rgba(14,16,14,.97)}
.dtable .num{font-family:var(--mono);color:var(--ink);white-space:nowrap}
.dtable .yes{color:var(--green);font-weight:600}
/* an em dash is an absence, not a value — quiet it right down */
.dtable .no{color:rgba(221,221,221,.22)}
/* the tier being sold gets the same emphasis its card has (.pass--hi) */
.dtable--hi2 thead th:nth-child(2){color:#fff;background:rgba(69,153,86,.16)}
.dtable--hi2 tbody td:nth-child(2){background:rgba(69,153,86,.06);color:var(--ink)}
.dtable--hi2 tbody tr:hover td:nth-child(2){background:rgba(69,153,86,.10)}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
.tscroll>.dtable{min-width:680px}

/* ---------- timeline (programme) ---------- */
.tl{display:grid;gap:0;border-top:1px solid var(--rule)}
.tl__row{display:grid;grid-template-columns:132px 1fr;gap:clamp(1rem,3vw,2.4rem);
  padding-block:clamp(1.15rem,2.2vw,1.7rem);border-bottom:1px solid var(--rule);
  transition:background .3s ease}
.tl__row:hover{background:rgba(255,255,255,.018)}
.tl__h{color:var(--green);font-family:var(--mono);font-weight:600;font-size:.82rem;
  letter-spacing:.04em;padding-top:.16rem;white-space:nowrap}
.tl__t{font-family:var(--disp);font-weight:600;font-size:clamp(1.02rem,1.7vw,1.2rem);
  color:var(--ink);letter-spacing:-.01em;line-height:1.32}
.tl__b{margin-top:.5rem;color:var(--ink-mute);font-size:.94rem;line-height:1.6;
  max-width:62ch;text-wrap:pretty}
.tl__tag{display:inline-block;margin-top:.7rem;padding:4px 10px;border:1px solid var(--rule-2);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mute)}
.tl__row--break .tl__t{color:var(--ink-mute);font-weight:500}

/* ---------- generic card grid ---------- */
.cgrid{display:grid;gap:clamp(14px,1.6vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.ccard{padding:clamp(1.5rem,2.4vw,2rem);border:1px solid var(--rule);
  background:var(--ground-alt);display:flex;flex-direction:column;gap:.85rem}
.ccard__k{color:var(--green)}
.ccard h3{font-family:var(--disp);font-weight:600;font-size:1.16rem;color:var(--ink);
  letter-spacing:-.015em;line-height:1.3}
.ccard p{color:var(--ink-mute);font-size:.95rem;line-height:1.62}
.ccard ul{list-style:none;display:grid;gap:.5rem;margin-top:auto;padding:.3rem 0 0}
.ccard li{position:relative;padding-left:1.1rem;color:var(--ink-quiet);font-size:.9rem;
  line-height:1.5}
.ccard li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:1px;
  background:var(--green)}

/* price inside a card — smaller than the homepage .pass__price */
.ccard__price{font-family:var(--disp);font-weight:600;font-size:clamp(1.6rem,2.4vw,2.1rem);
  letter-spacing:-.02em;color:#fff;line-height:1.1;margin:.1rem 0 .3rem}
.ccard__price span{font-family:var(--mono);font-weight:600;font-size:.6rem;letter-spacing:.12em;
  color:rgba(221,221,221,.62)}

/* 4-up tier grid — the four paliers must sit on one row on desktop */
.cgrid--4{grid-template-columns:repeat(auto-fit,minmax(228px,1fr))}
.cgrid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.cgrid--wide{margin-top:clamp(2.2rem,4vw,3rem)}

/* .note belongs to styles.css (a quiet mono caveat line). Do NOT redefine it here —
   an earlier green-left-border override made every caveat look like a generic callout. */

@media (max-width:720px){
  .tl__row{grid-template-columns:1fr;gap:.5rem}
  .phero__meta>div{flex-basis:100%;border-left:0;border-top:1px dashed var(--rule-2)}
  .phero__meta>div:first-child{border-top:0}
}

/* ---------- inner-page adjustments to homepage components ---------- */
/* the homepage .pass__cta is a <button> (centres by default); inner pages use an <a>, which
   inherits the card's left alignment — restore the button's centring rather than inlining it. */
a.pass__cta{text-align:center}
/* rhythm helpers, so fragments carry no inline styles */
.mt-1{margin-top:1.8rem}
.mt-2{margin-top:2rem}
.mt-3{margin-top:clamp(2rem,3.4vw,2.8rem)}
.mb-1{margin-bottom:1.8rem}

/* the currency suffix must never wrap off the price ("15 000 MAD / HT") */
.pass__price span{white-space:nowrap}
/* inline link button — the site's filled treatment, NOT the green outlined .cta,
   which stretches to full width inside a flex card and reads as an empty box. */
/* .btn moved to styles.css: the hand-authored homepages load styles.css only,
   so .btn there rendered as unstyled inline text. */
.ccard .btn,.mcard .btn{align-self:flex-start;margin-top:auto}

/* The 1120px shell is sized for editorial text. A 4-up tier grid inside it gives each
   card ~215px, so every benefit line wraps three times. Pricing rows get their own
   wider container; the reading columns keep the narrow one. */
.shell--wide{max-width:1340px}
@media(min-width:1180px){
  .shell--wide .passes{gap:28px}
}

/* ---------- surfaces ----------
   Every boxed surface on an inner page needs a fill: the page's aurora backdrop is
   position:fixed, so anything transparent turns muddy green as you scroll. This is the
   same plate the homepage puts behind its hero fact bands. (pages.css only loads on
   inner pages, so .dashbx here does not touch the homepage's own use of it.) */
.dashbx{background-color:rgba(5,6,5,.82);backdrop-filter:blur(5px)}

/* Long caveats: the site's .note is a short uppercase mono line and stays that way.
   A multi-sentence note gets the blueprint plate instead — dashed frame + corner marks,
   the same drawing idiom as .dashbx and the nav — never a coloured left bar. */
.note:not(.mono){
  margin-top:1.8rem;padding:1.2rem 1.5rem;max-width:none;letter-spacing:0;
  color:var(--ink-mute);font-size:.93rem;line-height:1.65;
  background-color:rgba(5,6,5,.82);backdrop-filter:blur(5px);
  border:1px dashed rgba(221,221,221,.22)}
.note:not(.mono) strong{color:var(--ink);font-weight:600}

/* Inner pages stack many more sections than the homepage, so the homepage's 100px
   section padding compounds into a very tall page. Tighten it here only. */
.band.sec{padding-block:clamp(58px,7vw,86px)}

/* ---------- the classical heads on inner pages ----------
   Same geometry, size, filter and scroll-tuck as the homepage — the rules in styles.css
   already do all of that, so nothing is overridden here. The one guard: inner-page copy is
   left-aligned (the homepage hero is centred), so the heads sit BEHIND the content instead
   of the homepage's z-index 4 — a guard for the long left-aligned body copy further down
   the page, which the centred hero itself no longer needs. */
body[data-page] .hero__head{z-index:0}

/* The vision row on inner pages: the tower is decoration, the copy is the content —
   give the text the larger share instead of an even split. */
body[data-page] .vis{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
body[data-page] .vis__body .sec__lead{margin-inline:0;text-align:left;max-width:38ch}
body[data-page] .vis__body .sec__prose{margin-inline:0;text-align:left;max-width:58ch}

/* ---------- caption plate over the tower ----------
   The venue line sits ON the tower image rather than below the body copy. */
body[data-page] .vis__tower{position:relative}
.vis__quote--over{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);
  z-index:2;margin-top:0;width:max-content;max-width:92%;
  background-color:rgba(5,6,5,.88);backdrop-filter:blur(6px)}
@media(max-width:900px){
  /* inner pages stack the tower under the copy instead of hiding it behind, so the
     caption plate stays readable */
  body[data-page] .vis__tower{position:relative;inset:auto;height:auto;margin-top:2.2rem;
    display:block;overflow:visible}
  body[data-page] .vis__tower img{position:static;height:auto;width:min(100%,340px);
    max-width:100%;margin-inline:auto;opacity:.6}
  .vis__quote--over{position:absolute;bottom:4%}
}

/* ---------- "Le contexte" ----------
   Three cards whose only content is icon + eyebrow + title. The .mcards grid stretches its
   children, so a card carrying a body sentence while its siblings do not leaves them with a
   void; keeping all three title-only makes stretch harmless and the row compact. */
.mcards--flat{margin-top:2.4rem}
.mcards--flat .mcard{padding:26px 24px}
.mcards--flat .mcard__i{height:60px;margin-bottom:1.15rem}
.mcards--flat .mcard h3{margin:.5rem 0 0;font-size:1.3rem}
/* the pull line: scroll-lit (data-scrub) rather than a static slab. Wide enough to land in
   three lines — at 30ch it wrapped into a six-line block, which is the slab again. */
.ctx__lead{max-width:46ch;margin-top:clamp(2rem,3.4vw,2.6rem);text-align:left;margin-inline:0;
  font-size:clamp(1.35rem,2.2vw,1.85rem);line-height:1.28}
/* the objective stat, then the closing note on its own line. A right-aligned mono caption at
   26ch stacked into three cramped lines, so it closes the section the way every other one does. */
.ctx__foot{display:block}
.ctx__lead + .figs{margin-top:clamp(1.8rem,3vw,2.4rem);padding-top:1.2rem;
  border-top:1px solid var(--rule)}
.ctx__lead ~ .figs .figs__k{display:block;margin-bottom:.9rem}
.ctx__lead ~ .figs .figs__row{grid-template-columns:1fr;gap:0}
.ctx__lead ~ .figs{text-align:left}
.ctx__lead ~ .figs .figs__l{max-width:none}
@media(max-width:820px){
  .ctx__foot{flex-direction:column;align-items:flex-start}
  .ctx__foot .note{text-align:left}
  .ctx__lead{max-width:none}
}

/* .spk__img--cut moved to styles.css: the card also appears on the hand-authored
   homepage, which loads styles.css only. */

/* ---------- lockup inside a page hero ----------
   A sponsor lands on the partnership page first, so the brand, venue, organiser and pilot
   sit in the hero itself. Same marks as the footer strip, sized for the hero. */
.phero__lock{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(16px,2.6vw,32px);margin-top:clamp(1.8rem,3vw,2.4rem);
  padding-top:clamp(1.4rem,2.4vw,1.8rem);border-top:1px dashed rgba(255,255,255,.14)}
.phero__lock figure{margin:0;display:flex;align-items:center;gap:.65rem}
.phero__lock .mono{color:var(--ink-faint);font-size:.55rem;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap}
.phero__lock img{height:26px;width:auto;max-width:104px;object-fit:contain;display:block;
  opacity:.85;transition:opacity .3s ease}
/* a square mark reads smaller than a wide one at equal height — give it a little back */
.phero__lock figure:nth-child(2) img{height:32px;max-width:56px}
.phero__lock svg{height:26px;width:auto;display:block}
.phero__lock figure:hover img{opacity:1}
@media(max-width:640px){
  .phero__lock{gap:14px}
  .phero__lock img,.phero__lock svg{height:22px}
  .phero__lock .mono{display:none}
}

/* no orphaned last words in the hero fact cells or the hero lead */
.phero__l,.phero__crumb{text-wrap:pretty}
.phero__meta dd{text-wrap:pretty}
.phero__meta dd{hyphens:none}

/* closing statement + signature plate, side by side.
   NOT named .sig: styles.css already owns that class for the President's signature
   (max-width:52ch), which capped this row and leaked grid rules onto his block. */
/* the signature plate carries a display line, so it takes the larger share of the row:
   at the previous 1.25fr/1fr it was ~430px and the line broke three ways. */
.closer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,3.4vw,3rem);align-items:stretch;margin-top:clamp(1.8rem,3vw,2.4rem)}
/* both columns fill the section width, like the card row above:
   .lede caps at 60ch and .vis__quote is width:fit-content by default, so each is released here */
.closer .lede{margin-top:0;max-width:none;align-self:center}
.closer .vis__quote{margin-top:0;width:auto;justify-self:stretch;align-content:center;
  padding:clamp(1.5rem,2.4vw,2rem) clamp(1.6rem,2.6vw,2.2rem)}
.closer .vis__quote strong{text-wrap:balance}
@media(max-width:820px){ .closer{grid-template-columns:1fr} }

/* a closing statement that sits on the centre axis */
.lead--c{text-align:center;margin-inline:auto;max-width:52ch}

/* ---------- a summary row of tiers (article pages) ----------
   .pass is built to end in a CTA pinned with margin-top:auto and reserves a 92px
   description block. A summary card has neither, so it renders as a tall void.
   .passes--sec already solves this but is a hard 3-up grid; this is the 4-up twin. */
.passes--sum .pass{padding-bottom:26px;-webkit-mask-image:none;mask-image:none}
.passes--sum .pass::before{display:none}
.passes--sum .pass__desc{min-height:0}

/* ------------------------------------------------------------------
   .mcard--full — a four-card row leaves the last card stranded at a
   third of the width. Spanning it across the grid and splitting its
   body into two columns fills that row instead of padding it out.
   .mcard is flex-column, so the grid override is scoped to desktop;
   below 900px the card falls back to the normal stacked layout.
   ------------------------------------------------------------------ */
.mcard--full{grid-column:1/-1}
@media(min-width:901px){
  .mcard--full{display:grid;grid-template-columns:1.08fr .92fr;
    column-gap:48px;grid-template-rows:auto auto 1fr;align-items:start}
  .mcard--full>.mcard__k{grid-column:1;grid-row:1}
  .mcard--full>h3{grid-column:1;grid-row:2}
  .mcard--full>.mcard__b{grid-column:1;grid-row:3;margin-bottom:0}
  .mcard--full>.mcard__l{grid-column:2;grid-row:1/-1;
    margin:0;align-self:center;align-content:center}
}

/* ------------------------------------------------------------------
   ARTICLE MEASURE — body copy runs the full shell on article pages.
   The 52-68ch caps are right for a marketing page, but an article band
   is a single column of prose and those caps left the right half of
   every section empty. Scoped by data-page so the marketing pages and
   the hero/card measures are untouched.
   ------------------------------------------------------------------ */
body[data-page^="article-"] .prose,
body[data-page^="article-"] .prose--narrow,
body[data-page^="article-"] .prose--full,
body[data-page^="article-"] .lede,
body[data-page^="article-"] .mid .lede,
body[data-page^="article-"] .tl__b,
body[data-page^="article-"] .sched__b p,
body[data-page^="article-"] .quote,
body[data-page^="article-"] .quote--wide,
body[data-page^="article-"] .sig{max-width:none}

/* The article sections reuse id="programme", and #programme .sched__b p (1,1,1)
   out-ranks the attribute+class rule above, so the schedule copy stayed at 58ch
   on the masterclasses articles. Match the id explicitly to win the cascade. */
body[data-page^="article-"] #programme .sched__b p{max-width:none}