/* Extensions de mise en page : les couleurs, typographies et textures viennent du pack original. */
.skip-link { position: fixed; z-index: 80; top: 8px; left: 8px; padding: 9px 14px; transform: translateY(-150%); background: var(--b1); color: #fff; font-weight: 700; }
.skip-link:focus { transform: translateY(0); }
.brand-name { filter: url(#rough2); }
.brandline p { font-family: var(--fb), cursive; }
.tabs button { white-space: nowrap; }
.portfolio-pane { padding-top: 26px; }
#app { min-height: 100svh; display: flex; flex-direction: column; }
.home-screen { max-width: none; width: 100%; min-height: 0; margin: 0; padding: 0; }
#main.home-screen { display: flex; flex: 1; flex-direction: column; min-height: 0; }
#main.home-screen #tabpanel-accueil { flex: 1; display: flex; flex-direction: column; padding: 0; }
.portfolio-hero { position: relative; min-height: min(730px,calc(100svh - 166px)); display: flex; flex: 1; flex-direction: column; justify-content: center; overflow: hidden; isolation: isolate; border: 0; background: #070c22; color: #f5f3ff; }
#main.home-screen .portfolio-hero { min-height: 0; }
.portfolio-hero > .bgk { z-index: -4; }
.portfolio-hero > .ht { z-index: -3; opacity: .56; }
.portfolio-hero > .floor { z-index: -2; }
.hero-frame { position: absolute; z-index: -1; inset: 18px; border: 2px dashed rgb(245 243 255 / 45%); pointer-events: none; }
#main.home-screen .hero-frame { display: none; }
.hero-content { position: relative; z-index: 2; width: min(1330px,100%); margin: auto; padding: clamp(38px,6vw,88px) clamp(26px,7vw,102px) 94px; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(20px,5vw,75px); }
.hero-copy { min-width: 0; }
.portfolio-kicker { display: flex; align-items: center; gap: 11px; color: #f5f3ff; font-size: 13px; letter-spacing: .12em; }
.portfolio-kicker i { color: var(--b2); font-style: normal; }
.live-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--b1); box-shadow: 0 0 14px var(--b1); animation: pulse 1.4s ease-in-out infinite; }
.hero-note { margin: 31px 0 17px; color: #c5d4f7; font-size: 24px; }
.hero-title { width: fit-content; margin: 0; color: #f5f3ff; font-size: clamp(74px,10vw,139px); line-height: .79; letter-spacing: .02em; filter: url(#rough2) drop-shadow(7px 7px 0 var(--b1)); transform: rotate(-2deg); }
.hero-title span:nth-child(1) { display: inline-block; }
.hero-title span:nth-child(2) { display: inline-block; margin: 17px 0 0 .58em; color: var(--b2); }
.hero-period { color: #f5f3ff; }
.hero-rule { width: min(570px,100%); height: 26px; margin-top: 22px; }
.hero-rule svg { width: 100%; height: 100%; overflow: visible; }
.hero-role { margin: 4px 0 13px; color: #eaf0ff; font-size: 28px; }
.hero-role span { color: var(--b2); font-size: 35px; }
.hero-role strong { color: #f5f3ff; font-family: var(--fh),Impact,sans-serif; font-weight: var(--fhw); }
.hero-intro { max-width: 470px; margin: 0; color: #d4def4; font-size: 18px; line-height: 1.5; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 19px; margin-top: 25px; }
.cta-paper { display: inline-flex; align-items: center; gap: 20px; padding: 9px 15px 7px; border: 0; background: var(--b1); color: #fff; box-shadow: 6px 7px 0 rgb(0 0 0 / 44%); cursor: pointer; font-size: 17px; transform: rotate(-2deg); transition: transform .2s,box-shadow .2s; }
.cta-paper:hover { box-shadow: 3px 4px 0 rgb(0 0 0 / 44%); transform: rotate(0) translate(2px,2px); }
.cta-paper i { font: 22px var(--fb),cursive; }
.cta-link { border: 0; border-bottom: 2px dashed var(--b2); padding: 5px 0; background: transparent; color: #f5f3ff; cursor: pointer; font-size: 22px; }
.cta-link span { padding-left: 6px; color: var(--b2); }
.hero-footnote { margin: 21px 0 0; color: #b4c6ef; font-size: 20px; }
.hero-footnote span { color: var(--b2); }
.hero-art { position: relative; min-height: clamp(320px,37vw,485px); display: grid; place-items: center; perspective: 900px; }
.hero-orbit { position: absolute; width: 82%; aspect-ratio: 1.3; border: 2px dashed rgb(31 107 255 / 68%); border-radius: 50%; transform: rotate(-28deg); animation: sway 8s ease-in-out infinite; }
.orbit-b { width: 101%; aspect-ratio: 1.75; border-color: rgb(234 240 255 / 45%); transform: rotate(23deg); animation-direction: reverse; }
.hero-monogram { position: relative; z-index: 2; width: 200px; height: 200px; display: grid; place-items: center; border: 0; background: var(--b1); color: #fff; box-shadow: 10px 12px 0 rgb(0 0 0 / 46%); font: 78px var(--fh),Impact,sans-serif; transform: rotate(-7deg); animation: bob 3.6s ease-in-out infinite alternate; }
.hero-monogram::before { background: #1f6bff; }
.hero-art-caption { position: absolute; z-index: 3; right: -3%; bottom: 11%; padding: 13px 20px; background: #f2f5ff; box-shadow: 7px 8px 0 rgb(0 0 0 / 38%); font-size: 15px; line-height: 1.45; transform: rotate(4deg); }
.hero-art-caption span { color: #1f6bff; }
.hero-doodle { position: absolute; z-index: 4; top: 5%; right: 1%; width: 135px; overflow: visible; filter: url(#rough2); }
.hero-art-label { position: absolute; left: -5%; bottom: 5%; color: #d4def4; font: 13px var(--fh),Impact,sans-serif; letter-spacing: .12em; transform: rotate(-5deg); }
.hero-art-label i { color: var(--b2); font-style: normal; }
.hero-cube { position: absolute; top: 14%; left: -2%; width: 63px; height: 63px; transform-style: preserve-3d; animation: cspin 16s linear infinite; }
.hero-cube i { position: absolute; inset: 0; border: 2px dashed #f5f3ff; background: repeating-linear-gradient(120deg,rgb(31 107 255 / 48%) 0 6px,transparent 6px 14px); box-shadow: inset 0 0 18px rgb(31 107 255 / 75%); }
.hero-cube i:nth-child(2) { transform: rotateY(60deg); }
.hero-cube i:nth-child(3) { transform: rotateY(-60deg); }
.hero-deco { position: absolute; z-index: 2; color: var(--b2); filter: url(#rough2); }
.hero-deco-one { top: 21%; right: 8%; font-size: 52px; transform: rotate(-14deg); }
.hero-deco-two { bottom: 23%; left: 7%; font-size: 37px; animation: wob 2.6s ease-in-out infinite; }
.hero-status { position: absolute; right: clamp(22px,5vw,74px); bottom: 26px; left: clamp(22px,5vw,74px); display: flex; justify-content: space-between; gap: 10px; color: #b9c8e7; font: 11px var(--fh),Impact,sans-serif; letter-spacing: .13em; }
.hero-status span:nth-child(2) { color: var(--b2); }
.hero-star { right: 8%; bottom: 15%; color: #f5f3ff; font-size: 50px; animation-delay: -6s; }
.home-strip { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 19px 4px 5px; }
.home-strip .lead { margin: 0; }
.portfolio-next { flex: none; }

.section-intro { margin: 4px 0 25px; }
.section-kicker { margin: 0 0 7px; color: var(--b1); font-size: 13px; letter-spacing: .12em; }
.section-kicker i { color: var(--mut); font-style: normal; }
.section-title { margin: 0 0 10px; color: var(--fg); font-size: clamp(33px,5.5vw,67px); line-height: 1; filter: url(#rough2); }
.section-title span { color: var(--b1); }
.section-intro .lead { max-width: 72ch; }
.about-layout { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(25px,5vw,65px); }
.about-paper { min-height: 420px; padding: clamp(32px,5vw,62px); background: #f2f5ff; box-shadow: 9px 12px 0 rgb(0 0 0 / 27%); }
.about-paper::before { background: repeating-linear-gradient(0deg,#f2f5ff 0 37px,#dfe7f4 38px,#f2f5ff 39px); }
.about-greeting { margin: 0 0 17px; color: #334363; font-size: 27px; }
.about-greeting span { color: var(--b1); }
.about-heading { margin: 0; color: #0a0d1c; font-size: clamp(31px,4vw,49px); line-height: 1.1; filter: url(#rough2); }
.about-copy { max-width: 68ch; margin: 21px 0; color: #17203b; font-size: 17px; line-height: 1.75; white-space: pre-line; }
.about-signature { margin: 15px 18px 0 0; color: #1f6bff; text-align: right; font-size: 34px; transform: rotate(-6deg); }
.about-stamp { position: absolute; right: 22px; bottom: 15px; color: #52608a; font-size: 10px; letter-spacing: .1em; }
.about-stamp span { color: var(--b1); }
.about-side { position: relative; display: grid; gap: 27px; padding: 10px; }
.about-illustration { position: relative; padding: 14px; background: #fff; box-shadow: 7px 9px 0 rgb(0 0 0 / 34%); transform: rotate(2deg); }
.about-illustration svg { display: block; width: 100%; height: auto; filter: url(#rough2); }
.about-photo-label { display: block; padding-top: 7px; color: #25304e; text-align: center; font-size: 20px; }
.about-note { max-width: 330px; min-height: 130px; justify-self: end; padding: 20px 28px; background: #f2f5ff; box-shadow: 6px 8px 0 rgb(0 0 0 / 30%); transform: rotate(-3deg); }
.about-note::before { background: #f2f5ff; }
.note-title { display: block; color: var(--b1); font-size: 14px; }
.about-note p { max-width: 38ch; margin: 5px 0; color: #111a32; font: 19px/1.4 var(--fb),cursive; }
.note-star { position: absolute; right: 17px; bottom: 9px; color: var(--b1); font-size: 24px; }

.skill-grid { grid-template-columns: repeat(auto-fill,minmax(min(100%,260px),1fr)); align-items: stretch; }
.skill-card { position: relative; min-height: 220px; padding: 20px; border: 2px dashed var(--line); background: var(--card); box-shadow: 5px 6px 0 rgb(0 0 0 / 15%); isolation: isolate; transition: transform .25s,box-shadow .25s; }
.skill-card::before { background: var(--card); }
.skill-card:nth-child(3n+1) { transform: rotate(-.8deg); }
.skill-card:nth-child(3n+2) { transform: rotate(.7deg); }
.skill-card:nth-child(3n):hover,.skill-card:nth-child(3n):focus-within { transform: translateY(-5px) rotate(0); }
.skill-card:hover,.skill-card:focus-within { z-index: 2; box-shadow: 9px 12px 0 rgb(0 0 0 / 20%); }
.skill-card .tape { z-index: 2; width: 74px; height: 24px; background: color-mix(in srgb,var(--b1) 48%,transparent); }
.skill-symbol { width: 66px; height: 66px; display: grid; place-items: center; margin: 9px 0 12px; border: 2px dashed var(--b1); border-radius: 50%; color: var(--b1); font: 22px var(--fh),Impact,sans-serif; filter: url(#rough2); }
.skill-card h3 { margin: 0; color: var(--fg); font: 23px var(--fh),Impact,sans-serif; font-weight: var(--fhw); }
.skill-category { margin: 3px 0 9px; color: var(--b1); font: 11px var(--fh),Impact,sans-serif; letter-spacing: .1em; }
.skill-description { margin: 0; color: var(--mut); font-size: 15px; line-height: 1.45; }
.skill-level { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; color: var(--fg); font-size: 13px; font-weight: 700; }
.skill-level i { color: var(--b1); font-style: normal; }
.skill-foot { position: relative; display: flex; align-items: center; gap: 17px; max-width: 710px; margin: 31px auto 0; padding: 17px 26px; background: #f2f5ff; box-shadow: 5px 7px 0 rgb(0 0 0 / 18%); }
.skill-foot::before { background: #f2f5ff; }
.skill-foot-icon { color: var(--b1); font-size: 30px; }
.skill-foot p { margin: 0; color: #17203b; font-size: 19px; }

.project-grid { grid-template-columns: repeat(auto-fill,minmax(min(100%,410px),1fr)); align-items: stretch; }
.project-card { position: relative; overflow: visible; transition: transform .25s,box-shadow .25s; }
.project-card:nth-child(odd) { transform: rotate(-.45deg); }
.project-card:nth-child(even) { transform: rotate(.55deg); }
.project-card:hover,.project-card:focus-within { z-index: 2; transform: translateY(-5px) rotate(0); box-shadow: 8px 11px 0 rgb(0 0 0 / 19%); }
.project-card header { min-height: 34px; }
.project-card h3 { font-family: var(--fh),Impact,sans-serif; font-weight: var(--fhw); }
.project-visual { position: relative; min-height: 220px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(138deg,var(--project-a),var(--project-b)); border: 1px solid var(--line); isolation: isolate; }
.project-visual::before { position: absolute; inset: 11px; content: ""; border: 2px dashed rgb(245 243 255 / 66%); }
.project-visual::after { position: absolute; inset: 0; content: ""; background: repeating-linear-gradient(0deg,transparent 0 37px,rgb(245 243 255 / 9%) 38px),repeating-linear-gradient(90deg,transparent 0 49px,rgb(245 243 255 / 7%) 50px); }
.project-number { position: relative; z-index: 1; color: #f5f3ff; font: clamp(62px,10vw,108px) var(--fh),Impact,sans-serif; filter: url(#rough2) drop-shadow(6px 6px 0 rgb(0 0 0 / 45%)); transform: rotate(-7deg); animation: jelly 3s infinite; }
.project-visual-label { position: absolute; z-index: 2; right: 22px; bottom: 17px; color: #f5f3ff; font: 12px var(--fh),Impact,sans-serif; letter-spacing: .12em; }
.project-status { margin: 3px 0 0; color: var(--b1); font: 12px var(--fh),Impact,sans-serif; }
.project-description { margin: 0; color: var(--mut); font-size: 15px; line-height: 1.5; }
.project-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 1px 0 4px; padding: 0; list-style: none; }
.project-tags li { padding: 3px 9px; border: 1px dashed var(--line); background: var(--bg); color: var(--mut); font-size: 13px; }
.project-card footer { margin-top: auto; }
.portfolio-disclaimer { margin-top: 17px; font-size: 13px; }

.journey { position: relative; display: grid; gap: 18px; padding: 12px 0 12px 43px; }
.journey::before { position: absolute; top: 0; bottom: 0; left: 18px; width: 4px; content: ""; background: repeating-linear-gradient(0deg,var(--b1) 0 12px,transparent 12px 22px); }
.journey-item { position: relative; display: grid; grid-template-columns: 85px 1fr; align-items: start; gap: 12px; padding: 17px 20px; border: 2px dashed var(--line); background: var(--card); box-shadow: 5px 6px 0 rgb(0 0 0 / 13%); }
.journey-item::before { position: absolute; top: 25px; left: -36px; width: 16px; height: 16px; border: 3px solid var(--bg); border-radius: 50%; background: var(--b1); box-shadow: 0 0 0 2px var(--b1); content: ""; }
.journey-step { padding-top: 2px; color: var(--b1); font: 20px var(--fh),Impact,sans-serif; }
.journey-item h3 { margin: 0 0 5px; color: var(--fg); font: 23px var(--fh),Impact,sans-serif; }
.journey-item p { margin: 0; color: var(--mut); font-size: 15px; line-height: 1.5; }
.journey-placeholder { position: relative; max-width: 570px; margin: 24px 0 0 auto; padding: 22px 28px; background: #f2f5ff; box-shadow: 6px 8px 0 rgb(0 0 0 / 18%); transform: rotate(1deg); }
.journey-placeholder::before { background: #f2f5ff; }
.journey-placeholder>span { color: var(--b1); font-size: 14px; }
.journey-placeholder p { margin: 6px 0 0; color: #17203b; font-size: 19px; line-height: 1.45; }

.contact-layout { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(25px,6vw,85px); }
.contact-form { gap: 10px; padding: clamp(20px,4vw,34px); }
.contact-form h3 { margin: 0; color: var(--fg); font-size: 29px; }
.contact-form .note { margin: 0 0 6px; }
.contact-form label { margin-top: 7px; color: var(--fg); font-size: 15px; font-weight: 700; }
.contact-form input,.contact-form textarea { width: 100%; padding: 10px 12px; border: 2px dashed var(--line); background: var(--bg); color: var(--fg); font: inherit; resize: vertical; }
.contact-form input:focus,.contact-form textarea:focus { border-color: var(--b1); outline: 3px solid var(--b2); outline-offset: 2px; }
.send-button { align-self: flex-start; margin-top: 9px; background: var(--card); }
.send-button span { padding-left: 10px; color: var(--b1); }
.form-status { min-height: 1.3em; margin: 0; color: var(--mut); font-size: 14px; }
.contact-side { display: grid; justify-items: center; gap: 20px; padding: 15px; }
.contact-card { position: relative; width: min(390px,100%); min-height: 335px; padding: 40px 30px 28px; background: #f2f5ff; text-align: center; box-shadow: 9px 11px 0 rgb(0 0 0 / 30%); transform: rotate(2deg); }
.contact-card::before { background: #f2f5ff; }
.contact-mark { width: 96px; height: 96px; display: grid; place-items: center; margin: 0 auto 16px; border: 3px dashed var(--b1); border-radius: 50%; color: var(--b1); font-size: 34px; filter: url(#rough2); }
.contact-name { margin: 0; color: #0a0d1c; font-size: 23px; }
.contact-role { margin: 5px 0 18px; color: #344365; font-size: 21px; }
.social-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; }
.social-links a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px dashed #98a8cc; color: #173c8e; font-size: 14px; text-decoration: none; }
.social-links a:hover { border-color: var(--b1); background: #e2eaff; }
.social-icon { color: var(--b1); font: 14px var(--fh),Impact,sans-serif; }
.contact-doodle { margin: 0; color: var(--b1); font-size: 25px; transform: rotate(-6deg); }
.contact-doodle span { color: var(--mut); }

.portfolio-toast { position: fixed; z-index: 35; right: 20px; bottom: 20px; max-width: min(390px,calc(100% - 40px)); padding: 12px 17px; border-left: 7px solid var(--b1); background: var(--card); color: var(--fg); box-shadow: 5px 7px 0 rgb(0 0 0 / 25%); font-weight: 700; opacity: 0; translate: 35px 0; pointer-events: none; transition: opacity .25s,translate .25s; }
.portfolio-toast.is-visible { opacity: 1; translate: 0 0; }
.project-dialog { width: min(680px,calc(100% - 28px)); max-height: min(86vh,840px); padding: 0; border: 2px dashed var(--b1); background: var(--card); color: var(--fg); box-shadow: 9px 12px 0 rgb(0 0 0 / 45%); }
.project-dialog::backdrop { background: rgb(7 12 34 / 78%); }
.dialog-close { position: sticky; z-index: 2; top: 9px; float: right; width: 38px; height: 38px; margin: 9px 9px -47px 0; border: 2px dashed var(--line); background: var(--card); color: var(--fg); cursor: pointer; font-size: 25px; }
.dialog-content { padding: 24px; }
.dialog-visual { min-height: 190px; display: grid; place-items: center; background: linear-gradient(135deg,var(--project-a),var(--project-b)); border: 2px dashed var(--line); }
.dialog-visual span { color: #f5f3ff; font: 80px var(--fh),Impact,sans-serif; filter: url(#rough2); }
.dialog-content h2 { margin: 17px 0 9px; color: var(--fg); font: 31px var(--fh),Impact,sans-serif; }
.dialog-content p { color: var(--mut); line-height: 1.6; }
.dialog-content .note { font-size: 14px; }
.dialog-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.dialog-links a { color: var(--b1); font-weight: 700; text-underline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Nouveaux espaces : ils reprennent les papiers, traits et couleurs du thème source. */
.hero-mouse-mark { position: absolute; z-index: 5; top: 17%; left: 12%; width: 42px; height: 42px; display: grid; place-items: center; background: #f2f5ff; color: var(--b1); font-size: 27px; box-shadow: 4px 5px 0 rgb(0 0 0 / 35%); pointer-events: none; transition: translate .12s ease-out; }
.hero-hand-note { position: absolute; right: -3%; top: 17%; color: #f5f3ff; font-size: 21px; transform: rotate(7deg); }
.scroll-cue { position: absolute; z-index: 5; right: 0; bottom: 54px; left: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px; padding: 10px; color: #d4def4; text-align: center; }
.scroll-cue-doodle { color: var(--b1); font-size: 26px; animation: bob 1.5s ease-in-out infinite alternate; }
.skill-filters,.project-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.skill-filter,.project-filter { border-style: dashed; }
.skill-filter[aria-pressed="true"],.project-filter[aria-pressed="true"] { border-color: var(--b1); background: var(--b1); color: #fff; box-shadow: 3px 4px 0 rgb(0 0 0 / 20%); }
.skill-card { min-height: 230px; }
.skill-card .skill-category { width: fit-content; padding: 3px 7px; border: 1px dashed var(--b1); transform: rotate(-1deg); }
.skill-level { align-self: flex-start; }
.project-visual-image { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project-visual-image + .project-number { text-shadow: 4px 5px 0 rgb(0 0 0 / 55%); }
.project-filter-empty { grid-column: 1/-1; padding: 22px; border: 2px dashed var(--line); color: var(--mut); }
.project-status { width: fit-content; padding: 3px 7px; border: 1px dashed var(--b1); transform: rotate(-1deg); }
.project-card .project-note { align-self: flex-end; max-width: 240px; margin: -3px 4px 0; padding: 6px 10px; background: #f2f5ff; color: #17203b; font: 15px var(--fb),cursive; opacity: 0; transform: rotate(2deg) translateY(5px); transition: opacity .2s,transform .2s; }
.project-card:hover .project-note,.project-card:focus-within .project-note { opacity: 1; transform: rotate(2deg) translateY(0); }
.dialog-screenshots { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); gap: 10px; margin: 17px 0; }
.dialog-screenshots img { width: 100%; max-height: 280px; object-fit: cover; border: 2px dashed var(--line); box-shadow: 4px 5px 0 rgb(0 0 0 / 18%); }
.journey-step { min-width: 0; overflow-wrap: anywhere; }
.lab-stamp { width: fit-content; margin: 0 0 25px 14px; padding: 13px 24px; background: #f2f5ff; color: #17203b; box-shadow: 6px 7px 0 rgb(0 0 0 / 25%); transform: rotate(-2deg); }
.lab-stamp span { color: var(--b1); }
.placeholder-card { min-height: 190px; justify-content: center; background: var(--card); }
.placeholder-card .project-status { align-self: flex-start; }
.journey-date { color: var(--b1); font: 14px var(--fh),Impact,sans-serif; }
.journey-item .journey-step { display: grid; gap: 4px; }
.reading-progress { position: fixed; z-index: 30; top: 0; right: 0; left: 0; height: 5px; overflow: hidden; border-bottom: 1px dashed var(--line); background: var(--bg); }
.reading-progress span { display: block; width: 100%; height: 100%; background: var(--b1); transform: scaleX(0); transform-origin: left center; }
.page-tools { position: fixed; z-index: 25; right: max(14px,env(safe-area-inset-right)); bottom: max(14px,env(safe-area-inset-bottom)); display: flex; gap: 8px; }
.page-tools .tbtn { box-shadow: 4px 5px 0 rgb(0 0 0 / 22%); }
.secret-dialog { position: fixed; inset: 0; width: min(520px,calc(100% - 28px)); max-height: min(85vh,700px); margin: auto; padding: 0; overflow: visible; border: 2px dashed var(--b1); background: var(--card); color: var(--fg); box-shadow: 9px 12px 0 rgb(0 0 0 / 45%); }
.secret-dialog::backdrop { background: rgb(7 12 34 / 76%); }
.secret-content { min-height: 280px; padding: 48px 28px 35px; background: #f2f5ff; color: #17203b; }
.secret-content::before { background: #f2f5ff; }
.secret-content .section-title { margin-bottom: 14px; color: #0a0d1c; }
.secret-content > p:last-child { color: #17203b; font-size: 21px; line-height: 1.5; }
.secret-doodle { display: block; margin-bottom: 20px; color: var(--b1); font-size: 35px; animation: wob 2.5s ease-in-out infinite; }
.secret-burst { position: fixed; z-index: 2; top: 50%; left: 50%; color: var(--b1); font-size: 35px; pointer-events: none; animation: burst 1.4s ease-out both; }
.contact-form input[aria-invalid="true"],.contact-form textarea[aria-invalid="true"] { border-color: #b42318; }
.contact-form .form-error { color: #b42318; font-weight: 700; }
.about-note .note-secret { margin: 5px 0 0; font-size: 13px; opacity: .78; }
.social-unavailable { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px dashed #98a8cc; background: transparent; color: var(--mut); cursor: help; font: inherit; font-size: 14px; }
.social-unavailable:hover { border-color: var(--b1); color: var(--fg); }
.dialog-cover { width: 100%; max-height: 310px; object-fit: cover; }
.journey-item { display: block; padding: 0; }
.journey-summary { display: grid; grid-template-columns: 85px 1fr; align-items: start; gap: 12px; padding: 17px 20px; cursor: pointer; list-style: none; }
.journey-summary::-webkit-details-marker { display: none; }
.journey-summary h3 { margin: 0 0 5px; color: var(--fg); font: 23px var(--fh),Impact,sans-serif; }
.journey-hint { color: var(--mut); font-size: 14px; }
.journey-item > p { margin: 0; padding: 0 20px 18px 117px; color: var(--mut); line-height: 1.5; }
.journey-item[open] .journey-hint { color: var(--b1); }
.notebook-visual { position: relative; min-height: 145px; display: grid; place-items: center; overflow: hidden; border: 1px dashed var(--line); background: repeating-linear-gradient(0deg,var(--card) 0 28px,var(--line) 29px,var(--card) 30px); }
.notebook-visual span { color: var(--b1); font: 62px var(--fh),Impact,sans-serif; filter: url(#rough2); transform: rotate(-6deg); }
.notebook-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.skill-filter-empty { grid-column: 1/-1; padding: 20px; border: 2px dashed var(--line); }

@media (max-width: 650px) {
  .hero-hand-note { top: 9%; right: 1%; font-size: 16px; }
  .hero-mouse-mark { top: 14%; left: 4%; width: 34px; height: 34px; }
  .page-tools { right: 10px; bottom: 10px; }
  .page-tools .tbtn { padding: 5px 10px; font-size: 14px; }
  .journey-summary { grid-template-columns: 58px 1fr; gap: 7px; padding: 14px 12px; }
  .journey-summary h3 { font-size: 19px; }
  .journey-item > p { padding: 0 12px 15px 77px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mouse-mark,.scroll-cue-doodle,.project-card .project-note { transition: none; }
}

@media (max-width: 900px) {
  .hero-content { grid-template-columns: 1fr .75fr; gap: 20px; padding-right: 38px; padding-left: 38px; }
  .hero-title { font-size: clamp(68px,10vw,102px); }
  .hero-art-caption { right: -4%; font-size: 12px; }
  .about-layout,.contact-layout { grid-template-columns: 1fr 1fr; gap: 24px; }
  .about-paper { min-height: 460px; padding: 34px; }
  .contact-card { min-height: 300px; padding: 34px 20px 24px; }
}
@media (max-width: 650px) {
  main#main:not(.home-screen) { padding: 15px 12px 35px; }
  #main.home-screen { padding: 0; }
  .top-in { padding: 11px 13px 0; }
  .brandline { gap: 8px 13px; align-items: baseline; }
  .brandline h1 { font-size: 27px; }
  .brandline p { font-size: 15px; }
  nav.tabs { margin-top: 8px; }
  nav.tabs button { padding: 8px 12px; font-size: 16px; }
  .portfolio-pane { padding-top: 17px; }
  #main.home-screen #tabpanel-accueil { padding-top: 0; }
  #main.home-screen .portfolio-hero { min-height: max(790px,calc(100svh - 130px)); overflow: hidden; }
  .hero-content { grid-template-columns: 1fr; gap: 0; padding: 35px 25px 114px; }
  .portfolio-kicker { flex-wrap: wrap; gap: 7px; font-size: 10px; }
  .hero-note { margin: 23px 0 16px; font-size: 20px; }
  .hero-title { font-size: clamp(74px,17vw,112px); }
  .hero-role { margin-top: 0; font-size: 23px; }
  .hero-intro { max-width: 470px; font-size: 16px; }
  .hero-actions { gap: 16px; margin-top: 18px; }
  .hero-art { min-height: 260px; width: min(370px,92%); margin: 3px auto 0; }
  .hero-monogram { width: 132px; height: 132px; font-size: 54px; }
  .hero-art-caption { right: 0; bottom: 4%; padding: 9px 13px; font-size: 11px; }
  .hero-doodle { width: 95px; }
  .hero-cube { width: 43px; height: 43px; }
  .hero-art-label { left: 0; bottom: 0; font-size: 10px; }
  .hero-deco-one { right: 4%; font-size: 37px; }
  .hero-deco-two { bottom: 13%; left: 3%; font-size: 29px; }
  .hero-status { right: 14px; bottom: 16px; left: 14px; gap: 7px; font-size: 8px; }
  .scroll-cue { bottom: 45px; gap: 5px 9px; font-size: 14px; }
  .scroll-cue .tbtn { padding: 4px 9px; font-size: 14px; }
  .home-strip { align-items: flex-start; flex-direction: column; padding-top: 14px; }
  .home-strip .lead { font-size: 16px; }
  .section-title { font-size: clamp(31px,8vw,48px); }
  .about-layout,.contact-layout { grid-template-columns: 1fr; gap: 22px; }
  .about-paper { min-height: auto; padding: 34px 25px 50px; }
  .about-heading { font-size: 34px; }
  .about-copy { font-size: 16px; }
  .about-side { padding: 8px 13px; }
  .about-illustration { max-width: 440px; width: 100%; margin: auto; }
  .about-note { width: min(290px,88%); min-height: 110px; justify-self: end; }
  .about-note p { font-size: 17px; }
  .skill-grid { grid-template-columns: repeat(auto-fill,minmax(min(100%,220px),1fr)); gap: 15px; }
  .skill-card { min-height: 205px; padding: 17px; }
  .project-grid { grid-template-columns: 1fr; gap: 16px; }
  .project-visual { min-height: 185px; }
  .journey { padding-left: 35px; }
  .journey::before { left: 13px; }
  .journey-item { grid-template-columns: 58px 1fr; gap: 7px; padding: 14px 12px; }
  .journey-item::before { left: -29px; }
  .journey-step { font-size: 17px; }
  .journey-item h3 { font-size: 19px; }
  .journey-item p { font-size: 14px; }
  .journey-placeholder { padding: 18px 22px; }
  .contact-form { padding: 19px 16px; }
  .contact-side { padding: 9px; }
  .contact-card { width: min(360px,100%); }
  .dialog-content { padding: 18px; }
  .home-strip .tbtn { align-self: flex-start; }
}
@media (min-width: 651px) and (max-height: 950px) {
  .hero-content { padding-top: clamp(28px, 3.5vw, 50px); padding-bottom: 100px; }
  .hero-title { font-size: clamp(72px, 7.7vw, 110px); }
}
@media (min-width: 651px) and (max-height: 800px) {
  .hero-content { padding: 16px 38px 56px; }
  .hero-title { font-size: clamp(64px, 6.8vw, 98px); }
  .scroll-cue { display: none; }
}
@media (max-width: 380px) {
  .brandline h1 { font-size: 24px; }
  .brandline p { font-size: 13px; }
  nav.tabs button { padding-right: 10px; padding-left: 10px; font-size: 15px; }
  #main.home-screen .portfolio-hero { min-height: max(790px,calc(100svh - 122px)); }
  .hero-content { padding-right: 19px; padding-left: 19px; }
  .hero-title { font-size: 73px; }
  .hero-art { min-height: 230px; }
  .hero-status { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-hero *, .portfolio-hero *::before, .portfolio-hero *::after,
  .portfolio-pane *, .portfolio-pane *::before, .portfolio-pane *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}