@font-face {
      font-family: 'Geist';
      src: url('/Geist.ttf') format('truetype-variations'), url('/Geist.ttf') format('truetype');
      font-weight: 100 900;
      font-style: normal;
      font-display: swap;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --bg: #000;
      --text: var(--wc-text);
      --text-secondary: var(--wc-text-secondary);
      --text-tertiary: var(--wc-text-tertiary);
      --accent: var(--wc-accent);
      --sep: rgba(255,255,255,0.08);
      --card-bg: rgba(255,255,255,0.03);
      --card-border: rgba(255,255,255,0.08);
    }

    html, body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--wc-police);
      -webkit-font-smoothing: antialiased;
      letter-spacing: -0.012em;
      min-height: 100vh;
      overflow-x: hidden;
    }
    #bubbles-wrap {
      position: fixed;
      inset: 0;
      overflow: hidden;
      z-index: 0;
      pointer-events: none;
    }

    a { color: inherit; text-decoration: none; }

    .bg-glow {
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
      background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(var(--wc-accent-rgb),0.10) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 85% 100%, rgba(175,82,222,0.07) 0%, transparent 55%);
    }

    .page { position: relative; z-index: 1; }

    /* ─── Bulles animées ─── */
    .bubble {
      position: absolute;
      border-radius: 50%;
      filter: blur(130px);
      pointer-events: none;
      will-change: transform;
      transform: translateZ(0);
    }

    .b1 { animation: f1 44s ease-in-out infinite; }
    .b2 { animation: f2 60s ease-in-out infinite; }
    .b3 { animation: f3 50s ease-in-out infinite; }
    .b4 { animation: f4 70s ease-in-out infinite; }

    @keyframes f1 {
      0%   { transform: translate(0, 0) scale(1); }
      15%  { transform: translate(35vw, 20vh) scale(1.1); }
      35%  { transform: translate(60vw, -10vh) scale(0.9); }
      55%  { transform: translate(20vw, 55vh) scale(1.05); }
      75%  { transform: translate(-10vw, 30vh) scale(0.95); }
      100% { transform: translate(0, 0) scale(1); }
    }
    @keyframes f2 {
      0%   { transform: translate(0, 0) scale(1); }
      20%  { transform: translate(-40vw, 25vh) scale(1.08); }
      40%  { transform: translate(-60vw, -20vh) scale(0.93); }
      65%  { transform: translate(15vw, 50vh) scale(1.06); }
      85%  { transform: translate(-25vw, -35vh) scale(0.97); }
      100% { transform: translate(0, 0) scale(1); }
    }
    @keyframes f3 {
      0%   { transform: translate(0, 0) scale(1); }
      25%  { transform: translate(-30vw, 40vh) scale(0.92); }
      45%  { transform: translate(50vw, 30vh) scale(1.07); }
      70%  { transform: translate(30vw, -40vh) scale(0.96); }
      88%  { transform: translate(-50vw, 10vh) scale(1.04); }
      100% { transform: translate(0, 0) scale(1); }
    }
    @keyframes f4 {
      0%   { transform: translate(0, 0) scale(1); }
      18%  { transform: translate(55vw, -30vh) scale(1.06); }
      42%  { transform: translate(-20vw, -50vh) scale(0.94); }
      68%  { transform: translate(40vw, 45vh) scale(1.03); }
      82%  { transform: translate(-45vw, 20vh) scale(0.97); }
      100% { transform: translate(0, 0) scale(1); }
    }

    /* ─── Nav ─── */



    /* ─── Hero ─── */
    .hero {
      max-width: 900px;
      margin: 0 auto;
      padding: 160px 32px 120px;
      text-align: center;
    }
    /* Desktop : centrer le titre verticalement dans l'écran (le mobile garde ses espaces) */
    @media (min-width: 901px) {
      .hero {
        min-height: calc(100vh - 60px); /* hauteur de l'écran sous le nav sticky */
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 40px;
        padding-bottom: 40px;
      }
    }

    .hero-eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 13px; font-weight: 500;
      color: var(--accent);
      margin-bottom: 20px;
      padding: 5px 14px;
      border: 1px solid rgba(var(--wc-accent-rgb),0.25);
      border-radius: var(--wc-r-pilule);
      background: rgba(var(--wc-accent-rgb),0.06);
    }

    h1 {
      font-size: clamp(44px, 6.5vw, 80px);
      font-weight: 700;
      line-height: 1.06;
      letter-spacing: -0.04em;
      margin-bottom: 22px;
      text-shadow:
        0 0 20px rgba(255,255,255,0.10),
        0 0 60px rgba(255,255,255,0.06);
      animation: heroGlow 5s ease-in-out infinite;
    }

    h1 em { font-style: normal; }

    @keyframes heroGlow {
      0%, 100% {
        text-shadow:
          0 0 20px rgba(255,255,255,0.10),
          0 0 60px rgba(255,255,255,0.06);
      }
      50% {
        text-shadow:
          0 0 28px rgba(255,255,255,0.16),
          0 0 80px rgba(255,255,255,0.09);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      h1 { animation: none; }
    }

    .hero-sub {
      font-size: 19px; font-weight: 400; line-height: 1.5;
      color: var(--text-secondary);
      max-width: 560px;
      margin: 0 auto;
    }

    /* ─── Sections ─── */
    .sections {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 32px 140px;
    }

    .section { margin-bottom: 88px; }

    .section-header {
      display: flex; align-items: center; gap: 14px;
      margin-bottom: 24px;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--sep);
    }

    .section-icon {
      width: 32px; height: 32px;
      border-radius: var(--wc-r-s);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .section-icon svg { width: 16px; height: 16px; }

    .si-blue  { background: rgba(var(--wc-accent-rgb),0.12); color: var(--wc-accent); }
    .si-green { background: rgba(48,209,88,0.12);  color: var(--wc-green); }
    .si-purple{ background: rgba(191,90,242,0.12); color: #bf5af2; }
    .si-orange{ background: rgba(255,159,10,0.12); color: var(--wc-orange); }

    .section-title {
      font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
      background: linear-gradient(
        90deg,
        #777 0%,
        #777 30%,
        #ffffff 46%,
        #ffffff 54%,
        #777 70%,
        #777 100%
      );
      background-size: 300% 100%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: shimmer 4s linear infinite;
    }

    .section-count {
      margin-left: auto;
      font-size: 12px; font-weight: 500;
      color: var(--text-tertiary);
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--sep);
      border-radius: var(--wc-r-pilule);
      padding: 3px 10px;
    }

    /* ─── Grid ─── */
    .grid { display: grid; gap: 12px; overflow: visible; padding: 16px; margin: -16px; }

    .grid-4 { grid-template-columns: repeat(4, 1fr); }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-2 { grid-template-columns: repeat(2, 1fr); }

    .grid-live {
      grid-template-columns: 2fr 1fr 1fr;
    }

    /* ─── Card ─── */
    .card {
      position: relative;
      display: flex; flex-direction: column;
      padding: 24px;
      background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
      border: 1px solid transparent;
      border-radius: var(--wc-r-xl);
      transition: transform 0.7s cubic-bezier(0.34,1.56,0.64,1),
                  opacity 0.9s cubic-bezier(0.16,1,0.3,1),
                  background 0.5s, box-shadow 0.5s;
      will-change: transform;
      z-index: 0;
    }

    .card::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: var(--wc-r-xl);
      padding: 1px;
      background: linear-gradient(
        120deg,
        rgba(255,255,255,0.04) 0%,
        rgba(255,255,255,0.04) 30%,
        rgba(255,255,255,0.25) 46%,
        rgba(255,255,255,0.25) 54%,
        rgba(255,255,255,0.04) 70%,
        rgba(255,255,255,0.04) 100%
      );
      background-size: 300% 100%;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      animation: shimmer 8s linear infinite;
      animation-delay: var(--shimmer-delay, 0s);
      z-index: 1;
    }


    .card::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(400px circle at var(--mx,50%) var(--my,50%), rgba(var(--wc-accent-rgb),0.09), transparent 40%);
      opacity: 0;
      transition: opacity 0.35s;
      pointer-events: none;
      z-index: -1;
    }

    .card:hover {
      transform: translateY(-6px) scale(1.05);
      background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
      border-color: rgba(255,255,255,0.13);
      box-shadow: 0 8px 32px rgba(var(--wc-accent-rgb),0.15);
      z-index: 10;
    }
    .card:hover::before { opacity: 1; }

    @media (prefers-reduced-motion: reduce) {
      .card, .card-reveal.floating { animation: none !important; }
    }
    @media (max-width: 900px) {
      .card, .card-reveal.floating { animation: none !important; }
    }

    .card-arrow {
      position: absolute; top: 22px; right: 22px;
      width: 26px; height: 26px;
      border-radius: 50%;
      background: rgba(255,255,255,0.06);
      display: flex; align-items: center; justify-content: center;
      color: var(--text-secondary);
      transition: transform 0.28s cubic-bezier(0.16,1,0.3,1), background 0.28s, color 0.28s;
      flex-shrink: 0;
    }
    .card-arrow svg { width: 12px; height: 12px; }
    .card:hover .card-arrow { background: var(--accent); color: #fff; transform: rotate(-45deg); }

    .card-icon {
      width: 40px; height: 40px;
      border-radius: var(--wc-r-m);
      display: flex; align-items: center; justify-content: center;
      background: rgba(var(--wc-accent-rgb),0.1);
      color: var(--accent);
      margin-bottom: auto;
      transition: transform 0.28s cubic-bezier(0.16,1,0.3,1);
      flex-shrink: 0;
    }
    .card-icon svg { width: 20px; height: 20px; }
    .card:hover .card-icon { transform: scale(1.07); }

    .card-content { margin-top: 28px; }
    .card-title { font-size: 16px; font-weight: 600; letter-spacing: -0.012em; margin-bottom: 5px; }
    .card-desc { font-size: 13px; line-height: 1.45; color: var(--text-secondary); }

    /* Featured card */
    .card.featured {
      background: linear-gradient(135deg, rgba(var(--wc-accent-rgb),0.15) 0%, rgba(191,90,242,0.07) 100%);
      border-color: rgba(var(--wc-accent-rgb),0.2);
    }
    .card.featured .card-icon { width: 48px; height: 48px; border-radius: var(--wc-r-m); background: rgba(var(--wc-accent-rgb),0.18); }
    .card.featured .card-icon svg { width: 24px; height: 24px; }
    .card.featured .card-title { font-size: 20px; }
    .card.featured .card-desc { font-size: 14px; max-width: 300px; }
    .card.featured:hover .card-arrow { background: var(--accent); }

    /* Overlay cards */
    .card.ov .card-icon { background: rgba(191,90,242,0.12); color: #bf5af2; }
    .card.ov:hover .card-arrow { background: #bf5af2; }

    /* Client card accent */
    .card.cl .card-icon { background: rgba(48,209,88,0.10); color: var(--wc-green); }
    .card.cl:hover .card-arrow { background: var(--wc-green); }

    /* Live card accent */
    .card.lv .card-icon { background: rgba(255,69,58,0.10); color: var(--wc-red); }
    .card.lv:hover .card-arrow { background: var(--wc-red); }
    .card.lv.featured {
      background: linear-gradient(135deg, rgba(255,69,58,0.12) 0%, rgba(255,159,10,0.06) 100%);
      border-color: rgba(255,69,58,0.18);
    }

    /* ─── Footer ─── */
    footer {
      max-width: 1200px;
      margin: 0 auto;
      padding: 28px 32px;
      border-top: 1px solid var(--sep);
      display: flex; justify-content: space-between; align-items: center;
      font-size: 12px; color: var(--text-tertiary);
    }
    footer a:hover { color: var(--text-secondary); }

    /* ─── Reveal ─── */
    .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1), transform 0.65s cubic-bezier(0.16,1,0.3,1); }
    .reveal.visible { opacity: 1; transform: none; }

    .card-reveal { opacity: 0; }
    .card-reveal.visible { opacity: 1; }

    /* ─── Responsive ─── */
    .span2 { grid-column: span 2; }

    @media (max-width: 1100px) {
      .grid-4 { grid-template-columns: repeat(2, 1fr); }
      .grid-live { grid-template-columns: 1fr 1fr; }
      .card.lv.featured { grid-column: span 2; }
    }

    @media (max-width: 800px) {
      .hero { padding: 64px 20px 40px; }
      .sections { padding: 0 20px 80px; }
      .section { margin-bottom: 48px; }
      .grid-4, .grid-3, .grid-2, .grid-live { grid-template-columns: 1fr; }
      .span2, .card.lv.featured { grid-column: span 1; }
      footer { padding: 20px; flex-direction: column; gap: 6px; text-align: center; }
    }

    @media (max-width: 540px) {
      /* Nav */

      /* Hero — centré verticalement */
      .hero {
        min-height: calc(100svh - 52px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
      }
      .hero-eyebrow { font-size: 12px; padding: 4px 12px; }
      .hero-sub { font-size: 15px; }

      /* Sections */
      .sections { padding: 0 16px 64px; }
      .section { margin-bottom: 65px; }
      .section-title { font-size: 18px; }
      .section-icon { width: 28px; height: 28px; border-radius: var(--wc-r-s); }
      .section-icon svg { width: 13px; height: 13px; }

      /* Grids — tout en 1 colonne */
      .grid-4, .grid-3, .grid-2, .grid-live { grid-template-columns: 1fr; gap: 8px; }
      .card.cl.featured, .card.lv.featured, .span2 { grid-column: span 1; }

      /* Cards — plus compactes, layout horizontal */
      .card {
        padding: 16px 18px;
        flex-direction: row;
        align-items: center;
        gap: 14px;
        border-radius: var(--wc-r-l);
      }
      .card-icon {
        width: 36px; height: 36px;
        border-radius: var(--wc-r-m);
        flex-shrink: 0;
        margin-bottom: 0;
      }
      .card-icon svg { width: 17px; height: 17px; }
      .card-content { margin-top: 0; flex: 1; min-width: 0; }
      .card-title { font-size: 14px; margin-bottom: 3px; }
      .card-desc { font-size: 12px; line-height: 1.4; }
      .card-arrow { top: 14px; right: 14px; width: 22px; height: 22px; }
      .card-arrow svg { width: 10px; height: 10px; }

      /* Featured cards — pas de layout spécial sur mobile */
      .card.featured .card-icon { width: 36px; height: 36px; border-radius: var(--wc-r-m); }
      .card.featured .card-icon svg { width: 17px; height: 17px; }
      .card.featured .card-title { font-size: 15px; }
      .card.featured .card-desc { font-size: 12px; max-width: none; }

      footer { padding: 16px; font-size: 11px; }
    }

    /* ─── Shimmer global ─── */
    h1 em {
      font-style: normal;
      background: linear-gradient(
        90deg,
        #777 0%,
        #777 30%,
        #ffffff 46%,
        #ffffff 54%,
        #777 70%,
        #777 100%
      );
      background-size: 300% 100%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: shimmer 8s linear infinite;
    }

    @keyframes shimmer {
      0%   { background-position: 100% center; }
      100% { background-position: 0% center; }
    }

    /* Windows : le shimmer sur texte (background-position) y est mal rendu
       (vitesse/sens incohérents). On fige le dégradé sur une position propre
       (texte centré sur la zone claire) sans l'animer. */
    .is-windows h1 em,
    .is-windows .section-title {
      animation: none;
      background-position: 50% center;
    }
    .is-windows h1 { animation: none; }

    /* ─── Fade bas de page ─── */
    .bottom-fade {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 80px;
      background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.85) 100%);
      pointer-events: none;
      z-index: 50;
    }

    /* ─── Cursor glow ─── */
    #cursor-glow {
      position: fixed;
      width: 600px; height: 600px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(var(--wc-accent-rgb),0.08) 0%, transparent 70%);
      filter: blur(40px);
      pointer-events: none;
      z-index: 0;
      transform: translate(-50%, -50%);
      transition: opacity .4s;
      will-change: left, top;
    }

    @media (prefers-reduced-motion: reduce) {
      /* « Moins d'animations » (Windows : Effets d'animation désactivés, que Firefox respecte) : une seule itération.
         Sans animation-iteration-count, les boucles infinies (bulles, textes) rejouaient des milliers de fois par seconde. */
      *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; }
      .bubble { animation: none !important; }
    }
  
    /* ─── Standard Nav (logo | titre | id) ─── */
    nav {
      position: sticky; top: 0; z-index: 1000;
      height: 64px;
      display: grid; grid-template-columns: 1fr auto 1fr;
      align-items: center;
      padding: 0 24px;
      background: rgba(0,0,0,0.75);
      backdrop-filter: saturate(180%) blur(20px);
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    nav .brand { justify-self: start; display: inline-flex; align-items: center; height: 100%; }
    nav .brand img { height: 24px; display: block; }
    nav .nav-pill {
      justify-self: center;
      display: inline-flex; align-items: center;
      padding: 6px 14px;
      font-size: 12px; font-weight: 500;
      color: var(--wc-text-secondary);
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: var(--wc-r-pilule);
      max-width: 60vw;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      line-height: 1;
    }
    nav .nav-user {
      justify-self: end;
      display: inline-flex; align-items: center; gap: 8px;
      padding: 6px 14px;
      border-radius: var(--wc-r-pilule);
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      font-size: 12px; font-weight: 500;
      color: var(--wc-text-secondary);
      cursor: pointer;
      transition: all .15s;
      line-height: 1;
    }
    nav .nav-user:hover { background: rgba(255,69,58,0.15); border-color: rgba(255,69,58,0.3); color: var(--wc-red); }
    nav .nav-user .x { opacity: 0.5; font-size: 10px; }

    /* Bouton connexion */
    .nav-login-btn {
      justify-self: end;
      display: inline-flex; align-items: center; gap: 7px;
      padding: 6px 14px;
      border-radius: var(--wc-r-pilule);
      background: rgba(var(--wc-accent-rgb),0.12);
      border: 1px solid rgba(var(--wc-accent-rgb),0.3);
      font-family: inherit;
      font-size: 12px; font-weight: 500;
      color: var(--accent);
      cursor: pointer; transition: all .15s;
      line-height: 1;
      position: relative;
    }
    .nav-login-btn:hover { background: rgba(var(--wc-accent-rgb),0.2); border-color: rgba(var(--wc-accent-rgb),0.5); }

    /* Backdrop derrière le popover */
    #login-backdrop {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(12px) saturate(0.7);
      z-index: 1900;
      opacity: 0; pointer-events: none;
      transition: opacity .25s;
    }
    #login-backdrop.open { opacity: 1; pointer-events: auto; }

    /* Popover login — centré */
    .login-popover {
      position: fixed;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: min(340px, calc(100vw - 32px));
      background: rgba(12,18,40,0.97);
      border: 1px solid rgba(var(--wc-accent-rgb),0.2);
      border-radius: var(--wc-r-l);
      padding: 24px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
      backdrop-filter: blur(20px);
      z-index: 2000;
      display: none;
    }
    .login-popover.open { display: block; animation: popIn .18s cubic-bezier(0.16,1,0.3,1); }
    @keyframes popIn {
      from { opacity:0; transform: translate(-50%, -50%) scale(0.95); }
      to   { opacity:1; transform: translate(-50%, -50%) scale(1); }
    }
    .login-popover h3 { font-size: 14px; font-weight: 600; color: var(--wc-texte-bleute); margin-bottom: 4px; }
    .login-popover p { font-size: 12px; color: var(--wc-gris-nuit); margin-bottom: 14px; }
    .login-popover input {
      width: 100%; padding: 9px 12px;
      background: rgba(10,18,40,0.8);
      border: 1px solid rgba(var(--wc-accent-rgb),0.2);
      border-radius: var(--wc-r-s); color: var(--wc-text);
      font-family: inherit; font-size: 13px;
      outline: none; transition: border-color .2s;
      margin-bottom: 10px;
    }
    .login-popover input:focus { border-color: var(--accent); }
    .login-popover button {
      width: 100%; padding: 9px;
      background: var(--accent); color: #fff;
      border: none; border-radius: var(--wc-r-s);
      font-family: inherit; font-size: 13px; font-weight: 600;
      cursor: pointer; transition: background .15s;
    }
    .login-popover button:hover { background: #1a7fd4; }
    .login-popover .pop-error { font-size: 11px; color: var(--wc-rouge-clair); margin-top: 7px; display: none; }

    /* Overlay de verrouillage */
    /* Écran d'accès. L'ancien floutait le contenu de la page derrière lui : on
       devinait une bouillie de cartes, et le flou laissait deviner la structure de
       l'outil. Celui-ci est opaque et se suffit à lui-même. */
    #lock-overlay {
      position: fixed; inset: 0; z-index: 500;
      background:
        radial-gradient(ellipse 70% 55% at 50% 8%, rgba(var(--wc-accent-rgb),0.20) 0%, transparent 60%),
        radial-gradient(ellipse 60% 45% at 82% 108%, rgba(94,92,230,0.16) 0%, transparent 58%),
        #05070d;
      display: flex; align-items: center; justify-content: center;
      padding: 24px; transition: opacity .35s;
    }
    /* Deverrouille, l'ecran de connexion restait pose sur la page, simplement
    transparent : opacity:0 ne le retire ni du rendu ni du remplissage
    automatique. Safari voyait donc un formulaire de connexion vivant a
    chaque ouverture et proposait le mot de passe enregistre, alors que la
    session etait deja ouverte. visibility le retire pour de bon, avec un
    delai egal au fondu pour ne pas l'escamoter d'un coup. */
    #lock-overlay.unlocked { opacity: 0; pointer-events: none; visibility: hidden;
                             transition: opacity .35s, visibility 0s .35s; }
    body:has(#lock-overlay:not(.unlocked)) .nav-login-btn { display: none !important; }
    body:has(#lock-overlay:not(.unlocked)) nav .nav-pill { opacity: .5; }

    .acces {
      width: 100%; max-width: 372px; text-align: center;
      padding: 38px 32px 30px;
      background: rgba(255,255,255,0.028);
      border: 1px solid rgba(255,255,255,0.075);
      border-radius: var(--wc-r-xl);
      box-shadow: 0 24px 60px rgba(0,0,0,.45);
      animation: accesIn .45s cubic-bezier(0.16,1,0.3,1);
    }
    @keyframes accesIn { from { opacity: 0; transform: translateY(14px); } }
    .acces-logo { height: 30px; width: auto; margin-bottom: 26px; opacity: .95; }
    .acces h1 { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 7px; }
    .acces .sous { font-size: 13.5px; color: var(--text-tertiary); line-height: 1.55; margin-bottom: 24px; }

    /* Le champ mot de passe reste un input[type=password] dans la page : c'est lui que
       login-username.js repère pour insérer au-dessus le champ « Identifiant ». */
    .acces-form { display: flex; flex-direction: column; gap: 9px; text-align: left; }
    .acces-form input {
      width: 100%; padding: 12px 14px;
      background: rgba(255,255,255,0.045);
      border: 1px solid rgba(255,255,255,0.11);
      border-radius: var(--wc-r-m);
      font-family: inherit; font-size: 14px; color: var(--text);
      transition: border-color .15s, background .15s;
    }
    .acces-form input::placeholder { color: #55606f; }
    .acces-form input:focus { outline: none; border-color: rgba(var(--wc-accent-rgb),0.55);
                              background: rgba(var(--wc-accent-rgb),0.06); }
    .acces-form button {
      margin-top: 3px; padding: 12px 14px;
      background: var(--accent); border: none; border-radius: var(--wc-r-m);
      font-family: inherit; font-size: 14px; font-weight: 600; color: #fff;
      cursor: pointer; transition: filter .15s;
    }
    .acces-form button:hover { filter: brightness(1.1); }
    .acces-form button:disabled { opacity: .55; cursor: default; }
    .acces-err {
      display: none; margin-top: 10px; padding: 9px 12px;
      background: rgba(255,69,58,0.10); border: 1px solid rgba(255,69,58,0.32);
      border-radius: var(--wc-r-s); font-size: 12.5px; color: var(--wc-rouge-corail); text-align: center;
    }
    .acces-pied { margin-top: 20px; padding-top: 18px;
                  border-top: 1px solid rgba(255,255,255,0.06); font-size: 12px; color: #3d4757; line-height: 1.7; }
    .acces-pied a { color: #5b6b80; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.10); }
    .acces-pied a:hover { color: var(--accent); border-bottom-color: rgba(var(--wc-accent-rgb),.45); }
    @media (max-width: 420px) {
      .acces h1 { font-size: 19px; }
      .acces-logo { height: 25px; margin-bottom: 22px; }
    }

    [data-private].hidden-card { display: none !important; }
    nav .nav-clock {
      justify-self: end;
      font-size: 18px; font-weight: 700;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.04em;
      color: var(--wc-texte-bleute);
      text-shadow: 0 0 8px rgba(var(--wc-bleu-clair-rgb),0.45), 0 0 40px rgba(var(--wc-bleu-vif-rgb),0.35);
      line-height: 1;
    }
    nav .nav-timer {
      justify-self: center;
      font-size: 22px; font-weight: 700;
      font-variant-numeric: tabular-nums;
      color: var(--wc-texte-bleute); letter-spacing: 0.04em;
      line-height: 1;
    }
    @media (max-width: 600px) {
      nav { padding: 0 14px; height: 56px; }
      nav .brand img { height: 13px; }
      nav .nav-pill { font-size: 9px; padding: 4px 8px; max-width: 50vw; }
      nav .nav-user { font-size: 10px; padding: 4px 11px; }
    }