:root{
    --bg-deep:#06102b;
    --bg-mid:#16306e;
    --bg-bright:#2a5fd9;
    --panel:#0c0c12;
    --panel-line:#262631;
    --ink:#f4f4f2;
    --ink-dim:#a6a6b3;
    --accent:#7CFF6B;
    --accent-dim:#4fcf42;
  }

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

  html,body{
    min-height:100vh;
    font-family:'Manrope',sans-serif;
    background:
      radial-gradient(ellipse 140% 100% at 50% -10%, var(--bg-bright) 0%, var(--bg-mid) 45%, var(--bg-deep) 100%);
    overflow-x:hidden;
  }

  .notes{
    position:fixed; inset:0; z-index:0;
    opacity:0.10;
    pointer-events:none;
  }

  .note{
    position:fixed;
    color:#ffffff;
    opacity:0.07;
    font-size:64px;
    user-select:none;
    z-index:0;
  }

  .stage{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:48px 24px;
    z-index:1;
  }

  .wrap{
    width:100%;
    max-width:640px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:28px;
  }

  .brand{
    text-align:center;
    color:var(--ink);
  }
  .brand .kicker{
    font-family:'Manrope',sans-serif;
    font-weight:700;
    font-size:14.5px;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:var(--accent);
    opacity:0.85;
  }
  .brand h1{
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:clamp(28px,6vw,52px);
    letter-spacing:-0.01em;
    margin-top:6px;
    color:#fff;
    text-shadow:0 2px 24px rgba(0,0,0,0.35);
  }

  /* CTA principal */
  .cta{
    width:100%;
    border:none;
    cursor:pointer;
    border-radius:16px;
    padding:22px 28px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    background:linear-gradient(180deg, var(--accent) 0%, var(--accent-dim) 100%);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.5) inset,
      0 -4px 0 rgba(0,0,0,0.18) inset,
      0 14px 28px -10px rgba(76,207,66,0.55);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .cta:hover{
    transform:translateY(-2px);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.5) inset,
      0 -4px 0 rgba(0,0,0,0.18) inset,
      0 18px 34px -10px rgba(76,207,66,0.65);
  }
  .cta:active{
    transform:translateY(1px);
    box-shadow:0 -2px 0 rgba(0,0,0,0.18) inset;
  }
  .cta .badge{
    font-family:'Manrope',sans-serif;
    font-weight:800;
    font-size:13px;
    letter-spacing:0.08em;
    background:#0c0c12;
    color:var(--accent);
    padding:4px 8px;
    border-radius:6px;
  }
  .cta .label{
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:22px;
    color:#0c0c12;
    letter-spacing:0.01em;
  }
  .cta .meta{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
  }
  .cta .sub{
    font-family:'Manrope',sans-serif;
    font-weight:700;
    font-size:13px;
    letter-spacing:0.02em;
    color:rgba(12,12,18,0.65);
  }

  /* CTA secondaire */
  .cta-row{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .cta.secondary{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.18);
    box-shadow:none;
    padding:16px 28px;
  }
  .cta.secondary:hover{
    background:rgba(255,255,255,0.08);
    border-color:rgba(255,255,255,0.3);
    transform:translateY(-1px);
    box-shadow:none;
  }
  .cta.secondary:active{ transform:translateY(1px); }
  .cta.secondary .label{
    color:var(--ink);
    font-size:18px;
  }
  .cta.secondary .badge{
    background:rgba(255,255,255,0.1);
    color:var(--ink-dim);
  }

  /* Panneau de réglages */
  .panel{
    width:100%;
    background:var(--panel);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 24px 48px -20px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset;
  }

  .row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:18px 22px;
    border-bottom:1px solid var(--panel-line);
    user-select:none;
    -webkit-user-select:none;
  }
  .row:last-child{ border-bottom:none; }

  .row .left{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
  }
  .row .icon{
    flex:none;
    width:34px; height:34px;
    display:flex; align-items:center; justify-content:center;
    color:var(--ink);
    opacity:0.9;
  }
  .row .icon svg{ width:20px; height:20px; }

  .row .text{
    font-family:'Manrope',sans-serif;
    font-weight:700;
    font-size:16px;
    letter-spacing:0.02em;
    text-transform:uppercase;
    color:var(--ink);
  }

  .control{
    flex:none;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .control button{
    width:28px; height:28px;
    border-radius:8px;
    border:1px solid var(--panel-line);
    background:#15151d;
    color:var(--ink-dim);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    font-size:15px;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
  }
  .control button:hover{
    background:#1c1c27;
    color:var(--accent);
    border-color:var(--accent-dim);
  }
  .control .value{
    font-family:'Manrope',sans-serif;
    font-weight:800;
    font-size:14px;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--accent);
    min-width:96px;
    text-align:center;
    text-decoration:none;
  }

  .row.link{
    cursor:pointer;
    transition:background .15s ease;
  }
  .row.link:hover{ background:rgba(255,255,255,0.03); }
  .row.link .chev{
    color:var(--ink-dim);
    font-size:18px;
    text-decoration:none;
  }

  /* Lien sans style navigateur */
  a.noa, a.noa:visited{
    text-decoration:none;
    color:inherit;
    display:block;
  }
  a.noa.none{ display:none; }

  /* ---- Responsive ---- */

	.mobile .kicker { font-size: 42px;}

	.mobile .stage{
		align-items:flex-start;  /* abandonne le centrage vertical */
		padding-top:40px;        /* espace respirable en haut */
		padding-bottom:40px;
		min-height:unset;        /* plus besoin de 100vh */
	  }

  /* Tablette (≤ 640px) */
   .mobile  .wrap{ gap:40px; }

   .mobile  .cta{ padding:36px 40px; gap:20px; }
   .mobile  .cta .label{ font-size:38px; }
    .mobile .cta.secondary .label{ font-size:32px; }
    .mobile .cta .badge{ font-size:22px; }
    .mobile .cta .sub{ font-size:24px; }

    .mobile .row{ padding:30px 32px; gap:20px; }
    .mobile .row .text{ font-size:28px; }
    .mobile .row .icon{ width:56px; height:56px; }
    .mobile .row .icon svg{ width:34px; height:34px; }
    .mobile .control .value{ min-width:140px; font-size:26px; text-align:left; margin-left:70px;}
    .mobile .row.link .chev{ font-size:32px; display:none;}