@font-face{font-family:Montserrat;src:url('./fonts/Montserrat-Variable.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}@font-face{font-family:Montserrat;src:url('./fonts/Montserrat-Italic-Variable.woff2') format('woff2');font-style:italic;font-weight:100 900;font-display:swap}:root{font-family:Montserrat,"DM Sans",Arial,sans-serif;color:#f4f3f7;background:#101014;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(ellipse at top,#1c1924,#101014 55%)}button{font:inherit}.app{min-height:100vh;display:flex;flex-direction:column;padding:20px clamp(16px,4vw,64px) 24px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.brand{color:#f5f3fa;text-decoration:none;font-size:19px;font-weight:800;letter-spacing:.03em}.top-actions,.control-buttons{display:flex;align-items:center;gap:8px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 13px;border:1px solid #383640;border-radius:8px;background:#1a191f;color:#e7e3ed;text-decoration:none;font-size:13px;cursor:pointer}.button:hover{border-color:#a78bfa;background:#26212f}.button.primary{border-color:#a78bfa;background:#a78bfa;color:#17121f;font-weight:700}.import-button input{display:none}.empty{width:min(660px,100%);margin:auto;text-align:center;color:#aca8b7;line-height:1.7}.empty h1{color:#f4f3f7;font-size:clamp(28px,5vw,48px);margin-bottom:10px}.empty code{color:#d5c6fa}.viewer{width:100%;max-width:1500px;margin:auto}.project-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 15px}.project-heading p{margin:0 0 5px;color:#bba7e8;font-size:11px;font-weight:700;letter-spacing:.15em}.project-heading h1{margin:0;font-size:clamp(24px,3vw,38px)}#slide-count,.controls{color:#a7a3b0;font-size:13px}.presentation{position:relative;display:flex;align-items:center;justify-content:center;min-height:55vh;padding:14px 56px;border:1px solid #302d37;border-radius:14px;background:linear-gradient(145deg,#19181f,#121216);overflow:hidden}.slide{position:relative;width:min(100%,calc((100vh - 210px)*1.7778));max-height:calc(100vh - 210px);aspect-ratio:16/9;overflow:hidden;background:#fff;box-shadow:0 20px 70px #0008;container-type:inline-size;transition:opacity .22s ease,transform .22s ease}.slide.fade-out{opacity:0}.slide.slide-out{opacity:.25;transform:translateX(-5vw)}.object{position:absolute;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere}.object.text{padding:5px}.object img,.object iframe,.object video{display:block;width:100%;height:100%;border:0;object-fit:cover}.object video{object-fit:contain}.object audio{display:block;width:100%;height:100%;min-height:36px}.placeholder{height:100%;display:grid;place-items:center;padding:12px;background:#201c29;color:#b9a8dc;font-size:13px;text-align:center}.nav{position:absolute;z-index:2;top:50%;display:grid;place-items:center;width:42px;height:42px;transform:translateY(-50%);border:1px solid #ffffff35;border-radius:50%;background:#17161dcc;color:white;font-size:30px;cursor:pointer}.nav:hover{background:#7650b5}.nav.previous{left:12px}.nav.next{right:12px}.controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:13px}.dots{display:flex;justify-content:center;gap:6px}.dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#55515f;cursor:pointer}.dots button.active{width:22px;border-radius:8px;background:#a78bfa}.error{max-width:760px;margin:auto;padding:14px;border:1px solid #78414d;border-radius:8px;background:#351d24;color:#ffb4bd}.comparison{position:relative;width:100%;height:100%;overflow:hidden;background:#19191f}.comparison img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.comparison .base{z-index:1;clip-path:inset(0 50% 0 0)}.comparison input{position:absolute;z-index:2;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}.comparison .divider{position:absolute;z-index:2;top:0;bottom:0;width:2px;background:white;pointer-events:none}.comparison .missing{position:absolute;inset:0;display:grid;place-items:center;color:#d4c4f3;font-size:12px}.comparison .pair{position:absolute;z-index:3;right:8px;bottom:8px;max-width:50%;padding:5px;border:1px solid #ffffff45;border-radius:6px;background:#111c;color:white;font-size:11px}.comparison .pair select{max-width:140px;background:#18171d;color:white;border:1px solid #555;padding:4px;border-radius:4px}.error[hidden],.viewer[hidden],.site-header[hidden],.site-footer[hidden]{display:none!important}@media(max-width:700px){.app{padding:14px}.topbar{align-items:flex-start;flex-direction:column}.top-actions{flex-wrap:wrap}.presentation{min-height:40vh;padding:10px 38px}.slide{width:100%;max-height:none}.nav{width:34px;height:34px;font-size:25px}.nav.previous{left:3px}.nav.next{right:3px}.controls{align-items:flex-start;flex-direction:column}.dots{order:3}.control-buttons{width:100%;justify-content:space-between}}

.presentation:fullscreen{width:100vw;height:100vh;min-height:0;padding:24px;border:0;border-radius:0;background:#08080b}.presentation:fullscreen .slide{max-height:calc(100vh - 48px);box-shadow:0 12px 55px #0009}.fullscreen-exit{display:none}.presentation:fullscreen .fullscreen-exit{position:absolute;z-index:5;top:16px;right:16px;display:block;min-height:36px;padding:7px 11px;border:1px solid #ffffff40;border-radius:8px;background:#18171dcc;color:#fff;font:inherit;font-size:12px;cursor:pointer}

.slide.fade-enter{opacity:0}.slide.slide-enter{opacity:.25;transform:translateX(5vw)}.object.shape{overflow:hidden}.object.shape.circle{border-radius:50%}

.slide.fade-enter{opacity:0}.slide.slide-enter{opacity:.25;transform:translateX(5vw)}.object.shape{overflow:hidden}.object.shape.circle{border-radius:50%}.object.text a{color:inherit;text-decoration:inherit;cursor:pointer}

/* Keep the exported slide flush and align the web navigation glyphs inside their circles. */
.slide{box-sizing:border-box;padding:0;border:0;outline:0}.nav{padding:0;line-height:1;font-family:Arial,sans-serif;font-size:28px}

.scroll-site{--site-background:#101014;--site-text:#f4f3f7;--site-accent:#a78bfa;--site-width:1240px;--site-padding:72px;--site-font:Montserrat,Arial,sans-serif;min-height:100vh;background:var(--site-background);color:var(--site-text);font-family:var(--site-font)}
.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px max(20px,calc((100vw - var(--site-width))/2));border-bottom:1px solid #ffffff18;background:color-mix(in srgb,var(--site-background) 88%,transparent);backdrop-filter:blur(16px)}
.site-header .brand{font-size:16px;white-space:nowrap}.site-nav{display:flex;align-items:center;justify-content:flex-end;gap:clamp(10px,2vw,28px);overflow:auto}.site-nav a,.site-footer a{color:var(--site-text);font-size:12px;text-decoration:none;white-space:nowrap;opacity:.78}.site-nav a:hover,.site-footer a:hover{color:var(--site-accent);opacity:1}
.site-section{scroll-margin-top:72px;padding-inline:max(20px,calc((100vw - var(--site-width))/2));overflow:hidden}.site-section-heading{width:100%;max-width:var(--site-width);margin:0 auto 32px;font-family:var(--site-font);font-size:clamp(26px,4vw,54px);line-height:1.05;letter-spacing:-.04em}.site-canvas{position:relative;width:100%;max-width:var(--site-width);margin-inline:auto;overflow:hidden;container-type:inline-size}.site-canvas .object{position:absolute}.site-hero-intro{width:100%;max-width:var(--site-width);margin:0 auto 40px}.site-hero-intro p:first-child{color:var(--site-accent);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.site-hero-intro h1{margin:8px 0;font-size:clamp(42px,8vw,100px);line-height:.98;letter-spacing:-.055em}.site-hero-intro p:last-child{max-width:680px;color:#bbb8c7;font-size:clamp(16px,2vw,22px);line-height:1.55}
.site-project-grid{display:grid;grid-template-columns:repeat(var(--grid-columns,3),minmax(0,1fr));gap:clamp(14px,2.2vw,30px);width:100%;max-width:var(--site-width);margin-inline:auto;align-items:start}.site-grid-item{display:flex;flex-direction:column;gap:10px;min-width:0;overflow:hidden;border-radius:10px;background:#ffffff08;box-shadow:0 8px 28px #0002}.site-grid-item img,.site-grid-item iframe,.site-grid-item video{display:block;width:100%;height:100%;min-height:0;object-fit:cover}.site-grid-item.text{padding:18px;white-space:pre-wrap;overflow-wrap:anywhere}.site-grid-caption{padding:0 12px 12px;color:#bbb8c7;font-size:12px}.site-grid-item .placeholder{min-height:180px}
.site-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;min-height:120px;padding:30px max(20px,calc((100vw - var(--site-width))/2));border-top:1px solid #ffffff18;color:#a7a3b0;font-size:12px}.site-footer a:first-of-type{margin-left:auto}
.site-animated{opacity:0;transition:opacity var(--reveal-duration,700ms) ease var(--reveal-delay,0ms),transform var(--reveal-duration,700ms) cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms),clip-path var(--reveal-duration,700ms) ease var(--reveal-delay,0ms)}.site-animated[data-effect="fade-up"]{transform:translateY(var(--reveal-distance,24px))}.site-animated[data-effect="slide-left"]{transform:translateX(calc(var(--reveal-distance,24px)*-1))}.site-animated[data-effect="slide-right"]{transform:translateX(var(--reveal-distance,24px))}.site-animated[data-effect="zoom"]{transform:scale(.92)}.site-animated[data-effect="typewriter"]{opacity:1;clip-path:none;transition:none}.site-animated[data-effect="typewriter"]>.site-element-content{clip-path:inset(0 0 100% 0);transition:clip-path var(--reveal-duration,700ms) steps(var(--typewriter-steps,1),end) var(--reveal-delay,0ms)}.site-animated[data-effect="typewriter"].is-visible>.site-element-content{clip-path:inset(0 0 0 0)}.site-animated.is-visible{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
@media(max-width:800px){.site-header{align-items:flex-start;flex-direction:column;gap:10px}.site-nav{justify-content:flex-start;width:100%;padding-bottom:3px}.site-project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.site-section-heading{margin-bottom:22px}.site-footer{align-items:flex-start;flex-direction:column}.site-footer a:first-of-type{margin-left:0}}
@media(max-width:520px){.site-project-grid{grid-template-columns:1fr}.site-section{padding-inline:16px!important}.site-section-hero{padding-top:40px!important}.site-header{padding-inline:16px}}
@media(prefers-reduced-motion:reduce){.site-animated,.site-animated[data-effect="typewriter"]>.site-element-content{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}}

/* Live site preview and exported scroll-site layout. */
.app.scrolling-site{display:block;padding:0;min-height:100vh}.app.scrolling-site>.topbar{display:none}.app.scrolling-site>.scroll-site{display:block}
.scroll-site:not(.site-sticky-nav) .site-header{position:relative}
.site-hero-cta{display:inline-flex;align-items:center;justify-content:center;min-height:46px;margin:0 max(20px,calc((100vw - var(--site-width))/2));padding:11px 20px;border:1px solid var(--site-accent);border-radius:999px;background:var(--site-accent);color:#17121f;font-weight:700;text-decoration:none;transition:transform .2s ease,filter .2s ease}.site-hero-cta:hover{transform:translateY(-2px);filter:brightness(1.08)}
@media(max-width:520px){.site-hero-cta{margin-inline:16px}}
.site-project-carousel{width:100%;max-width:var(--site-width);margin-inline:auto}.site-carousel-viewport{position:relative;overflow:hidden;border-radius:12px}.site-carousel-viewport>[hidden]{display:none!important}.site-carousel-viewport>.site-grid-item{width:100%;min-height:0;border-radius:0}.site-carousel-viewport>.site-grid-item img,.site-carousel-viewport>.site-grid-item video,.site-carousel-viewport>.site-grid-item iframe{max-height:min(72vh,850px);object-fit:contain;background:#08080b}.site-carousel-controls{display:flex;align-items:center;justify-content:center;gap:14px;padding-top:12px;color:#aaa5b5;font-size:12px}.site-carousel-controls button{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid #ffffff30;border-radius:50%;background:#ffffff0d;color:var(--site-text);font-size:24px;line-height:1;cursor:pointer}.site-carousel-controls button:hover{border-color:var(--site-accent);background:var(--site-accent);color:#17121f}
.portfolio-stage-wrap.site-onepage{align-items:flex-start;justify-content:center;overflow:auto;overscroll-behavior:contain}
.portfolio-stage.portfolio-onepage-stage{display:flex;flex-direction:column;flex:0 0 auto;overflow:visible;box-shadow:none;transition:none;container-type:inline-size}
.portfolio-site-active-section,.portfolio-site-preview-section{position:relative;flex:0 0 auto;width:100%;min-height:0;box-sizing:border-box;overflow:visible;container-type:inline-size}
.portfolio-site-active-section{z-index:1;box-shadow:inset 0 0 0 1px #9d78ef66}
.portfolio-site-preview-section{border-bottom:1px solid #d8d4e133}
.portfolio-site-preview-section.hidden-in-site{opacity:.3;filter:grayscale(.7)}
.portfolio-site-preview-object{position:absolute;overflow:visible;min-width:0;min-height:0;cursor:pointer}
.portfolio-site-preview-object-content>img,.portfolio-site-preview-object-content>iframe,.portfolio-site-preview-object-content>video{display:block;width:100%;height:100%;border:0;object-fit:cover}
.portfolio-site-editor-button{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:32px;padding:7px 14px;text-decoration:none;text-align:center;font-weight:600;white-space:nowrap;overflow:hidden}
.portfolio-site-format{display:inline-flex;align-items:center;min-height:28px;padding:0 8px;color:#b6a4de;font-size:11px}
.site-button-element{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;text-align:center;text-decoration:none;font-weight:600;white-space:nowrap;overflow:hidden;transition:transform .18s ease,filter .18s ease}
.site-button-element:hover{transform:translateY(-2px);filter:brightness(1.08)}
.site-element.text,.site-grid-item.text,.site-section-heading,.site-hero-intro,.site-hero-intro *{overflow-wrap:normal;word-break:normal;hyphens:none}
.site-nav{max-width:100%;scrollbar-width:thin;scrollbar-color:#6d647a transparent}.site-nav a{flex:0 0 auto;white-space:nowrap;word-break:keep-all;overflow-wrap:normal}
.site-continuous-canvas>.site-element.text{white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;hyphens:none}
@media(max-width:700px){.site-header{flex-direction:column;align-items:stretch}.site-header .brand{max-width:100%;overflow:hidden;text-overflow:ellipsis}.site-nav{display:flex;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;white-space:nowrap}.site-nav a{width:auto;max-width:none}.site-section-heading{font-size:clamp(24px,8vw,44px);line-height:1.08}.site-hero-intro h1{font-size:clamp(38px,12vw,72px)}}

/* Lien d'un élément non textuel : couche transparente au-dessus du contenu. */
.site-element-link{position:absolute;inset:0;z-index:2;display:block;border-radius:inherit}

/* Effets complementaires + boucles. */
.site-animated[data-effect="typewriter-lines"]{opacity:1;clip-path:none;transition:none}
.site-animated[data-effect="bounce"]{transform:translateY(calc(var(--reveal-distance,24px)*-1));opacity:0}
.site-animated[data-effect="blur"]{filter:blur(14px);opacity:0}
.site-animated[data-effect="flip"]{transform:perspective(900px) rotateX(75deg);transform-origin:center top;opacity:0}
.site-animated.is-visible[data-effect="bounce"]{opacity:1;animation:site-bounce 700ms cubic-bezier(.2,.8,.3,1.4) var(--reveal-delay,0ms) both}
.site-animated.is-visible[data-effect="blur"]{opacity:1;filter:blur(0)}
.site-animated.is-visible[data-effect="flip"]{opacity:1;transform:perspective(900px) rotateX(0)}
@keyframes site-bounce{0%{transform:translateY(calc(var(--reveal-distance,24px)*-1))}55%{transform:translateY(8px)}78%{transform:translateY(-3px)}100%{transform:translateY(0)}}
.tw-char{display:inline}
/* Boucles : portees par le contenu de l'element pour ne pas effacer l'animation
   d'entree ni la rotation. Les proprietes translate/scale/rotate se composent
   avec le transform inline (rotation) et avec l'animation d'entree. */
.site-element[data-loop~="float"]>.site-element-content{animation:site-float var(--loop-duration,2600ms) ease-in-out infinite}
.site-element[data-loop~="pulse"]>.site-element-content{animation:site-pulse var(--loop-duration,2600ms) ease-in-out infinite}
.site-element[data-loop~="sway"]>.site-element-content{animation:site-sway var(--loop-duration,2600ms) ease-in-out infinite}
@keyframes site-float{0%,100%{translate:0 0}50%{translate:0 calc(var(--loop-distance,12px)*-1)}}
@keyframes site-pulse{0%,100%{scale:1}50%{scale:1.045}}
@keyframes site-sway{0%,100%{rotate:-1.2deg}50%{rotate:1.2deg}}
@media(prefers-reduced-motion:reduce){.site-element[data-loop]>.site-element-content{animation:none!important}}

/* Les calques des autres dossiers de surface sont uniquement desatures. */
.site-plan.has-open>.site-element.is-dimmed{filter:grayscale(1);transition:filter .25s ease}
.site-plan.has-open>.site-element.is-open-project{filter:none}

/* --- Diaporama : fleches visibles et lisibles sur le site publie --------- */
.site-slideshow{position:relative;width:100%;height:100%;overflow:hidden;background:#19191f}
.site-slideshow>img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.site-slideshow-controls{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:10px;pointer-events:none}
.site-slideshow-controls[hidden]{display:none}
.site-slideshow-controls button{pointer-events:auto;display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid #ffffff66;border-radius:50%;background:#14121bd9;color:#fff;font-size:22px;line-height:1;cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .16s ease}
.site-slideshow-controls button:hover{transform:scale(1.06);border-color:#fff;background:#2a2438ee}
.site-slideshow-controls span{align-self:flex-end;margin:0 auto 2px;padding:4px 9px;border-radius:12px;background:#14121bd9;color:#fff;font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* --- Comparateur multi-images : une bande par image --------------------- */
.comparison .band{position:absolute;inset:0;overflow:hidden;background:#19191f}
.comparison .band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.comparison .band .caption{position:absolute;left:10px;bottom:10px;padding:3px 8px;border-radius:10px;background:#0c0b12bb;color:#f2eff8;font-size:10px;font-style:normal;letter-spacing:.06em;text-transform:uppercase;pointer-events:none}
.comparison .handle{position:absolute;z-index:4;top:0;bottom:0;width:20px;margin-left:-10px;cursor:ew-resize;touch-action:none;outline:none}
.comparison .handle::before{content:"";position:absolute;top:0;bottom:0;left:9px;width:2px;background:#fff;box-shadow:0 0 10px #000a}
.comparison .handle::after{content:"";position:absolute;top:50%;left:50%;width:22px;height:22px;transform:translate(-50%,-50%);border:2px solid #fff;border-radius:50%;background:#00000075;box-shadow:0 0 10px #0006}
.comparison .handle:focus-visible::after{border-color:#b49cff;background:#3a2d55ee}

/* --- Site mobile : une colonne lisible, textes et espacements ajustés --- */
.site-flow{display:flex;flex-direction:column;width:100%;max-width:660px;margin:0 auto;padding:0 clamp(16px,6vw,32px) 56px;box-sizing:border-box;background:var(--site-background);color:var(--site-text);font-family:var(--site-font)}
.site-flow>*{flex:0 0 auto;max-width:100%}
.site-flow-text{width:100%;white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;hyphens:none}
.site-flow-text a{color:inherit;text-decoration:inherit}
.site-flow .site-element{position:relative;left:auto;top:auto;width:100%;height:auto;min-height:0;overflow:hidden;border-radius:6px;background:#19191f}
.site-flow .site-element img,.site-flow .site-element iframe,.site-flow .site-element video{display:block;width:100%;height:100%;border:0;object-fit:cover}
.site-flow .site-element .site-element-content{position:absolute;inset:0;width:100%;height:100%}
.site-flow-rule{width:100%;height:2px;margin:0;border:0;opacity:.9}
.site-flow-card{display:flex;flex-direction:column;gap:6px;padding:18px 16px;box-sizing:border-box}

/* --- Mobile : les blocs d'une même bande restent côte à côte --- */
.site-flow-row{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;gap:clamp(6px,2.4vw,14px)}
.site-flow-row>*{min-width:0;width:auto}
.site-flow-block{display:block}
.site-flow-block>*{width:100%}
.site-flow-row .site-flow-text{width:auto}
.site-flow-row .site-flow-card{width:auto}
.site-flow-row .site-flow-rule{width:auto;align-self:center;height:2px}

/* --- Planche de couvertures : index visuel des projets --- */
.site-projects{position:relative;width:100%;max-width:none;margin:0;padding:clamp(16px,3vw,48px) 0 clamp(40px,6vw,90px);box-sizing:border-box}
.site-projects>.site-flow{max-width:720px}
.site-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,30px) clamp(10px,1.6vw,24px);margin:clamp(20px,3vw,44px) 0 0}
.site-card{display:flex;flex-direction:column;gap:7px;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;appearance:none;-webkit-tap-highlight-color:transparent}
.site-card-media{position:relative;display:block;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:10px;background:#1a1a20;box-shadow:inset 0 0 0 1px #ffffff14;transition:box-shadow .3s ease}
.site-card-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.site-card-media.is-empty{background:linear-gradient(140deg,#24242e,#111117)}
.site-card:hover .site-card-media img{transform:scale(1.045)}
.site-card.is-open .site-card-media{box-shadow:inset 0 0 0 2px var(--site-accent,#e8ff47)}
.site-card-head{display:flex;align-items:baseline;gap:.55em;margin-top:2px}
.site-card-num{font-size:clamp(10px,.72vw,12px);font-weight:700;letter-spacing:.16em;color:var(--site-accent,#e8ff47);font-variant-numeric:tabular-nums}
.site-card-title{font-size:clamp(15px,1.15vw,21px);font-weight:700;letter-spacing:-.01em;line-height:1.15}
.site-card-tag{font-size:clamp(10px,.78vw,12px);letter-spacing:.09em;text-transform:uppercase;color:#8f8a99;line-height:1.3}
.site-panel-host{position:relative;margin:clamp(18px,2.6vw,40px) 0 0;scroll-margin-top:64px}
.site-panel{position:relative;width:100%;overflow:hidden;container-type:inline-size;border-radius:12px;background:var(--site-background,#101014)}
.site-panel>*{position:absolute}
.site-panel-host>.site-flow{padding:0 0 24px}
@media (max-width:900px){.site-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Mobile utilise temporairement la meme presentation que bureau : pas de
   bascule automatique de la galerie vers une composition mobile. */
.site-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (prefers-reduced-motion:reduce){.site-card-media img{transition:none}}

/* Entrée du projet ouvert */
.site-panel-host>.site-panel,.site-panel-host>.site-flow{animation:site-panel-in .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes site-panel-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.site-panel-host>.site-panel,.site-panel-host>.site-flow{animation:none}}

/* Projet ouvert dans la grille, juste après sa vignette */
.site-card-panel{grid-column:1 / -1;min-width:0;margin:2px 0 6px;scroll-margin-top:64px}
.site-card.is-open{opacity:1;filter:none}
.site-card.is-open .site-card-media{box-shadow:inset 0 0 0 1px #ffffff26}
.site-card-panel>.site-panel,.site-card-panel>.site-flow{animation:site-panel-in .45s cubic-bezier(.2,.7,.2,1) both}
@media (prefers-reduced-motion:reduce){.site-card-panel>.site-panel,.site-card-panel>.site-flow{animation:none}}

/* Le projet ouvert reste net : ce sont les autres vignettes qui s'effacent */
/* Seuls les declencheurs de surface s'effacent : le hero, l'intro et les
   autres blocs gardent leur aspect, et le projet ouvert reste net. */
/* Les vignettes concernées perdent seulement leur saturation. */
.site-cards.has-open .site-card.is-dimmed{filter:grayscale(1);transition:filter .25s ease}
.site-cards.has-open .site-card.is-open{filter:none}

/* Rangees : trois couvertures, puis les surfaces de ces projets juste en dessous */
.site-row{width:100%;max-width:none}
.site-row+.site-row{margin-top:clamp(26px,3.6vw,58px)}
.site-row-panel{width:100%;margin-top:clamp(4px,.9vw,12px)}
.site-row-panel:empty{display:none;margin:0}
.site-row-panel>.site-card-panel{margin:0}
.site-projects.has-open .site-card.is-dimmed{filter:grayscale(1);transition:filter .25s ease}
.site-projects.has-open .site-card.is-open{filter:none}

/* Element cliquable qui ouvre une surface */
.site-zone-link{cursor:pointer}
.site-between{display:none}

/* Le site suit le plan : bandes de vignettes puis surfaces repliees */
.site-plan{display:block}
.site-plan>.site-panel{margin:0 0 clamp(16px,2.2vw,36px)}
.site-zone{width:100%;margin:0 0 clamp(16px,2.2vw,36px)}
.site-zone[hidden]{display:none}
.site-zone>.site-panel{animation:site-panel-in .45s cubic-bezier(.2,.7,.2,1) both}

/* Pas de bande sombre au-dessus de la premiere bande du plan */
.site-plan{padding-top:0}

/* Liens des autres dossiers de projet : uniquement une desaturation. */
.site-plan.has-open [data-zone-link].is-dimmed{filter:grayscale(1);transition:filter .25s ease}
.site-plan.has-open [data-zone-link].is-open{filter:none}

/* Effets de survol : zoom, respiration, soulevement, halo, inclinaison, eclat */
.site-hoverable{transition:transform var(--hover-duration,320ms) cubic-bezier(.2,.7,.2,1),box-shadow var(--hover-duration,320ms) ease,filter var(--hover-duration,320ms) ease}
.site-hover-zoom:hover{transform:scale(var(--hover-scale,1.06))}
.site-hover-lift:hover{transform:translateY(calc(-8px * (var(--hover-scale,1.06) - .94)));box-shadow:0 22px 48px #000a}
.site-hover-glow:hover{box-shadow:0 0 0 1px var(--site-accent,#e8ff47),0 0 30px var(--site-accent,#e8ff47)}
.site-hover-tilt:hover{transform:rotate(calc((var(--hover-scale,1.06) - 1) * 22)) scale(var(--hover-scale,1.06))}
.site-hover-bright:hover{filter:brightness(calc(1 + (var(--hover-scale,1.06) - 1) * 2.2))}
.site-hover-breathe:hover{animation:site-hover-breathe calc(var(--hover-duration,320ms) * 2.4) ease-in-out infinite alternate}
@keyframes site-hover-breathe{from{transform:scale(1)}to{transform:scale(var(--hover-scale,1.04))}}
@media (prefers-reduced-motion:reduce){.site-hoverable{transition:none}.site-hover-breathe:hover{animation:none}.site-hover-zoom:hover,.site-hover-lift:hover,.site-hover-tilt:hover{transform:none}}

/* Seuls les elements marques par leur dossier de projet sont desatures. */
.site-card.is-dimmed,
.site-zone-link.is-dimmed{filter:grayscale(1);transition:filter .25s ease}
.site-card.is-open,
.site-card.is-dimmed.is-open,
.site-zone-link.is-open,
.site-zone-link.is-dimmed.is-open{filter:none}

/* Survol et apparition cohabitaient mal : la transition de `.site-hoverable`
   remplacait celle de l'animation d'entree, donc un element avec un effet de
   survol n'avait plus de fondu. Le transform du survol passe sur le contenu,
   l'entree garde ses transitions, la boite garde ombre et lueur. */
.site-element.site-hoverable{transition:box-shadow var(--hover-duration,320ms) ease,filter var(--hover-duration,320ms) ease}
.site-element.site-hoverable.site-animated{transition:opacity var(--reveal-duration,700ms) ease var(--reveal-delay,0ms),transform var(--reveal-duration,700ms) cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms),clip-path var(--reveal-duration,700ms) ease var(--reveal-delay,0ms),box-shadow var(--hover-duration,320ms) ease,filter var(--hover-duration,320ms) ease}
.site-element.site-hoverable>.site-element-content{transition:scale var(--hover-duration,320ms) cubic-bezier(.2,.7,.2,1),translate var(--hover-duration,320ms) cubic-bezier(.2,.7,.2,1),rotate var(--hover-duration,320ms) cubic-bezier(.2,.7,.2,1)}
.site-hover-zoom:hover,.site-hover-lift:hover,.site-hover-tilt:hover{transform:none}
.site-hover-zoom:hover>.site-element-content{scale:var(--hover-scale,1.06)}
.site-hover-lift:hover>.site-element-content{translate:0 calc(-8px * (var(--hover-scale,1.06) - .94))}
.site-hover-tilt:hover>.site-element-content{rotate:calc((var(--hover-scale,1.06) - 1) * 22deg)}
@media(prefers-reduced-motion:reduce){.site-element.site-hoverable>.site-element-content{transition:none}}

/* Zoom de survol des medias : l'image grandit dans son propre cadre au lieu
   de deborder de la bande, ou le bas du visuel etait coupe. `scale` se
   compose avec le transform de rognage (translate/scale) de l'image. */
.site-hover-media-zoom > .site-element-content > img,
.site-hover-media-zoom > .site-element-content > video,
.site-hover-media-zoom > .site-element-content > iframe,
.site-hover-media-zoom > .site-element-content > .site-slideshow,
.site-hover-media-zoom > .site-element-content > .comparison{transition:scale var(--hover-duration,320ms) cubic-bezier(.2,.7,.2,1);transform-origin:center center}
.site-hover-media-zoom:hover > .site-element-content > img,
.site-hover-media-zoom:hover > .site-element-content > video,
.site-hover-media-zoom:hover > .site-element-content > iframe,
.site-hover-media-zoom:hover > .site-element-content > .site-slideshow,
.site-hover-media-zoom:hover > .site-element-content > .comparison{scale:var(--hover-scale,1.06)}
@media (prefers-reduced-motion:reduce){.site-hover-media-zoom > .site-element-content > img,.site-hover-media-zoom > .site-element-content > video,.site-hover-media-zoom > .site-element-content > iframe,.site-hover-media-zoom > .site-element-content > .site-slideshow,.site-hover-media-zoom > .site-element-content > .comparison{transition:none;scale:1}}


.video-error{display:grid;place-items:center;box-sizing:border-box;width:100%;height:100%;padding:12px;background:#261b24;color:#f0c5c8;text-align:center;font:12px/1.5 Arial,sans-serif}

/* Zoom exterieur : la boite .site-element entiere est mise a l'echelle. Le
   contenu ne subit aucun scale supplementaire, donc l'image n'est pas rognee
   par le cadre ; la zone cliquable et le cadre grandissent avec elle. */
.site-element.site-hoverable.site-hover-element-zoom{transition:scale var(--hover-duration,320ms) cubic-bezier(.2,.7,.2,1),box-shadow var(--hover-duration,320ms) ease,filter var(--hover-duration,320ms) ease}
.site-element.site-hoverable.site-hover-element-zoom.site-animated{transition:opacity var(--reveal-duration,700ms) ease var(--reveal-delay,0ms),transform var(--reveal-duration,700ms) cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms),clip-path var(--reveal-duration,700ms) ease var(--reveal-delay,0ms),scale var(--hover-duration,320ms) cubic-bezier(.2,.7,.2,1),box-shadow var(--hover-duration,320ms) ease,filter var(--hover-duration,320ms) ease}
.site-element.site-hover-element-zoom:hover{scale:var(--hover-scale,1.06);z-index:8}
@media(prefers-reduced-motion:reduce){.site-element.site-hoverable.site-hover-element-zoom{transition:none}.site-element.site-hover-element-zoom:hover{scale:1}}

/* --- Mobile : vraie composition verticale du hero et de la planche ------- */
html{-webkit-text-size-adjust:100%}
.scroll-site{overflow-x:clip}
.site-mobile-hero{position:relative;display:flex;flex-direction:column;justify-content:flex-end;box-sizing:border-box;width:100%;min-height:var(--mobile-hero-height,clamp(440px,78vh,700px));padding:clamp(84px,13vh,128px) clamp(16px,6vw,32px) clamp(30px,5vh,48px);overflow:hidden;background-color:var(--site-background);background-position:center center;background-repeat:no-repeat;background-size:cover;color:var(--site-text)}
.site-mobile-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#05050af2 0%,#05050ac9 54%,#05050a38 100%),linear-gradient(0deg,#05050ae8 0%,#05050a00 68%);pointer-events:none}
.site-mobile-hero::after{content:"";position:absolute;inset:0;background:rgb(5 5 10 / var(--hero-veil-opacity,.35));pointer-events:none}
.site-mobile-hero-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(9px,2.2vw,16px);width:100%;max-width:660px;margin:0 auto}
.site-mobile-hero-text{width:100%;max-width:100%;margin:0!important;white-space:pre-wrap;overflow-wrap:break-word;word-break:normal}
.site-mobile-hero-name{max-width:min(100%,620px);font-weight:800;text-wrap:balance}
.site-mobile-hero-kicker{text-transform:uppercase;font-weight:700}
.site-mobile-hero-copy{max-width:560px;color:#e4e0ec!important;font-weight:400}
.site-mobile-hero-cta{display:flex;flex:0 0 auto;align-items:center;justify-content:center;box-sizing:border-box;width:clamp(200px,32vw,324px);max-width:100%;min-height:48px;margin:10px 0 0;padding:0 20px;border:0;border-radius:999px!important;font-family:var(--site-font);font-weight:700;line-height:1.2;text-align:center;white-space:nowrap;cursor:pointer}
.site-mobile-hero-scroll{margin-top:8px!important;text-transform:uppercase;opacity:.72}
.site-mobile-hero+.site-flow{padding-top:clamp(28px,6vw,54px)}
.site-projects.is-mobile .site-row{width:100%;max-width:660px;margin-inline:auto;padding-inline:clamp(16px,6vw,32px);box-sizing:border-box}
.site-projects.is-mobile .site-row+.site-row{margin-top:var(--mobile-section-gap,clamp(28px,7vw,54px))}
.site-projects.is-mobile .site-row-panel{margin-top:clamp(10px,2vw,18px)}
.site-projects.is-mobile .site-cards{margin-top:clamp(18px,4vw,34px);gap:var(--mobile-card-gap,14px)}
.site-projects.is-mobile .site-card{min-width:0;gap:0}
.site-projects.is-mobile .site-card-head{min-width:0;flex-wrap:wrap;gap:.35em}
.site-projects.is-mobile .site-card-num{font-size:calc(clamp(10px,.72vw,12px) * var(--mobile-text-scale,1));letter-spacing:.12em}
.site-projects.is-mobile .site-card-title{font-size:calc(clamp(14px,1.15vw,21px) * var(--mobile-text-scale,1));line-height:1.15;overflow-wrap:anywhere}
.site-projects.is-mobile .site-card-tag{font-size:calc(clamp(9px,.78vw,12px) * var(--mobile-text-scale,1));line-height:1.3}
.site-projects.is-mobile .site-card-media{border-radius:0;box-shadow:none;background:#0d0c12;container-type:inline-size}.site-projects.is-mobile .site-card-head,.site-projects.is-mobile .site-card-tag{display:none}.site-projects.is-mobile>.site-flow{padding-bottom:var(--mobile-section-gap,22px)}
.site-projects.is-mobile .site-card-panel{width:100%;min-width:0;scroll-margin-top:64px}
.site-projects.is-mobile .site-card-panel>.site-flow{padding:0 0 22px}
@media (max-width:520px){.site-mobile-hero{min-height:min(78vh,620px)}.site-mobile-hero-content{gap:10px}}

/* Barre mobile lisible et projets en liste, comme les rangees du bureau. */
@media (max-width:760px){
  .site-header{position:var(--site-header-position,sticky);top:0;display:flex;flex-direction:row;align-items:center;gap:12px;min-height:56px;padding:12px clamp(16px,4.5vw,22px);background:#0b0a10f2;border-bottom:1px solid #ffffff14;box-shadow:0 10px 26px #05050a4d}
  .site-header .brand{flex:0 0 auto;max-width:46%;font-size:16px;letter-spacing:.02em}
  .site-nav{flex:1 1 auto;display:flex;gap:16px;justify-content:flex-end;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none}
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav a{flex:0 0 auto;padding:6px 0;font-size:12px;opacity:.86}
  .site-projects.is-mobile .site-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:9px 2px 7px}
  .site-projects.is-mobile .site-card-tag{display:inline-flex;font-size:calc(10px * var(--mobile-text-scale,1));opacity:.72}
  .site-projects.is-mobile .site-card-title{font-size:calc(15px * var(--mobile-text-scale,1));font-weight:700;line-height:1.25}
  .site-projects.is-mobile .site-card-num{font-size:calc(10px * var(--mobile-text-scale,1));opacity:.6}
  .site-projects.is-mobile .site-card-media{border-radius:10px;overflow:hidden;background:#0d0c12}
}
@media (max-width:760px){.site-projects.is-mobile .site-row-panel{margin-top:var(--mobile-card-gap,10px)}}

/* --- Mobile : barre compacte, hero pose, flux qui respire ---------------- */
@media (max-width:760px){
  .site-header{position:sticky;top:0;z-index:30;flex-direction:row;align-items:center;gap:10px;padding:10px clamp(14px,4.5vw,20px);background:var(--site-background,#0d0c12);border-bottom:1px solid #ffffff12;box-shadow:0 8px 24px #05050a4d}
  .site-header .brand{min-width:0;flex:0 0 auto;max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
  .site-nav{display:flex;flex:1 1 auto;flex-wrap:nowrap;justify-content:flex-end;gap:14px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none}
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav a{padding:4px 0;font-size:12px;letter-spacing:.02em;opacity:.82}
  .site-nav a:hover,.site-nav a:focus-visible{opacity:1}
  .site-mobile-hero{min-height:var(--mobile-hero-height,clamp(420px,72vh,620px));padding:clamp(88px,14vh,132px) clamp(18px,5.5vw,26px) clamp(28px,5vh,44px)}
  .site-mobile-hero::before{background:linear-gradient(180deg,#05050ad9 0%,#05050a66 42%,#05050ae6 100%)}
  .site-mobile-hero-content{gap:11px;max-width:100%}
  .site-mobile-hero-copy{max-width:38ch;opacity:.92}
  .site-mobile-hero-cta{width:min(100%,320px);min-height:50px;margin-top:14px;font-size:calc(12px * var(--mobile-text-scale,1))}
  .site-mobile-hero-scroll{margin-top:14px!important;opacity:.6}
  .site-mobile-hero+.site-flow{padding-top:clamp(22px,5vw,38px)}
  .site-flow{padding-inline:clamp(16px,5vw,22px)}
  .site-flow-text{line-height:1.5}
  .site-projects.is-mobile .site-row{padding-inline:clamp(16px,5vw,22px)}
  .site-projects.is-mobile .site-card-media img,.site-projects.is-mobile .site-card-media video{width:100%;height:100%;object-fit:cover}
  .site-section-heading{font-size:clamp(26px,8.4vw,42px);line-height:1.06;letter-spacing:-.02em}
  .site-section{padding-bottom:clamp(24px,6vw,40px)}
  .site-footer{gap:8px;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
}

/* L'etat d'ouverture ne s'applique jamais globalement a tout le site. */
.site-row{position:relative}
.site-zone-link{position:relative}
.site-projects.has-open .site-card.is-dimmed,
.site-projects.has-open .site-zone-link.is-dimmed,
.site-plan.has-open .site-zone-link.is-dimmed{filter:grayscale(1)}
.site-projects.has-open .site-card.is-open,
.site-projects.has-open .site-zone-link.is-open,
.site-plan.has-open .site-zone-link.is-open{filter:none}