:root{--bg:#EBF2FA;--c1:#427AA1;--c2:#06668C;--u:min(1vw,19.2px);
--photo-h:85%;--photo-x:49.5%;--photo-y:7%;--title-scale:1.03;
--head:"new-order",sans-serif;--text:"forma-djr-deck",sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--c2);font:400 1.15rem/1.5 var(--text);overflow-x:hidden}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--c1);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
strong{font-weight:700}

/* Header : pas de fond sur desktop, seulement boutons et lignes */
.top{position:fixed;inset:0 0 auto;z-index:50;background:none;transition:transform .35s ease,background-color .25s ease}
.top.hide{transform:translateY(-100%)}
.top nav{display:flex;align-items:center;gap:1.2rem;padding:1.3rem 0}
.ln{flex:1;height:2px;background:var(--c2)}
.ln.s{flex:0 0 1rem}
/* new-order : uniquement Medium (500) et Semibold (600) */
.name{font:500 clamp(1.5rem,2.5vw,3rem) var(--head);white-space:nowrap}
.top .pill{width:calc(var(--u)*6.8);text-align:center;padding:.55em 0}

/* Boutons : pilule blanche, au survol une "copie" apparaît dessous */
.pill{display:inline-block;background:#fff;color:var(--c2);border:1.5px solid var(--c2);border-radius:99px;
padding:.55em 1.7em;font:300 max(1rem,calc(var(--u)*1.15))/1.2 var(--text);
transition:transform .2s ease,box-shadow .2s ease}
.pill.on{background:var(--c2);color:#fff}
.pill:hover,.pill:focus-visible{transform:translateY(-3px);box-shadow:0 4px 0 #fff,0 5.5px 0 var(--c2)}
.big-pill{margin-top:.9em;width:calc(var(--u)*11.6);text-align:center;padding:.55em 0}

/* Parties : 16/9 (1920x1080), sans séparation */
.scene{position:relative;width:100%;max-width:1920px;margin:0 auto;aspect-ratio:16/9;font-size:var(--u)}
.hero{overflow:hidden}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;transform:translateX(1.3%) scale(var(--title-scale));transform-origin:48.7% 37%}
.hero img{position:absolute;bottom:var(--photo-y);left:var(--photo-x);height:var(--photo-h);width:auto;transform:translateX(-42%);-webkit-mask-image:linear-gradient(to right,#000 75%,transparent 99%);mask-image:linear-gradient(to right,#000 75%,transparent 99%)}

.cvscene{display:flex;flex-direction:column;padding-top:4.2em}
.intro{display:grid;grid-template-columns:42em 1fr;gap:.5em;padding:0 6.5em;align-items:start}
.hello{font:600 4.3em/.95 var(--head);letter-spacing:-.01em;white-space:nowrap}
.hello .l1{display:inline-block;position:relative;top:-.18em}
.intro p{font-size:1.25em;line-height:1.2;max-width:33em}
.intro strong{font-weight:700}
/* Trait horizontal au-dessus du CV (présent sur la maquette) */
.cv{display:grid;grid-template-columns:667fr 642fr 611fr;flex:1;margin-top:2.1em;border-top:2px solid var(--c2)}
.col{padding:1.9em 3.6em 2em;border:solid;border-width:0 2px 0 0;border-image:linear-gradient(var(--c2) 80%,transparent) 1}
.col:first-child{padding-left:6.4em;padding-right:2.2em}
.col:last-child{border-width:0}
.col h2{font:500 3em/1.15 var(--head);text-transform:uppercase;margin-bottom:.35em;letter-spacing:-.01em}
.col h3{font:400 1.95em/1.2 var(--text);margin-top:.9em}
.col p,.dates{font-size:1.42em;line-height:1.3;color:var(--c1)}
.it{font-style:italic;font-weight:300;color:var(--c1)}
.dates{list-style:none;margin:.4em 0 0 1.65em;line-height:1.6}
.note{margin:.4em 0 0 1.65em;color:var(--c1);font-weight:300;line-height:1.25}
.skills-list{font-size:1.35em;line-height:1.3;color:var(--c1);margin-bottom:.95em}
.apps{display:flex;flex-wrap:wrap;align-items:center;gap:1.05em;margin-bottom:2em;max-width:16.5em}
.app{display:grid;place-items:center;width:3.1em;height:3.1em;border-radius:.6em;font:600 1.5em var(--head)}
.app.blender{background:none}
.more{font-size:1.4em;font-weight:400;color:var(--c1);margin-left:.4em}
.hobbies{margin-top:0}
.tags{list-style:none;display:grid;grid-template-columns:repeat(2,max-content);gap:.45em 2.2em;color:var(--c1);font-size:1.41em;font-weight:400}
.langues{margin-top:.45em}
.lang-item+.lang-item{margin-top:.25em}

/* Dossiers (image fournie) */
.projets{--fw:88.5;--step:6.15;display:flex;flex-direction:column;justify-content:center;align-items:center}
.folder{display:block;position:relative;width:calc(var(--fw)*1em);aspect-ratio:1709/562;pointer-events:none}
.folder+.folder{margin-top:calc((var(--step) - var(--fw)*562/1709)*1em)}
.shape{position:absolute;inset:0;display:block;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.shape img{display:block;width:100%;height:100%;filter:drop-shadow(0 -2px 0 #fff)}
.folder:hover .shape,.folder:focus-visible .shape{transform:translateY(-1.4em)}
.label{position:absolute;left:0;top:0;width:24%;height:15.7%;display:grid;place-items:center;color:#fff;
font:300 2.6em var(--text);white-space:nowrap}
.hit{position:absolute;left:0;pointer-events:auto;cursor:pointer}
.hit.t{top:0;width:26%;height:15.7%}
.hit.b{top:15.7%;right:0;bottom:0}

/* Footer */
footer{background:var(--c2);color:#fff;display:grid;grid-template-columns:49.6vw 19vw 1fr;gap:0;padding:3rem 5.4vw 3.5rem}
.brand{display:flex;gap:1rem;align-items:flex-start}
.logo{font:600 clamp(2.4rem,5.5vw,5.3rem)/.95 var(--head)}
.cities{font-size:max(.8rem,calc(var(--u)*1.05));font-weight:300;line-height:1.3;margin-top:.4rem}
.cities span{opacity:.7;font-size:.85em}
.fcol{display:flex;flex-direction:column;gap:1.1em;font-size:max(.9rem,calc(var(--u)*1.15))}
.fcol h2{font:700 1em var(--text);margin-bottom:.3em}
.fcol a{word-break:break-word}
.fcol a:hover{text-decoration:underline}

/* ===== Page Graphisme & Médias ===== */
.gfx{padding-top:0}
.gfx-comp{display:block;width:100%;height:auto}
.vid-comp{display:block;width:100%;height:auto;background:#000;outline:none}
.gfx-strip{display:grid;grid-template-columns:1.3fr 1.12fr 2.27fr}
.gfx-strip--equal{grid-template-columns:repeat(3,1fr)}
.gfx-strip img{display:block;width:100%;height:100%;object-fit:cover}
.proj-figs{display:flex;flex-direction:column;gap:1.6em}
.proj-figs .zoom img,.gfx-strip .zoom img{display:block;width:100%;height:auto}
.proj-link{text-decoration:underline;text-underline-offset:.2em;font-weight:500}
.proj-link:hover{color:var(--c1)}
.gfx-sep{height:2px;background:var(--c2);margin:0;border:0}
.gfx-gap{height:clamp(4rem,9vw,9rem)}

/* Maquette (1 px de maquette 2500x1406 = .04em) */
.proj{position:relative;width:100%;max-width:1920px;margin:0 auto;font-size:var(--u);color:var(--c2);
display:grid;grid-template-columns:1fr 30.6em;grid-template-rows:auto 1fr;column-gap:3em;padding:3.2em 3.4em 3.2em 2.7em}
.proj .pill{grid-column:1;grid-row:1;justify-self:start;display:inline-flex;align-items:center;justify-content:center;gap:.8em;height:4.2em;padding:0 2.2em 0 2.9em;
font-size:1.2em;font-weight:300;text-transform:uppercase;white-space:nowrap;background:#fff}
.proj-tag{grid-column:2;grid-row:1;justify-self:end;align-self:center;font-size:1.3em;font-weight:300;line-height:1.2;margin-top:-.2em}
.proj-main{grid-column:1;grid-row:2;margin-top:3.4em;max-width:62em}
.proj-main h2{font:600 2.7em/1.1 var(--text);letter-spacing:-.005em}
.proj-main .proj-sub{font-size:1.3em;font-weight:500;line-height:1.2;margin-top:.1em}
.proj-main p{font-size:1.4em;font-weight:300;line-height:1.3;margin-top:1.2em}
.proj-main h2+p{margin-top:1.6em}
.proj-fig{grid-column:2;grid-row:2;margin-top:1.5em;align-self:start}
.proj-fig img{display:block;width:100%;height:auto}
.proj--cover .proj-fig img{background:#fff}
.proj--wide .proj-main{grid-column:1/3;max-width:75em}

/* Couleurs et polices (brochure) */
.proj-h{font-size:1.3em;font-weight:400;margin:2.2em 0 .7em}
.swatches{display:grid;grid-template-columns:repeat(3,14.6em);gap:7em;margin-bottom:1.2em}
.sw{display:grid;place-items:center;height:5.2em;font-size:1.3em;font-weight:400;line-height:1}
.sw.red{background:#9c2f2b;color:#fff}.sw.white{background:#fff;color:#000}.sw.black{background:#000;color:#fff}
.fonts{display:grid;grid-template-columns:repeat(3,14.6em);gap:7em}
.fonts .proj-h{margin:1.2em 0 .5em}
.fonts .fn{font-size:1.9em;line-height:1.2;color:var(--c2)}
.fonts .fn.b{font-weight:700}

/* Logo MMI (charte) */
.mmi-logo{display:flex;flex-direction:column;align-items:center;margin-top:2em}
.mmi-logo .dots{width:16.8em}
.mmi-logo .txt{width:19.2em;margin-top:-1.2em}

/* Illustration : visuel collé à droite sur toute la hauteur */
.proj--illu{grid-template-columns:1fr 33em;column-gap:0;padding:0}
.proj--illu .pill{margin:3.2em 0 0 3.7em;align-self:center}
.proj--illu .proj-tag{grid-column:1;justify-self:end;margin:3.2em 3em 0 0;align-self:center}
.proj--illu .proj-main{margin:3.6em 3em 4.2em 3.9em}
.proj--illu .proj-main h2{text-transform:uppercase;font-weight:700;font-size:3.4em}
.proj--illu .proj-fig{grid-column:2;grid-row:1/3;margin:0}

/* ===== Ergonomie & Lightbox ===== */
.skip{position:fixed;left:1rem;top:-4rem;z-index:100;background:#fff;color:var(--c2);border:1.5px solid var(--c2);border-radius:99px;padding:.5em 1.4em;transition:top .2s}
.skip:focus{top:1rem}
/* Repere de page dans le header */
.top nav{position:relative}
.crumb{position:absolute;left:50%;top:calc(100% - 1.05rem);transform:translateX(-50%);font:500 .78rem/1 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--c2);pointer-events:none;white-space:nowrap}
/* Mention du format sur les boutons */
.fmt{display:inline-block;font-size:.58em;font-weight:500;letter-spacing:.08em;line-height:1;border:1.2px solid currentColor;border-radius:99px;padding:.3em .8em}
.fmt::after{content:"\00a0\2197"}
/* Navigation entre projets (points a droite) */
.pnav{position:fixed;right:1.1rem;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:1rem}
.pnav a{position:relative;display:block;width:14px;height:14px;border-radius:50%;border:2px solid var(--c2);background:#fff;transition:background .2s,transform .2s}
.pnav a::before{content:"";position:absolute;inset:-8px}
.pnav a[aria-current="true"]{background:var(--c2);transform:scale(1.2)}
.pnav a:hover{transform:scale(1.25)}
.pnav a span{position:absolute;right:calc(100% + .9rem);top:50%;transform:translate(6px,-50%);white-space:nowrap;background:#fff;color:var(--c2);border:1.5px solid var(--c2);border-radius:99px;padding:.35em 1.1em;font:300 1rem/1.2 var(--text);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.pnav a:hover span,.pnav a:focus-visible span{opacity:1;transform:translate(0,-50%)}
/* Agrandissement des compositions */
.zoom{display:block;position:relative;width:100%;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:zoom-in}
.zoom-tip{position:absolute;right:max(1rem,1.6vw);bottom:max(1rem,1.6vw);background:#fff;color:var(--c2);border:1.5px solid var(--c2);border-radius:99px;padding:.5em 1.3em;font:300 max(.95rem,calc(var(--u)*1)) var(--text);opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
.zoom:hover .zoom-tip,.zoom:focus-visible .zoom-tip{opacity:1;transform:none}
.zoom:focus-visible{outline-offset:-4px}
@media(hover:none){
.zoom-tip{opacity:1;transform:none;font-size:.8rem;padding:.35em .95em;right:.7rem;bottom:.7rem}
.gfx-strip .zoom-tip{font-size:.72rem;padding:.3em .8em;right:.5rem;bottom:.5rem}
}
.lb{border:0;padding:0;margin:0;width:100vw;height:100vh;width:100dvw;height:100dvh;max-width:none;max-height:none;background:rgba(235,242,250,.97);color:var(--c2)}
.lb::backdrop{background:rgba(6,102,140,.55)}
.lb-close{position:fixed;top:1.2rem;right:1.5rem;z-index:2;cursor:pointer}
.lb-scroll{width:100%;height:100%;overflow:auto;display:flex;padding:4.5rem 1.5rem 1.5rem}
.lb-scroll img{margin:auto;display:block;width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 6rem);object-fit:contain;cursor:zoom-in;box-shadow:0 .6rem 2.5rem rgba(6,102,140,.2)}
.lb.full .lb-scroll img{max-width:none;max-height:none;cursor:zoom-out}
body.lb-open{overflow:hidden}

/* ===== Responsive Tablette & Mobile (<= 900px) ===== */
@media(max-width:900px){
/* Header lisible en permanence avec léger flou */
.top{background:rgba(235,242,250,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.top nav{gap:.6rem;padding:.85rem 0}
.name{font-size:clamp(1.1rem,3.6vw,1.45rem)}
.top .pill{width:auto;padding:.48em 1.25em;font-size:.95rem}
.crumb{font-size:.64rem;top:calc(100% - .82rem)}

/* Scènes accueil */
.scene{aspect-ratio:auto}
.hero{height:clamp(24rem,76svh,40rem);padding-top:3.8rem}
.hero video{object-fit:contain;object-position:center 28%;transform:scale(1.06);transform-origin:center 28%}
.hero img{height:min(72%,88vw);bottom:3%;left:50%;transform:translateX(-44%)}

/* Section CV */
.cvscene{font-size:clamp(11.5px,2.1vw,15px);padding-top:4.8rem;padding-bottom:2.5rem}
.intro{grid-template-columns:1fr;gap:1.3em;padding:0 clamp(1.2rem,5vw,3rem)}
.hello{font-size:clamp(2.1rem,7vw,3rem);white-space:normal;line-height:1.02}
.hello .l1{top:0}
.intro p{font-size:1.32em;line-height:1.35;max-width:44em}
.big-pill{width:auto;padding:.6em 1.8em;font-size:1rem}
.cv{grid-template-columns:1fr;margin-top:2.2em}
.col,.col:first-child{border-width:0 0 2px;border-image:none;border-color:var(--c2);padding:1.8em clamp(1.2rem,5vw,3rem)}
.col:last-child{border-bottom-width:0}
.col h2{font-size:2.4em}
.apps{gap:.9em;max-width:18em;margin-bottom:1.5em}
.app{width:2.65em;height:2.65em}
.langues{margin-top:1.2em}

/* Section Dossiers Projets */
.projets{--fw:92;--step:15.5;font-size:1vw;padding:clamp(2.5rem,7vw,4.5rem) 0}
.folder{aspect-ratio:1709/820}
.shape img{object-fit:fill}
.label{font-size:clamp(.75rem,2.4vw,1.35rem);width:24%;height:15.7%}
.hit.t{width:26%;height:15.7%}.hit.b{top:15.7%}
.folder:hover .shape,.folder:focus-visible .shape{transform:translateY(-.8em)}

/* Pages Projets */
.gfx{padding-top:4.2rem}
.proj,.proj--illu{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;font-size:clamp(11.5px,2.1vw,15px);padding:2em clamp(1.2rem,5vw,3rem) 3em;min-height:0;row-gap:1.1em}
.proj .pill,.proj-tag,.proj-main,.proj-fig,.proj--illu .pill,.proj--illu .proj-tag,.proj--illu .proj-main,.proj--illu .proj-fig{grid-column:1;grid-row:auto;margin:0;justify-self:start}
.proj .pill{white-space:normal;text-align:center;height:auto;padding:.75em 1.5em;font-size:1.05em;flex-wrap:wrap}
.proj-tag{order:2;font-size:1.2em;color:var(--c1)}
.proj-main{order:3;margin-top:.4em;max-width:none}
.proj-main h2,.proj--illu .proj-main h2{font-size:2.35em}
.proj-main p{font-size:1.35em;line-height:1.4}
.proj-fig{order:4;margin-top:1.2em;width:100%;max-width:28rem;justify-self:center}
.proj--illu .proj-fig{margin:1.2em 0 0;width:100%;max-width:28rem;justify-self:center}
.swatches{grid-template-columns:repeat(3,1fr);gap:.8em}
.sw{height:4.2em;font-size:1.15em}
.fonts{grid-template-columns:repeat(2,1fr);gap:1.5em}
.mmi-logo{margin-top:.8em}

/* Navigation points flottante en bas */
.pnav{top:auto;bottom:.9rem;right:auto;left:50%;transform:translateX(-50%);flex-direction:row;gap:1.1rem;background:rgba(255,255,255,.95);border:1.5px solid var(--c2);border-radius:99px;padding:.6rem 1.1rem;box-shadow:0 4px 14px rgba(6,102,140,.15)}
.pnav a span{display:none}

/* Footer */
footer{grid-template-columns:1fr 1fr;gap:2rem 1.5rem;padding:2.5rem clamp(1.2rem,5vw,3rem) 5rem}
.brand{grid-column:1/-1}
}

/* ===== Responsive Smartphones (<= 600px) ===== */
@media(max-width:600px){
.top nav{gap:.4rem;padding:.7rem 0}
.ln.s{flex:0 0 .5rem}
.name{font-size:clamp(1rem,4.3vw,1.25rem)}
.top .pill{font-size:.82rem;padding:.45em .95em}
.crumb{font-size:.56rem;top:calc(100% - .68rem);letter-spacing:.12em}

.gfx{padding-top:3.6rem}
.hero{height:clamp(21rem,68svh,31rem);padding-top:3.4rem}
.hero video{object-position:center 25%;transform:scale(1.08);transform-origin:center 25%}
.hero img{height:min(70%,92vw);bottom:2%}

/* Bandeaux de close-ups empilés sur mobile pour bien voir les détails */
.gfx-strip,.gfx-strip--equal{grid-template-columns:1fr}

/* Dossiers plus hauts et faciles à toucher au doigt */
.projets{--fw:94;--step:18}
.folder{aspect-ratio:1709/960}
.label{font-size:clamp(.7rem,2.6vw,.95rem);width:25%}

.swatches{gap:.5em}
.sw{height:3.6em;font-size:1em}
.fonts{grid-template-columns:1fr;gap:.8em}

.lb-close{top:.8rem;right:.8rem;padding:.45em 1.1em;font-size:.9rem}
.lb-scroll{padding:3.8rem .8rem 1rem}

footer{grid-template-columns:1fr;gap:1.8rem}
}

/* ===== Mode paysage mobile (hauteur réduite) ===== */
@media(max-height:520px) and (max-width:900px){
.hero{height:100svh;min-height:20rem}
.hero video{object-fit:cover;transform:scale(1.02)}
.hero img{height:80%;bottom:4%}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.shape,.top,.pill,.zoom-tip,.pnav a,.pnav a span,.skip{transition:none}}