/* Page unique : complète style.css (inchangé) pour enchaîner les 5 sections */
.site-header{position:sticky;top:0;z-index:20;background:#fffdfa}
.slide{position:relative;scroll-margin-top:96px}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-notice.is-error{color:#b3261e}
.form-notice.is-ok{color:#2e6b3a;font-size:14px}
.legal-line{margin:0;text-align:center;font-size:13px;padding:0 0 18px;background:rgba(255,253,250,.92)}
.legal-line a{color:#718095}

@media(min-width:1100px){
 body>main{display:block;min-height:0}
 .slide{display:flex;flex-direction:column;min-height:calc(100dvh - 96px - 96px)}
 #accueil{min-height:calc(100dvh - 96px)}
}
@media(min-width:1100px) and (max-height:900px){
 .slide{min-height:calc(100dvh - 86px - 83px);scroll-margin-top:86px}
 #accueil{min-height:calc(100dvh - 86px)}
}
@media(max-width:800px){
 .site-header{position:relative}
 .slide{scroll-margin-top:0}
}
@media(max-width:480px){
 .hero-actions{flex-wrap:wrap;gap:12px}
}

/* Pages secondaires (mentions légales, 404) */
.legal-page{padding:48px 0 64px}
.legal-page .shell{max-width:900px}
.legal-page h1{font-size:48px;margin-bottom:24px}
.legal-page h2{font-size:28px;margin:34px 0 10px}
.legal-page p{font-size:18px;line-height:1.5;margin-bottom:12px}
.legal-page mark{background:#fff3cd;color:inherit}

/* Qui suis-je : le texte s'arrête avant la photo */
@media(min-width:801px){
 .profile-section .profile-portrait{width:min(42vw,640px)!important}
 .profile-section .profile-copy{width:auto}
}
@media(min-width:1251px){
 .profile-section .profile-copy{max-width:calc(100vw - min(42vw,640px) - (100vw - min(1440px,100vw - 120px))/2 - 34px)}
}
@media(min-width:801px) and (max-width:1250px){
 .profile-section .profile-copy{max-width:calc(58vw - 35px - 34px)}
}

/* Formulaire : bouton sous le message, aligné à droite */
.form-end{margin-top:12px;align-items:center;gap:16px}
.form-end small{align-self:center}
.form-end .pill{min-width:0;font-size:17px;padding:12px 30px}
@media(min-width:1100px) and (max-height:900px){
 .form-end{margin-top:8px}
 .form-end .pill{padding:10px 26px;font-size:16px}
}

/* Animations au défilement : activées par anim-init.js, absentes si l'utilisateur réduit les animations */
.navigation a{transition:color .3s ease,border-color .3s ease}
.pill{transition:transform .25s ease,box-shadow .25s ease,filter .25s ease}
.pill:hover{transform:translateY(-2px);box-shadow:0 8px 18px -10px rgba(197,108,0,.55)}
.anim .rv{transition:opacity .9s cubic-bezier(.2,.65,.25,1),transform .9s cubic-bezier(.2,.65,.25,1);transition-delay:var(--d,0ms)}
.anim .rv:not(.is-in){opacity:0;transform:translate3d(0,30px,0)}
.anim .rv.rv-zoom:not(.is-in){transform:scale(.94) translate3d(0,16px,0)}
.anim .rv.rv-side:not(.is-in){transform:translate3d(40px,0,0)}
.anim .rv-art{transition:opacity 1.6s ease;transition-delay:var(--d,0ms)}
.anim .rv-art:not(.is-in){opacity:0!important}
.anim .phase:not(:last-child):after{transition:opacity .6s ease,transform .6s ease;transition-delay:calc(var(--d,0ms) + 450ms)}
.anim .phase:not(.is-in):not(:last-child):after{opacity:0;transform:translateX(-14px)}
.anim .number:after{transition:width .8s ease;transition-delay:calc(var(--d,0ms) + 300ms)}
.anim .rv:not(.is-in) .number:after{width:0}

@supports (animation-timeline: view()){
 .anim .domaines-art,.anim .processus-art,.anim .contact-art{animation:jfc-drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
 .anim .profile-section .profile-portrait{animation:jfc-drift-soft linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
 .anim .home-art{animation:jfc-hero-out linear both;animation-timeline:scroll(root);animation-range:0px 900px}
}
@keyframes jfc-drift{from{translate:0 -28px}to{translate:0 28px}}
@keyframes jfc-drift-soft{from{translate:0 -14px}to{translate:0 14px}}
@keyframes jfc-hero-out{to{translate:0 36px;scale:1.08}}

@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .pill:hover{transform:none}
}

/* Qui suis-je : sur tablette et mobile, la section suit la longueur du texte (il était coupé à 650 px) */
@media(max-width:1099px){
 .profile-section{max-height:none!important;height:auto!important}
}