@font-face{font-family:Switzer;src:url(/fonts/switzer-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Switzer;src:url(/fonts/switzer-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
/* Piste A « Table blanche » : sombre par défaut (D-014), clair au choix */
:root{--fond:#0f1110;--encre:#edefee;--texte:#c9cdcb;--texte2:#9ca19f;--filet:#262a28;--puits:#181b1a;--btn:#edefee;--sur-btn:#0f1110;--dispo:#5fd39a;--l1:rgba(122,136,255,.07);--l2:rgba(80,210,190,.05);--l3:rgba(255,150,120,.045);--courbe:cubic-bezier(.16,1,.3,1);--f:Switzer,system-ui,-apple-system,'Segoe UI',sans-serif;color-scheme:dark}
:root[data-skin="clair"]{--fond:#fff;--encre:#111312;--texte:#2a2e2c;--texte2:#575c59;--filet:#e6e8e7;--puits:#f2f3f2;--btn:#111312;--sur-btn:#fff;--dispo:#12804f;--l1:rgba(110,124,255,.06);--l2:rgba(40,190,170,.045);--l3:rgba(255,130,100,.04);color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--encre);font-family:var(--f);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
html[data-lang="en"] [lang="fr"],html[data-lang="fr"] [lang="en"]{display:none}
.wrap{max-width:968px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right));min-height:100svh;display:flex;flex-direction:column}
header{display:flex;justify-content:space-between;align-items:center;gap:16px;height:76px;font-size:15px}
.id{display:flex;gap:10px}.id b{font-weight:500}.id span{color:var(--texte2)}
.outils{display:flex;gap:4px}
.ico{font:inherit;display:inline-grid;place-items:center;grid-auto-flow:column;gap:3px;min-width:44px;height:44px;padding:0 8px;border:0;border-radius:99px;background:none;color:var(--texte2);cursor:pointer;touch-action:manipulation;transition:background-color .15s var(--courbe),color .15s var(--courbe)}
.ico svg{width:20px;height:20px}
.langue{font-size:13px;letter-spacing:.02em}.langue i{font-style:normal;opacity:.5}.langue b{font-weight:400}
html[data-lang="en"] .langue b[data-l="en"],html[data-lang="fr"] .langue b[data-l="fr"]{color:var(--encre);font-weight:500}
:root:not([data-skin="clair"]) .soleil,:root[data-skin="clair"] .lune{display:none}
@media (hover:hover) and (pointer:fine){.ico:hover{color:var(--encre);background:var(--puits)}.lien:hover{text-decoration-color:currentColor}}
.ico:active,.btn:active{transform:scale(.97)}
:focus-visible{outline:2px solid var(--encre);outline-offset:3px;border-radius:6px}
main{flex:1}
.hero{padding:112px 0 72px;max-width:680px}
h1{font-weight:400;font-size:40px;line-height:1.16;letter-spacing:-.022em;margin:0;text-wrap:balance}
h1 .g{color:var(--texte2)}
.statut{display:grid;gap:14px;margin:40px 0 0;padding:0;list-style:none;font-size:17px;color:var(--texte)}
.statut li{display:block}
.point{width:8px;height:8px;border-radius:50%;flex:none;transform:translateY(-2px);background:var(--texte2)}
.point.dispo{background:var(--dispo)}
.lien{text-decoration:underline;text-decoration-color:var(--filet);text-underline-offset:4px;text-decoration-thickness:1px;color:var(--encre)}
.bientot{border-top:1px solid var(--filet);padding:40px 0 0;margin-top:72px;color:var(--texte2);font-size:15px;max-width:36em}
.contact{padding:48px 0 0}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{font:inherit;cursor:pointer;display:inline-flex;align-items:center;min-height:46px;padding:0 20px;border-radius:99px;font-size:15px;font-weight:500;border:1px solid var(--filet);background:none;color:var(--encre);touch-action:manipulation;transition:transform .16s ease-out,background-color .15s var(--courbe)}
.btn.p{background:var(--btn);color:var(--sur-btn);border-color:var(--btn)}
.note{font-size:14px;color:var(--texte2);margin:14px 0 0;min-height:22px}
footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:64px 0 max(32px,env(safe-area-inset-bottom));font-size:14px;color:var(--texte2)}
footer a{min-height:44px;display:inline-flex;align-items:center}
.texte{max-width:640px;padding:64px 0 0}.texte h1{font-size:32px;margin-bottom:32px}.texte h2{font-size:17px;font-weight:500;margin:36px 0 8px}.texte p{margin:0 0 12px;color:var(--texte)}
@media (max-width:760px){header{height:60px;font-size:14px}.id span{display:none}.hero{padding:56px 0 48px}h1{font-size:30px;line-height:1.18}.statut{font-size:16px;margin-top:32px}.bientot{margin-top:48px}.texte{padding-top:32px}.texte h1{font-size:26px}}

/* Partition de mouvement (portfolio-en-ligne/docs/da/partition-mouvement.md) */
:root{--rapide:150ms;--standard:300ms;--lente:900ms}
[data-i="1"]{--i:1}[data-i="3"]{--i:3}[data-i="4"]{--i:4}[data-i="5"]{--i:5}[data-i="6"]{--i:6}[data-i="7"]{--i:7}
h1 .l{display:block}
.btn{transition:transform .16s ease-out,background-color var(--rapide) var(--courbe),border-color var(--rapide) var(--courbe)}
.lien{transition:text-decoration-color var(--rapide) var(--courbe)}
@media (hover:hover) and (pointer:fine){.btn:not(.p):hover{background:var(--puits);border-color:var(--texte2)}.btn.p:hover{opacity:.88}}
.note:not(:empty){animation:fondu var(--standard) var(--courbe)}
.lueur{position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;background:radial-gradient(closest-side at 38% 40%,var(--l1),transparent),radial-gradient(closest-side at 64% 46%,var(--l2),transparent),radial-gradient(closest-side at 50% 66%,var(--l3),transparent);pointer-events:none;opacity:0;z-index:0;transition:opacity .6s var(--courbe)}
.lueur.on{opacity:1}
.wrap{position:relative;z-index:1}
@keyframes fondu{from{opacity:0}}
@keyframes entree{from{opacity:0;transform:translateY(16px);filter:blur(4px)}}
@keyframes onde{0%{box-shadow:0 0 0 0 var(--dispo)}100%{box-shadow:0 0 0 9px transparent}}
@media (prefers-reduced-motion:no-preference){
 h1 .l,.e{animation:entree var(--lente) var(--courbe) both;animation-delay:calc(var(--i,0) * 90ms)}
 header.e{animation-name:fondu;animation-duration:600ms}
 .point.dispo{animation:onde 1.4s ease-out 2;animation-delay:1.1s}
 @media (max-width:760px){@keyframes entree{from{opacity:0;transform:translateY(12px);filter:blur(3px)}}}
}
@media (prefers-reduced-motion:reduce){
 h1 .l,.e{animation:fondu 200ms ease-out both}
 *{transition-duration:0s!important}
 .lueur{display:none}
}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--standard);animation-timing-function:var(--courbe)}
/* CTA et liens discrets (Chris 12/11) */
.actions{gap:4px 28px}
.btn,.btn.p{min-height:44px;padding:0;border:0;border-radius:0;background:none;color:var(--texte2);font-weight:400;font-size:15px;text-decoration:underline;text-decoration-color:var(--filet);text-underline-offset:5px;text-decoration-thickness:1px;transition:color var(--rapide) var(--courbe),text-decoration-color var(--rapide) var(--courbe)}
.lien{color:inherit}
@media (hover:hover) and (pointer:fine){.btn:not(.p):hover,.btn.p:hover{background:none;opacity:1;color:var(--encre);text-decoration-color:currentColor}}
.btn:active{transform:none;color:var(--encre)}
.contact{padding-top:36px}
.hero{padding-bottom:24px}