/* Logo en points et présentation des projets inspirée des rangées de MAD.
   Timeless reste la typographie du portfolio. */
.portfolio-header .identity{background-image:none!important;text-decoration:none!important;overflow:visible}
.portfolio-header .particle-word{position:relative;display:block;width:218px;height:70px;margin:-10px 0;isolation:isolate}
.particle-word canvas{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.particle-fallback{display:grid;place-items:center;height:100%;font:46px/1 var(--sans);letter-spacing:-.055em}
.particles-ready .particle-fallback{visibility:hidden}
.portfolio-header .compact-nav{display:flex;flex-direction:row;gap:8px;padding:0;margin-right:auto;align-items:center}
.nav-chip{display:inline-flex;align-items:center;gap:8px;border-radius:7px;padding:8px 12px;background:#e8eae9;color:#111;font:16px/1 var(--sans);transition:background .18s ease,color .18s ease;white-space:nowrap}
.nav-chip:hover,.nav-chip:focus-visible,.nav-chip.ghost-hover{background:#111;color:#fff;text-decoration:none;background-image:none}
.nav-chip>span{font-size:19px;line-height:1}
.projects-pill{border:0;border-radius:0;padding:0;margin:0 0 70px;font:32px/1.1 var(--sans);letter-spacing:-.04em}
.work-rows{display:grid;gap:76px}
.work-row h3{margin:0 0 24px;padding-bottom:14px;font:17px/1.3 var(--sans);background-image:radial-gradient(circle,#323735 1px,transparent 1.2px);background-size:16px 3px;background-repeat:repeat-x;background-position:left bottom}
.work-row-body{display:grid;grid-template-columns:.9fr repeat(3,1fr);gap:20px;align-items:start}
.work-summary p{font:17px/1.3 var(--sans);max-width:270px}
.work-summary>span{display:block;margin-top:25px;font:13px/1.4 var(--serif-text);color:#737875}
.project-visual{display:block;min-width:0;text-decoration:none!important}
.project-visual .media{border-radius:9px;aspect-ratio:1;background:#fff}
.project-visual:nth-child(3) .media{aspect-ratio:1.4}
.project-visual:nth-child(4) .media{aspect-ratio:1.12}
.project-visual figcaption{display:block;padding-top:9px;color:#676e69;font:13px/1.4 var(--serif-text)}
.project-visual:hover figcaption{color:#111}
@media(max-width:850px){.work-row-body{grid-template-columns:repeat(3,1fr)}.work-summary{grid-column:1/-1;display:flex;justify-content:space-between;gap:16px}.work-summary>span{margin-top:0}.portfolio-header .particle-word{width:170px;height:62px}.nav-chip{font-size:14px;padding:8px}.portfolio-header .compact-nav{gap:5px}}
@media(max-width:600px){.portfolio-home>.portfolio-header{gap:10px;flex-wrap:wrap}.portfolio-header .particle-word{width:158px;height:58px}.portfolio-header .compact-nav{order:3;width:100%;margin:8px 0 0}.portfolio-header .folies-link{margin-left:auto}.work-row-body{grid-template-columns:1fr}.work-summary{display:block}.work-summary>span{margin-top:12px}.project-visual .media{aspect-ratio:1.25!important}.work-rows{gap:55px}.projects-pill{margin-bottom:40px}}
@media(prefers-reduced-motion:reduce){.nav-chip{transition:none}}
/* Navigation réduite à Folie ; symboles soumis à la même physique que Louis. */
.portfolio-header .folie-button{display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border-radius:7px;background:#e8eae9;color:#111;font:16px/1 var(--sans);transition:background .2s ease,color .2s ease;text-decoration:none}
.portfolio-header .folie-button:is(:hover,:focus-visible,.ghost-hover){background:#111;color:#fff}
.hero-copy h1 .particle-symbol{display:inline-block;vertical-align:-.16em;position:relative;width:1.05em;height:1.12em}
.particle-symbol .particle-fallback{font-size:.8em}
/* Ligne de points : même simulation que le mot Louis, repos tous les 16 px. */
.work-row h3{position:relative;background-image:none;overflow:visible}
.particle-rule{position:absolute;left:0;right:0;bottom:-39px;height:80px;pointer-events:none;z-index:1}
.particle-rule canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.particle-rule:not(.particles-ready):before{content:"";position:absolute;left:0;right:0;top:39px;height:3px;background:radial-gradient(circle,#323735 1px,transparent 1.2px) 0 0/16px 3px repeat-x}
/* Deux lignes garanties : chaque symbole reste dans sa ligne. */
.hero-copy{container-type:inline-size}
.hero-copy h1{font-size:clamp(20px,7cqw,62px)}
.hero-copy h1 .hero-line{display:block;white-space:nowrap}