/* Menu burger + animations communes à tout le site (page Offres et portfolio). */

/* Transition douce entre les pages (navigateurs récents) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.38s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}

/* Bouton burger */
.bm-btn{position:relative;width:40px;height:40px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--line) 45%,transparent);background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;flex:none;transition:border-color .2s,background .2s,color .2s;z-index:61}
.bm-btn:hover{border-color:var(--ink)}
.bm-btn span{position:absolute;left:11px;right:11px;height:1.6px;border-radius:2px;background:currentColor;transition:transform .45s cubic-bezier(.7,0,.2,1),top .45s cubic-bezier(.7,0,.2,1)}
.bm-btn span:nth-child(1){top:15px}
.bm-btn span:nth-child(2){top:22px}
.bm-open .bm-btn span:nth-child(1){top:18.5px;transform:rotate(45deg)}
.bm-open .bm-btn span:nth-child(2){top:18.5px;transform:rotate(-45deg)}
.bm-open .bm-btn{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* Panneau plein écran */
.bm{position:fixed;inset:0;z-index:60;background:var(--bg);color:var(--ink);display:flex;flex-direction:column;
  padding:calc(96px + env(safe-area-inset-top,0px)) max(clamp(16px,3.4vw,64px),env(safe-area-inset-right,0px)) max(28px,env(safe-area-inset-bottom,0px)) max(clamp(16px,3.4vw,64px),env(safe-area-inset-left,0px));
  overflow-y:auto;visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .7s cubic-bezier(.7,0,.2,1),visibility 0s .7s}
.bm-open .bm{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .7s cubic-bezier(.7,0,.2,1),visibility 0s}
.bm-open{overflow:hidden}
.bm-close{position:fixed;z-index:62;top:calc(22px + env(safe-area-inset-top,0px));right:max(clamp(16px,3.4vw,64px),env(safe-area-inset-right,0px))}
html[lang="fr"] .bm .en, html[lang="en"] .bm .fr, html[lang="fr"] .bm-btn .en, html[lang="en"] .bm-btn .fr, html[lang="fr"] .bt .en, html[lang="en"] .bt .fr{display:none!important}
.bm-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:40px clamp(24px,4vw,80px);align-items:end;flex:1}
.bm-main{counter-reset:bm;list-style:none;margin:0;padding:0;display:grid;gap:clamp(2px,.6vw,10px)}
.bm-main a{display:flex;align-items:baseline;gap:clamp(12px,1.6vw,26px);text-decoration:none;font-size:clamp(40px,6.4vw,112px);font-weight:500;line-height:1;letter-spacing:-.04em;padding:.06em 0}
.bm-main li{counter-increment:bm}
html[lang="en"] .bm-main li.fr-only{display:none}
.bm-main .n::before{content:counter(bm,decimal-leading-zero)}
.bm-main .n{font-family:var(--mono);font-size:clamp(12px,1vw,15px);letter-spacing:.02em;color:var(--red);font-weight:400;min-width:2.2em}
.bm-main .t{position:relative;display:inline-block;transition:transform .45s cubic-bezier(.2,.8,.2,1),color .25s}
.bm-main a:hover .t,.bm-main a:focus-visible .t{transform:translateX(.12em);color:var(--red)}
.bm-main a[aria-current="page"] .t::after{content:"";position:absolute;left:0;right:0;bottom:-.04em;height:.05em;background:currentColor}
.bm-side{display:grid;gap:26px;align-content:end;font-size:15px}
.bm-side h2{margin:0 0 10px;font-size:13px;font-weight:400;text-transform:uppercase;color:var(--red)}
.bm-side ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bm-side a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s cubic-bezier(.2,.8,.2,1)}
.bm-side a:hover,.bm-side a:focus-visible{background-size:100% 1px}
.bm-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:clamp(36px,5vw,64px);padding-top:18px;border-top:1.5px solid color-mix(in srgb,var(--line) 30%,transparent);font-size:13px;text-transform:uppercase;color:var(--text-soft,var(--soft))}
.bm-foot a{color:var(--red);text-decoration:none}
/* Apparition des liens à l’ouverture */
.bm .bm-in{opacity:0;translate:0 28px;transition:opacity .5s,translate .7s cubic-bezier(.2,.8,.2,1)}
.bm-open .bm .bm-in{opacity:1;translate:0 0;transition-delay:calc(.22s + var(--d,0) * 55ms)}
@media (max-width:760px){.bm-grid{grid-template-columns:1fr;align-items:start}.bm-side{align-content:start}}

/* Animation d’arrivée du héro */
@keyframes bc-rise{from{opacity:0;translate:0 .22em;clip-path:inset(0 0 100% 0)}to{opacity:1;translate:0 0;clip-path:inset(-10% 0 -10% 0)}}
@keyframes bc-pop{from{opacity:0;translate:0 26px;scale:.92}to{opacity:1;translate:0 0;scale:1}}
@keyframes bc-fade{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
.name,.pname{animation:bc-rise 1.1s cubic-bezier(.2,.8,.2,1) .1s both}
.tags>*,.pft>*{animation:bc-pop .8s cubic-bezier(.2,.8,.2,1) both}
.tags>*:nth-child(1),.pft>*:nth-child(1){animation-delay:.45s}
.tags>*:nth-child(2),.pft>*:nth-child(2){animation-delay:.52s}
.tags>*:nth-child(3),.pft>*:nth-child(3){animation-delay:.59s}
.tags>*:nth-child(4),.pft>*:nth-child(4){animation-delay:.66s}
.tags>*:nth-child(5),.pft>*:nth-child(5){animation-delay:.73s}
.tags>*:nth-child(6),.pft>*:nth-child(6){animation-delay:.8s}
.hero-row>*,.p-head .g6>*,.p-hero{animation:bc-fade .9s cubic-bezier(.2,.8,.2,1) .55s both}
.p-head .g6>*:nth-child(2){animation-delay:.65s}
.p-hero{animation-delay:.75s}
.top{animation:bc-fade .7s cubic-bezier(.2,.8,.2,1) both}

/* Apparition au défilement (ajoutée par menu.js aux éléments sous la ligne de flottaison) */
.bc-rv{opacity:0;translate:0 26px;transition:opacity .9s cubic-bezier(.2,.8,.2,1),translate .9s cubic-bezier(.2,.8,.2,1)}
.bc-rv.bc-in{opacity:1;translate:0 0}

/* Petits retours au survol */
.card{transition:translate .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .3s}
@media (hover:hover){.card:hover{translate:0 -4px}}
.pill,.btn,.svc-pill,.pfh-pill{transition:background .25s,color .25s,border-color .25s,translate .3s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.pill:hover,.btn:hover,.svc-pill:hover,.pfh-pill:hover{translate:0 -2px}}
.theme svg{transition:rotate .6s cubic-bezier(.7,0,.2,1)}
.theme:hover svg{rotate:180deg}

/* Bouton retour en haut */
.bt{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:40;width:48px;height:48px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--line) 45%,transparent);background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--ink);display:grid;place-items:center;cursor:pointer;opacity:0;translate:0 16px;pointer-events:none;transition:opacity .35s,translate .45s cubic-bezier(.2,.8,.2,1),background .25s,color .25s}
.bt svg{width:20px;height:20px}
.bt.on{opacity:1;translate:0 0;pointer-events:auto}
.bt:hover{background:var(--ink);color:var(--bg)}
@media (max-width:700px){body:has(.sticky) .bt{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}
.bm-open .bt{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .bt{transition:none}
  @view-transition{navigation:none}
  .bm,.bm .bm-in,.bm-btn span{transition:none!important}
  .name,.pname,.tags>*,.pft>*,.hero-row>*,.p-head .g6>*,.p-hero,.top{animation:none!important}
  .bc-rv{opacity:1;translate:none}
}