/* ============================================================
   modus. — course.css
   /parcours-ia (FR) · /ai-course (EN) — the 100/101/102 course
   landing page. Tokens and shared components come from base.css;
   nothing here redefines a token.

   Contrast: green as TEXT on paper uses --green-ink (4.70:1),
   never --green (3.21:1). Muted text on paper is --slate-ink,
   on navy is --slate. Both clear AA.
   ============================================================ */

/* ============ HERO ============
   The one page on the site whose hero is a photograph rather than a
   dot field. The scrim does the work the veil does elsewhere: it
   carries text contrast and hands the section off to the navy below. */
.course-hero{
  position:relative;overflow:hidden;
  min-height:min(92vh,860px);
  display:flex;align-items:flex-end;
  /* the bottom padding also has a job: the consent banner is fixed at the
     bottom-left of the viewport, and a hero CTA sitting under it is a primary
     action covered on a first visit. */
  padding:190px 0 156px;
}
.course-hero .wrap{position:relative;z-index:2}
.course-hero-img{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;   /* replaced element: needs both, see rule 4 */
  object-fit:cover;object-position:50% 42%;
}
.course-hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(22,40,60,.58) 0%,
    rgba(22,40,60,.42) 38%,
    rgba(22,40,60,.93) 80%,
    var(--navy) 100%);
}
.course-hero h1{
  font-size:clamp(38px,6.4vw,76px);line-height:1.02;letter-spacing:-.035em;
  max-width:14ch;color:#fff;
}
.course-hero h1 .dot{color:var(--green-on-navy)}
.course-hero .lead{max-width:56ch;margin-top:22px;color:var(--paper)}
.course-hero .lead-2{
  max-width:56ch;margin-top:14px;font-size:clamp(16px,1.4vw,18.5px);
  line-height:1.55;color:rgba(248,249,247,.76);
}
.course-hero .lead-2 b{color:var(--green-on-navy);font-weight:700}
.course-hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}

@media(max-width:720px){
  /* keep a real height: without it the section collapses to the text and the
     photograph — the whole point of this hero — is cropped to a sliver. */
  /* shorter than the viewport on purpose: the consent banner is a full-width
     bottom sheet on mobile, and a hero whose CTA lands under it is a primary
     action a first-time visitor cannot see. */
  .course-hero{padding:124px 0 44px;min-height:min(64vh,520px)}
  .course-hero-img{object-position:42% 46%}   /* both men, and the handshake */
  .course-hero-actions{gap:10px}
  .course-hero-actions .btn{width:100%;justify-content:center}
}

/* ============ SIGNUP ============ */
.course-signup{padding-top:86px}
.signup-card{
  max-width:760px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  padding:clamp(28px,4vw,54px);
}
.signup-card h2{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em;margin:12px 0 10px}
.signup-sub{color:rgba(248,249,247,.74);max-width:52ch;line-height:1.55;margin-bottom:30px}

.sf-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:620px){.sf-row{grid-template-columns:1fr;gap:0}}

.sf-field{margin-bottom:18px}
.sf-field label{
  display:block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--slate);margin-bottom:9px;
}
.sf-field label em{font-style:normal;text-transform:none;letter-spacing:0;font-size:12px}
.sf-field input{
  width:100%;background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.14);
  border-radius:8px;color:var(--paper);font-family:var(--sans);font-size:16px;
  padding:14px 16px;
}
.sf-field input:focus{outline:none;border-color:var(--green);background:rgba(0,0,0,.32)}
.sf-field input:focus-visible{outline:2px solid var(--green-lit);outline-offset:2px}
.sf-field.bad input{border-color:#E4796B}

.sf-err{display:none;font-size:13px;color:#E4796B;margin-top:8px}
.sf-field.bad .sf-err,
.sf-consent-row.bad + .sf-err{display:block}

/* express consent — a real checkbox, not a pre-ticked assumption */
.sf-consent-row{
  display:flex;align-items:flex-start;gap:12px;margin:6px 0 4px;
  padding:16px;border:1px solid rgba(255,255,255,.10);border-radius:10px;
  background:rgba(0,0,0,.14);
}
.sf-consent-row.bad{border-color:#E4796B}
.sf-consent-row input[type=checkbox]{
  flex:none;width:20px;height:20px;margin-top:1px;accent-color:var(--green);cursor:pointer;
}
.sf-consent-row input[type=checkbox]:focus-visible{outline:2px solid var(--green-lit);outline-offset:2px}
.sf-consent-row label{
  font-size:14px;line-height:1.55;color:rgba(248,249,247,.80);cursor:pointer;
}

.sf-submit{width:100%;justify-content:center;margin-top:18px}
.sf-submit[disabled]{opacity:.6;pointer-events:none}
.sf-status{font-size:14px;margin-top:14px;min-height:1px;color:var(--slate)}
.sf-status.err{color:#E4796B}
.sf-privacy{font-size:12.5px;color:var(--slate);margin-top:18px;line-height:1.55;max-width:60ch}
.sf-privacy a{border-bottom:1px solid rgba(255,255,255,.28)}

.sf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.sf-done{text-align:left}
.sf-check{
  width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(29,158,117,.16);color:var(--green-on-navy);margin-bottom:18px;
}
.sf-done h2{margin-bottom:10px}
.sf-done h2:focus{outline:none}
.sf-done p{font-size:15.5px;color:rgba(248,249,247,.75);line-height:1.55;max-width:48ch}

/* ============ CURRICULUM ============ */
.levels{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px;
}
@media(max-width:900px){.levels{grid-template-columns:1fr}}

.level{
  background:#fff;border:1px solid var(--light);border-radius:16px;
  padding:34px 30px;display:flex;flex-direction:column;
}
.level-first{border-top:3px solid var(--green)}
.level-n{
  font-family:var(--mono);font-size:13px;letter-spacing:.16em;color:var(--slate-ink);
}
.level h3{font-size:clamp(19px,1.8vw,23px);letter-spacing:-.015em;margin:10px 0 4px}
.level-list{list-style:none;margin:16px 0 24px;padding:0;flex:1}
.level-list li{
  font-size:15px;line-height:1.5;color:var(--muted);
  padding:9px 0 9px 22px;position:relative;border-bottom:1px solid var(--paper);
}
.level-list li::before{
  content:"";position:absolute;left:0;top:17px;
  width:10px;height:1.5px;background:var(--green);
}
.level-chip{
  align-self:flex-start;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate-ink);
  border:1px solid var(--light);border-radius:100px;padding:7px 15px;
}

/* ============ WHO MODUS IS ============ */
.who-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:start}
@media(max-width:900px){.who-grid{grid-template-columns:1fr;gap:40px}}
.who-grid .lead{max-width:56ch}
.who-tagline{
  font-size:clamp(19px,2vw,25px);font-weight:700;line-height:1.3;letter-spacing:-.015em;
  color:var(--paper);border-left:3px solid var(--green);padding-left:22px;margin:30px 0 30px;
  max-width:32ch;
}
.who-points{display:flex;flex-direction:column}
.who-point{padding:26px 0;border-bottom:1px solid rgba(255,255,255,.10)}
.who-point:first-child{border-top:1px solid rgba(255,255,255,.10)}
.who-point h4{font-size:17px;font-weight:700;margin-bottom:8px}
.who-point .wp-d{color:var(--green-on-navy)}
.who-point p{font-size:15.5px;line-height:1.55;color:rgba(248,249,247,.74)}

/* ============ CASE STUDY ============ */
.course-case .case-card{
  background:#fff;border:1px solid var(--light);border-radius:18px;
  padding:clamp(32px,4.4vw,60px);max-width:900px;
}
.course-case h2{font-size:clamp(24px,2.8vw,36px);letter-spacing:-.025em;margin:12px 0 16px;max-width:22ch}
.course-case .lead{max-width:56ch;margin-bottom:30px}

/* ============ next band ============
   Same shape as the guide pages. base.css styles .btn-ghost for navy
   sections, so a page with its own stylesheet must repeat the paper
   override or the button is paper-on-paper and invisible. */
.next-band{border-top:1px solid var(--light);padding-top:96px}
.next-grid{display:grid;grid-template-columns:1fr 340px;gap:60px;align-items:end}
.next-grid h2{max-width:22ch}
.next-grid .lead{max-width:54ch}
.next-actions{display:flex;flex-direction:column;gap:12px}
.next-actions .btn{justify-content:center}
.next-note{font-size:13.5px;line-height:1.6;color:var(--slate-ink);margin-top:6px}
@media(max-width:820px){
  .next-grid{grid-template-columns:1fr;gap:32px;align-items:start}
}

.paper .btn-ghost{border-color:rgba(22,40,60,.22);color:var(--navy)}
.paper .btn-ghost::before{background:var(--navy)}
.paper .btn-ghost:hover{color:var(--paper)}

@media(prefers-reduced-motion:reduce){
  .course-hero-img{transform:none}
}