/* ==========================================================================
   MAXIMALISME — « Less is a bore ». Motifs, couleurs saturées, polices
   qui se répondent, rotations. Tout texte repose sur un aplat opaque.
   ========================================================================== */
[data-theme="maximal"] {
  --h1-em: 8.75;
  --blue: #2B2BFF;
  --pink: #FF2E93;
  --yellow: #FFE500;
  --mint: #00E0B8;
  --orange: #FF7A00;
  --purple: #7B2FF7;
  --cream: #FFF8E7;

  --bg: var(--blue);
  --ink: #0A0A0A;
  --ink-soft: #1F1F1F;
  --line: #0A0A0A;
  --primary: var(--yellow);
  --on-primary: #0A0A0A;
  --focus: #0A0A0A;
  --font-display: "Bungee", Impact, sans-serif;
  --font-body: "Work Sans", system-ui, sans-serif;
  --font-hand: "Permanent Marker", "Comic Sans MS", cursive;
  --radius: 18px;
  --radius-btn: 14px;
  --b: 3px solid #0A0A0A;
  --pop: 6px 6px 0 #0A0A0A;

  & :focus-visible { outline: 4px solid #0A0A0A; outline-offset: 3px; box-shadow: 0 0 0 8px #FFFFFF; }
  & body {
    background-color: var(--blue);
    background-image: radial-gradient(var(--pink) 2.2px, transparent 2.8px);
    background-size: 26px 26px;
  }
  & h1, & h2, & h3 { font-weight: 400; line-height: 1.02; }

  /* Bandeau défilant */
  & .ticker {
    display: block;
    position: relative; z-index: 51;
    padding: .55rem 0;
    background: var(--yellow);
    border-bottom: var(--b);
    font: 400 1rem/1 var(--font-display);
    color: #0A0A0A;
  }
  & .ticker__track { animation: mx-marquee 28s linear infinite; }
  & .ticker__track span { padding-right: 0; }

  /* Formes en arrière-plan */
  & .backdrop { display: block; }
  & .shape { border: var(--b); }
  & .shape--1 { width: 140px; height: 140px; left: 4vw; top: 30vh; border-radius: 50%; background: var(--yellow); animation: mx-spin 30s linear infinite; background-image: repeating-conic-gradient(var(--yellow) 0 15deg, var(--orange) 15deg 30deg); }
  & .shape--2 { width: 110px; height: 110px; right: 6vw; top: 18vh; background: var(--mint); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); border: 0; animation: mx-spin 22s linear infinite reverse; }
  & .shape--3 { width: 200px; height: 60px; right: 12vw; bottom: 14vh; border-radius: 40px; background: repeating-linear-gradient(90deg, var(--pink) 0 16px, #FFFFFF 16px 32px); transform: rotate(-18deg); }
  & .shape--4 { width: 90px; height: 90px; left: 40vw; bottom: 6vh; background: var(--purple); transform: rotate(20deg); }
  & .shape--5 { width: 70px; height: 70px; left: 70vw; top: 55vh; border-radius: 50%; background: var(--orange); }

  & .site-header { background: var(--pink); border-bottom: var(--b); }
  & .brand__mark {
    display: inline-block;
    padding: .2rem .6rem;
    background: var(--yellow);
    border: var(--b);
    box-shadow: 4px 4px 0 #0A0A0A;
    transform: rotate(-4deg);
  }
  & .brand__name { font-family: var(--font-hand); font-weight: 400; font-size: 1rem; opacity: 1; }
  & .nav__link { padding-inline: .7rem; border-radius: 10px; font-weight: 800; text-transform: uppercase; font-size: .9rem; }
  & .nav__link:hover { background: var(--yellow); box-shadow: inset 0 0 0 3px #0A0A0A; }

  & .btn {
    border: var(--b);
    font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
    box-shadow: 4px 4px 0 #0A0A0A, 8px 8px 0 var(--pink);
    transition: transform .15s cubic-bezier(.3, 1.8, .5, 1), box-shadow .15s;
  }
  & .btn--ghost { background: #FFFFFF; color: #0A0A0A; box-shadow: 4px 4px 0 #0A0A0A, 8px 8px 0 var(--mint); }
  & .btn:hover { transform: rotate(-3deg) scale(1.05); }
  & .btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 #0A0A0A; }

  & .eyebrow {
    display: inline-block;
    padding: .3rem .8rem;
    background: var(--mint);
    border: var(--b);
    border-radius: 999px;
    font-family: var(--font-hand);
    font-size: 1rem; font-weight: 400;
    letter-spacing: .02em; text-transform: none;
    color: #0A0A0A;
    transform: rotate(-3deg);
  }

  /* Hero */
  & .hero__text {
    position: relative;
    padding: clamp(1.5rem, 4vw, 2.75rem);
    background: var(--cream);
    border: 4px solid #0A0A0A;
    border-radius: 28px;
    box-shadow: 10px 10px 0 #0A0A0A, 20px 20px 0 var(--yellow);
    transform: rotate(-1deg);
  }
  & .hero__title { font-size: min(clamp(2.3rem, 6vw, 4.8rem), calc(100cqi / var(--h1-em))); }
  & .hero__line--1 { color: var(--blue); }
  & .hero__line--2 { color: #0A0A0A; text-shadow: 3px 3px 0 var(--pink); }
  & .hero__line--3 {
    width: fit-content;
    margin-top: .15em;
    padding: .05em .25em;
    background: var(--pink);
    border: var(--b);
    transform: rotate(-2deg);
    box-shadow: 5px 5px 0 #0A0A0A;
  }
  & .lead { color: #0A0A0A; font-weight: 500; }

  & .bits {
    padding: 1.5rem;
    background: #0A0A0A;
    color: #FFFFFF;
    border-radius: 24px;
    border: 4px solid var(--yellow);
    box-shadow: 10px 10px 0 var(--pink);
    transform: rotate(1.5deg);
    --ink-soft: #FFFFFF;
    --focus: var(--yellow);
  }
  & .bits :focus-visible { outline-color: var(--yellow); box-shadow: none; }
  & .bits__headline { color: var(--yellow); font-weight: 400; }
  & .bits__hint { font-family: var(--font-hand); }
  & .bit { background: #FFFFFF; color: #0A0A0A; border-radius: 10px; font-weight: 800; transition: transform .2s cubic-bezier(.3, 1.8, .5, 1), background .15s; }
  & .bit:nth-child(odd) { transform: rotate(-4deg); }
  & .bit:nth-child(even) { transform: rotate(3deg); }
  & .bit:hover { transform: rotate(0) scale(1.15); }
  & .byte:nth-child(1) .bit[aria-pressed="true"] { background: var(--pink); }
  & .byte:nth-child(2) .bit[aria-pressed="true"] { background: var(--mint); }
  & .byte:nth-child(3) .bit[aria-pressed="true"] { background: var(--yellow); }
  & .bit[aria-pressed="true"] { box-shadow: 0 0 0 3px #FFFFFF; }
  & .byte__char { color: var(--yellow); font-weight: 400; font-size: 2rem; }
  & .bits__reset { border: 3px solid var(--yellow); color: var(--yellow); font-weight: 800; }
  & .bits__reset:hover { background: var(--yellow); color: #0A0A0A; }
  & .bits__output { color: var(--mint); }

  & .facts { gap: 1.25rem; }
  & .fact { padding: 1rem 1.2rem; border: var(--b); border-radius: 16px; box-shadow: var(--pop); color: #0A0A0A; }
  & .fact:nth-child(1) { background: var(--mint); transform: rotate(-2deg); }
  & .fact:nth-child(2) { background: var(--orange); transform: rotate(1.5deg); }
  & .fact:nth-child(3) { background: var(--yellow); transform: rotate(-1deg); }
  & .fact:nth-child(4) { background: var(--pink); transform: rotate(2deg); }
  & .fact__label { color: #0A0A0A; font-weight: 600; }
  & .fact__value { font-weight: 400; }

  /* En-têtes de section : étiquettes collées */
  & .section__head {
    width: fit-content; max-width: min(46rem, 100%);
    padding: 1.5rem 1.75rem;
    background: #FFFFFF;
    border: 4px solid #0A0A0A;
    border-radius: 22px;
    box-shadow: 8px 8px 0 #0A0A0A;
    transform: rotate(-.8deg);
  }
  & .section__title { font-size: clamp(1.55rem, 5.2vw, 3.2rem); text-shadow: 3px 3px 0 var(--mint); }

  & .history { background: repeating-linear-gradient(45deg, var(--orange) 0 26px, var(--pink) 26px 52px); border-block: 4px solid #0A0A0A; }
  & .timeline { max-width: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1.75rem; }
  & .event { grid-template-columns: minmax(0, 1fr); gap: .3rem; padding: 1.3rem 1.4rem; border: var(--b); border-radius: 20px; box-shadow: var(--pop); background: var(--c, #FFFFFF); transition: transform .2s cubic-bezier(.3, 1.8, .5, 1); }
  & .event:nth-child(4n+1) { --c: var(--yellow); transform: rotate(-2deg); }
  & .event:nth-child(4n+2) { --c: #FFFFFF; transform: rotate(1.5deg); }
  & .event:nth-child(4n+3) { --c: var(--mint); transform: rotate(-1deg); }
  & .event:nth-child(4n+4) { --c: var(--cream); transform: rotate(2deg); }
  & .event:hover { transform: rotate(0) scale(1.03); }
  & .event__year { font-size: 2.4rem; font-weight: 400; color: var(--blue); text-shadow: 2px 2px 0 #0A0A0A; }
  & .event--key { --c: var(--purple) !important; color: #FFFFFF; --ink-soft: #FFFFFF; }
  & .event--key .event__year { color: var(--yellow); }
  & .event__tag { color: #0A0A0A; font-family: var(--font-hand); letter-spacing: 0; text-transform: none; font-size: .95rem; font-weight: 400; }
  & .event--key .event__tag { color: #FFFFFF; }

  & .program {
    background-color: var(--purple);
    background-image: linear-gradient(rgb(255 255 255 / .18) 2px, transparent 2px), linear-gradient(90deg, rgb(255 255 255 / .18) 2px, transparent 2px);
    background-size: 40px 40px;
  }
  & .domains { gap: 1.75rem; }
  & .domain { border: var(--b); border-radius: 22px; box-shadow: var(--pop); background: #FFFFFF; transition: transform .2s cubic-bezier(.3, 1.8, .5, 1); }
  & .domain:nth-child(odd) { transform: rotate(-1deg); background: var(--cream); }
  & .domain:nth-child(3n+2) { transform: rotate(1.2deg); background: var(--yellow); }
  & .domain:hover { transform: rotate(0) scale(1.03); }
  & .domain__title { font-size: 1.3rem; }
  & .domain__hook { font-family: var(--font-hand); color: var(--blue); font-size: 1.1rem; }
  & .domain__year dt { display: inline-block; padding: .1rem .5rem; background: #0A0A0A; color: #FFFFFF; border-radius: 6px; }
  & .domain__year dd { margin-top: .4rem; }
  & .exam { background: #0A0A0A; color: #FFFFFF; border: 4px solid var(--yellow); border-radius: 22px; box-shadow: 10px 10px 0 var(--mint); --ink-soft: #FFFFFF; }
  & .exam__title { color: var(--yellow); }
  & .exam__v { color: var(--mint); font-weight: 400; }

  & .projects { background: repeating-conic-gradient(var(--yellow) 0 25%, #FFFFFF 0 50%) 0 0 / 56px 56px; border-block: 4px solid #0A0A0A; }
  & .project-list { gap: 2rem; }
  & .project { background: #FFFFFF; border: var(--b); border-radius: 22px; box-shadow: 8px 8px 0 #0A0A0A; }
  & .project:nth-child(odd) { transform: rotate(-1.2deg); }
  & .project:nth-child(even) { transform: rotate(1deg); }
  & .project__icon { width: 68px; height: 68px; padding: 16px; border: var(--b); border-radius: 50%; background: var(--c, var(--pink)); color: #0A0A0A; stroke-width: 2.2; box-shadow: 3px 3px 0 #0A0A0A; }
  & .project:nth-child(6n+2) { --c: var(--mint); }
  & .project:nth-child(6n+3) { --c: var(--orange); }
  & .project:nth-child(6n+4) { --c: var(--yellow); }
  & .project:nth-child(6n+5) { --c: #9D8CFF; }
  & .project:nth-child(6n+6) { --c: #7CD4FF; }
  & .project__title { font-size: 1.15rem; }
  & .tag { background: #0A0A0A; color: #FFFFFF; border-radius: 999px; }

  & .futures { background: var(--mint); }
  & .futures .section__head { background: var(--cream); }
  & .futures__block { padding: 1.75rem; border: 4px solid #0A0A0A; border-radius: 24px; box-shadow: 8px 8px 0 #0A0A0A; }
  & .futures__block--studies { background: #0A0A0A; color: #FFFFFF; --ink-soft: #FFFFFF; --line: rgb(255 255 255 / .3); --focus: var(--yellow); }
  & .futures__block--studies .futures__title { color: var(--yellow); }
  & .futures__block--jobs { background: var(--pink); transform: rotate(1deg); --ink-soft: #0A0A0A; }
  & .path__len { padding: .1rem .5rem; background: var(--yellow); color: #0A0A0A; border-radius: 8px; font-weight: 800; }
  & .job { background: var(--c, #FFFFFF); border: var(--b); border-radius: 999px; font-weight: 700; }
  & .job:nth-child(4n+1) { --c: var(--yellow); transform: rotate(-2deg); }
  & .job:nth-child(4n+2) { --c: #FFFFFF; transform: rotate(1deg); }
  & .job:nth-child(4n+3) { --c: var(--mint); transform: rotate(2deg); }
  & .job:nth-child(4n+4) { --c: var(--cream); transform: rotate(-1deg); }
  & .combos { font-weight: 600; }

  & .outro { background: conic-gradient(from 20deg at 50% 50%, var(--pink), var(--yellow), var(--mint), var(--blue), var(--purple), var(--pink)); border-block: 4px solid #0A0A0A; }
  & .outro > .inner {
    width: calc(100% - var(--gutter) * 2);
    max-width: 860px;
    margin-block: var(--section-pad);
    padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
    background: #FFFFFF;
    border: 4px solid #0A0A0A;
    border-radius: 32px;
    box-shadow: 12px 12px 0 #0A0A0A;
    transform: rotate(-1deg);
  }
  & .outro__title { font-size: clamp(2.4rem, 7vw, 4.6rem); color: var(--blue); text-shadow: 3px 3px 0 var(--pink), 6px 6px 0 #0A0A0A; }

  & .site-footer { background: #0A0A0A; color: #FFFFFF; --ink-soft: #FFE500; }
  & .site-footer :focus-visible { outline-color: var(--yellow); }
}

@keyframes mx-marquee { to { transform: translateX(-50%); } }
@keyframes mx-spin { to { rotate: 360deg; } }