*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f7f7f7;color:#151515;font:11px/1.5 Arial,Helvetica,sans-serif;text-transform:uppercase;letter-spacing:.07em}button,a{font:inherit;letter-spacing:inherit;text-transform:uppercase}button{cursor:pointer}header{height:46px;position:sticky;top:0;background:#0c0c0c;color:#fff;display:flex;align-items:center;justify-content:center;padding:0 24px;z-index:30}.identity{color:#fff;text-decoration:none;font-size:10px;text-align:center}.identity span{margin-left:18px;color:#aaa;font-size:10px}#menuButton{position:absolute;left:calc(50% + 225px);top:7px;border:0;background:none;width:32px;padding:7px 4px;display:grid;gap:4px}#menuButton span{height:2px;width:22px;background:#d83b36;display:block}#menu{position:fixed;top:46px;right:0;width:min(320px,100vw);height:calc(100vh - 46px);background:#101010;color:#fff;z-index:25;padding:25px 25px 30px;overflow-y:auto;box-shadow:-10px 10px 30px #0002}#filters{display:grid;gap:17px}.group{border-bottom:1px solid #333;padding-bottom:15px;display:grid;gap:7px}.filter{display:flex;align-items:center;gap:11px;background:none;border:0;color:#bbb;text-align:left;padding:3px 0}.filter:before{content:'';display:block;width:10px;height:10px;border:1px solid #777}.filter.active{color:#fff}.filter.active:before{background:#d83b36;border-color:#d83b36}.menu-bottom{border-top:1px solid #333;padding-top:22px;display:flex;flex-wrap:wrap;gap:16px}.menu-bottom a,.menu-bottom button{color:#fff;text-decoration:none;background:none;border:0;padding:0}#gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:7px}.tile{position:relative;aspect-ratio:16/10;overflow:hidden;background:#e1e1e1}.tile img{width:100%;height:100%;object-fit:cover;display:block}.placeholder{width:100%;height:100%;background:#e7e7e7}.arrow{position:absolute;bottom:10px;right:10px;width:27px;height:27px;border:0;background:#10101080;color:#fff;opacity:.58;display:grid;place-items:center;font-size:17px;transition:opacity .2s}.tile:hover .arrow{opacity:1}#detail,#cv{position:fixed;inset:46px 0 0;background:#f7f7f7;z-index:20;overflow:auto;padding:55px max(24px,10vw)}.close{background:none;border:0;padding:0;margin-bottom:45px}#detail h1,#cv h1{font-size:22px;font-weight:400;letter-spacing:.04em}#detail p{max-width:720px;line-height:2}#cvContent{max-width:900px}.cv-row{display:grid;grid-template-columns:60px 1fr 1fr;gap:15px;border-top:1px solid #ccc;padding:13px 0}.cv-row span:last-child{color:#777}@media(max-width:800px){#menuButton{left:auto;right:14px}#gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.identity span{display:none}}@media(max-width:500px){#gallery{grid-template-columns:1fr}header{padding:0 12px}.cv-row{grid-template-columns:45px 1fr}.cv-row span:last-child{grid-column:2}}
/* V5 : pastilles de métiers et respiration avant le CV */
.role-dot{display:inline-block;width:8px;height:8px;flex:none;border-radius:50%;margin-right:2px}
.dot-grade{background:#e78b3d}.dot-image{background:#65b77d}.dot-direct{background:#8fc9ed}
.menu-bottom{margin-top:32px;padding-top:26px}
.cv-page{background:#f7f7f7;min-height:100vh;padding:76px clamp(12px,4vw,65px) 60px}
.cv-title{font-size:16px;font-weight:400;margin:0 0 32px}
.cv-scroll{overflow-x:auto}
.cv-table{border-collapse:collapse;width:100%;min-width:1100px;font-size:10px;letter-spacing:.035em}
.cv-table th{text-align:left;font-weight:500;border-bottom:1px solid #111;padding:12px 12px 12px 0;white-space:nowrap}
.cv-table td{vertical-align:top;border-bottom:1px solid #ddd;padding:12px 12px 12px 0;white-space:pre-line}
.cv-table td:nth-child(2){font-weight:600;min-width:150px}
.cv-table td:nth-child(8){min-width:190px}
.cv-table a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.cv-return{color:#fff;text-decoration:none;font-size:10px}
@media(max-width:800px){.menu-bottom{margin-top:26px}}

/* V6 : barre 50 % plus haute, nom 50 % plus grand et centré */
header{height:69px}
.identity{font-size:15px}
.identity span{font-size:10px}
#menuButton{top:18px}
#menu{top:69px;height:calc(100vh - 69px)}
#detail{inset:69px 0 0}
#menu[hidden],#detail[hidden]{display:none!important}
@media(max-width:800px){#menuButton{top:18px}}

/* V7 — icône à gauche du titre, sans chevauchement */
header{position:sticky;justify-content:center}
#menuButton{position:absolute;left:max(12px,calc(50% - 365px));right:auto;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;align-content:center;justify-items:center;gap:5px;padding:5px}
#menuButton span{background:#ff202a;height:2px;width:24px}
@media(max-width:800px){#menuButton{left:12px;right:auto}header .identity{max-width:calc(100% - 95px)}}

/* V8 : marges latérales de 15 %, respiration entre les photogrammes */
#gallery{padding:15px 15%;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
/* Menu compact : liens de navigation disposés verticalement */
#menu{width:min(260px,100vw);padding:25px 22px 30px}
.menu-bottom{display:flex;flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:13px;margin-top:30px;padding-top:24px}
.menu-bottom a{display:block;width:100%}
@media(max-width:800px){#gallery{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px 7%;gap:12px}}
@media(max-width:500px){#gallery{grid-template-columns:1fr;padding:10px 5%;gap:14px}}

/* V9 — menu à gauche et animations discrètes, y compris sur le CV */
#menu{left:0;right:auto;box-shadow:10px 10px 30px #0002;transform-origin:top left;animation:menuSpring .52s cubic-bezier(.2,.85,.22,1) both}
@keyframes menuSpring{0%{opacity:0;transform:translateY(-22px) scaleY(.94)}65%{opacity:1;transform:translateY(5px) scaleY(1.012)}83%{transform:translateY(-2px)}100%{opacity:1;transform:translateY(0) scaleY(1)}}
#menuButton{transition:filter .22s ease,background-color .22s ease,border-radius .22s ease}
#menuButton:hover{filter:brightness(1.22);background:#ffffff12;border-radius:5px}
#menuButton span{transition:transform .32s cubic-bezier(.2,1.7,.3,1),background-color .2s ease}
#menuButton:hover span:nth-child(1){transform:translateY(-2px) scaleX(1.08)}
#menuButton:hover span:nth-child(2){transform:scaleX(1.15);background:#ff515a}
#menuButton:hover span:nth-child(3){transform:translateY(2px) scaleX(1.08)}
.filter,.menu-bottom a,.identity,.cv-return,.cv-table a,.close{transition:transform .23s cubic-bezier(.2,1.4,.3,1),color .23s ease,filter .23s ease,background-color .23s ease;transform-origin:left center}
.filter:hover,.menu-bottom a:hover{transform:translateX(3px) scale(1.025);color:#fff;filter:brightness(1.2)}
.identity:hover,.cv-return:hover{filter:brightness(1.35);transform:scale(1.025)}
.cv-table tbody tr{transition:background-color .22s ease,filter .22s ease}
.cv-table tbody tr:hover{background:#eaeaea;filter:brightness(1.025)}
.cv-table a:hover{transform:scale(1.045);filter:brightness(1.15)}
.cv-table a{display:inline-block}
.arrow{transition:opacity .25s ease,transform .28s cubic-bezier(.2,1.5,.3,1),background-color .25s ease}
.arrow:hover,.tile:hover .arrow{opacity:1;transform:scale(1.12);background:#333b}
@media(prefers-reduced-motion:reduce){#menu{animation:none}#menuButton,#menuButton span,.filter,.menu-bottom a,.identity,.cv-return,.cv-table a,.cv-table tbody tr,.arrow{transition:none!important}}

/* V10 : repères métiers dans le CV, lignes resserrées */
.cv-table{font-size:10px;line-height:1.25;min-width:1080px}
.cv-table th{padding:7px 9px 7px 0}
.cv-table td{padding:6px 9px 6px 0;line-height:1.25}
.cv-table td:nth-child(3){font-weight:600;min-width:150px}
.cv-table td:nth-child(2){font-weight:400;min-width:auto}
.cv-table td:nth-child(9){font-size:5px;line-height:1.35;min-width:170px;max-width:270px;letter-spacing:0}
.cv-role-heading,.cv-role-cell{width:36px;min-width:36px;white-space:nowrap}
.cv-role-cell .role-dot{width:7px;height:7px;margin-right:2px;vertical-align:middle}
.cv-page{padding-top:56px}
.cv-title{margin-bottom:22px}

/* V11 — CV : hauteurs strictement égales, aucune cellule sur deux lignes */
.cv-scroll{width:100%;overflow-x:auto;overflow-y:hidden}
.cv-table{table-layout:fixed;width:1690px;min-width:1690px;font-size:9px;line-height:1}
.cv-table th,.cv-table td{height:29px;max-height:29px;padding:0 10px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;line-height:1;letter-spacing:.015em}
.cv-table th{height:34px;max-height:34px}
.cv-table td:nth-child(2){width:57px;min-width:57px}
.cv-table td:nth-child(3){font-weight:600}
.cv-table td:nth-child(9){font-size:6px;line-height:1;min-width:0;max-width:none;letter-spacing:0}
.cv-role-heading,.cv-role-cell{width:44px;min-width:44px}
.cv-role-cell .role-dot{width:7px;height:7px}
.cv-table td a{white-space:nowrap}