:root {
  --navy-950: #030914;
  --navy-900: #061225;
  --navy-800: #0a1d37;
  --cyan: #30dcff;
  --cyan-soft: #30dcff;
  --violet: #8d72ff;
  --pink: #e65cff;
  --white: #f6fbff;
  --muted: #a6b8cc;
  --line: rgba(114, 209, 255, .18);
  --glass: rgba(10, 29, 55, .68);
  --radius: 22px;
  --shadow: 0 30px 90px rgba(0, 0, 0, .34);
  --max: 1180px;
}

* { box-sizing: border-box; }
html {
  max-width: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  color: var(--white);
  background:
    radial-gradient(circle at 72% 7%, rgba(63, 41, 151, .24), transparent 32rem),
    radial-gradient(circle at 5% 35%, rgba(0, 179, 255, .11), transparent 29rem),
    var(--navy-950);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
  overflow-x: hidden;
}
body.motion-reduced *, body.motion-reduced *::before, body.motion-reduced *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
a { color: inherit; }
button, input, textarea { font: inherit; }
button { color: inherit; }
img { max-width: 100%; height: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 1rem; z-index: 1000; padding: .8rem 1rem; color: #00101c; background: var(--cyan); border-radius: 0 0 8px 8px; }
.skip-link:focus { top: 0; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }

.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  min-height: 76px;
  padding: .75rem max(1.2rem, calc((100vw - var(--max)) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgba(3, 9, 20, .72);
  border-bottom: 1px solid rgba(135, 219, 255, .11);
  backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.brand-mark {
  width: 46px; height: 46px; display: grid; place-items: center;
  color: var(--cyan); font-weight: 900; letter-spacing: -.08em;
  border: 1px solid rgba(48, 220, 255, .45); border-radius: 50%;
  box-shadow: inset 0 0 20px rgba(48, 220, 255, .14), 0 0 18px rgba(48, 220, 255, .14);
}
.brand strong, .brand small { display: block; }
.brand strong { font-size: .93rem; letter-spacing: .02em; }
.brand small { color: var(--muted); font-size: .7rem; }
.site-nav { display: flex; gap: clamp(.75rem, 2vw, 1.7rem); }
.site-nav a { color: #bed0e1; text-decoration: none; font-size: .85rem; }
.site-nav a:hover { color: var(--cyan); }
/* Switch Jour / Nuit */
/* ==================================================
   MODE JOUR — Fondation générale
   ================================================== */

html[data-theme="light"] {
  --navy-950: #eef7fb;
  --navy-900: #e2f0f6;
  --navy-800: #d3e7ef;

  --white: #10283b;
  --muted: #526b7d;

  --line: rgba(24, 126, 166, .20);
  --glass: rgba(255, 255, 255, .76);

  --shadow:
    0 24px 70px rgba(24, 71, 96, .14);
}

/* Fond lumineux premium */
html[data-theme="light"] body {
  color: var(--white);

  background:
    radial-gradient(
      circle at 72% 7%,
      rgba(141, 114, 255, .13),
      transparent 32rem
    ),
    radial-gradient(
      circle at 5% 35%,
      rgba(0, 179, 255, .14),
      transparent 29rem
    ),
    var(--navy-950);
}

/* En-tête clair et translucide */
html[data-theme="light"] .site-header {
  background: rgba(245, 251, 253, .82);
  border-bottom-color: rgba(24, 126, 166, .16);

  box-shadow:
    0 8px 30px rgba(31, 87, 112, .08);
}

/* Navigation et textes principaux */
html[data-theme="light"] .site-nav a {
  color: #36566d;
}

html[data-theme="light"] .site-nav a:hover {
  color: #008db5;
}

html[data-theme="light"] .hero-role {
  color: #183c54;
}

html[data-theme="light"] .hero-proof {
  color: #587488;
}

/* Traits du menu mobile */
html[data-theme="light"] .nav-toggle span:not(.sr-only) {
  background: var(--white);
}

/* Transition douce entre les deux univers */
body,
.site-header,
.site-nav a,
.hero-role,
.hero-proof {
  transition:
    color .35s ease,
    background-color .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}
.theme-toggle {
  flex: 0 0 auto;
  width: 58px;
  height: 30px;
  padding: 3px;
  margin-left: auto;

  border: 1px solid rgba(48, 220, 255, .45);
  border-radius: 999px;
  background: rgba(6, 18, 37, .88);
  cursor: pointer;

  box-shadow:
    inset 0 0 12px rgba(48, 220, 255, .12),
    0 0 14px rgba(48, 220, 255, .12);

  transition:
    border-color .3s ease,
    background .3s ease,
    box-shadow .3s ease;
}
/* Réaction visuelle du switch en mode Jour */
html[data-theme="light"] .theme-toggle {
  border-color: rgba(255, 180, 45, .75);
  background: rgba(235, 245, 250, .95);

  box-shadow:
    inset 0 0 12px rgba(255, 190, 60, .15),
    0 0 16px rgba(255, 190, 60, .22);
}

html[data-theme="light"] .theme-toggle-thumb {
  transform: translate(26px, -50%);
  background: #0b2f4d;

  box-shadow:
    0 0 10px rgba(255, 189, 63, .85),
    0 0 18px rgba(255, 145, 40, .35);
}

.theme-toggle-track {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.theme-toggle-thumb {
  position: absolute;
  top: 50%;
  left: 2px;

  width: 22px;
  height: 22px;
  border-radius: 50%;

  background: var(--cyan);
  box-shadow:
    0 0 10px rgba(48, 220, 255, .8),
    0 0 18px rgba(141, 114, 255, .35);

  transform: translateY(-50%);
  transition:
    transform .35s ease,
    background .35s ease,
    box-shadow .35s ease;
}

.theme-toggle:hover {
  border-color: var(--cyan);
  box-shadow:
    inset 0 0 15px rgba(48, 220, 255, .18),
    0 0 18px rgba(48, 220, 255, .22);
}
.nav-toggle { display: none; border: 0; background: none; padding: .5rem; }
.nav-toggle span:not(.sr-only) { display: block; width: 25px; height: 2px; margin: 5px; background: var(--white); }

.hero {
  min-height: 100svh;
  padding: 9rem max(1.2rem, calc((100vw - var(--max)) / 2)) 4rem;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(420px, 1.15fr);
  grid-template-areas: "copy orbit" "audio audio";
  align-items: center;
  gap: 2rem 3rem;
  position: relative;
  isolation: isolate;
  border-bottom: 1px solid var(--line);
}
#particle-canvas { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; opacity: .52; }
.ambient { position: absolute; z-index: -3; border-radius: 50%; filter: blur(30px); opacity: .38; }
.ambient-one { width: 35rem; height: 35rem; right: -12rem; top: 5rem; background: rgba(45, 108, 255, .21); }
.ambient-two { width: 28rem; height: 28rem; left: -12rem; bottom: -7rem; background: rgba(146, 62, 255, .14); }
.hero-copy { grid-area: copy; max-width: 590px; }
.eyebrow { margin: 0 0 .7rem; color: var(--cyan); font-size: .74rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.hero h1 { margin: 0; font-size: clamp(3.3rem, 7vw, 6.7rem); line-height: .94; letter-spacing: -.075em; text-wrap: balance; }
.hero h1::after { content: "."; color: var(--cyan); text-shadow: 0 0 22px var(--cyan); }
.hero-role { margin: 1.5rem 0 .75rem; color: #d9e9f6; font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 650; }
.hero-intro { color: var(--muted); max-width: 55ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.8rem 0; }
.button {
  min-height: 46px; padding: .75rem 1.15rem; display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; border-radius: 999px; border: 1px solid transparent; font-weight: 750; cursor: pointer;
}
.button-primary { color: #00111b; background: linear-gradient(105deg, var(--cyan), #87edff); box-shadow: 0 10px 36px rgba(48, 220, 255, .2); }
.button-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 44px rgba(48, 220, 255, .28); }
.button-ghost { color: #d8e7f5; border-color: rgba(152, 224, 255, .24); background: rgba(8, 23, 43, .45); }
.button-ghost:hover { border-color: var(--cyan); color: var(--cyan); }
.hero-proof { color: #829bb1; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.hero-proof span { display: inline-block; width: 2rem; height: 1px; margin: 0 .65rem .22rem 0; background: var(--cyan); }

.orbit-stage {
  grid-area: orbit;
  position: relative;
  width: min(100%, 650px);
  aspect-ratio: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  --audio-energy: 3;
}
.portrait-wrap {
  width: 72%; aspect-ratio: 1; overflow: hidden; border-radius: 50%;
  box-shadow: 0 0 calc(32px + var(--audio-energy) * 45px) rgba(48, 220, 255, calc(.14 + var(--audio-energy) * .22));
}
.portrait-wrap img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); }
.orbit { position: absolute; border-radius: 50%; pointer-events: none; }
.orbit-outer { inset: 5%; border: 1px solid rgba(92, 190, 255, .28); animation: spin 26s linear infinite; }
.orbit-outer::before, .orbit-outer::after { content: ""; position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 22px var(--cyan); }
.orbit-outer::before { left: 18%; top: 5%; }
.orbit-outer::after { right: 7%; bottom: 22%; background: var(--violet); box-shadow: 0 0 22px var(--violet); }
.orbit-mid { inset: 10%; border: 1px dashed rgba(141, 114, 255, .34); animation: spin-reverse 37s linear infinite; }
.orbit-reactive {
  inset: 13%;
  border: calc(2px + var(--audio-energy) * 3px) solid rgba(48, 220, 255, calc(.5 + var(--audio-energy) * .45));
  box-shadow: inset 0 0 calc(24px + var(--audio-energy) * 55px) rgba(48, 220, 255, .18), 0 0 calc(20px + var(--audio-energy) * 65px) rgba(141, 114, 255, .24);
  transform: scale(calc(1 + var(--audio-energy) * .028));
  transition: transform 80ms linear, box-shadow 80ms linear;
}
.chapter-card {
  position: absolute; right: -1rem; bottom: 11%; width: min(260px, 48%);
  padding: 1rem; background: rgba(4, 16, 34, .8); border: 1px solid rgba(84, 215, 255, .23); border-radius: 16px;
  backdrop-filter: blur(12px); box-shadow: var(--shadow);
}
.chapter-card span { display: block; color: var(--cyan); font-size: .66rem; letter-spacing: .15em; text-transform: uppercase; }
.chapter-card strong { display: block; margin: .3rem 0; }
.chapter-card p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }

.audio-panel {
  grid-area: audio;
  width: min(920px, 100%); justify-self: center; padding: 1rem 1.2rem;
  display: grid; grid-template-columns: auto 1fr; gap: .8rem 1.5rem; align-items: center;
  background: rgba(6, 21, 43, .78); border: 1px solid rgba(98, 215, 255, .21); border-radius: 20px; backdrop-filter: blur(14px);
}
.audio-heading { display: flex; align-items: center; gap: .8rem; }
.audio-heading strong, .audio-heading small { display: block; }
.audio-heading small { color: var(--muted); font-size: .68rem; }
.audio-icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--cyan); background: rgba(48, 220, 255, .08); border: 1px solid rgba(48, 220, 255, .27); border-radius: 50%; }
.audio-controls { min-width: 0; display: grid; grid-template-columns: auto auto minmax(120px, 1fr) auto 70px; gap: .6rem; align-items: center; }
.audio-controls button, .audio-links button { border: 0; background: none; cursor: pointer; }
.audio-play { color: var(--cyan); font-weight: 800; }
.icon-button { color: #9bb1c6; }
.progress-label, .volume-label { display: flex; }
input[type="range"] { width: 100%; accent-color: var(--cyan); }
.audio-time { color: #9bb1c6; font-variant-numeric: tabular-nums; font-size: .74rem; white-space: nowrap; }
.audio-links { grid-column: 1 / -1; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .8rem; border-top: 1px solid var(--line); padding-top: .6rem; }
.audio-links button { color: #8fa9bf; font-size: .73rem; text-decoration: underline; text-underline-offset: 3px; }
/* ==================================================
   MINI-LECTEUR SUPÉRIEUR — MOBILE
   Interface secondaire du lecteur audio principal
   ================================================== */

.audio-topbar {
  display: none;
}

.audio-topbar[hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  .audio-topbar {
    position: fixed;
    z-index: 96;
    top: 76px;
    left: 50%;

    width: min(360px, calc(100vw - 24px));
    min-height: 58px;
    padding: .55rem .75rem .7rem;

    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: auto 3px;
    align-items: center;
    gap: .35rem .7rem;

    color: #f4fbff;

    background:
      radial-gradient(
        circle at 12% 0%,
        rgba(48, 220, 255, .17),
        transparent 42%
      ),
      linear-gradient(
        135deg,
        rgba(7, 27, 50, .96),
        rgba(4, 15, 31, .96)
      );

    border: 1px solid rgba(78, 222, 255, .38);
    border-radius: 16px;

    box-shadow:
      0 16px 42px rgba(0, 0, 0, .42),
      0 0 24px rgba(48, 220, 255, .12),
      inset 0 1px 0 rgba(255, 255, 255, .08);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translate(-50%, -10px) scale(.985);

    transition:
      opacity .28s ease,
      transform .32s cubic-bezier(.2, .8, .2, 1),
      visibility 0s linear .32s;
  }

  .audio-topbar.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translate(-50%, 0) scale(1);
    transition-delay: 0s;
  }

  .audio-topbar-toggle {
    grid-row: 1 / span 2;

    width: 40px;
    height: 40px;
    padding: 0;

    display: grid;
    place-items: center;

    color: var(--cyan);
    background: rgba(48, 220, 255, .08);

    border: 1px solid rgba(48, 220, 255, .38);
    border-radius: 50%;

    cursor: pointer;

    box-shadow:
      inset 0 0 14px rgba(48, 220, 255, .08),
      0 0 16px rgba(48, 220, 255, .09);

    transition:
      border-color .2s ease,
      background .2s ease,
      box-shadow .2s ease,
      transform .2s ease;
  }

  .audio-topbar-toggle:hover,
  .audio-topbar-toggle:focus-visible {
    border-color: var(--cyan);
    background: rgba(48, 220, 255, .14);

    box-shadow:
      0 0 20px rgba(48, 220, 255, .22);

    transform: scale(1.04);
  }

  .audio-topbar-icon {
    display: block;
    margin-left: 2px;
    font-size: .9rem;
    line-height: 1;
  }

  .audio-topbar-content {
    min-width: 0;
    display: grid;
    gap: .05rem;
  }

  .audio-topbar-content strong {
    overflow: hidden;
    color: #ffffff;
    font-size: .82rem;
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .audio-topbar-meta {
    overflow: hidden;
    color: #91a9bd;
    font-size: .64rem;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .audio-topbar-progress {
    grid-column: 2;
    position: relative;

    width: 100%;
    height: 3px;
    overflow: hidden;

    background: rgba(149, 203, 226, .16);
    border-radius: 999px;
  }

  .audio-topbar-progress-fill {
    position: absolute;
    inset: 0;

    background:
      linear-gradient(
        90deg,
        var(--cyan),
        var(--violet)
      );

    border-radius: inherit;
    box-shadow: 0 0 10px rgba(48, 220, 255, .5);

    transform: scaleX(0);
    transform-origin: left center;

    transition: transform .12s linear;
  }

  body.audio-playing .audio-topbar.is-visible {
    border-color: rgba(48, 220, 255, .62);

    box-shadow:
      0 18px 46px rgba(0, 0, 0, .44),
      0 0 28px rgba(48, 220, 255, .2),
      0 0 36px rgba(141, 114, 255, .1);
  }
}

@media (max-width: 360px) {
  .audio-topbar {
    width: calc(100vw - 16px);
    padding-inline: .6rem;
  }

  .audio-topbar-content strong {
    font-size: .76rem;
  }

  .audio-topbar-meta {
    font-size: .6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .audio-topbar,
  .audio-topbar-toggle,
  .audio-topbar-progress-fill {
    transition: none;
  }
}
/* Lecteur compact pendant le défilement */
/* Contour du lecteur réactif au rythme réel du MP3 */
/* Lecteur compact pendant le défilement */
.audio-panel.is-floating {
  position: fixed;
  right: 92px;
  bottom: 22px;
  z-index: 149;

  width: min(250px, calc(100vw - 126px));
  margin: 0;
  padding: .48rem .65rem;

  grid-template-columns: 1fr;
  gap: .3rem;

  border-color: rgba(48, 220, 255, .55);
  border-radius: 17px;
  background: rgba(4, 16, 34, .94);

  box-shadow:
    0 0 24px rgba(0, 209, 255, .24),
    0 0 38px rgba(141, 114, 255, .13);

  animation: audio-dock-in .35s ease both;
}

/* MODE JOUR — Lecteur flottant premium ATOOLPHA */
html[data-theme="light"] .audio-panel.is-floating {
  background:
    linear-gradient(
      135deg,
      rgba(11, 47, 77, .97),
      rgba(18, 76, 108, .95)
    );

  border-color: rgba(48, 220, 255, .68);

  box-shadow:
    0 14px 38px rgba(11, 47, 77, .28),
    0 0 22px rgba(48, 220, 255, .22),
    0 0 30px rgba(141, 114, 255, .12),
    inset 0 1px 0 rgba(255, 255, 255, .14);
}
body.audio-playing .audio-panel.is-floating {
  border-color: rgba(
    48,
    220,
    255,
    calc(.55 + var(--audio-energy, 0) * .4)
  );

  box-shadow:
    0 0 calc(18px + var(--audio-energy, 0) * 34px)
      rgba(0, 209, 255, calc(.20 + var(--audio-energy, 0) * .35)),
    0 0 calc(28px + var(--audio-energy, 0) * 48px)
      rgba(141, 114, 255, calc(.10 + var(--audio-energy, 0) * .25));

  transition:
    border-color 80ms linear,
    box-shadow 80ms linear;
}
/* Éléments masqués dans la version compacte */
.audio-panel.is-floating .audio-heading,
.audio-panel.is-floating .audio-links,
.audio-panel.is-floating .volume-label {
  display: none;
}

/* Organisation des commandes du lecteur compact */
.audio-panel.is-floating .audio-controls {
  grid-template-columns: 34px 34px minmax(90px, 1fr) auto;
  gap: .42rem;
}

.audio-panel.is-floating .audio-controls button {
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: .82rem;
}

.audio-panel.is-floating .audio-controls span {
  font-size: .7rem;
  white-space: nowrap;
}
/* Icône lecture/pause dans le lecteur flottant */
.audio-panel.is-floating #audio-toggle {
  font-size: 0;
}

.audio-panel.is-floating #audio-toggle::before {
  content: "PLAY ";
  font-size: 1rem;
  line-height: 1;
}

body.audio-playing .audio-panel.is-floating #audio-toggle::before {
  content: "PAUSE ";
  font-size: 1rem;
  line-height: 1;
}


@keyframes audio-dock-in {
  from {
    opacity: 0;
    transform: translateY(20px) scale(.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.section { width: min(var(--max), calc(100% - 2.4rem)); margin: 0 auto; padding: clamp(5rem, 9vw, 8.5rem) 0; }
.section-heading { max-width: 720px; margin-bottom: 2.5rem; }
.section-heading h2, .contact-copy h2 { margin: 0 0 1rem; font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: 1.03; letter-spacing: -.055em; text-wrap: balance; }
.section-heading > p:not(.eyebrow), .contact-copy > p:not(.eyebrow) { color: var(--muted); }
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.value-card { min-height: 165px; padding: 1.25rem; background: linear-gradient(145deg, rgba(17, 46, 80, .57), rgba(5, 18, 37, .55)); border: 1px solid var(--line); border-radius: var(--radius); }
.value-card span { color: var(--cyan); font-size: .72rem; }
.value-card h3 { margin: 2.2rem 0 0; font-size: 1.05rem; }

.timeline { position: relative; max-width: 930px; margin-left: auto; }
.timeline::before { content: ""; position: absolute; left: 145px; top: 0; bottom: 0; width: 1px; background: linear-gradient(var(--cyan), var(--violet)); }
.timeline-item { display: grid; grid-template-columns: 120px 1fr; gap: 3.2rem; position: relative; padding: 1rem 0 3rem; }
.timeline-item::before { content: ""; position: absolute; left: 138px; top: 1.6rem; width: 13px; height: 13px; background: var(--navy-950); border: 2px solid var(--cyan); border-radius: 50%; box-shadow: 0 0 18px rgba(48, 220, 255, .5); }
.timeline-period { color: var(--cyan); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-align: right; text-transform: uppercase; }
.timeline-item h3 { margin: 0; font-size: 1.55rem; }
.timeline-item p { max-width: 650px; color: var(--muted); }

.card-grid { display: grid; gap: 1rem; }
.skills-grid { grid-template-columns: repeat(3, 1fr); }
.project-grid { grid-template-columns: repeat(2, 1fr); }
.glass-card { padding: 1.55rem; background: linear-gradient(145deg, rgba(12, 34, 63, .74), rgba(4, 16, 34, .72)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 60px rgba(0, 0, 0, .13); }
.glass-card:hover { border-color: rgba(48, 220, 255, .42); transform: translateY(-3px); }
.card-kicker { color: var(--cyan); font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.glass-card h3 { margin: .55rem 0; font-size: 1.25rem; }
.glass-card p { color: var(--muted); }
.skill-card small { display: block; padding-top: .8rem; color: #7f9bb4; border-top: 1px solid var(--line); }
.project-top { display: flex; justify-content: space-between; }
.status, .tag-list span { padding: .25rem .55rem; color: var(--cyan-soft); background: rgba(48, 220, 255, .07); border: 1px solid rgba(48, 220, 255, .16); border-radius: 999px; font-size: .66rem; }
.tag-list { display: flex; flex-wrap: wrap; gap: .45rem; }

.split-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: 5rem; align-items: start; }
.certificate-list { display: grid; gap: .9rem; }
.certificate-list article { padding: 1.25rem; display: grid; grid-template-columns: auto 1fr; gap: 1rem; background: var(--glass); border: 1px solid var(--line); border-radius: 16px; }
.certificate-list article > span { color: var(--cyan); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.certificate-list h3, .certificate-list p { margin: 0; }
.certificate-list p { color: var(--muted); }
.disabled-link { opacity: .58; pointer-events: none; }

.contact-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 5rem; }
.contact-copy ul { padding: 0; list-style: none; color: var(--muted); }
.contact-form { padding: 1.4rem; background: rgba(7, 24, 47, .72); border: 1px solid var(--line); border-radius: var(--radius); }
.contact-form label { display: grid; gap: .4rem; margin-bottom: 1rem; color: #caddEC; font-size: .8rem; font-weight: 700; }
.contact-form input, .contact-form textarea {
  width: 100%; color: var(--white); background: rgba(1, 10, 22, .7); border: 1px solid rgba(138, 194, 228, .25); border-radius: 10px; padding: .75rem;
}
.contact-form textarea { resize: vertical; }
.consent { grid-template-columns: auto 1fr !important; align-items: start; font-weight: 400 !important; color: var(--muted) !important; }
.consent input { width: auto; margin-top: .3rem; }
.honeypot { position: absolute; left: -9999px; }
.form-success, .form-error { padding: .75rem; border-radius: 8px; }
.form-success { background: rgba(60, 230, 151, .12); color: #8ff7c2; }
.form-error { background: rgba(255, 93, 120, .12); color: #ffb0bc; }

.site-footer { width: min(var(--max), calc(100% - 2.4rem)); margin: 0 auto; padding: 2rem 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; color: #8297aa; border-top: 1px solid var(--line); font-size: .78rem; }
.site-footer div { display: flex; align-items: center; gap: .7rem; }
.site-footer strong { color: var(--cyan); font-size: 1.4rem; }
.site-footer nav { display: flex; gap: 1rem; }
.site-footer a:hover { color: var(--cyan); }

dialog { width: min(680px, calc(100% - 2rem)); color: var(--white); background: #07172c; border: 1px solid rgba(48, 220, 255, .32); border-radius: 18px; box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(0, 5, 13, .8); backdrop-filter: blur(8px); }
.dialog-head { display: flex; justify-content: space-between; gap: 1rem; }
.dialog-head h2 { margin: 0; }
.dialog-head button { font-size: 1.8rem; background: none; border: 0; cursor: pointer; }

.legal-page main { width: min(820px, calc(100% - 2rem)); margin: 0 auto; padding: 4rem 0; }
.legal-page h1 { font-size: clamp(2.5rem, 7vw, 4.6rem); line-height: 1; }
.legal-page h2 { margin-top: 2.2rem; color: var(--cyan-soft); }
.legal-page p { color: var(--muted); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-reverse { to { transform: rotate(-360deg); } }


@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; grid-template-areas: "copy" "orbit" "audio"; padding-top: 8rem; text-align: center; }
  .hero-copy { justify-self: center; }
  .hero-actions { justify-content: center; }
  .orbit-stage { width: min(88vw, 620px); }
  .skills-grid { grid-template-columns: repeat(2, 1fr); }
  .split-section, .contact-section { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 760px) {
  .site-header { min-height: 68px; }
  .nav-toggle { display: block; }
.site-nav {
  position: absolute;
  z-index: 110;
  top: calc(100% + 8px);
  left: 1rem;
  right: 1rem;

  display: flex;
  flex-direction: column;
  gap: .08rem;
  padding: .65rem;

  max-height: calc(100dvh - 92px);
  overflow-y: auto;

  background: rgba(3, 12, 26, .985);
  border: 1px solid var(--line);
  border-radius: 16px;

  box-shadow: 0 24px 70px rgba(0, 0, 0, .46);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(-10px) scale(.985);
  transform-origin: top center;

  transition:
    opacity .24s ease,
    transform .28s cubic-bezier(.2, .8, .2, 1),
    visibility 0s linear .28s;
}

.site-nav.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform: translateY(0) scale(1);
  transition-delay: 0s;
}
  .hero {
  padding-top: 10rem;

  grid-template-areas:
    "copy"
    "orbit"
    "audio";
}
  .hero h1 { font-size: clamp(3.1rem, 15vw, 5rem); }
  .chapter-card { right: 0; bottom: 3%; width: 58%; text-align: left; }
  .audio-panel { grid-template-columns: 1fr; }
  .audio-controls { grid-template-columns: 1fr auto; }
  .audio-controls .progress-label { grid-column: 1 / -1; grid-row: 2; }
  .audio-time { grid-column: 1; }
  .volume-label { grid-column: 2; width: 72px; }
  .audio-links { justify-content: center; }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .skills-grid, .project-grid { grid-template-columns: 1fr; }
  .timeline::before { left: 8px; }
  .timeline-item { grid-template-columns: 1fr; gap: .3rem; padding-left: 2rem; }
  .timeline-item::before { left: 2px; top: 1.25rem; }
  .timeline-period { text-align: left; }
  .site-footer { flex-direction: column; align-items: flex-start; }
}
html[data-theme="light"] .contact-form input,
html[data-theme="light"] .contact-form textarea {
  color: #0b2f4d;
  background: rgba(245, 250, 253, .96);
  border-color: rgba(41, 133, 168, .28);
}
/* =========================================================
   MODULE PARTAGE CK — VERSION 1
   Bouton ordinateur, menu mobile et fenêtre de partage
   ========================================================= */

/* Base commune des boutons de partage */
.share-toggle {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(55, 218, 255, 0.58);
  background:
    linear-gradient(
      180deg,
      rgba(10, 35, 61, 0.98),
      rgba(4, 18, 35, 0.98)
    );
  color: #5fe5ff;
  font: inherit;
  cursor: pointer;
  box-sizing: border-box;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease,
    background 180ms ease;
}

/* Bouton compact placé à côté du switch */
.share-toggle-desktop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  min-width: 58px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  box-shadow:
    inset 0 0 14px rgba(43, 214, 255, 0.08),
    0 0 18px rgba(43, 214, 255, 0.12);
}

/* Icône originale Orbite CK */
.share-orbit-icon {
  display: block;
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  overflow: visible;
}

.share-orbit-core {
  fill: currentColor;
}

.share-orbit-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

.share-orbit-node {
  fill: currentColor;
}

/* Interactions du bouton */
.share-toggle:hover {
  color: #b5f6ff;
  border-color: rgba(112, 235, 255, 0.95);
  background:
    linear-gradient(
      180deg,
      rgba(15, 49, 79, 0.98),
      rgba(5, 24, 43, 0.98)
    );
  box-shadow:
    inset 0 0 16px rgba(43, 214, 255, 0.12),
    0 0 22px rgba(43, 214, 255, 0.25);
  transform: translateY(-1px);
}

.share-toggle:active {
  transform: translateY(0);
}

.share-toggle:focus-visible {
  outline: 3px solid rgba(83, 226, 255, 0.48);
  outline-offset: 3px;
}

/* Le bouton destiné au menu mobile reste caché sur ordinateur */
.share-toggle-mobile {
  display: none;
}

/* =========================================================
   FENÊTRE DE PARTAGE
   ========================================================= */

.share-dialog {
  width: min(540px, calc(100vw - 32px));
  max-width: 540px;
  padding: 0;
  border: 1px solid rgba(57, 214, 255, 0.34);
  border-radius: 22px;
  background:
    radial-gradient(
      circle at top right,
      rgba(59, 191, 255, 0.12),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      #07172a,
      #040d1b
    );
  color: #edfaff;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.62),
    0 0 34px rgba(38, 204, 255, 0.13);
  box-sizing: border-box;
  overflow: hidden;
}

.share-dialog::backdrop {
  background: rgba(0, 7, 17, 0.78);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* En-tête de la fenêtre */
.share-dialog .dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 22px 17px;
  border-bottom: 1px solid rgba(105, 221, 255, 0.13);
}

.share-dialog .dialog-head h2 {
  margin: 4px 0 0;
  color: #ffffff;
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  line-height: 1.2;
}

.share-dialog .dialog-head .eyebrow {
  margin: 0;
  color: #59def8;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.share-dialog [data-dialog-close] {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(101, 222, 255, 0.25);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: #eafaff;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}

.share-dialog [data-dialog-close]:hover {
  border-color: rgba(101, 222, 255, 0.7);
  background: rgba(68, 211, 255, 0.1);
}

.share-dialog [data-dialog-close]:focus-visible {
  outline: 3px solid rgba(83, 226, 255, 0.48);
  outline-offset: 3px;
}

/* Introduction */
.share-dialog-intro {
  margin: 0;
  padding: 18px 22px;
  color: #bfd3e5;
  line-height: 1.65;
}

/* Liste des canaux */
.share-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 0 22px 18px;
}

.share-actions button {
  appearance: none;
  min-height: 48px;
  padding: 12px 15px;
  border: 1px solid rgba(101, 222, 255, 0.23);
  border-radius: 13px;
  background:
    linear-gradient(
      180deg,
      rgba(19, 49, 76, 0.88),
      rgba(9, 27, 48, 0.88)
    );
  color: #edfaff;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.share-actions button:hover {
  border-color: rgba(101, 230, 255, 0.75);
  background:
    linear-gradient(
      180deg,
      rgba(24, 66, 97, 0.96),
      rgba(10, 35, 59, 0.96)
    );
  transform: translateY(-1px);
}

.share-actions button:active {
  transform: translateY(0);
}

.share-actions button:focus-visible {
  outline: 3px solid rgba(83, 226, 255, 0.45);
  outline-offset: 2px;
}

/* Le partage natif occupe toute la largeur */
.share-actions [data-share-action="native"] {
  grid-column: 1 / -1;
  border-color: rgba(63, 223, 255, 0.46);
  color: #72eaff;
}

/* Zone réservée aux confirmations JavaScript */
.share-status {
  min-height: 1.4em;
  margin: 0;
  padding: 0 22px 12px;
  color: #65e8ff;
  font-weight: 700;
}

/* Information RGPD */
.share-privacy {
  margin: 0 22px 22px;
  padding: 16px;
  border: 1px solid rgba(116, 222, 255, 0.16);
  border-radius: 15px;
  background: rgba(3, 14, 29, 0.66);
}

.share-privacy strong {
  display: block;
  margin-bottom: 8px;
  color: #ffffff;
}

.share-privacy p {
  margin: 7px 0;
  color: #afc5d9;
  font-size: 0.88rem;
  line-height: 1.55;
}

.share-privacy a {
  display: inline-block;
  margin-top: 8px;
  color: #61e3ff;
  font-weight: 700;
  text-underline-offset: 4px;
}

/* =========================================================
   VERSION MOBILE
   ========================================================= */

@media (max-width: 760px) {
  /* Le bouton situé près du switch disparaît */
  .share-toggle-desktop {
    display: none;
  }

  /* Le partage apparaît dans le menu hamburger */
  .share-toggle-mobile {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    width: 100%;
    min-height: 48px;
    margin-top: 8px;
    padding: 11px 14px;
    border-radius: 13px;
    color: #78e9ff;
    text-align: left;
  }

  .share-toggle-mobile .share-orbit-icon {
    width: 24px;
    height: 24px;
  }

  .share-toggle-mobile span:last-child {
    font-weight: 700;
  }

  /* Fenêtre remontant depuis le bas */
  .share-dialog {
    position: fixed;
    inset: auto 12px 12px;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 24px);
    margin: 0;
    border-radius: 22px 22px 15px 15px;
    overflow-y: auto;
  }

  .share-dialog .dialog-head {
    padding: 19px 18px 15px;
  }

  .share-dialog-intro {
    padding: 16px 18px;
  }

  .share-actions {
    grid-template-columns: 1fr;
    padding: 0 18px 17px;
  }

  .share-actions [data-share-action="native"] {
    grid-column: auto;
  }

  .share-status {
    padding-right: 18px;
    padding-left: 18px;
  }

  .share-privacy {
    margin-right: 18px;
    margin-bottom: 18px;
    margin-left: 18px;
  }
}

/* Très petits téléphones */
@media (max-width: 390px) {
  .share-dialog {
    inset-right: 8px;
    inset-bottom: 8px;
    inset-left: 8px;
  }

  .share-dialog .dialog-head h2 {
    font-size: 1.25rem;
  }

  .share-actions button {
    min-height: 46px;
  }
}

/* Respect du choix de réduction des mouvements */
@media (prefers-reduced-motion: reduce) {
  .share-toggle,
  .share-actions button {
    transition: none;
  }

  .share-toggle:hover,
  .share-actions button:hover {
    transform: none;
  }

  .share-dialog::backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
@media (max-width: 430px) {
  .brand small { display: none; }
  .hero { padding-inline: 1rem; }
  .hero-intro { font-size: .93rem; }
  .hero-actions { flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .hero-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .35rem .55rem;

  width: 100%;
  max-width: 100%;
  margin-inline: auto;

  font-size: .68rem;
  line-height: 1.5;
  letter-spacing: .05em;
  text-align: center;
}

.hero-proof span {
  flex: 0 0 1.5rem;
  width: 1.5rem;
  margin: 0;
}
.orbit-stage {
  width: min(92%, 340px);
  margin-inline: auto;
}

.portrait-wrap {
  width: 74%;
}
  .orbit-outer { inset: 1%; }
  .orbit-mid { inset: 6%; }
  .orbit-reactive { inset: 10%; }
  .chapter-card { position: absolute; left: 8%; right: 8%; bottom: -1.5rem; width: auto; }
  .audio-panel { margin-top: 2rem; }
  .value-grid { grid-template-columns: 1fr; }
  .section { width: min(var(--max), calc(100% - 2rem)); }
  .section-heading h2, .contact-copy h2 { font-size: 2.45rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
/* =========================================================
   BOUTON RETOUR EN HAUT — FLÈCHE BINAIRE
   ========================================================= */

.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 150;

  width: 54px;
  height: 54px;
  padding: 0;

  display: grid;
  place-items: center;

  border: 1px solid rgba(0, 209, 255, 0.55);
  border-radius: 50%;

  color: #ffffff;
  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(0, 209, 255, 0.32),
      rgba(8, 13, 40, 0.94) 68%
    );

  font-size: 28px;
  font-weight: 700;
  line-height: 1;

  box-shadow:
    0 0 18px rgba(0, 209, 255, 0.34),
    inset 0 0 14px rgba(141, 114, 255, 0.18);

  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Classe qui sera activée par JavaScript */
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Première colonne de données binaires */
.back-to-top::before {
  content: "1 0 1";
  position: absolute;
  left: 9px;
  bottom: 42px;

  width: 9px;

  color: rgba(0, 209, 255, 0.9);
  font-family: monospace;
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: 1px;
  word-break: break-all;

  opacity: 0;
  pointer-events: none;

  text-shadow: 0 0 7px rgba(0, 209, 255, 0.9);
  animation: binary-rise 2.2s linear infinite;
}

/* Deuxième colonne décalée */
.back-to-top::after {
  content: "0 1 0";
  position: absolute;
  right: 8px;
  bottom: 39px;

  width: 9px;

  color: rgba(141, 114, 255, 0.9);
  font-family: monospace;
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: 1px;
  word-break: break-all;

  opacity: 0;
  pointer-events: none;

  text-shadow: 0 0 7px rgba(141, 114, 255, 0.9);
  animation: binary-rise 2.2s 0.8s linear infinite;
}

/* Effet lumineux au survol */
.back-to-top:hover,
.back-to-top:focus-visible {
  border-color: rgba(0, 209, 255, 0.95);

  box-shadow:
    0 0 28px rgba(0, 209, 255, 0.6),
    0 0 45px rgba(141, 114, 255, 0.22),
    inset 0 0 16px rgba(0, 209, 255, 0.2);

  transform: translateY(-4px);
}

.back-to-top:focus-visible {
  outline: 3px solid rgba(0, 209, 255, 0.65);
  outline-offset: 4px;
}

/* Les données apparaissent lorsque le bouton est visible */
.back-to-top.is-visible::before,
.back-to-top.is-visible::after {
  opacity: 0.85;
}

/* Mouvement vertical des 0 et des 1 */
@keyframes binary-rise {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }

  25% {
    opacity: 0.9;
  }

  75% {
    opacity: 0.55;
  }

  100% {
    opacity: 0;
    transform: translateY(-38px);
  }
  
}

/* Taille adaptée au téléphone */
@media (max-width: 600px) {
  .back-to-top {
    right: 14px;
    bottom: 16px;
    width: 48px;
    height: 48px;
    font-size: 25px;
  }
}

/* Respect du choix d’accessibilité de l’utilisateur */
@media (prefers-reduced-motion: reduce) {
  .back-to-top::before,
  .back-to-top::after {
    animation: none;
  }

  .back-to-top {
    transition: none;
  }
  
}
/* ==================================================
   MODE JOUR — Blocs clairs premium ATOOLPHA
   ================================================== */

html[data-theme="light"] .chapter-card,
html[data-theme="light"] .value-card,
html[data-theme="light"] .glass-card,
html[data-theme="light"] .certificate-list article,
html[data-theme="light"] .contact-form,
html[data-theme="light"] .chapter-card,

html[data-theme="light"] .value-card,



html[data-theme="light"] .certificate-list article {
  color: #0b2f4d;
  html[data-theme="light"] .skill-card > span {
  color: #0b2f4d;
}
  
  

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .94),
      rgba(205, 226, 238, .94)
    );

  border-color: rgba(41, 153, 194, .22);

  box-shadow:
    0 16px 42px rgba(26, 75, 101, .10),
    inset 0 0 0 1px rgba(255, 255, 255, .72);

  transition:
    transform .32s ease,
    border-color .32s ease,
    box-shadow .32s ease,
    background .32s ease;
}
/* MODE JOUR — Grand lecteur premium uniquement */
html[data-theme="light"] .audio-panel:not(.is-floating) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #f6fbff;

  background:
    radial-gradient(circle at 12% 0%, rgba(48, 220, 255, .22), transparent 34%),
    radial-gradient(circle at 88% 120%, rgba(141, 114, 255, .20), transparent 36%),
    linear-gradient(
      135deg,
      rgba(7, 35, 61, .98),
      rgba(11, 58, 88, .96) 52%,
      rgba(8, 38, 68, .98)
    );

  border-color: rgba(82, 224, 255, .62);

box-shadow:
  0 26px 55px rgba(7, 35, 61, .32),
  0 12px 25px rgba(7, 35, 61, .22),
  0 0 30px rgba(48, 220, 255, .20),
  0 0 48px rgba(141, 114, 255, .10),
  inset 0 1px 0 rgba(255, 255, 255, .20);
  
}

/* =========================================================
   ALIGNEMENT VISUEL PROFESSIONNEL — MAQUETTE 2026
   Conserve les fonctions Calm Orbit, clarifie la hiérarchie.
   ========================================================= */
:root {
  --max: 1240px;
  --radius: 18px;
  --glass-strong: rgba(6, 20, 39, .82);
}

.site-header {
  min-height: 72px;
  background: rgba(3, 11, 24, .86);
  border-bottom-color: rgba(111, 196, 255, .14);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .16);
}

.site-nav a {
  position: relative;
  padding: .65rem .15rem;
  font-weight: 620;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: .22rem;
  height: 1px;
  background: var(--cyan);
  transition: left .2s ease, right .2s ease;
}
.site-nav a:hover::after,
.site-nav a:focus-visible::after { left: 0; right: 0; }

.hero {
  min-height: min(920px, 100svh);
  grid-template-columns: minmax(340px, .82fr) minmax(0, 1.18fr);
  grid-template-areas: "orbit copy" "audio audio";
  gap: 2rem 4rem;
  padding-top: 8.5rem;
  padding-bottom: 3.2rem;
}
.hero-copy { max-width: 680px; }
.hero h1 {
  font-size: clamp(3rem, 5.5vw, 5.15rem);
  line-height: .98;
  letter-spacing: -.06em;
}
.hero-role { color: #bde8ff; font-size: clamp(1rem, 1.35vw, 1.16rem); }
.hero-intro { max-width: 63ch; }
.hero-actions .button { min-width: 180px; border-radius: 10px; }
.button-ghost { backdrop-filter: blur(10px); }

.orbit-stage {
  width: min(40vw, 480px);
  justify-self: center;
}
.portrait-wrap {
  box-shadow:
    0 0 0 1px rgba(84, 213, 255, .28),
    0 0 45px rgba(25, 159, 255, .16),
    0 28px 80px rgba(0, 0, 0, .28);
}

.audio-panel,
.glass-card,
.certificate-list article,
.contact-form {
  border-radius: var(--radius);
  border-color: rgba(108, 194, 255, .17);
}
.audio-panel {
  background: linear-gradient(145deg, rgba(8, 27, 51, .88), rgba(4, 15, 31, .82));
}
.section { padding: clamp(4.5rem, 7vw, 7rem) 0; }
.section-heading { margin-bottom: 2rem; }
.section-heading h2,
.contact-copy h2 { font-size: clamp(2.1rem, 4vw, 3.55rem); letter-spacing: -.045em; }
.glass-card {
  background: linear-gradient(145deg, rgba(9, 29, 54, .82), rgba(4, 16, 34, .76));
  box-shadow: 0 18px 50px rgba(0, 0, 0, .12);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.glass-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .18);
}
.contact-links,
.creation-links ul { padding-left: 1.1rem; }
.creation-links { margin-top: 1.4rem; }
.creation-links h3 { margin-bottom: .55rem; font-size: 1rem; }
.creation-links li + li { margin-top: .35rem; }

/* Réservation structurelle : le module reste sans impact tant qu'il est hidden. */
.maestra-slot[hidden] { display: none !important; }

@media (max-width: 980px) {
  .hero {
    min-height: auto;
    grid-template-columns: 1fr;
    grid-template-areas: "orbit" "copy" "audio";
    gap: 1.6rem;
    padding-top: 7.5rem;
  }
  .orbit-stage { width: min(76vw, 520px); }
  .hero-copy { max-width: 760px; text-align: center; justify-self: center; }
  .hero-intro { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-proof { justify-content: center; }
}

@media (max-width: 760px) {
  .site-header { min-height: 64px; }
  .hero { padding-top: 6.5rem; }
  .orbit-stage { width: min(82vw, 390px); }
  .hero h1 { font-size: clamp(2.5rem, 12vw, 4rem); }
  .hero-actions { display: grid; grid-template-columns: 1fr; width: min(100%, 420px); margin-left: auto; margin-right: auto; }
  .hero-actions .button { width: 100%; }
  .section { width: min(var(--max), calc(100% - 1.5rem)); padding: 4rem 0; }
}

/* Lecteur CV personnalisé */
.cv-dialog { width:min(94vw,1180px); height:min(92vh,900px); padding:0; border:1px solid rgba(77,190,255,.34); border-radius:20px; background:#071426; color:#eef8ff; overflow:hidden; box-shadow:0 35px 110px rgba(0,0,0,.55); }
.cv-dialog.cv-width-compact { width:min(88vw,900px); }
.cv-dialog.cv-width-max { width:97vw; height:96vh; }
.cv-dialog::backdrop { background:rgba(1,7,16,.72); backdrop-filter:blur(7px); }
.cv-dialog.cv-backdrop-light::backdrop { background:rgba(1,7,16,.48); backdrop-filter:blur(3px); }
.cv-dialog.cv-backdrop-strong::backdrop { background:rgba(1,7,16,.88); backdrop-filter:blur(11px); }
.cv-dialog[open].cv-effect-subtle { animation:cvFade .18s ease-out; }
.cv-dialog[open].cv-effect-fluid { animation:cvFluid .28s cubic-bezier(.2,.8,.2,1); }
.cv-dialog[open].cv-effect-dynamic { animation:cvDynamic .32s cubic-bezier(.2,.9,.25,1.15); }
@keyframes cvFade { from{opacity:0} to{opacity:1} }
@keyframes cvFluid { from{opacity:0;transform:translateY(16px) scale(.985)} to{opacity:1;transform:none} }
@keyframes cvDynamic { from{opacity:0;transform:translateY(24px) scale(.96)} to{opacity:1;transform:none} }
.cv-shell { display:grid; grid-template-rows:auto 1fr; height:100%; min-height:0; }
.cv-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem .9rem; background:linear-gradient(180deg,#0b2039,#08182d); border-bottom:1px solid rgba(92,194,255,.2); }
.cv-title { display:grid; line-height:1.15; white-space:nowrap; }
.cv-title small { opacity:.65; margin-top:.18rem; }
.cv-tools { display:flex; align-items:center; justify-content:flex-end; gap:.4rem; flex-wrap:wrap; }
.cv-tools button,.cv-tools a { min-height:36px; display:inline-flex; align-items:center; justify-content:center; padding:.45rem .68rem; border:1px solid rgba(102,201,255,.22); border-radius:9px; background:rgba(7,30,55,.9); color:#eaf8ff; font:inherit; font-size:.82rem; text-decoration:none; cursor:pointer; }
.cv-tools button:hover,.cv-tools a:hover { border-color:rgba(86,208,255,.65); background:rgba(13,55,91,.95); }
.cv-tools output { min-width:48px; text-align:center; font-size:.82rem; color:#7edcff; }
.cv-tools .cv-close { font-size:1.3rem; width:38px; padding:0; }
.cv-stage { min-height:0; background:#101820; }
.cv-stage iframe { width:100%; height:100%; border:0; background:#fff; }
@media (max-width:760px){ .cv-dialog,.cv-dialog.cv-width-compact,.cv-dialog.cv-width-max{width:100vw;height:100dvh;max-width:none;max-height:none;border-radius:0;border:0}.cv-toolbar{align-items:flex-start}.cv-title small{display:none}.cv-tools{gap:.3rem}.cv-tools button,.cv-tools a{font-size:.75rem;padding:.38rem .48rem}.cv-tools [data-cv-print],.cv-tools [data-cv-fit]{display:none} }
@media (prefers-reduced-motion:reduce){.cv-dialog[open]{animation:none!important}}

/* =========================================================
   PARTAGE — finition professionnelle V2
   ========================================================= */
.share-dialog {
  width: min(680px, calc(100vw - 32px));
  max-width: 680px;
  border-radius: 24px;
  border-color: rgba(76, 214, 255, .32);
  background: linear-gradient(145deg, rgba(7, 24, 43, .995), rgba(3, 12, 25, .995));
  box-shadow: 0 34px 100px rgba(0, 0, 0, .68), 0 0 46px rgba(40, 207, 255, .12), inset 0 1px rgba(255,255,255,.04);
  isolation: isolate;
}
.share-dialog-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 14% -8%, rgba(43, 212, 255, .16), transparent 34%),
    radial-gradient(circle at 92% 8%, rgba(35, 119, 255, .10), transparent 32%);
}
.share-dialog .dialog-head {
  align-items: center;
  padding: 22px 24px 18px;
  border-bottom-color: rgba(105, 221, 255, .11);
}
.share-heading { display: flex; align-items: center; gap: 14px; min-width: 0; }
.share-heading-icon {
  width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center;
  border: 1px solid rgba(90, 226, 255, .30); border-radius: 14px;
  background: linear-gradient(145deg, rgba(25, 91, 127, .30), rgba(7, 29, 51, .72));
  color: #58e4ff; box-shadow: inset 0 0 18px rgba(43, 214, 255, .08);
}
.share-heading-icon svg { width: 26px; height: 26px; fill: currentColor; }
.share-heading-icon svg path:nth-child(2) { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.share-heading-icon svg circle { fill: currentColor; }
.share-dialog .dialog-head h2 { margin-top: 3px; font-size: clamp(1.25rem, 3vw, 1.55rem); }
.share-dialog-body { padding: 0 24px 22px; }
.share-dialog-intro { padding: 17px 0 14px; font-size: .94rem; line-height: 1.55; }
.share-link-preview {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px;
  padding: 11px 12px; margin-bottom: 16px;
  border: 1px solid rgba(96, 222, 255, .18); border-radius: 15px;
  background: rgba(2, 14, 28, .62);
}
.share-link-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: rgba(45, 207, 255, .10); color: #64e7ff; font-weight: 800; }
.share-link-preview div { min-width: 0; }
.share-link-preview small { display: block; margin-bottom: 2px; color: #7eabc7; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.share-link-preview strong { display: block; overflow: hidden; color: #dff8ff; font-size: .82rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.share-copy-compact {
  min-height: 34px !important; padding: 7px 11px !important; border-radius: 10px !important;
  color: #6feaff !important; font-size: .78rem !important; text-align: center !important;
}
.share-actions { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; padding: 0; }
.share-actions button {
  display: flex; align-items: center; gap: 11px; min-height: 62px; padding: 10px 12px;
  border-radius: 15px; background: linear-gradient(145deg, rgba(15, 45, 72, .78), rgba(7, 25, 44, .82));
  font-weight: 400; box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.share-actions button > span:last-child { min-width: 0; }
.share-actions button strong { display: block; color: #f1fbff; font-size: .9rem; line-height: 1.15; }
.share-actions button small { display: block; margin-top: 4px; color: #89a9bf; font-size: .72rem; font-weight: 500; line-height: 1.15; }
.share-action-icon {
  display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px;
  border: 1px solid rgba(100, 226, 255, .22); border-radius: 11px;
  background: rgba(36, 181, 225, .075); color: #64e8ff; font-size: .92rem; font-weight: 800;
}
.share-actions .share-action-featured {
  grid-column: 1 / -1; min-height: 58px;
  border-color: rgba(78, 225, 255, .42); background: linear-gradient(135deg, rgba(17, 98, 132, .42), rgba(7, 34, 58, .84));
}
.share-actions .share-action-featured .share-action-icon { background: rgba(58, 224, 255, .13); }
.share-status { min-height: 0; padding: 0; margin: 12px 2px 0; font-size: .82rem; }
.share-status:empty { display: none; }
.share-status[data-status-type="error"] { color: #ffb7ba; }
.share-privacy { margin: 14px 0 0; padding: 0; border-radius: 14px; overflow: hidden; }
.share-privacy summary { padding: 11px 13px; cursor: pointer; color: #a9c8da; font-size: .79rem; font-weight: 700; list-style-position: inside; }
.share-privacy[open] summary { border-bottom: 1px solid rgba(116, 222, 255, .11); color: #dff8ff; }
.share-privacy > div { padding: 5px 13px 12px; }
.share-privacy p { font-size: .79rem; line-height: 1.5; }
.share-privacy a { font-size: .79rem; }
html[data-theme="light"] .share-dialog { color: #0b2f4d; background: linear-gradient(145deg, #f8fcff, #eef7fb); border-color: rgba(33, 149, 190, .30); box-shadow: 0 32px 90px rgba(16, 60, 82, .25); }
html[data-theme="light"] .share-dialog .dialog-head h2,
html[data-theme="light"] .share-actions button strong { color: #0a2942; }
html[data-theme="light"] .share-dialog-intro,
html[data-theme="light"] .share-actions button small,
html[data-theme="light"] .share-privacy p { color: #496b80; }
html[data-theme="light"] .share-link-preview,
html[data-theme="light"] .share-privacy { background: rgba(228, 243, 250, .72); }
html[data-theme="light"] .share-link-preview strong { color: #153d58; }
html[data-theme="light"] .share-actions button { background: linear-gradient(145deg, rgba(237, 248, 252, .96), rgba(221, 241, 248, .88)); border-color: rgba(39, 145, 183, .20); }
@media (max-width: 760px) {
  .share-dialog { inset: auto 10px 10px; max-height: calc(100dvh - 20px); border-radius: 22px 22px 15px 15px; }
  .share-dialog-body { padding: 0 17px 17px; }
  .share-dialog .dialog-head { padding: 18px 17px 15px; }
  .share-dialog-intro { padding: 14px 0 12px; }
  .share-actions { grid-template-columns: 1fr; padding: 0; }
  .share-actions button { min-height: 58px; padding: 9px 10px; }
  .share-action-icon { width: 33px; height: 33px; flex-basis: 33px; }
  .share-privacy { margin-left: 0; margin-right: 0; margin-bottom: 0; }
}
@media (max-width: 460px) {
  .share-actions { grid-template-columns: 1fr; }
  .share-actions .share-action-featured { grid-column: auto; }
  .share-link-preview { grid-template-columns: auto minmax(0,1fr); }
  .share-copy-compact { grid-column: 1 / -1; width: 100%; }
  .share-heading-icon { width: 40px; height: 40px; flex-basis: 40px; }
}

/* V1.4 - Global particles + professional contact */
#particle-canvas.particle-canvas-global {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: .32;
  pointer-events: none;
}
main,
.site-footer,
.audio-topbar {
  position: relative;
  z-index: 1;
}
.site-header { z-index: 100; }
.back-to-top { z-index: 80; }

.contact-copy { align-self: start; }
.contact-links {
  display: grid;
  gap: .45rem;
  margin: 1.3rem 0 0;
}
.contact-links a {
  color: #bde8ff;
  text-underline-offset: .2em;
  text-decoration-color: rgba(48, 220, 255, .35);
}
.contact-form select {
  width: 100%;
  min-height: 48px;
  padding: .78rem .9rem;
  color: var(--white);
  background: rgba(2, 13, 27, .74);
  border: 1px solid rgba(105, 198, 255, .26);
  border-radius: 11px;
  outline: 0;
}
.contact-form select:focus {
  border-color: rgba(48, 220, 255, .72);
  box-shadow: 0 0 0 3px rgba(48, 220, 255, .10);
}
.creation-links { margin-top: 2rem; }
.creation-links-heading h3 {
  margin: .15rem 0 .35rem;
  font-size: 1.15rem;
}
.creation-links-heading > p:last-child {
  margin: 0 0 1rem;
  max-width: 42ch;
  color: var(--muted);
  font-size: .88rem;
}
.creation-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .7rem;
}
.creation-card {
  position: relative;
  min-height: 82px;
  padding: 1rem 1rem .9rem;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  gap: .35rem .75rem;
  text-decoration: none;
  background: linear-gradient(145deg, rgba(10, 30, 55, .86), rgba(5, 19, 38, .70));
  border: 1px solid rgba(95, 201, 255, .18);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.creation-card::after {
  content: '';
  position: absolute;
  inset: auto -25% -70% 30%;
  height: 90px;
  background: radial-gradient(circle, rgba(48, 220, 255, .14), transparent 70%);
  pointer-events: none;
}
.creation-card:hover {
  transform: translateY(-2px);
  border-color: rgba(48, 220, 255, .52);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .22), inset 0 0 22px rgba(48, 220, 255, .045);
}
.creation-card-mark {
  grid-row: 1 / 3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(48, 220, 255, .35);
  border-radius: 10px;
  color: var(--cyan);
  background: rgba(48, 220, 255, .07);
  font-weight: 800;
}
.creation-card-label {
  align-self: center;
  color: #eef8ff;
  font-size: .9rem;
  font-weight: 730;
  line-height: 1.28;
}
.creation-card-action {
  color: #86bdd8;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
html[data-theme="light"] .contact-form select {
  color: var(--white);
  background: rgba(255, 255, 255, .72);
  border-color: rgba(24, 126, 166, .24);
}
html[data-theme="light"] .creation-card {
  background: rgba(255, 255, 255, .72);
  border-color: rgba(24, 126, 166, .18);
}
html[data-theme="light"] .creation-card-label { color: var(--white); }
body.motion-reduced .creation-card { transition: none; }
@media (max-width: 560px) {
  .creation-grid { grid-template-columns: 1fr; }
}

/* Polissage de défilement */
.scroll-motion-ready .scroll-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--reveal-duration, 520ms) ease, transform var(--reveal-duration, 520ms) cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.scroll-motion-ready.scroll-motion-subtle .scroll-reveal { transform: translateY(8px); }
.scroll-motion-ready.scroll-motion-dynamic .scroll-reveal { transform: translateY(22px) scale(.985); }
.scroll-motion-ready .scroll-reveal.is-revealed { opacity: 1; transform: none; }
.page-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 9999; pointer-events: none; background: rgba(48,220,255,.06); }
.page-progress > span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, rgba(48,220,255,.45), rgba(48,220,255,.95)); box-shadow: 0 0 12px rgba(48,220,255,.45); }
body.motion-reduced .scroll-reveal, body.motion-reduced .scroll-reveal.is-revealed { opacity: 1 !important; transform: none !important; transition: none !important; }
body.motion-reduced .page-progress { display: none; }
@media (prefers-reduced-motion: reduce) { .scroll-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .page-progress { display: none; } }

/* Centre de préférences de confidentialité */
.footer-legal { display:grid !important; gap:.2rem !important; text-align:right; }
.footer-legal p { margin:0; }
.footer-link-button { appearance:none; border:0; background:transparent; padding:0; color:inherit; font:inherit; cursor:pointer; }
.footer-link-button:hover,.footer-link-button:focus-visible { color:var(--cyan); }
.privacy-banner[hidden] { display:none !important; }
.privacy-banner { position:fixed; z-index:9998; left:50%; bottom:1.25rem; width:min(760px,calc(100% - 2rem)); transform:translate(-50%,18px); opacity:0; pointer-events:none; overflow:hidden; border:1px solid rgba(70,217,255,.24); border-radius:22px; background:rgba(5,17,35,.97); color:var(--white); box-shadow:0 28px 80px rgba(0,0,0,.42),0 0 40px rgba(38,197,255,.08); backdrop-filter:blur(18px); transition:opacity .22s ease,transform .22s ease; }
.privacy-banner.is-visible { opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.privacy-banner-glow { position:absolute; inset:-45% auto auto -8%; width:280px; height:220px; background:radial-gradient(circle,rgba(24,203,255,.17),transparent 68%); pointer-events:none; }
.privacy-banner-copy { position:relative; padding:1.4rem 1.55rem 1.35rem; }
.privacy-banner h2 { margin:.15rem 0 .55rem; font-size:clamp(1.2rem,2vw,1.65rem); }
.privacy-banner-copy > p:not(.eyebrow):not(.privacy-links) { color:var(--muted); line-height:1.65; }
.privacy-actions { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1rem; align-items:center; }
.privacy-customize { border:0; background:transparent; color:var(--cyan); cursor:pointer; padding:.65rem .25rem; font:inherit; font-weight:700; }
.privacy-details { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); display:grid; gap:.7rem; }
.privacy-choice { display:grid; grid-template-columns:1fr auto; align-items:center; gap:1rem; padding:.85rem 1rem; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.025); }
.privacy-choice span { display:grid; gap:.2rem; }
.privacy-choice small { color:var(--muted); line-height:1.45; }
.privacy-choice input { width:20px; height:20px; accent-color:var(--cyan); }
.privacy-choice.is-required { opacity:.82; }
.privacy-save { justify-self:start; }
.privacy-links { margin:.9rem 0 0; font-size:.78rem; color:var(--muted); }
.privacy-links a { color:var(--cyan); }
html[data-theme="light"] .privacy-banner { background:rgba(247,251,255,.98); color:#0a1b2f; box-shadow:0 28px 80px rgba(22,60,90,.22); }
html[data-theme="light"] .privacy-choice { background:rgba(7,36,66,.03); }
body.motion-reduced .privacy-banner { transition:none; }
@media (max-width:720px) {
  .privacy-banner { bottom:.65rem; width:calc(100% - 1rem); border-radius:18px; max-height:calc(100vh - 1.3rem); overflow:auto; }
  .privacy-banner-copy { padding:1.1rem; }
  .privacy-actions { display:grid; grid-template-columns:1fr; }
  .privacy-actions .button,.privacy-customize { width:100%; justify-content:center; text-align:center; }
  .footer-legal { text-align:left; }
}