/* ============ DESIGN TOKENS ============
     Prime-time world: an awards-show broadcast at midnight — navy & gold.
     ground   #0B1220  — deep navy-black
     deck     #131B2E  — panel surface
     deck-2   #1B2740  — raised / hover surface
     line     #263454  — hairlines, timeline track
     paper    #F4EFE1  — warm cream text
     slate    #8792AC  — muted cool blue-grey
     tally    #E8A33D  — accent: broadcast gold (record / live / primary CTA)
     scope    #35C6C2  — accent 2: muted teal (data, technical, secondary)
  */
  :root{
    --ground:#0B1220; --deck:#131B2E; --deck-2:#1B2740; --line:#263454;
    --paper:#F4EFE1; --slate:#8792AC; --tally:#E8A33D; --scope:#35C6C2;
    --on-tally:#0B1220; /* text/icon color placed on top of the --tally accent — pick per palette for contrast */
    --display:'Anton','Arial Narrow',sans-serif;
    --body:'Manrope',-apple-system,'Segoe UI',sans-serif;
    --mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  main{ display:block; }
  body{
    margin:0; background:var(--ground); color:var(--paper);
    font-family:var(--body); font-size:16px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{ background:var(--tally); color:var(--on-tally); }

  /* ---------- scroll reveal (elements settle into place on scroll) ---------- */
  .reveal{
    opacity:0; transform:translateY(28px);
    transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  }
  .reveal.in-view{ opacity:1; transform:translateY(0); }
  @media (prefers-reduced-motion:reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
  }

  #cursorGlow{
    position:fixed; top:0; left:0; width:50px; height:50px; border-radius:50%;
    background:var(--scope); opacity:0; filter:blur(25px);
    mix-blend-mode:screen;
    pointer-events:none; z-index:200; transform:translate3d(-25px,-25px,0);
    transition:opacity .3s ease; will-change:transform;
  }
  @media (pointer:coarse), (prefers-reduced-motion:reduce){ #cursorGlow{ display:none; } }

  a{ color:inherit; }
  img{ max-width:100%; display:block; }
  h1,h2,h3{ text-wrap:balance; margin:0; }

  .wrap{ max-width:1160px; margin:0 auto; padding:0 32px; }

  /* ---------- timecode spine (scroll playhead) ---------- */
  #spine{
    position:fixed; left:28px; top:0; bottom:0; width:1px;
    background:var(--line); z-index:40;
  }
  #spine::before{
    content:""; position:absolute; left:-3px; top:0; width:7px; height:7px;
    border-radius:50%; background:var(--tally);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--tally) 18%, transparent);
    transform:translateY(var(--play-y,0px));
  }
  #spine-tc{
    position:fixed; left:44px; bottom:20px; z-index:40;
    font-family:var(--mono); font-size:11px; letter-spacing:.06em;
    color:var(--slate);
  }
  #spine-tc b{ color:var(--scope); font-weight:500; }
  

  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:30;
    background:color-mix(in srgb, var(--ground) 86%, transparent); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .bar{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 30px 16px 64px;
  }
  .logo-chip{
    position:relative; display:inline-flex; align-items:center;
    text-decoration:none; padding:20px 30px;
  }
  .logo-chip .corner{ position:absolute; width:14px; height:14px; border:2px solid var(--tally); }
  .logo-chip .corner.tl{ top:0; left:0; border-right:none; border-bottom:none; }
  .logo-chip .corner.tr{ top:0; right:0; border-left:none; border-bottom:none; }
  .logo-chip .corner.bl{ bottom:0; left:0; border-right:none; border-top:none; }
  .logo-chip .corner.br{ bottom:0; right:0; border-left:none; border-top:none; }
  .logo-chip .brand-rec{
    position:absolute; top:5px; left:34px;
    font-family:var(--mono); font-size:9px; color:var(--tally); letter-spacing:.06em;
  }
  .logo-chip .brand-rec::before{ content:"●"; margin-right:4px; }
  .logo-chip .brand-name{
    font-family:var(--display); font-size:26px; letter-spacing:.03em;
    color:var(--paper); text-transform:uppercase; white-space:nowrap; line-height:1;
  }
  
  nav{ display:flex; align-items:center; gap:28px; }
  nav a{
    text-decoration:none; color:var(--slate); font-size:13px;
    letter-spacing:.08em; text-transform:uppercase; font-weight:600;
    transition:color .15s; white-space:nowrap;
  }
  
  nav a:hover, nav a:focus-visible{ color:var(--paper); outline:none; }
  header nav a.active{ color:var(--scope); }
  .skip-link{
    position:fixed; top:10px; left:10px; z-index:100; transform:translateY(-160%);
    padding:10px 16px; border-radius:8px; background:var(--tally); color:var(--ground);
    font-family:var(--mono); font-size:13px; font-weight:600; text-decoration:none; transition:transform .2s;
  }
  .skip-link:focus, .skip-link:focus-visible{ transform:none; outline:2px solid var(--paper); outline-offset:2px; }
  .rec a{ color:inherit; text-decoration:none; transition:color .15s; }
  .rec a:hover, .rec a:focus-visible{ color:var(--tally); outline:none; }
  .rec [aria-current]{ color:var(--paper); }
  nav .lang-nav{ display:inline-flex; align-items:center; gap:6px; padding-left:18px; margin-left:4px; border-left:1px solid var(--line); }
  nav .lang-nav a, nav .lang-nav span{ font-size:13px; letter-spacing:.08em; font-weight:600; }
  nav .lang-nav span[aria-current]{ color:var(--tally); }
  nav .lang-nav i{ font-style:normal; color:var(--line); }
  .mobile-nav .lang-nav{ display:flex; gap:10px; padding:14px 0 0; border-left:0; margin:0; }
  /* un seul sélecteur de langue visible : celui de la barre REC, en haut à droite.
     Le menu principal garde le sien uniquement dans le menu ☰ (mobile). */
  .bar > nav .lang-nav{ display:none; }
  .resume-dl{
    display:inline-flex; align-items:center; gap:9px; margin-top:22px; padding:11px 16px; border-radius:10px;
    background:var(--tally); color:var(--ground); text-decoration:none;
    font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
    transition:transform .2s, box-shadow .2s;
  }
  .resume-dl:hover, .resume-dl:focus-visible{ transform:translateY(-1px); box-shadow:0 6px 18px color-mix(in srgb, var(--tally) 35%, transparent); outline:none; }
  .rec{
    display:flex; align-items:center; gap:8px;
    font-family:var(--mono); font-size:11px; color:var(--slate);
    letter-spacing:.05em;
  }
  .rec-dot{
    width:7px; height:7px; border-radius:50%; background:var(--tally);
    animation:pulse 1.6s ease-in-out infinite;
  }
  @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.25;} }
  /* Sous 1200px, les liens du menu (dont « Packaging & Print ») ne tiennent plus entre le logo et « Lyon, FR ». */
  
  /* Menu mobile : bouton ☰ sous 1200 px, liens en panneau déroulant sous l'en-tête */
  .menu-toggle{ display:none; }
  .mobile-nav{ display:none; }
  
  
  

  /* ---------- hero ---------- */
  .hero{ padding:58px 30px 64px 64px; border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
  
  .hero-glow{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:85.8%; height:85.8%; z-index:0; pointer-events:none;
  }
  .hero-glow img{ width:100%; height:100%; object-fit:contain; display:block; mix-blend-mode:screen; opacity:.9; }
  /* Contact : 20 % plus petite (85.8 % × 0.8), posée en bas à droite de la section */
  #contact .hero-glow{ width:68.64%; height:68.64%; top:auto; bottom:0; left:auto; right:0; transform:none; }
  #contact .hero-glow img{ object-position:100% 100%; }
  .availability{
    display:inline-flex; align-items:center; gap:10px; margin:-8px 0 22px; padding:6px 12px;
    border:1px solid color-mix(in srgb, var(--tally) 45%, var(--line)); border-radius:12px; line-height:1.45;
    font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--paper);
    background:color-mix(in srgb, var(--tally) 8%, transparent);
  }
  .eyebrow{
    font-family:var(--mono); font-size:12px; color:var(--scope);
    letter-spacing:.14em; text-transform:uppercase; margin-bottom:22px;
    display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{ content:"▸"; color:var(--tally); }
  .hero h1{
    font-family:var(--display); text-transform:uppercase;
    font-size:clamp(42px,7.3vw,95px); line-height:.92; letter-spacing:.01em;
  }
  .hero h1 .line{ display:block; overflow:hidden; }
  /* Une fois l'apparition finie, les lignes ne masquent plus : les lettres peuvent sortir de leur boîte. */
  .hero h1.is-live .line{ overflow:visible; }
  .hero h1 .word{ display:inline-block; white-space:nowrap; }
  .hero h1 .ch{ display:inline-block; transform-origin:50% 100%; }
  .hero h1 .line > span{
    display:block; transform:translateY(105%);
    animation:reveal .7s cubic-bezier(.22,1,.36,1) forwards;
  }
  .hero h1 .line:nth-child(2) > span{ animation-delay:.09s; color:var(--tally); }
  @keyframes reveal{ to{ transform:translateY(0); } }
  @media (prefers-reduced-motion:reduce){
    .hero h1 .line > span{ animation:none; transform:none; }
  }
  .hero-foot{
    margin-top:34px; display:flex; flex-wrap:wrap; gap:40px;
    align-items:flex-end;
  }
  .hero-lede{ max-width:46ch; color:var(--slate); font-size:17px; }
  .hero-lede strong{ color:var(--paper); font-weight:700; }
  .frame-counter{
    font-family:var(--mono); font-size:12px; color:var(--slate);
    border:1px solid var(--line); padding:10px 14px; white-space:nowrap;
    border-radius:14px;
    background:color-mix(in srgb, var(--deck) 55%, transparent); backdrop-filter:blur(6px);
  }
  a.frame-counter{ text-decoration:none; transition:border-color .2s, box-shadow .2s; }
  a.frame-counter:hover, a.frame-counter:focus-visible{ border-color:var(--tally); outline:none; box-shadow:0 0 14px color-mix(in srgb, var(--tally) 30%, transparent); }
  .frame-counter b{ display:block; font-size:26px; color:var(--paper); font-family:var(--body); font-weight:800; }

  /* ---------- hero graph editor (drives the headline's size + color) ---------- */
  .hero-grid{ display:grid; grid-template-columns:0.45fr 2.55fr 1fr; gap:24px; align-items:stretch; position:relative; z-index:1; }
  
  .hero-side{ display:flex; flex-direction:column; gap:20px; min-width:0; position:relative; z-index:1; }
  .hero-orbit-col{
    display:flex; flex-direction:column; width:100%; min-width:0;
    margin-top:-150px; margin-right:-110px; position:relative; z-index:0;
    transform:translateX(50px);
  }
  /* Tablette et petits portables (jusqu'à 1300 px) : texte + orbe sur deux colonnes, graph editor et activités côte à côte en dessous
     (en trois colonnes, le panneau latéral tombait à ~100 px de large) */
  
  /* Mobile : l'orbe ne remonte plus sur le texte et reste dans la largeur de l'écran */
  
  .scope-panel{ border:1px solid var(--line); background:color-mix(in srgb, var(--deck) 55%, transparent); backdrop-filter:blur(6px); overflow:hidden; border-radius:14px; position:relative; isolation:isolate; }
  .activities-card{ border:1px solid var(--line); background:color-mix(in srgb, var(--deck) 55%, transparent); backdrop-filter:blur(6px); border-radius:14px; overflow:hidden; position:relative; isolation:isolate; }
  .scope-panel > *, .activities-card > *{ position:relative; z-index:1; }
  .scope-panel::before, .activities-card::before{
    content:""; position:absolute; z-index:0; pointer-events:none;
    border-radius:50%;
    top:-46px; right:-36px;
    background:var(--scope); opacity:.22; filter:blur(25px);
  }
  .scope-panel::before{ width:90px; height:90px; }
  .activities-card::before{ width:105px; height:105px; top:auto; bottom:-46px; left:-36px; right:auto; opacity:.18; }
  .activities-card .scope-head span{ text-transform:uppercase; }
  .activities-svg{ display:block; width:100%; height:auto; padding:6px 0; }
  .activities-row-title{ font-family:var(--mono); font-weight:600; letter-spacing:.04em; font-size:12.5px; }
  .activities-row-sub{ font-family:var(--body); font-size:11.2px; }
  .activities-link{ cursor:pointer; }
  .activities-arrow{ opacity:0; transform:translateX(-4px); transition:opacity .15s, transform .15s; }
  .activities-link:hover .activities-arrow,
  .activities-link:focus .activities-arrow{ opacity:1; transform:translateX(0); }
  .activities-link:hover .activities-row-title,
  .activities-link:focus .activities-row-title{ fill:var(--tally); }
  .activities-link:hover .activities-icon,
  .activities-link:focus .activities-icon{ stroke:var(--tally); fill:var(--tally); }
  .activities-link:focus{ outline:none; }
  .scope-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 14px; border-bottom:1px solid var(--line);
    font-family:var(--mono); font-size:12px; letter-spacing:.08em;
    color:var(--slate); text-transform:uppercase;
  }
  .scope-svg{ display:block; width:100%; height:auto; }
  .scope-hint{
    padding:8px 14px 0; font-family:var(--mono); font-size:11.5px; line-height:1.32;
    color:var(--slate); letter-spacing:.03em; opacity:.75;
  }
  .scope-guide{ stroke:var(--slate); stroke-width:1; stroke-dasharray:2 3; opacity:.5; }
  .scope-handle{ cursor:grab; touch-action:none; }
  .scope-handle:hover{ r:7; }
  .scope-handle:active{ cursor:grabbing; }
  .scope-dot{ cursor:grab; touch-action:none; }
  .scope-dot:hover{ r:6.5; }
  .scope-dot:active{ cursor:grabbing; }
  .scope-foot{
    padding:8px 14px 12px; font-family:var(--mono); font-size:12.5px; line-height:1.3;
    color:var(--slate); letter-spacing:.04em; display:flex; justify-content:space-between; align-items:center; gap:4px 10px; flex-wrap:wrap;
  }
  .scope-foot b{ color:var(--scope); font-weight:500; font-size:12px; }
  .scope-reset{
    background:none; border:none; padding:0; margin:0;
    font-family:var(--mono); font-size:12px; color:var(--tally); cursor:pointer;
    text-decoration:underline; text-underline-offset:2px; white-space:nowrap;
  }
  .scope-pause{
    background:none; border:1px solid var(--line); border-radius:3px;
    padding:4px 9px; font-family:var(--mono); font-size:11.5px; letter-spacing:.04em;
    color:var(--slate); cursor:pointer; white-space:nowrap;
  }
  .scope-pause:hover{ color:var(--paper); border-color:var(--slate); }
  .scope-pause[aria-pressed="true"]{ color:var(--scope); border-color:var(--scope); }

  /* ---------- section scaffolding ---------- */
  section{
    padding:76px 30px 76px 64px; border-bottom:1px solid var(--line); scroll-margin-top:70px;
    position:relative; overflow:hidden;
    background:
      radial-gradient(ellipse 620px 420px at 92% -8%, color-mix(in srgb, var(--scope) 5%, transparent), transparent 70%),
      radial-gradient(ellipse 520px 380px at -8% 108%, color-mix(in srgb, var(--scope) 9%, transparent), transparent 70%);
  }
  section > *:not(.hero-glow){ position:relative; z-index:1; }
  
  .slate-head{
    display:flex; align-items:baseline; gap:16px; margin-bottom:44px;
    font-family:var(--mono); font-size:12px; color:var(--slate);
    letter-spacing:.1em; text-transform:uppercase;
  }
  .slate-head .tc{ color:var(--scope); }
  .slate-head::after{
    content:""; flex:1; height:1px;
    background:linear-gradient(90deg, color-mix(in srgb, var(--scope) 50%, var(--line)), var(--line) 55%);
  }
  h1.title, h2.title{
    font-family:var(--display); text-transform:uppercase;
    font-size:clamp(30px,4vw,44px); margin-bottom:44px; letter-spacing:.01em;
  }
  section > a.back-to-top{
    position:absolute; top:32px; right:30px; z-index:2;
    display:inline-flex; align-items:center; gap:7px;
    font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
    color:var(--slate); text-decoration:none; transition:color .15s;
  }
  .back-to-top:hover{ color:var(--tally); }
  .back-to-top svg{ display:block; flex:0 0 auto; }
  
  

  /* ---------- services (timeline tracks) ---------- */
  .track{
    display:grid; grid-template-columns:120px 1fr 200px; gap:24px;
    align-items:center; padding:26px 0; border-top:1px solid var(--line);
    position:relative;
  }
  .track:last-child{ border-bottom:1px solid var(--line); }
  .track::before{
    content:""; position:absolute; left:120px; top:50%; width:12px; height:12px;
    background:var(--ground); border:2px solid var(--scope);
    transform:translate(-50%,-50%) rotate(45deg); transition:background .2s;
  }
  .track:hover::before{ background:var(--scope); }
  .track-num{ font-family:var(--mono); font-size:12px; color:var(--slate); }
  .track-body h3{
    font-family:var(--body); font-weight:800; font-size:21px; margin-bottom:6px;
  }
  .track-body p{ color:var(--slate); font-size:14.5px; max-width:56ch; margin:0; }
  /* le titre et le texte d'une prestation mènent aussi à la section correspondante */
  .track-body{ cursor:pointer; }
  .track-body h3{ transition:color .2s; }
  .track-body:hover h3{ color:var(--tally); }
  /* Une seule grille, posée par-dessus toute la liste des prestations. */
  .tracks{ position:relative; }
  .tracks-grid{
    /* Repère invisible : 5 verticales (de 45 % à 85 % de la page) x 5 horizontales (d'un losange à l'autre). */
    position:absolute; top:var(--grid-top, 0); height:var(--grid-height, 100%); left:var(--grid-left, 45%); right:var(--grid-right, 15%);
    z-index:2; pointer-events:none;
    /* Grille masquée : on garde sa géométrie pour poser les images clés. */
  }
  /* Survol : le curseur active l'intersection la plus proche de la grille invisible (5 x 5)
     et y pose un point orange. Les 3 derniers restent, reliés en triangle pointillé turquoise. */
  .tracks-keys{ position:absolute; left:0; top:0; overflow:visible; }
  .tracks-keys-line{ fill:none; stroke:var(--scope); stroke-width:1.5; stroke-dasharray:4 4; filter:url(#keysGlow); }
  .tracks-key{ fill:var(--tally); filter:url(#keysGlow); }
  .tracks-keys > defs{ opacity:1; transition:none; }
  .tracks-keys > *{ opacity:0; transition:opacity .45s cubic-bezier(.42,0,.58,1); }
  .tracks-keys > .is-in{ opacity:1; }
  @media (prefers-reduced-motion: reduce){ .tracks-keys > *{ transition:none; } }
  .track-link{
    justify-self:end; text-decoration:none; font-family:var(--mono);
    font-size:12px; letter-spacing:.06em; color:var(--paper);
    border-bottom:1px solid var(--tally); padding-bottom:2px; white-space:nowrap;
  }
  

  /* ---------- client marquee ---------- */
  .trust-label{
    padding:26px 30px 14px 64px;
    font-family:var(--mono); font-size:11px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--scope);
  }
  
  .marquee-wrap{
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:22px 0; overflow:hidden; background:var(--deck);
  }
  .marquee{ display:flex; width:max-content; animation:scroll 32s linear infinite; }
  @media (prefers-reduced-motion:reduce){ .marquee{ animation:none; } }
  .marquee span{
    font-family:var(--mono); font-size:14px; color:var(--slate);
    padding:0 28px; white-space:nowrap; border-right:1px solid var(--line);
    letter-spacing:.04em;
  }
  @keyframes scroll{ to{ transform:translateX(-50%); } }

  /* ---------- storyboard / portfolio grid ---------- */
  .reel-feature{
    display:grid; grid-template-columns:1.6fr 1fr; gap:32px; align-items:center;
    margin-bottom:52px; padding-bottom:52px; border-bottom:1px dashed var(--line);
  }
  
  .reel-frame{
    position:relative; aspect-ratio:16/9; overflow:hidden; display:block;
    border:2px solid var(--tally); border-radius:16px; background:var(--ground);
  }
  .reel-frame img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    filter:brightness(.6) saturate(1.05);
  }
  .reel-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; z-index:2; }
  .reel-play{
    position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
    background:transparent; border:0; padding:0; cursor:pointer; color:var(--paper);
    font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  }
  .reel-play-icon{
    width:68px; height:68px; border-radius:50%; display:grid; place-items:center; padding-left:4px;
    background:var(--tally); color:var(--ground); box-shadow:0 0 0 0 color-mix(in srgb, var(--tally) 50%, transparent);
    transition:transform .2s, box-shadow .3s;
  }
  .reel-play:hover .reel-play-icon, .reel-play:focus-visible .reel-play-icon{ transform:scale(1.08); box-shadow:0 0 0 10px color-mix(in srgb, var(--tally) 18%, transparent); }
  .reel-play:focus-visible{ outline:2px solid var(--tally); outline-offset:-6px; }
  .reel-tag{
    position:absolute; top:12px; left:12px; z-index:1; pointer-events:none;
    font-family:var(--mono); font-size:10px; letter-spacing:.1em;
    color:var(--ground); background:var(--tally); padding:4px 9px; font-weight:600;
  }
  .reel-fallback-link{
    display:inline-block; margin-top:14px; font-family:var(--mono); font-size:11.5px;
    color:var(--slate); text-decoration:none; border-bottom:1px solid var(--line);
  }
  .reel-fallback-link:hover{ color:var(--tally); border-color:var(--tally); }
  .reel-caption h3{
    font-family:var(--display); text-transform:uppercase; font-size:22px;
    letter-spacing:.01em; margin:0 0 10px;
  }
  .reel-caption p{ color:var(--slate); font-size:14.5px; margin:0; max-width:42ch; }

  .board{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
  
  
  .frame{ background:color-mix(in srgb, var(--deck) 55%, transparent); backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:border-color .2s; }
  .frame:hover{ border-color:var(--tally); }
  /* Vignette « en production » : annonce les nouvelles animations, non cliquable */
  .frame.frame-soon{ cursor:default; border-style:dashed; }
  .frame.frame-soon:hover{ border-color:var(--line); }
  .frame-art-soon{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; filter:none;
    background:repeating-linear-gradient(135deg, var(--deck) 0 10px, var(--deck-2) 10px 20px); }
  .frame-art-soon::before{ display:none; }
  .frame-art-soon::after{ background:var(--tally); }
  .soon-dot{ width:12px; height:12px; border-radius:50%; background:var(--tally); animation:pulse 1.6s ease-in-out infinite; }
  .soon-label{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--paper); }
  @media (prefers-reduced-motion:reduce){ .soon-dot{ animation:none; } }
  .board-more{ display:none; }
  .board-toggle{
    grid-column:1 / -1; justify-self:start; margin:6px 0 4px; padding:10px 16px; border-radius:10px; cursor:pointer;
    background:transparent; border:1px solid var(--line); color:var(--paper);
    font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
    transition:border-color .2s, color .2s;
  }
  .board-toggle:hover, .board-toggle:focus-visible{ border-color:var(--tally); color:var(--tally); outline:none; }
  
  
  /* Motion Design : groupes par période */
  .board-group{
    grid-column:1 / -1; display:flex; align-items:baseline; gap:6px 12px; flex-wrap:wrap;
    margin:14px 0 2px; padding-bottom:8px; border-bottom:1px solid var(--line);
    font-family:var(--mono); letter-spacing:.06em;
  }
  .board-group:first-child{ margin-top:0; }
  #sites-web{ scroll-margin-top:118px; }
  .board-group-title{ font-size:12px; font-weight:600; color:var(--tally); text-transform:uppercase; }
  .board-group-sub{ font-size:11px; color:var(--slate); }
  
  .frame:focus-visible, .orbit-item:focus-visible{ outline:2px solid var(--tally); outline-offset:2px; border-color:var(--tally); }
  a.frame{ display:block; color:inherit; text-decoration:none; }
  #identite .frame, #motion .board .frame, #packaging .board .frame{ cursor:pointer; }
  /* Vignettes 40 % / visionneuse 60 %, identique dans les trois sections.
     minmax(0, …) empêche un contenu large de déformer le partage. */
  .identite-split{ scroll-margin-top:118px; display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 3fr); gap:28px; align-items:start; }
  #identite .board, #motion .identite-split .board, #packaging .identite-split .board{ grid-template-columns:repeat(4,1fr); gap:10px; }
  /* Écrans moyens : la colonne de vignettes (40 %) est étroite, on réduit le nombre de colonnes */
  
  
  
  
  
  /* Essai : vignettes en bandeau pleine largeur, visionneuse dessous */
  /* Identité : vignettes nues (ni cadre ni libellé) pour tenir plus de rangées,
     visionneuse sur 60 % de la largeur. */
  /* Vignettes nues (ni cadre, ni libellé, ni pastille), 2 par ligne,
     visionneuse sur 60 % de la largeur. */
  #identite .identite-split, #packaging .identite-split, #motion .identite-split{
    grid-template-columns:minmax(0, calc(40% - 28px)) minmax(0, 60%);
  }
  #identite .identite-split .board,
  #packaging .identite-split .board,
  #motion .identite-split .board{ grid-template-columns:repeat(2,1fr); gap:10px; }
  #identite .identite-split .frame,
  #packaging .identite-split .frame,
  #motion .identite-split .frame{
    background:none; border:0; border-radius:0; backdrop-filter:none; overflow:visible;
  }
  #identite .identite-split .frame .frame-edge,
  #packaging .identite-split .frame .frame-edge,
  #motion .identite-split .frame .frame-edge{ display:none; }
  /* la pastille de catégorie, répétée sur chaque vignette, est du texte elle aussi */
  #identite .identite-split .frame-art::after,
  #packaging .identite-split .frame-art::after,
  #motion .identite-split .frame-art::after{ display:none; }
  #identite .identite-split .frame-art,
  #packaging .identite-split .frame-art,
  #motion .identite-split .frame-art{ border-radius:8px; transition:outline-color .2s, filter .2s; outline:1px solid transparent; }
  /* 16/9 seulement là où les images le supportent : identités et plans vidéo.
     En packaging les formats vont du carré au portrait, le 16/9 les couperait. */
  #identite .identite-split .frame-art,
  #motion .identite-split .frame-art{ aspect-ratio:16/9; }
  #identite .identite-split .frame:hover .frame-art,
  #packaging .identite-split .frame:hover .frame-art,
  #motion .identite-split .frame:hover .frame-art{ outline-color:var(--tally); filter:none; }
  /* le nom du projet reste lisible par les lecteurs d'écran et les moteurs, sans occuper de place */
  #identite .identite-split .frame .frame-meta,
  #packaging .identite-split .frame .frame-meta,
  #motion .identite-split .frame .frame-meta{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
  }
  /* section{overflow:hidden} empêchait la visionneuse collante de fonctionner */
  #identite, #packaging, #motion{ overflow:visible; }
  .specimen-viewer{
    border:1px solid var(--line); border-radius:14px; overflow:hidden;
    background:color-mix(in srgb, var(--deck) 55%, transparent); backdrop-filter:blur(6px);
    position:sticky; top:100px; isolation:isolate;
    display:flex; flex-direction:column;
  }
  .specimen-viewer[hidden]{ display:none; }
  /* titre affiché sous l'image, centré ; le lien PDF de Packaging reste en dernier */
  .viewer-stage{ order:1; }
  .viewer-head{
    order:2; text-align:center;
    padding:12px 18px; border-top:1px solid var(--line);
    font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--slate);
    text-transform:uppercase;
  }
  .viewer-pdf-cta{ order:3; }
  .viewer-head .viewer-title{ color:var(--paper); font-weight:500; }
  .viewer-head .viewer-meta{ color:var(--slate); font-weight:400; text-transform:none; letter-spacing:.02em; }
  .viewer-head .viewer-site{ margin-left:.9em; color:var(--tally); text-transform:none; letter-spacing:.02em; text-decoration:none; border-bottom:1px solid currentColor; }
  .viewer-head .viewer-site:hover, .viewer-head .viewer-site:focus-visible{ color:var(--paper); outline:none; }
  /* mention sur la même ligne que la description : masquée, elle garde sa place,
     la hauteur de la visionneuse ne bouge donc pas d'une image à l'autre */
  .viewer-head .viewer-note{ margin-left:.9em; font-size:10px; letter-spacing:.06em; color:var(--slate); opacity:.75; text-transform:none; font-weight:400; }
  .viewer-head .viewer-note.is-off{ visibility:hidden; }
  .viewer-desc{
    margin:8px auto 2px; max-width:62ch; text-wrap:pretty;
    font-family:var(--body); font-size:13.5px; line-height:1.55; letter-spacing:0; text-transform:none;
    color:color-mix(in srgb, var(--paper) 82%, var(--slate));
  }
  .viewer-head .viewer-meta::before{ content:"—"; margin:0 .6em; color:var(--line); }
  /* La scène prend la hauteur de son contenu : image pleine largeur, plafonnée à 80vh */
  .viewer-stage{ position:relative; padding:28px; overflow:hidden; }
  .viewer-stage img{
    width:100%; height:auto; max-width:100%; max-height:80vh; object-fit:contain; object-position:50% 0;
    display:block; border-radius:4px;
    transition:transform .4s ease-out, opacity .4s ease; transform:translateX(0); opacity:1;
  }
  .viewer-stage img.viewer-slide-out{
    transform:translateX(600px); opacity:.5;
    transition:transform .4s ease-out, opacity .4s ease;
  }
  .viewer-stage img.viewer-slide-in-start{ transition:none; transform:translateX(-600px); opacity:.5; }
  /* Identité : l'image sortante part 200px plus loin */
  #identite .viewer-stage img.viewer-slide-out{ transform:translateX(800px); }
  @media (prefers-reduced-motion:reduce){
    .viewer-stage img{ transition:none; }
    .viewer-stage img.viewer-slide-out, #identite .viewer-stage img.viewer-slide-out{ transform:none; transition:none; opacity:1; }
  }
  /* Transition « tirage » (Packaging et Identité, via data-fx="print") */
  .viewer-stage.fx-print-resize{ transition:height .62s cubic-bezier(.16,1,.3,1); }
  .viewer-stage img.fx-print-out{
    opacity:0; transform:translateY(-12px) scale(.965); filter:blur(6px) saturate(.4);
    transition:opacity .3s cubic-bezier(.55,0,1,.45), transform .3s cubic-bezier(.55,0,1,.45), filter .3s cubic-bezier(.55,0,1,.45);
  }
  .viewer-stage img.fx-print-in{ animation:fxPrintIn .7s cubic-bezier(.16,1,.3,1) both; }
  /* même effet sur un diaporama entier (Identité : logo + charte + mise en situation) */
  .viewer-slides-wrap.fx-print-out{
    opacity:0; transform:translateY(-12px) scale(.965); filter:blur(6px) saturate(.4);
    transition:opacity .3s cubic-bezier(.55,0,1,.45), transform .3s cubic-bezier(.55,0,1,.45), filter .3s cubic-bezier(.55,0,1,.45);
  }
  .viewer-slides-wrap.fx-print-in{ animation:fxPrintIn .7s cubic-bezier(.16,1,.3,1) both; }
  @keyframes fxPrintIn{
    0%  { clip-path:inset(100% 0 0 0); transform:translateY(18px) scale(1.012); filter:saturate(0) brightness(1.3); opacity:1; }
    55% { filter:saturate(.7) brightness(1.08); }
    100%{ clip-path:inset(0 0 0 0); transform:none; filter:none; opacity:1; }
  }
  .fx-print-scan{
    position:absolute; top:var(--t, 28px); height:2px; margin-top:-1px; opacity:0; pointer-events:none; z-index:2;
    background:linear-gradient(90deg, transparent, var(--tally) 12%, var(--tally) 88%, transparent);
    box-shadow:0 0 12px 1px color-mix(in srgb, var(--tally) 70%, transparent);
  }
  .fx-print-scan.is-run{ animation:fxPrintScan .7s cubic-bezier(.16,1,.3,1) both; }
  @keyframes fxPrintScan{
    0%  { transform:translateY(calc(var(--h, 0px) + 18px)); opacity:0; }
    12% { opacity:1; }
    80% { opacity:.9; }
    100%{ transform:translateY(0); opacity:0; }
  }
  @media (prefers-reduced-motion:reduce){
    .viewer-stage img.fx-print-in, .viewer-slides-wrap.fx-print-in, .fx-print-scan.is-run{ animation:none; }
  }
  /* Diaporama : images empilées en fondu enchaîné, compteur façon timeline */
  .viewer-slides{ position:relative; height:0; transition:height .7s cubic-bezier(.42,0,.58,1); }
  .specimen-viewer .viewer-stage .viewer-slides img{
    position:absolute; border-radius:4px; inset:0; width:100%; height:100%; max-width:none; max-height:none;
    object-fit:contain; object-position:50% 0; transform:none; transition:opacity .7s cubic-bezier(.42,0,.58,1);
  }
  .viewer-slides img{ opacity:0; }
  .viewer-slides img.is-on{ opacity:1; }
  .viewer-slides-bar{
    margin-top:14px;
    display:flex; align-items:center; justify-content:center; gap:12px; white-space:nowrap;
    font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--slate);
  }
  .viewer-slides-bar button{
    width:26px; height:26px; display:grid; place-items:center; padding:0;
    border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--paper); cursor:pointer;
    transition:border-color .2s, color .2s;
  }
  .viewer-slides-bar button:hover, .viewer-slides-bar button:focus-visible{ border-color:var(--tally); color:var(--tally); outline:none; }
  .viewer-slides-count b{ color:var(--tally); font-weight:500; }
  .viewer-slides-keys{ display:flex; gap:7px; }
  .viewer-slides-keys i{
    width:7px; height:7px; transform:rotate(45deg); background:var(--line); cursor:pointer;
    transition:background .3s;
  }
  .viewer-slides-keys i.is-on{ background:var(--tally); }
  @media (prefers-reduced-motion:reduce){ .viewer-slides, .viewer-slides img{ transition:none; } }
  .viewer-poster-play{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3;
    width:64px; height:64px; border-radius:50%; border:0; padding:0 0 0 4px; cursor:pointer;
    display:grid; place-items:center; background:var(--tally); color:var(--ground);
    box-shadow:0 6px 24px rgba(0,0,0,.45); transition:transform .2s, box-shadow .3s;
  }
  .viewer-poster-play:hover, .viewer-poster-play:focus-visible{ transform:translate(-50%,-50%) scale(1.08); box-shadow:0 0 0 10px color-mix(in srgb, var(--tally) 20%, transparent); outline:none; }
  .viewer-stage .viewer-vimeo{ display:block; width:100%; aspect-ratio:16 / 9; border:0; border-radius:4px; background:#000; }
  .viewer-stage video{ max-width:100%; max-height:80vh; width:100%; display:block; border-radius:4px; background:#000; }
  /* Côte à côte : la visionneuse prend la hauteur de son contenu et reste collée en haut
     de l'écran pendant le défilement des vignettes ; l'image est plafonnée pour tenir à l'écran. */
  
  .viewer-stage.is-resizing{ transition:height .5s cubic-bezier(.16,1,.3,1); }
  @media (prefers-reduced-motion:reduce){ .viewer-stage.is-resizing{ transition:none; } }

  /* ---------- PDF viewer / flipbook (packaging) ---------- */
  .viewer-pdf-cta{ padding:12px 18px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
  .viewer-pdf-link{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--mono); font-size:11.5px; letter-spacing:.04em;
    color:var(--tally); text-decoration:none; border-bottom:1px solid var(--tally);
    padding-bottom:2px; transition:opacity .15s;
  }
  .viewer-pdf-link:hover{ opacity:.7; }
  .viewer-pdf-dl{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--mono); font-size:11.5px; letter-spacing:.04em;
    color:var(--tally); text-decoration:none;
    border:1px solid var(--tally); border-radius:999px; padding:7px 15px;
    transition:background .18s, color .18s;
  }
  .viewer-pdf-dl:hover{ background:var(--tally); color:var(--on-tally); }
  .viewer-pdf-dl[hidden]{ display:none; }

  /* ---------- per-section graph editors (each drives its own title animation) ---------- */
  .title-row{
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:22px 34px; flex-wrap:wrap; margin-bottom:44px;
  }
  /* Contact : 30 px de moins au-dessus du formulaire. La marge basse du bloc titre
     fusionne avec la marge haute de .contact-grid (fusion des marges adjacentes) :
     c'est la plus grande des deux qui décide, il faut donc baisser les deux. */
  #contact .title-row{ margin-bottom:14px; }
  .title-row h1.title, h2.title{ margin-bottom:0; }
  .title-col{ flex:1 1 440px; min-width:0; }
  /* Spécificité portée à (0,0,3,1) pour battre `.action h2.title`, déclarée plus bas. */
  .title-row .title-col > h1.title, h2.title{ margin-bottom:16px; }
  .sec-lede{ color:var(--slate); font-size:16px; line-height:1.6; max-width:56ch; margin:0; }
  /* Aligne le haut des capitales sur le bord du panneau : on retire l'interlignage
     (.3em) et le blanc au-dessus des capitales d'Anton (.289em). */
  .title-row h1.title, h2.title{ margin-top:-.589em; }
  h1.title, h2.title .ch{ display:inline-block; }
  .mini-scope{
    flex:0 0 auto; width:236px;
    border:1px solid var(--line); border-radius:12px;
    background:color-mix(in srgb, var(--deck) 55%, transparent);
    backdrop-filter:blur(6px); padding:9px 11px 7px;
  }
  .stat-row + .mini-scope{ margin-top:30px; }
  /* le bouton de CV (ajouté à l'export) s'intercale entre les stats et le graph editor */
  .resume-dl + .mini-scope{ margin-top:30px; }
  .mini-scope-head{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    font-family:var(--mono); font-size:10.5px; line-height:1.25; letter-spacing:.14em; text-transform:uppercase;
    color:var(--slate); margin-bottom:4px;
  }
  .mini-scope-name{ color:var(--tally); letter-spacing:.08em; }
  .mini-scope-svg{ display:block; width:100%; height:auto; overflow:visible; }
  .mini-scope-svg .mini-guide{ stroke:var(--line); stroke-width:1; stroke-dasharray:3 3; }
  .mini-scope-svg .mini-handle,
  .mini-scope-svg .mini-dot{ cursor:grab; touch-action:none; }
  .mini-scope-svg .mini-handle:active,
  .mini-scope-svg .mini-dot:active{ cursor:grabbing; }
  .mini-scope-foot{
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:5px 8px; margin-top:5px;
    font-family:var(--mono); font-size:10px; line-height:1.25; letter-spacing:.02em; color:var(--slate);
  }
  .mini-scope-readout{ white-space:nowrap; font-weight:400; min-width:0; max-width:100%; }
  .mini-scope-play{
    background:none; border:1px solid var(--line); color:var(--slate);
    font-family:var(--mono); font-size:10.5px; line-height:1; white-space:nowrap;
    border-radius:999px; padding:4px 9px; cursor:pointer; margin-left:auto; flex:0 0 auto;
    transition:border-color .2s, color .2s;
  }
  .mini-scope-play:hover{ border-color:var(--tally); color:var(--tally); }
  .mini-scope-play:focus-visible{ outline:2px solid var(--tally); outline-offset:2px; }
  
  /* Version mobile simplifiée : sans orbe ni graph editors (grand et petits) */
  
  .pdf-flipbook-wrap{
    width:100%; margin-top:32px; border:1px solid var(--line); border-radius:14px;
    background:var(--deck); overflow:hidden;
  }
  .pdf-flipbook-head{
    display:flex; justify-content:space-between; align-items:center;
    padding:12px 18px; border-bottom:1px solid var(--line);
    font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--slate);
  }
  .pdf-flipbook-close{
    background:none; border:1px solid var(--line); color:var(--slate);
    width:26px; height:26px; border-radius:50%; cursor:pointer; font-size:13px; line-height:1;
    display:flex; align-items:center; justify-content:center; transition:border-color .2s, color .2s;
  }
  .pdf-flipbook-close:hover{ border-color:var(--tally); color:var(--tally); }
  .pdf-flipbook-loading{
    margin:0; text-align:center; padding:40px 20px;
    font-family:var(--mono); font-size:12px; color:var(--slate);
  }
  .pdf-flipbook-loading[hidden]{ display:none; }
  .pdf-flipbook{ width:70%; margin:0 auto; padding:24px; display:flex; align-items:center; justify-content:center; }
  @media (max-width:860px){ .pdf-flipbook{ width:100%; } }
  html.is-scaled .pdf-flipbook{ width:70%; }
  .pdf-flipbook .page{ background:#fff; }
  .pdf-flipbook .page img{ width:100%; height:100%; display:block; object-fit:cover; }
  

  .frame-edge{
    height:12px; background-color:var(--line);
    background-image:radial-gradient(circle,var(--ground) 2.6px,transparent 3px);
    background-size:16px 12px; background-position:6px center; background-repeat:repeat-x;
  }
  .frame-edge.ruler{
    background-color:var(--line);
    background-image:repeating-linear-gradient(90deg, var(--ground) 0 1px, transparent 1px 9px);
  }
  .frame-art{
    aspect-ratio:4/3; position:relative; overflow:hidden;
    background-color:var(--deck-2);
    background-size:cover; background-position:center;
    filter:grayscale(.15) contrast(1.05);
  }
  .frame-art::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(155deg,var(--tally) -20%,transparent 48%,var(--scope) 130%);
    mix-blend-mode:color; opacity:.6;
  }
  .frame-art::after{
    content:attr(data-tag); position:absolute; top:10px; left:10px;
    font-family:var(--mono); font-size:10px; letter-spacing:.08em;
    color:var(--ground); background:var(--paper); padding:3px 7px;
    text-transform:uppercase; font-weight:600; z-index:1;
  }
  .frame-meta{ padding:10px 12px 12px; }
  .frame-meta .fnum{ font-family:var(--mono); font-size:10px; color:var(--slate); }
  .frame-meta h3{ overflow-wrap:break-word; hyphens:auto; margin:3px 0 0; font-size:13px; font-weight:700; line-height:1.3; }

  /* ---------- about timeline ---------- */
  .timeline{ position:relative; padding-left:26px; }
  .timeline::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:var(--line); }
  .beat{ position:relative; padding-bottom:36px; }
  .beat:last-child{ padding-bottom:0; }
  .beat::before{
    content:""; position:absolute; left:-30px; top:4px; width:9px; height:9px;
    border-radius:50%; background:var(--ground); border:2px solid var(--tally);
    transition:background .2s, box-shadow .2s, transform .2s;
  }
  .beat:hover::before{
    background:var(--tally); transform:scale(1.25);
    box-shadow:0 0 0 6px color-mix(in srgb, var(--tally) 25%, transparent);
  }
  .beat .yr{ font-family:var(--mono); font-size:12px; color:var(--scope); letter-spacing:.06em; }
  .beat h3{ font-size:18px; font-weight:800; margin:4px 0 6px; }
  .beat p{ color:var(--slate); font-size:14.5px; max-width:62ch; margin:0; }
  /* ---------- 3D orbit carousel (items orbit a fixed center point) ---------- */
  .orbit-section{ overflow:hidden; }
  .orbit-stage{
    position:relative; width:100%; flex:1 1 auto; min-height:clamp(198px,24.3vw,275px); overflow:visible;
    perspective:1200px; display:flex; align-items:center; justify-content:center;
    cursor:grab; touch-action:pan-y;
    --orbit-item-w:clamp(85px,10.3vw,142px);
    --orbit-item-h:calc(var(--orbit-item-w) * 0.6899);
    --orbit-radius:clamp(199px,18vw,298px);
  }
  .orbit-cursor-line{
    position:absolute; inset:0; width:100%; height:100%;
    pointer-events:none; z-index:5; overflow:visible;
    opacity:0; transition:opacity .2s ease;
  }
  .orbit-cursor-line.is-active{ opacity:1; }
  .orbit-cursor-line line{
    stroke:var(--scope); stroke-width:1; stroke-dasharray:4 4;
  }
  .orbit-coords{
    position:absolute; left:0; top:0; z-index:6; pointer-events:none;
    font-family:var(--mono); font-size:9px; letter-spacing:.06em; line-height:1;
    color:var(--scope); white-space:nowrap;
    text-shadow:0 1px 3px rgba(4,8,20,.92), 0 0 2px rgba(4,8,20,.92);
    opacity:0; transition:opacity .2s ease;
  }
  .orbit-coords.is-active{ opacity:.85; }
  .orbit-coords .ax{ font-style:normal; color:var(--slate); margin-right:3px; }
  .orbit-coords .ay{ margin-left:9px; }
  .orbit-center{
    position:absolute; width:8px; height:8px; border-radius:50%;
    background:var(--tally); z-index:2;
    box-shadow:0 0 0 7px color-mix(in srgb, var(--tally) 16%, transparent);
  }
  .orbit-plane{ position:relative; width:1px; height:1px; transform-style:preserve-3d; transform:scaleY(0.9); }
  .orbit-ring{ position:relative; width:1px; height:1px; transform-style:preserve-3d; }
  .orbit-item{
    position:absolute; top:50%; left:50%; width:var(--orbit-item-w); height:var(--orbit-item-h);
    margin:calc(var(--orbit-item-h) / -2) 0 0 calc(var(--orbit-item-w) / -2); border-radius:8px; overflow:hidden;
    border:1px solid var(--line); background:var(--deck);
    transform-style:preserve-3d;
    transform:
      rotateX(var(--pitch, -14deg)) rotateY(var(--yaw, 0deg))
      rotateY(var(--iyaw, 0deg)) rotateX(var(--ipitch, 0deg))
      translateZ(var(--orbit-radius))
      rotateX(calc(-1 * var(--ipitch, 0deg))) rotateY(calc(-1 * var(--iyaw, 0deg)))
      rotateY(calc(-1 * var(--yaw, 0deg))) rotateX(calc(-1 * var(--pitch, -14deg)));
    pointer-events:auto; transition:box-shadow .2s, border-color .2s;
  }
  .orbit-item:hover{
    border-color:var(--tally);
    box-shadow:0 0 18px 3px color-mix(in srgb, var(--tally) 55%, transparent);
  }
  .orbit-item img{
    width:100%; height:100%; object-fit:cover; display:block;
    filter:grayscale(.1) contrast(1.05) brightness(var(--curve-glow, 1));
    transition:filter .1s linear;
    -webkit-user-drag:none; user-drag:none;
    -webkit-user-select:none; user-select:none;
    pointer-events:none;
  }
  .orbit-item::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(155deg,var(--tally) -20%,transparent 48%,var(--scope) 130%);
    mix-blend-mode:color; opacity:.5;
  }
  .orbit-item span{ display:none; }
  .about-grid{ display:grid; grid-template-columns:1.1fr 1.4fr; gap:64px; }
  
  .about-lede p{ color:var(--slate); font-size:16px; margin:0 0 16px; max-width:46ch; }
  .about-lede strong{ color:var(--paper); }
  .stat-row{ display:flex; gap:36px; margin-top:28px; flex-wrap:wrap; }
  .stat b{ display:block; font-family:var(--display); font-size:38px; color:var(--tally); }
  .stat span{ font-family:var(--mono); font-size:11px; color:var(--slate); text-transform:uppercase; letter-spacing:.06em; }

  /* ---------- contact / action ---------- */
  .action{ text-align:left; }
  .action h1.title, h2.title{ margin-bottom:20px; }
  .action-lede{ color:var(--slate); font-size:17px; max-width:50ch; margin:0; }
  .services-lede{ color:var(--slate); font-size:17px; max-width:64ch; margin:0; }
  .cta{
    display:inline-flex; align-items:center; gap:12px;
    background:var(--tally); color:var(--on-tally); text-decoration:none;
    font-family:var(--body); font-weight:800; font-size:15px;
    padding:16px 26px; white-space:nowrap; transition:transform .15s;
  }
  .cta:hover{ transform:translateY(-2px); }
  .cta::after{ content:"→"; font-weight:400; }
  .contact-lines{ display:flex; flex-direction:column; gap:14px; font-family:var(--mono); font-size:13.5px; color:var(--slate); }
  .contact-lines a{ color:var(--paper); text-decoration:none; border-bottom:1px solid var(--line); }

  /* ---------- contact form ---------- */
  .contact-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:48px; margin-top:6px; align-items:start; }
  
  .contact-form{ display:grid; gap:18px; padding-top:24px; }
  .form-row{ display:flex; flex-direction:column; gap:7px; }
  .form-row label{
    font-family:var(--mono); font-size:11px; letter-spacing:.07em;
    text-transform:uppercase; color:var(--slate);
  }
  .form-row input, .form-row textarea{
    background:color-mix(in srgb, var(--deck) 55%, transparent); backdrop-filter:blur(6px);
    border:1px solid var(--line); border-radius:10px;
    color:var(--paper); font-family:var(--body); font-size:14.5px;
    padding:12px 14px; width:100%;
  }
  .form-row input:focus, .form-row textarea:focus{ outline:none; border-color:var(--tally); }
  .form-row textarea{ min-height:120px; resize:vertical; }
  /* même vocabulaire que les autres boutons d'action du site (bouton de CV, « Voir plus ») :
     mono, capitales, interlettrage, rayon de 10 px */
  .form-submit{
    display:inline-flex; align-items:center; gap:9px; justify-self:start;
    background:var(--tally); color:var(--on-tally); border:none; cursor:pointer;
    font-family:var(--mono); font-weight:600; font-size:12px;
    letter-spacing:.06em; text-transform:uppercase;
    padding:11px 16px; border-radius:10px; transition:transform .2s, box-shadow .2s;
  }
  .form-submit:hover, .form-submit:focus-visible{
    transform:translateY(-1px); box-shadow:0 6px 18px color-mix(in srgb, var(--tally) 35%, transparent); outline:none;
  }
  .form-submit::after{ content:"→"; font-weight:400; letter-spacing:0; }
  .form-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  .form-status{ margin:12px 0 0; font-family:var(--mono); font-size:12px; color:var(--tally); }
  .form-status.is-ok{ color:var(--scope); }
  .form-submit:disabled{ opacity:.6; cursor:wait; }
  .form-note{ font-family:var(--mono); font-size:11px; color:var(--slate); margin:0; line-height:1.6; }
  .form-note a{ color:var(--tally); }
  .form-fallback{
    border:1px solid var(--line); border-radius:10px; padding:12px 14px;
    background:color-mix(in srgb, var(--deck) 55%, transparent); backdrop-filter:blur(6px);
  }
  .form-fallback p{ margin:0; font-family:var(--mono); font-size:11.5px; color:var(--slate); line-height:1.7; }
  .form-fallback a, .copy-msg-btn{
    color:var(--tally); background:none; border:none; padding:0;
    font-family:var(--mono); font-size:11.5px; text-decoration:underline; cursor:pointer;
  }
  .contact-side{ border:1px solid var(--line); background:color-mix(in srgb, var(--deck) 55%, transparent); backdrop-filter:blur(6px); border-radius:14px; padding:24px; margin-top:50px; }
  .contact-side h3{
    font-family:var(--mono); font-size:11px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--slate); margin:0 0 18px;
  }

  /* ---------- footer ---------- */
  footer{ padding:56px 30px 32px 64px; position:relative; }
  /* Effet « grille » (pied de page, fond du Demo Reel) : grille révélée autour du curseur,
     le masque radial décroît du centre au bord des 100 px, et `.is-live` plafonne la visibilité à 40 %. */
  .fx-grid{
    position:absolute; inset:0; z-index:0; pointer-events:none;
    --mx:-200px; --my:-200px;
    background-image:
      repeating-linear-gradient(to right, color-mix(in srgb, var(--scope) 50%, transparent) 0 1px, transparent 1px 18px),
      repeating-linear-gradient(to bottom, color-mix(in srgb, var(--scope) 50%, transparent) 0 1px, transparent 1px 18px);
    -webkit-mask-image:radial-gradient(circle 100px at var(--mx) var(--my), #000 0%, transparent 100%);
    mask-image:radial-gradient(circle 100px at var(--mx) var(--my), #000 0%, transparent 100%);
    opacity:0; transition:opacity .25s ease;
  }
  .fx-grid.is-live{ opacity:.4; }
  /* Carré orange allumé dans la case survolée. La case utile fait 17px (le premier
     pixel des 18 revient au trait de la grille) ; le carré fait 8.6px, recentré
     par un retrait de 5.2px depuis le bord de la case (4.2px de marge de chaque
     côté, plus le pixel du trait). */
  .fx-flash{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
  .fx-flash span{
    position:absolute; display:block; width:8.6px; height:8.6px; border-radius:5px;
    background:var(--tally); opacity:0; animation:fxFlash 400ms ease-out forwards;
  }
  @keyframes fxFlash{ 0%{ opacity:0; } 50%{ opacity:.5; } 100%{ opacity:0; } }
  /* Pied de page : carrés turquoise, pic à 70 %. */
  footer .fx-flash span{ background:var(--scope); animation-name:fxFlashFoot; }
  @keyframes fxFlashFoot{ 0%{ opacity:0; } 50%{ opacity:.7; } 100%{ opacity:0; } }
  @media (prefers-reduced-motion: reduce){ .fx-flash{ display:none; } }
  footer > .foot-grid, footer > .foot-row,
  .reel-feature > .reel-frame, .reel-feature > .reel-caption{ position:relative; z-index:1; }
  
  .foot-grid{
    display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px;
    padding-bottom:36px; margin-bottom:28px; border-bottom:1px solid var(--line);
  }
  
  
  .foot-brand{ display:flex; flex-direction:column; gap:14px; }
  .foot-brand .brand-name{ font-family:var(--display); font-size:20px; letter-spacing:.02em; text-transform:uppercase; color:var(--paper); }
  .foot-tagline{ color:var(--slate); font-size:13.5px; line-height:1.6; max-width:38ch; margin:0; }
  .foot-social{ font-family:var(--mono); font-size:11.5px; color:var(--tally); text-decoration:none; width:fit-content; }
  .foot-social:hover{ text-decoration:underline; }
  .foot-col{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; text-align:left; }
  .foot-col h4{
    font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--scope); margin:0 0 4px;
  }
  .foot-col a, .foot-col span{ font-size:13px; color:var(--slate); text-decoration:none; }
  .foot-col a:hover{ color:var(--paper); }
  .foot-address{ font-style:normal; }
  .foot-row{
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:12px; font-family:var(--mono); font-size:11.5px;
    color:var(--slate); letter-spacing:.04em;
  }
  .foot-row a{ color:var(--slate); text-decoration:none; }
  .foot-row a:hover{ color:var(--paper); }

  /* mode échelle : les règles « ordinateur » restent actives même dans une fenêtre étroite */
  html.is-scaled .identite-split:not(.show-more) .frame-more{display:none;}
  html.is-scaled .identite-split .viewer-stage > :is(img, html.is-scaled video){max-height:calc(100vh - 230px);}
  html.is-scaled /* à partir de la 4e rangée, html.is-scaled les vignettes passent sous la visionneuse, html.is-scaled sur toute la largeur */
    .identite-split.has-rest > .specimen-viewer{scroll-margin-top:118px;}
  html.is-scaled .identite-split > .board-rest{grid-column:1 / -1;}
  html.is-scaled #identite .identite-split, html.is-scaled #packaging .identite-split, html.is-scaled #motion .identite-split{grid-template-columns:minmax(0, calc(40% - 28px)) minmax(0, 60%);}
  html.is-scaled #identite .identite-split .board, html.is-scaled #packaging .identite-split .board, html.is-scaled #motion .identite-split .board{grid-template-columns:repeat(2,1fr);}

  /* ---------- pages : aperçus de section sur l'accueil ---------- */
  .teaser{ padding:64px 30px 64px 64px; }
  .teaser-head{ max-width:62ch; margin-bottom:28px; }
  .teaser-head h2.title{ margin-bottom:14px; }
  .teaser-board{ grid-template-columns:repeat(4,1fr); gap:12px; }
  .teaser-lien{ display:block; text-decoration:none; color:inherit; }
  .teaser-lien .frame{ background:none; border:0; border-radius:0; backdrop-filter:none; }
  .teaser-lien .frame-edge{ display:none; }
  .teaser-lien .frame-art{ aspect-ratio:16/9; border-radius:8px; outline:1px solid transparent; transition:outline-color .2s; }
  .teaser-lien .frame-art::after{ display:none; }
  .teaser-lien:hover .frame-art{ outline-color:var(--tally); }
  .teaser-lien .frame-meta{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .teaser-lien-final{ margin-top:26px; }
  @media (max-width:900px){ .teaser-board{ grid-template-columns:repeat(3,1fr); } .teaser{ padding:52px 24px; } }
  @media (max-width:560px){ .teaser-board{ grid-template-columns:repeat(2,1fr); } }

  /* ---------- accueil : présentation, méthode, FAQ ---------- */
  .prose{ max-width:68ch; color:var(--slate); font-size:16px; }
  .prose p{ margin:0 0 16px; }
  .prose p:last-child{ margin-bottom:0; }
  .prose strong{ color:var(--paper); font-weight:700; }
  .prose a{ color:var(--tally); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--tally) 45%, transparent); }
  .prose a:hover{ border-bottom-color:var(--tally); }

  .etapes{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
  @media (max-width:900px){ .etapes{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .etapes{ grid-template-columns:1fr; } }
  .etape{ border:1px solid var(--line); border-radius:14px; padding:22px 20px; background:color-mix(in srgb, var(--deck) 55%, transparent); }
  .etape-num{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--scope); margin-bottom:10px; }
  .etape b{ display:block; font-size:15.5px; font-weight:800; margin-bottom:8px; }
  .etape p{ margin:0; color:var(--slate); font-size:14px; line-height:1.6; }

  .faq{ max-width:74ch; border-top:1px solid var(--line); }
  .faq-item{ border-bottom:1px solid var(--line); }
  .faq-item summary{ cursor:pointer; list-style:none; padding:18px 30px 18px 0; position:relative; }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{ content:"+"; position:absolute; right:4px; top:16px; color:var(--tally); font-family:var(--mono); font-size:18px; line-height:1; }
  .faq-item[open] summary::after{ content:"–"; }
  .faq-item summary h3{ display:inline; margin:0; font-size:16px; font-weight:700; color:var(--paper); }
  .faq-item summary:hover h3{ color:var(--tally); }
  .faq-item p{ margin:0 0 20px; color:var(--slate); font-size:15px; line-height:1.7; max-width:66ch; }

  .projets-texte{ padding:56px 64px 72px; border-top:1px solid var(--line); }
  .projets-texte h2{ font-family:var(--display); text-transform:uppercase; font-size:26px; letter-spacing:.01em; margin:0 0 10px; }
  .projets-chapo{ color:var(--slate); font-size:15px; margin:0 0 34px; max-width:62ch; }
  .projets-grille{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:30px 46px; }
  .projet h3{ font-size:15.5px; font-weight:700; margin:0 0 4px; color:var(--paper); }
  .projet-meta{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
                color:var(--scope); margin:0 0 8px; }
  .projet p{ color:var(--slate); font-size:14.5px; line-height:1.65; margin:0; max-width:60ch; }
  .projet-note{ font-family:var(--mono); font-size:11px; color:var(--slate); opacity:.7; margin-top:6px !important; }
  @media (max-width:860px){ .projets-texte{ padding:44px 32px 56px; } .projets-grille{ grid-template-columns:1fr; gap:26px; } }