/* Styles the socle (core.js) relies on. Set the project palette here;
   everything else about the look is designed per project. */
:root{
  --accent:#1A6BFF;      /* buttons, cursor, focus ring */
  --ink-a:#1A6BFF;       /* page transition, first wave */
  --ink-b:#050A1A;       /* page transition, second wave */
  --ease:cubic-bezier(.16,1,.3,1);
}

/* never let a rotated or 3D element create sideways scroll */
html,body,main{overflow-x:clip}

/* reveals */
.rv{opacity:0;transform:translateY(40px)}

/* kinetic 3D titles (letters are split by initTitles) */
.k3d{perspective:900px;transform:rotateX(var(--tilt,0deg));transform-origin:50% 100%}
.k3d .wd{display:inline-block;white-space:nowrap;transform-style:preserve-3d}
.k3d .ch{display:inline-block;transform-origin:50% 100% -.35em;transform:rotateX(-96deg) translateY(.15em);opacity:0;will-change:transform}
.k3d .pill{display:inline-block}

/* cinematic word reveal */
[data-cine] .cw{display:inline-block;will-change:transform,filter,opacity}

/* page transition */
#ink{position:fixed;inset:0;z-index:120;pointer-events:none;visibility:hidden;display:grid;place-items:center}
#ink svg{position:absolute;inset:0;width:100%;height:100%}
#ink .ink-mark{position:relative;width:64px;height:64px;border-radius:18px;background:var(--accent);transform:scale(0)}

/* custom cursor (desktop only: shown by JS on first pointer move) */
.cur,.cur-dot{position:fixed;top:0;left:0;z-index:90;pointer-events:none;border-radius:50%}
.cur{opacity:0;width:44px;height:44px;margin:-22px 0 0 -22px;border:1.5px solid rgba(255,255,255,.5);display:grid;place-items:center;font-size:11px;font-weight:800;letter-spacing:.1em;transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease),background .4s,border-color .4s}
.cur span{opacity:0;transition:opacity .3s}
.cur.big{width:92px;height:92px;margin:-46px 0 0 -46px;background:var(--accent);border-color:var(--accent)}
.cur.big span{opacity:1}
.cur-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--accent)}
@media (hover:none){.cur,.cur-dot{display:none}}

/* visible keyboard focus */
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}

/* comfortable tap targets on phones */
@media (max-width:760px){footer a,.contacts a{display:inline-flex;align-items:center;min-height:44px}}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  .k3d .ch{transform:none;opacity:1}
}

/* keyboard: skip link (<a class="skip" href="#contenu">Aller au contenu</a> first in <body>,
   <main id="contenu" tabindex="-1">), and focused items never hidden under the fixed nav */
.skip{position:fixed;left:16px;top:12px;z-index:200;padding:12px 18px;border-radius:12px;background:var(--accent);color:#fff;font-weight:700;transform:translateY(-160%);transition:transform .3s var(--ease)}
.skip:focus{transform:none}
html{scroll-padding-top:96px}
main:focus{outline:none}

/* form fields: 16px minimum, or iPhone zooms in on focus */
input,select,textarea{font-size:16px}