/* ==========================================================================
   FLAT DESIGN — aplats, zéro ombre, zéro dégradé. La couleur structure tout.
   ========================================================================== */
[data-theme="flat"] {
  --h1-em: 7.05;
  --blue: #2F5BEA;
  --blue-d: #1E44C4;
  --navy: #14213D;
  --orange: #FF6B35;
  --yellow: #FFD23F;
  --green: #06D6A0;
  --mist: #EEF2F7;

  --bg: #FFFFFF;
  --ink: var(--navy);
  --ink-soft: #44506B;
  --surface: var(--mist);
  --line: #D5DCE8;
  --primary: var(--blue);
  --on-primary: #FFFFFF;
  --focus: var(--navy);
  --font-display: "Rubik", system-ui, sans-serif;
  --font-body: "Rubik", system-ui, sans-serif;
  --radius: 6px;
  --radius-btn: 6px;
  --h1-size: clamp(2.6rem, 6vw, 4.5rem);

  & h1, & h2, & h3 { font-weight: 700; letter-spacing: -.01em; }

  /* En-tête */
  & .site-header { background: #FFFFFF; }
  & .brand__mark {
    display: grid; place-items: center;
    height: 40px; padding-inline: .6rem;
    background: var(--blue); color: #FFFFFF;
    border-radius: 6px; font-weight: 800; font-size: 1.05rem;
  }
  & .brand__name { color: var(--ink-soft); font-weight: 500; }
  & .nav__link { color: var(--navy); font-weight: 500; box-shadow: inset 0 0 0 transparent; }
  & .nav__link:hover { box-shadow: inset 0 -4px 0 var(--yellow); }

  /* Boutons */
  & .btn { font-weight: 600; }
  & .btn--primary:hover { background: var(--blue-d); }
  & .btn--ghost { border-color: var(--navy); color: var(--navy); }
  & .btn--ghost:hover { background: var(--navy); color: #FFFFFF; }

  /* Hero : un grand aplat bleu */
  & .hero { background: var(--blue); color: #FFFFFF; --ink-soft: #FFFFFF; --focus: var(--yellow); }
  & .hero .eyebrow {
    display: inline-block;
    padding: .35rem .7rem;
    background: var(--navy); color: #FFFFFF;
    border-radius: 4px;
  }
  & .hero__title { font-weight: 800; }
  & .hero__line--3 {
    width: fit-content;
    margin-top: .12em;
    padding: 0 .18em .04em;
    background: var(--yellow); color: var(--navy);
    border-radius: 6px;
  }
  & .hero .btn--primary { background: var(--yellow); color: var(--navy); }
  & .hero .btn--primary:hover { background: #FFFFFF; }
  & .hero .btn--ghost { border-color: #FFFFFF; color: #FFFFFF; }
  & .hero .btn--ghost:hover { background: #FFFFFF; color: var(--blue); }

  & .bits__panel { padding: 1.25rem; background: #FFFFFF; color: var(--navy); border-radius: 8px; --ink-soft: #44506B; --focus: var(--navy); }
  & .bits__hint { color: #FFFFFF; }
  & .bit { background: var(--mist); color: var(--ink-soft); border-radius: 4px; }
  & .bit:hover { background: #DCE3EF; }
  & .bit[aria-pressed="true"] { background: var(--blue); color: #FFFFFF; }
  & .byte__char { color: var(--navy); }
  & .bits__reset { border: 0; background: var(--navy); color: #FFFFFF; border-radius: 6px; }
  & .bits__reset:hover { background: var(--blue); }

  & .facts { gap: .75rem; }
  & .fact { padding: 1.1rem 1.25rem; border-radius: 6px; color: var(--navy); }
  & .fact:nth-child(1) { background: var(--yellow); }
  & .fact:nth-child(2) { background: var(--green); }
  & .fact:nth-child(3) { background: var(--orange); }
  & .fact:nth-child(4) { background: #FFFFFF; }
  & .fact__label { color: var(--navy); font-weight: 500; }
  & .fact__value { font-weight: 800; }

  /* Titres de section */
  & .eyebrow { color: var(--blue); }

  /* Histoire : tuiles colorées */
  & .timeline {
    max-width: none;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: .75rem;
  }
  & .event {
    grid-template-columns: minmax(0, 1fr);
    gap: 0; padding: 0; border: 0;
    background: var(--mist);
    border-radius: 6px;
    overflow: hidden;
  }
  & .event__year { padding: .7rem 1.25rem; background: var(--blue); color: #FFFFFF; font-weight: 800; font-size: 1.5rem; }
  & .event[data-kind="science"] .event__year { background: var(--orange); color: var(--navy); }
  & .event--key .event__year { background: var(--yellow); color: var(--navy); }
  & .event--key { background: var(--navy); color: #FFFFFF; --ink-soft: #C5CEE0; }
  & .event__body { padding: 1.1rem 1.25rem 1.4rem; }
  & .event__title { font-size: 1.15rem; }

  /* Programme */
  & .program { background: var(--mist); }
  & .domain { background: #FFFFFF; border-radius: 6px; border-top: 8px solid var(--c, var(--blue)); }
  & .domain:nth-child(6n+2) { --c: var(--orange); }
  & .domain:nth-child(6n+3) { --c: var(--green); }
  & .domain:nth-child(6n+4) { --c: var(--yellow); }
  & .domain:nth-child(6n+5) { --c: var(--navy); }
  & .domain:nth-child(6n+6) { --c: #EF476F; }
  & .domain__year dt { color: var(--blue); }
  & .exam { background: var(--navy); color: #FFFFFF; border-radius: 6px; --ink-soft: #C5CEE0; }
  & .exam__v { color: var(--yellow); }

  /* Projets */
  & .project { background: var(--mist); border-radius: 6px; }
  & .project__icon {
    width: 64px; height: 64px; padding: 14px;
    background: var(--c, var(--blue)); color: #FFFFFF;
    border-radius: 6px;
  }
  & .project:nth-child(6n+2) { --c: var(--orange); }
  & .project:nth-child(6n+3) { --c: var(--green); }
  & .project:nth-child(6n+4) { --c: var(--navy); }
  & .project:nth-child(6n+5) { --c: #7B61FF; }
  & .project:nth-child(6n+6) { --c: #EF476F; }
  & .project:is(:nth-child(6n+2), :nth-child(6n+3)) .project__icon { color: var(--navy); }
  & .tag { background: #FFFFFF; color: var(--navy); border-radius: 4px; }

  /* Après le bac : bande bleu nuit */
  & .futures { background: var(--navy); color: #FFFFFF; --ink-soft: #C5CEE0; --line: rgb(255 255 255 / .18); }
  & .futures .eyebrow { color: var(--yellow); }
  & .path__len { padding: .15rem .55rem; background: var(--yellow); color: var(--navy); border-radius: 4px; }
  & .job { border-radius: 4px; color: var(--navy); background: var(--c, #FFFFFF); }
  & .job:nth-child(5n+1) { --c: var(--yellow); }
  & .job:nth-child(5n+2) { --c: var(--green); }
  & .job:nth-child(5n+3) { --c: #FFFFFF; }
  & .job:nth-child(5n+4) { --c: var(--orange); }
  & .job:nth-child(5n+5) { --c: #9DB4FF; }

  /* Outro */
  & .outro { background: var(--orange); color: var(--navy); --ink-soft: var(--navy); }
  & .outro .btn--primary { background: var(--navy); }
  & .outro .btn--primary:hover { background: var(--blue-d); }

  & .site-footer { background: var(--navy); color: #FFFFFF; --ink-soft: #C5CEE0; border-top: 1px solid rgb(255 255 255 / .12); }
}