html,body{height:100%}
  body{
    background:var(--ink-900);
    color:var(--on-dark);
    display:flex;flex-direction:column;
    overflow:hidden;
  }
  .no-grain .grain::after{display:none}

  /* ── NAV (clair, façon Apple) ── */
  .nav{
    flex-shrink:0;height:74px;
    display:flex;align-items:center;justify-content:space-between;
    padding:0 2.4rem;
    background:#fafafa;
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid #ececec;
    position:relative;z-index:20;
  }
  .nav-logo img{height:24px;width:auto}
  .nav-right{display:flex;align-items:center;gap:2rem}
  .nav-link{
    font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
    color:var(--text-soft);transition:color .35s var(--ease);
  }
  .nav-link:hover{color:var(--red-400)}
  .nav-phone{
    display:inline-flex;align-items:center;gap:.55rem;
    font-size:.76rem;font-weight:600;letter-spacing:.03em;color:var(--text);
    padding:.55rem 1.1rem;border:1px solid var(--line-warm);border-radius:2px;
    transition:border-color .35s var(--ease),background .35s var(--ease);
  }
  .nav-phone svg{width:13px;height:13px;color:var(--red-500)}
  .nav-phone:hover{border-color:rgba(243,239,230,.5)}

  /* ── SPLIT ── */
  .split{flex:1;min-height:0;display:flex;position:relative; padding-bottom: 50px !important;}
  .split::after{
    content:'';position:absolute;top:7%;bottom:7%;left:50%;width:1px;
    background:linear-gradient(to bottom,transparent,var(--hair-d) 14%,var(--hair-d) 86%,transparent);
    z-index:8;pointer-events:none;transform:translateX(-.5px);
  }

  .panel{
    flex:1;position:relative;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    text-align:center;text-decoration:none;
    padding:3rem 2.5rem;
    transition:flex 1.1s var(--ease-lux);
  }
  .panel-part{background:#13162f}
  .panel-pro{background:#0d0f20}
  /* accent bleu pour l'espace professionnel */
  .panel-pro .panel-bar{background:linear-gradient(90deg,transparent,var(--logo-blue) 18%,#6b78d8 50%,var(--logo-blue) 82%,transparent);box-shadow:0 0 18px rgba(58,85,176,.6)}

  /* top accent line */
  .panel-bar{
    position:absolute;top:0;left:0;right:0;height:4px;z-index:6;
    background:linear-gradient(90deg,transparent,var(--red-500) 18%,var(--red-400) 50%,var(--red-500) 82%,transparent);
    box-shadow:0 0 18px rgba(201,59,24,.6);
    transform:scaleX(0);transition:transform .8s var(--ease-lux);
  }
  .panel:hover .panel-bar{transform:scaleX(1)}

  .inner{position:relative;z-index:5;max-width:420px;display:flex;flex-direction:column;align-items:center}
  .inner .eyebrow{color:var(--on-dark-mute);margin-bottom:2.4rem;transition:color .6s var(--ease)}
  .panel-part:hover .inner .eyebrow{color:var(--red-400)}
  .panel-pro:hover .inner .eyebrow{color:#8ea4df}

  /* picto — médaillon luxe */
  .picto{
    width:98px;height:98px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;margin-bottom:2.2rem;
    border:1px solid rgba(174,182,196,.4);
    background:radial-gradient(circle at 50% 32%,rgba(174,182,196,.12),transparent 70%);
    position:relative;
    transition:transform .7s var(--ease-lux),border-color .6s var(--ease);
  }
  .picto::before{
    content:'';position:absolute;inset:8px;border-radius:50%;
    border:1px solid rgba(174,182,196,.22);
  }
  .picto .ring{
    position:absolute;inset:-1px;border-radius:50%;pointer-events:none;opacity:0;
    background:conic-gradient(from -90deg,#aeb6c4 0deg,transparent 72deg);
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
            mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
    transition:opacity .6s var(--ease);
  }
  .panel:hover .picto .ring{opacity:.85}
  .panel-part .picto .ring{background:conic-gradient(from -90deg,#e0552e 0deg,transparent 72deg)}
  .panel-pro .picto .ring{background:conic-gradient(from -90deg,#8ea4df 0deg,transparent 72deg)}
  .picto::after{
    content:'';position:absolute;inset:-5px;border-radius:50%;pointer-events:none;
    background:radial-gradient(circle 3px at 50% 0,#aeb6c4 96%,transparent 100%);
  }
  @keyframes orbit{to{transform:rotate(360deg)}}
  @keyframes ringPulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.06);opacity:1}}
  @keyframes iconPop{0%{transform:scale(1) rotate(0)}45%{transform:scale(1.16) rotate(-5deg)}100%{transform:scale(1) rotate(0)}}
  @media (prefers-reduced-motion: no-preference){
    .panel:hover .picto .ring{animation:orbit 4s linear infinite}
    .panel:hover .picto::after{animation:orbit 4s linear infinite}
    .panel:hover .picto::before{animation:ringPulse 2s var(--ease) infinite}
    .panel:hover .picto svg{animation:iconPop .7s var(--ease-lux)}
  }
  .panel:hover .picto{transform:translateY(-6px) scale(1.04);border-color:rgba(174,182,196,.65)}
  .picto svg{width:52px;height:52px;color:#aeb6c4;transition:color .5s var(--ease);position:relative}
  .panel:hover .picto svg{color:#cdd3dc}

  .panel-title{
    font-size:clamp(2.7rem,4.6vw,4.2rem);
    color:var(--on-dark);margin-bottom:1.5rem;letter-spacing:-.015em;
  }
  .panel-title .pre{
    display:block;font-family:var(--sans);font-weight:500;
    font-size:.84rem;letter-spacing:.34em;text-transform:uppercase;
    color:var(--on-dark-mute);margin-bottom:1.1rem;
  }
  .panel-title em{font-style:italic;color:#cdd3dc}
  :root[data-head="sans"] .panel-title em{font-style:normal;color:#cdd3dc}
  .panel-pro .panel-title em{color:#cdd3dc}

  .panel-desc{
    font-size:.96rem;line-height:1.78;color:var(--on-dark-soft);
    max-width:340px;margin-bottom:2.6rem;font-weight:400;
    transition:color .6s var(--ease);
  }
  .panel:hover .panel-desc{color:rgba(243,239,230,.78)}

  .panel-tags{
    display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center;
    margin-top:2.4rem;
  }
  .panel-tags span{
    position:relative;
    font-size:.66rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
    color:var(--on-dark-mute);transition:color .6s var(--ease);
  }
  .panel-tags span:not(:last-child)::after{
    content:'';position:absolute;right:-.55rem;top:50%;width:3px;height:3px;border-radius:50%;
    background:currentColor;opacity:.45;transform:translateY(-50%);
  }
  .panel:hover .panel-tags span{color:var(--on-dark-soft)}

  /* ── FOOTER (clair, certifs serif au centre) ── */
  .foot{
    flex-shrink:0;
    display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
    padding:0 2.4rem;height:60px;
    background:#fafafa;
    border-top:1px solid #ececec;
    position:relative;z-index:20;
  }
  .foot-addr{font-size:.72rem;letter-spacing:.04em;color:var(--muted)}
  .foot-certs{font-family:var(--serif);font-size:.98rem;letter-spacing:.015em;color:var(--text-soft)}
  .foot-links{display:flex;gap:1.3rem}
  .foot-links a{font-size:.72rem;color:var(--muted);transition:color .35s var(--ease)}
  .foot-links a:hover{color:var(--red-400)}

  /* entrance — transition-based reveal (robust to capture cloning) */
  @media (prefers-reduced-motion: no-preference){
    .nav,.foot{opacity:0;transition:opacity 1s var(--ease-lux) .1s}
    body.ready .nav,body.ready .foot{opacity:1}
    .panel .inner > *{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-lux),transform .9s var(--ease-lux)}
    body.ready .panel .inner > *{opacity:1;transform:none}
    .panel-part .inner > *:nth-child(1){transition-delay:.22s}
    .panel-part .inner > *:nth-child(2){transition-delay:.30s}
    .panel-part .inner > *:nth-child(3){transition-delay:.38s}
    .panel-part .inner > *:nth-child(4){transition-delay:.46s}
    .panel-part .inner > *:nth-child(5){transition-delay:.54s}
    .panel-part .inner > *:nth-child(6){transition-delay:.62s}
    .panel-pro .inner > *:nth-child(1){transition-delay:.30s}
    .panel-pro .inner > *:nth-child(2){transition-delay:.38s}
    .panel-pro .inner > *:nth-child(3){transition-delay:.46s}
    .panel-pro .inner > *:nth-child(4){transition-delay:.54s}
    .panel-pro .inner > *:nth-child(5){transition-delay:.62s}
    .panel-pro .inner > *:nth-child(6){transition-delay:.70s}
  }

  @media(max-width:860px){
    html,body{height:auto}
    body{display:block;overflow-x:hidden;overflow-y:visible}
    .nav{padding:0 1.4rem;height:64px}
    .nav-right{gap:1rem}
    .nav-link.hide-sm{display:inline;font-size:.66rem;letter-spacing:.12em}
    .split{display:block;position:relative}
    .split::after{display:none}
    .panel{display:flex;min-height:auto;overflow:visible;padding:4.2rem 1.5rem}
    .foot{flex-direction:column;height:auto;padding:1.4rem;gap:.8rem;text-align:center}
    .foot-certs{font-size:.86rem}
  }
  @media(max-width:420px){
    .panel{padding:3.4rem 1.2rem}
    .nav-logo img{height:21px}
    .panel-desc{font-size:.92rem}
  }
  .panel-part .picto::after{background:radial-gradient(circle 3px at 50% 0,#e0552e 96%,transparent 100%)}
  .panel-pro .picto::after{background:radial-gradient(circle 3px at 50% 0,#8ea4df 96%,transparent 100%)}

.site-main .split .panel .eyebrow-text {
    display: inline-block;
    line-height: 1;
}