:root{--bg:#4a2723;--bg2:#3b1d1a;--terra:#a46750;--card:#8f523c;--sand:#e6dcd1;--peach:#e8a98a;--wine:#5a1010;--ink:#f6efe8;color-scheme:dark;
--display:"Bowlby One","Arial Black",Impact,sans-serif;--mono:"Space Mono",ui-monospace,Menlo,Consolas,monospace;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 68px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.7 var(--mono);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg2);z-index:60}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--peach);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.02;margin:0}
h2{font-size:clamp(2.2rem,6vw,4.2rem);margin-bottom:2.4rem}
h2 em{font-style:normal;color:var(--peach)}
p{max-width:64ch}
.wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}
section{padding:clamp(4rem,9vw,7rem) 0;position:relative}
main,footer{position:relative;z-index:1}
.skip{position:absolute;left:-999px;top:0;background:var(--peach);color:var(--wine);padding:.6rem 1rem;z-index:100}
.skip:focus{left:0}

/* fond animé */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg::after{content:"";position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.bg i{position:absolute;display:block;border-radius:50%}
.bg .c1,.bg .c2,.bg .c3{background:var(--terra);opacity:.16}
.bg .c4,.bg .c5,.bg .c6{border:3px solid var(--peach);opacity:.2}
.bg .c1{width:340px;height:340px;left:-90px;top:12%;animation:dr1 26s ease-in-out infinite}
.bg .c2{width:200px;height:200px;right:6%;top:55%;animation:dr2 22s ease-in-out infinite}
.bg .c3{width:120px;height:120px;left:42%;bottom:-30px;animation:dr3 18s ease-in-out infinite}
.bg .c4{width:260px;height:260px;right:-70px;top:4%;border-style:dashed;animation:spin 40s linear infinite}
.bg .c5{width:150px;height:150px;left:8%;bottom:14%;animation:dr2 24s ease-in-out infinite reverse}
.bg .c6{width:70px;height:70px;left:60%;top:28%;animation:dr1 16s ease-in-out infinite reverse}
.bg .d1,.bg .d2{width:220px;height:220px;opacity:.26;background:radial-gradient(circle,var(--ink) 2.5px,transparent 3px) 0 0/22px 22px;border-radius:0}
.bg .d1{left:3%;top:3%;animation:dr3 30s ease-in-out infinite}
.bg .d2{right:4%;bottom:6%;animation:dr1 34s ease-in-out infinite reverse}
@keyframes dr1{50%{transform:translate(60px,-70px) scale(1.08)}}
@keyframes dr2{50%{transform:translate(-70px,50px) rotate(20deg)}}
@keyframes dr3{50%{transform:translate(40px,-50px)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--bg2);border-bottom:1px solid #ffffff14}
header::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:3px;background:var(--peach);transform-origin:left;transform:scaleX(var(--p,0))}
nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:62px}
.logo{font-family:var(--display);text-decoration:none;font-size:1.15rem}
nav ul{display:flex;gap:1.2rem;list-style:none;margin:0;padding:0}
nav ul a{text-decoration:none;font-size:.82rem;opacity:.8;padding:.3rem 0;border-bottom:2px solid transparent;transition:.2s}
nav ul a:hover,nav ul a.on{border-color:var(--peach);opacity:1;color:var(--peach)}
.burger{display:none;width:46px;height:46px;margin-right:-8px;padding:0;background:none;border:0;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:6px;color:var(--ink)}
.burger span{display:block;width:26px;height:3px;border-radius:3px;background:currentColor;transition:transform .3s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
@media(max-width:960px){
.burger{display:flex}
nav ul{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--bg2);padding:.5rem 1.25rem 1.2rem;border-bottom:2px solid var(--terra)}
nav ul.open{display:flex;animation:drop .3s ease both}
nav ul a{display:block;font-size:1.05rem;padding:.8rem 0;border-bottom:1px solid #ffffff14;opacity:1}
}
@keyframes drop{from{opacity:0;transform:translateY(-10px)}}

/* boutons */
.btn{display:inline-block;padding:.85rem 1.5rem;border-radius:14px;background:var(--peach);color:var(--wine);font-weight:700;text-decoration:none;border:1.5px solid var(--peach);font-family:var(--mono);font-size:1rem;cursor:pointer;transition:transform .2s,background .2s,color .2s}
.btn:hover{transform:translateY(-3px) rotate(-1deg);background:var(--sand)}
.btn.alt{background:transparent;color:var(--ink);border-color:var(--terra)}
.btn.alt:hover{background:var(--terra);color:var(--ink)}

/* hero */
.hero{min-height:calc(100svh - 62px);display:grid;align-items:center;padding:3rem 0 4rem;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:2.5rem;align-items:center}
.tag{display:inline-block;margin-bottom:1.3rem;padding:.4rem 1rem;border:1.5px solid var(--peach);border-radius:22px;color:var(--peach);font-size:.88rem}
.tag b{color:var(--ink)}
.hero h1{font-size:clamp(3rem,15vw,6rem);margin-bottom:1.3rem}
.hero h1 span{display:block;animation:up .9s cubic-bezier(.2,.8,.2,1) both}
.hero h1 span+span{color:var(--sand);animation-delay:.16s}
@media(min-width:961px){.hero h1{font-size:min(7.2rem,8.6vw)}}
@keyframes up{from{opacity:0;transform:translateY(60px) rotate(-2deg)}}
.role{font-size:1.1rem;margin:0 0 .9rem;animation:up .9s .35s both}
.rot{display:inline-block;min-width:10ch;color:var(--wine);background:var(--peach);padding:0 .5rem;border-radius:6px;font-weight:700;transition:opacity .25s,transform .25s}
.rot.out{opacity:0;transform:translateY(8px)}
.lead{color:var(--sand);margin:0;animation:up .9s .45s both}
.cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem;animation:up .9s .6s both}
.portrait{justify-self:center;width:min(310px,80%);position:relative;animation:pop 1s .3s cubic-bezier(.2,.9,.3,1.2) both}
.polaroid{margin:0;background:#fbf7f3;padding:14px 14px 64px;border-radius:6px;transform:rotate(3deg);box-shadow:0 26px 50px #0007;transition:transform .5s}
.polaroid:hover{transform:rotate(-1deg) scale(1.03)}
.polaroid img{width:100%;aspect-ratio:1/1.05;object-fit:cover;object-position:center top;border-radius:2px}
.polaroid::before{content:"";position:absolute;top:-28px;left:34px;width:26px;height:68px;border:3px solid var(--peach);border-radius:20px;transform:rotate(14deg)}
.tape{position:absolute;top:-12px;right:22px;width:90px;height:28px;background:#e8a98a99;transform:rotate(8deg);z-index:2}
.sticker{position:absolute;right:-34px;bottom:-30px;width:128px;height:128px;z-index:3;animation:turn 22s linear infinite}
.sticker text{font-family:var(--mono);font-weight:700;font-size:10.5px;fill:var(--wine)}
.sticker circle{fill:var(--peach)}
.sticker .mid{font-family:var(--display);font-size:15px;animation:none}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes pop{from{opacity:0;transform:rotate(-12deg) scale(.7)}}
@media(max-width:960px){.hero .wrap{grid-template-columns:1fr}.portrait{order:-1;width:min(230px,58%);margin-bottom:1rem}.sticker{width:96px;height:96px;right:-26px;bottom:-22px}}

/* rubans */
.strips{background:var(--peach);color:var(--wine);font-family:var(--display);font-size:1.15rem;white-space:nowrap;overflow:hidden;position:relative;z-index:1;transform:rotate(-1deg);margin:-.5rem -1rem}
.strips div{padding:.8rem 0;overflow:hidden}
.strips div+div{background:var(--wine);color:var(--peach)}
.strips .tr{display:inline-block;animation:slide 40s linear infinite}
.strips div+div .tr{animation-direction:reverse}
.strips span{display:inline-block;padding:0 1.4rem}
@keyframes slide{to{transform:translateX(-50%)}}
.strips i{font-style:normal;opacity:.6}

/* chiffres */
.stats{padding:3.5rem 0 1rem}
.stats .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;text-align:center}
.stat b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(3rem,9vw,5.5rem);line-height:1;color:var(--peach)}
.stat span{font-size:.85rem;color:var(--sand)}
@media(max-width:640px){.stats .wrap{grid-template-columns:1fr}}

/* à propos */
.about{background:#3b1d1ad9}
.cols{display:grid;grid-template-columns:1.2fr 1fr;gap:1.6rem}
.note{background:var(--sand);color:var(--wine);padding:1.8rem;border-radius:22px 22px 22px 4px}
.note strong{color:#3b1d1a}
.lead2{font-size:1.15rem;color:var(--sand)}
.lead2 mark{background:none;color:var(--peach)}
@media(max-width:900px){.cols{grid-template-columns:1fr}}

/* parcours */
.tl{list-style:none;margin:0;padding:0 0 0 2.4rem;position:relative;max-width:780px}
.tl::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:3px;background:linear-gradient(var(--peach),var(--terra));border-radius:3px}
.tl li{position:relative;padding:0 0 2.2rem}
.tl li::before{content:"";position:absolute;left:-2.4rem;top:.2rem;width:21px;height:21px;border-radius:50%;background:var(--peach);border:4px solid var(--bg)}
.tl li.next::before{background:var(--bg);border-color:var(--peach);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 9px #e8a98a40}}
.tl small{display:block;color:var(--peach);font-weight:700;font-size:.82rem;margin-bottom:.3rem}
.tl h3{font-size:1.3rem;margin-bottom:.4rem}
.tl p{margin:0;color:var(--sand);font-size:.95rem}

/* dossiers */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2.4rem 1.4rem}
.folder,.v{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0));transition:transform .25s,box-shadow .3s;will-change:transform}
.folder:hover,.v:hover{--ty:-8px}
.folder{position:relative;margin-top:30px;border-radius:0 26px 26px 26px;padding:1.7rem 1.6rem 1.6rem;background:var(--card);color:var(--ink)}
.folder:hover{box-shadow:0 20px 36px #0006}
.tab{position:absolute;left:0;bottom:100%;background:inherit;padding:.45rem 1.1rem;border-radius:14px 14px 0 0;font-size:.78rem;font-weight:700}
.folder.light{background:var(--sand);color:var(--wine)}
.folder h3{font-size:1.4rem;margin-bottom:.7rem}
.folder .m{margin:0 0 .8rem;font-size:.8rem;opacity:.85}
.folder ul{margin:0;padding-left:1.1rem;font-size:.9rem}
.folder li{margin:.3rem 0}
.exp{background:#3b1d1ad9}

/* valeurs */
.vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.3rem;counter-reset:v}
.v{counter-increment:v;background:var(--ink);color:var(--wine);border-radius:26px;padding:1.6rem;position:relative}
.v:nth-child(even){background:var(--sand)}
.v::after{content:counter(v,decimal-leading-zero);position:absolute;top:1.3rem;right:1.4rem;font-family:var(--display);font-size:1rem;color:var(--terra)}
.v h3{font-size:1.45rem;margin-bottom:.8rem;color:var(--bg)}
.v p{margin:0;font-size:.92rem}
.vals{background:#3b1d1ad9}

/* démarche */
.step{display:grid;grid-template-columns:minmax(170px,.4fr) 1fr;gap:.8rem 2rem;padding:1.6rem 1rem;border-top:1.5px solid #ffffff26;transition:background .25s}
.step:hover{background:#ffffff0d}
.step h3{font-size:1.3rem;color:var(--peach)}
.step p{margin:0;color:var(--sand)}
@media(max-width:700px){.step{grid-template-columns:1fr}}

/* contact */
.contact{background:var(--card);text-align:center;overflow:hidden}
.contact h2{font-size:clamp(2.4rem,8vw,5.6rem);max-width:14ch;margin-inline:auto}
.contact p{margin:0 auto 1.4rem;color:#fff}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin:0 0 1.6rem;padding:0}
.chips li{padding:.4rem 1rem;border:1.5px solid var(--sand);border-radius:99px;font-size:.88rem}
.mailrow{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;align-items:center}
.mail{display:inline-block;max-width:100%;overflow-wrap:anywhere;font-family:var(--display);font-size:clamp(1rem,3.2vw,1.7rem);color:var(--wine);background:var(--sand);padding:1rem 1.5rem;border-radius:16px;text-decoration:none;transition:transform .25s}
.mail:hover{transform:scale(1.04) rotate(-1deg)}
.copy{background:transparent;color:#fff;border-color:var(--sand);padding:.8rem 1.1rem;font-size:.9rem}
.copy:hover{background:var(--sand);color:var(--wine)}
.tel{margin-top:1.4rem!important}
.tel a{font-weight:700}
.cta2{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:1.4rem}
.contact .btn{background:var(--peach);color:var(--wine)}
.contact .btn.alt{background:transparent;color:#fff;border-color:var(--sand)}
.contact .btn.alt:hover{background:var(--sand);color:var(--wine)}
footer{background:var(--bg2);text-align:center;padding:1.5rem;font-size:.8rem;color:var(--sand)}
.top{position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:40;width:48px;height:48px;border-radius:50%;border:0;background:var(--peach);color:var(--wine);font-size:1.3rem;font-weight:700;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(12px);transition:.3s}
.top.show{opacity:1;pointer-events:auto;transform:none}

/* révélation */
.r{opacity:0;translate:0 26px;transition:opacity .7s,translate .7s}
.r.in{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}.r{opacity:1;translate:none}}