*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);line-height:1.58;overflow-x:hidden;transition:background .25s var(--ease),color .25s var(--ease)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-3;background:radial-gradient(circle at 12% 12%,rgba(255,45,170,.12),transparent 30%),radial-gradient(circle at 85% 18%,rgba(0,217,255,.08),transparent 27%),radial-gradient(circle at 68% 88%,rgba(139,99,255,.09),transparent 31%),var(--bg)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.055;background-image:url('/assets/media/noise-grid.svg');mix-blend-mode:screen}html[data-theme="light"] body::after{opacity:.025;mix-blend-mode:multiply}
a{color:inherit}button,input,select,textarea{font:inherit}img,svg{display:block;max-width:100%}h1,h2,h3{font-family:var(--display);line-height:.98;letter-spacing:.015em}h1{font-size:var(--step-3);margin:.2rem 0 1rem;text-transform:uppercase}h2{font-size:var(--step-2);margin:.2rem 0 1rem}h3{font-size:var(--step-1)}p{margin:.6rem 0 1rem}.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;left:1rem;top:-5rem;z-index:9999;background:#fff;color:#000;padding:.7rem 1rem;border-radius:10px}.skip-link:focus{top:1rem}.shell{width:min(calc(100% - 2rem),var(--max));margin-inline:auto}
.site-header{height:var(--header-h);display:flex;align-items:center;position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg),transparent 12%);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;font-weight:950;letter-spacing:.11em;font-family:var(--display)}.brand img{width:46px;height:46px;border-radius:50%;object-fit:cover;box-shadow:0 0 24px rgba(255,45,170,.38)}.header-actions{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;justify-content:flex-end}.icon-button,.audio-toggle,.theme-toggle{border:1px solid var(--line);background:color-mix(in srgb,var(--surface),transparent 18%);color:var(--text);min-height:42px;border-radius:999px;padding:.62rem .88rem;cursor:pointer;font-size:.86rem;font-weight:800}.icon-button:hover,.audio-toggle:hover,.theme-toggle:hover{background:var(--surface2)}:focus-visible{outline:3px solid var(--focus,var(--yellow));outline-offset:4px}
.nav-overlay{position:fixed;inset:0;z-index:80;background:color-mix(in srgb,var(--bg),transparent 2%);display:grid;place-items:center;padding:2rem;opacity:0;visibility:hidden;transition:.22s var(--ease)}.nav-overlay[data-open="true"]{opacity:1;visibility:visible}.nav-panel{width:min(980px,100%);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;max-height:90vh;overflow:auto}.nav-panel a{text-decoration:none;border:1px solid var(--line);border-radius:18px;padding:1rem 1.2rem;display:flex;justify-content:space-between;gap:1rem;background:color-mix(in srgb,var(--surface),transparent 8%)}.nav-panel a:hover{border-color:var(--pink);transform:translateY(-2px)}.nav-panel a[aria-current="page"]{border-color:var(--pink);box-shadow:inset 4px 0 var(--pink)}.nav-panel small{color:var(--muted);text-align:right}.nav-close{grid-column:1/-1;justify-self:end}.page{min-height:100vh}
.footer{border-top:1px solid var(--line);padding:2.2rem 0;color:var(--muted);background:color-mix(in srgb,var(--surface),transparent 38%)}.footer-grid{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:end}.footer-grid>div:first-child{position:relative;padding-left:70px}.footer-stamp{position:absolute;left:0;bottom:0;width:56px;height:56px;border-radius:50%;object-fit:cover;filter:grayscale(1) contrast(1.15)}.footer-links{display:flex;gap:1rem;flex-wrap:wrap;justify-content:flex-end}.footer a{text-decoration:none}.footer a:hover{text-decoration:underline}
.kicker{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.17em;color:var(--accent,var(--pink));font-weight:900}.lead{font-size:clamp(1.05rem,1rem + .35vw,1.35rem);color:var(--muted);max-width:65ch}.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;padding:.8rem 1.15rem;text-decoration:none;font-weight:900;border:1px solid color-mix(in srgb,var(--accent,var(--pink)),transparent 38%);background:color-mix(in srgb,var(--accent,var(--pink)),transparent 80%);cursor:pointer;color:var(--text)}.button:hover{background:color-mix(in srgb,var(--accent,var(--pink)),transparent 68%);transform:translateY(-2px)}.button.secondary{border-color:var(--line);background:var(--surface)}.muted{color:var(--muted)}.legal-note{font-size:.9rem;color:var(--muted)}.mode-badges,.tone-cloud{display:flex;flex-wrap:wrap;gap:.65rem}.mode-badges span,.tone-cloud span{border:1px solid var(--line);border-radius:999px;padding:.45rem .75rem;background:var(--surface);font-size:.85rem;font-weight:800}
@media(max-width:760px){.nav-panel{grid-template-columns:1fr}.nav-panel small{display:none}.footer-grid{grid-template-columns:1fr}.footer-links{justify-content:flex-start}.header-actions .audio-toggle{display:none}.brand span{font-size:.84rem}.footer-grid>div:first-child{padding-left:0;padding-top:68px}.footer-stamp{top:0;bottom:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}


/* V2.2 — stabilité typographique */
h1,h2,h3{text-wrap:balance;overflow-wrap:normal;hyphens:none}
.nav-panel span,.footer-links a{overflow-wrap:normal;hyphens:none}
.header-inner,.hero-grid,.section-head,.contact-layout,.identity-grid,.project-feature,.universe-grid{min-width:0}
.header-inner>*{min-width:0}
@media(max-width:520px){
  .site-header{height:auto;min-height:var(--header-h);padding:.55rem 0}
  .header-inner{gap:.45rem}
  .brand{gap:.5rem;letter-spacing:.07em}
  .brand img{width:40px;height:40px}
  .brand span{font-size:.76rem;white-space:nowrap}
  .header-actions{gap:.35rem;flex-wrap:nowrap}
  .header-actions .theme-toggle,.header-actions .icon-button{padding:.55rem .66rem;font-size:.76rem;min-height:40px}
}

/* V2.5 — garde-fous anti-débordement */
html,body{max-width:100%;overflow-x:clip}
.hero-grid>*,.section-head>*,.contact-layout>*,.identity-grid>*,.project-feature>*{min-width:0}
h1,h2,h3{overflow-wrap:break-word}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-mark{justify-self:start;width:min(170px,42vw)}
}
@media(max-width:620px){
  h1,h2,h3{overflow-wrap:anywhere;hyphens:auto}
}

/* V2.5.1 — logo d’en-tête sobre et titres mobiles lisibles */
.brand img{
  border:1px solid rgba(255,45,170,.28);
  box-shadow:none;
  filter:brightness(.9) contrast(1.12) saturate(.72);
  transition:border-color .22s ease,box-shadow .22s ease,filter .22s ease;
}
.brand:hover img,.brand:focus-visible img{
  border-color:#ff2daa;
  box-shadow:0 0 12px rgba(255,45,170,.32);
  filter:brightness(1) contrast(1.12) saturate(.82);
}
@media(max-width:620px){
  .page-hero h1{
    font-size:clamp(2.15rem,10vw,2.7rem);
    overflow-wrap:break-word;
    word-break:normal;
    hyphens:auto;
  }
}


/* V3.0 — logo d’en-tête allumé, cerclage interactif et son accessible */
.brand{position:relative}
.brand img{
  filter:brightness(1.08) contrast(1.06) saturate(1.08)!important;
  border-color:rgba(255,45,170,.52)!important;
  box-shadow:0 0 8px rgba(255,255,255,.12),0 0 18px rgba(255,45,170,.35)!important;
}
.brand::before{
  content:"";
  position:absolute;
  left:-4px;
  top:50%;
  width:54px;
  height:54px;
  translate:0 -50%;
  border-radius:50%;
  border:1px solid transparent;
  pointer-events:none;
  opacity:.45;
  transition:border-color .22s ease,box-shadow .25s ease,opacity .22s ease;
}
.brand:hover::before,.brand:focus-visible::before{
  opacity:1;
  border-color:#ff2daa;
  box-shadow:0 0 4px rgba(255,255,255,.8),0 0 12px rgba(255,45,170,.9),0 0 26px rgba(255,45,170,.55);
}
.brand:hover img,.brand:focus-visible img{
  filter:brightness(1.15) contrast(1.08) saturate(1.12)!important;
  box-shadow:0 0 10px rgba(255,255,255,.18),0 0 24px rgba(255,45,170,.5)!important;
}
@media(max-width:760px){
  .header-actions .theme-toggle{display:none}
  .header-actions .audio-toggle{display:inline-flex}
}
@media(max-width:520px){
  .brand::before{width:48px;height:48px;left:-4px}
  .header-actions .audio-toggle,.header-actions .icon-button{padding:.52rem .62rem;font-size:.73rem}
}