/* 15 octobre 2026. Entrée par le métier, textes lisibles et portraits en mouvement. */
:root{--header:88px}
.top{height:var(--header);padding:0 4vw}
.top .logo-name{font-size:20px;letter-spacing:.045em}
.top .top-right a,.top .top-right .change{font-size:21px;line-height:1.35}
.top .top-right .book{padding:12px 18px}
.change-short{display:none}

/* Deux espaces distincts : la lecture à gauche, les portraits à droite. */
#chooser{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);grid-template-rows:auto auto;align-items:start;gap:0 4vw;min-height:100svh;padding:calc(var(--header) + 42px) 4vw 46px;isolation:isolate;overflow:clip;background:#141414}
#chooser:after{display:none}
#chooser .chooser-content,#chooser.selected .chooser-content{display:block;grid-column:1;grid-row:1;width:100%;max-width:790px;margin:0;padding:0;position:relative;z-index:2;transition:none}
#chooser .chooser-content>.eyebrow{width:auto;margin:0;color:#e1bfa1;font-size:21px;line-height:1.45;letter-spacing:.025em;text-transform:none;font-weight:500}
#chooser h1,#chooser.selected h1{width:100%;max-width:none;margin:29px 0 0;font-size:clamp(66px,6.2vw,112px);line-height:1.02;letter-spacing:-.06em;font-weight:600;transition:none}
#chooser h1 em{color:#e3b48c;letter-spacing:-.025em;white-space:nowrap}
#chooser .chooser-intro,#chooser.selected .chooser-intro{display:block;width:100%;max-width:650px;margin:28px 0 0;color:#f1efec;font-size:26px;line-height:1.55}
#chooser .precision{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:22px;width:100%;max-width:740px;padding:23px 25px;margin:35px 0 0;border:1px solid #f7f5ec;border-radius:4px;background:#f2f0e9;box-shadow:none;opacity:1;transform:none;transition:none}
#chooser .precision label{font-size:22px;line-height:1.4;font-weight:500;margin:0 0 13px;color:#404040}
#chooser .precision input{padding:8px 0 11px;font-size:28px;line-height:1.35;min-height:54px;border-bottom:1px solid #8c8a87;color:#202020}
#chooser .precision input::placeholder{font-size:24px;color:#6d6b68;opacity:1}
#chooser .precision .start{display:inline-flex;align-items:center;justify-content:center;gap:20px;width:auto;min-width:0;margin:0;padding:17px 22px;font-size:22px;line-height:1.35;font-weight:500;border-radius:3px;min-height:64px;white-space:nowrap;background:#313131;border-color:#313131;transition:background .2s,transform .25s}
#chooser .precision .start:hover{background:#4b4b4b;transform:translateY(-2px)}
#chooser .precision .start svg{width:22px;flex-shrink:0}
#chooser .job-hint{width:auto;max-width:740px;margin:20px 0 0;font-size:22px;line-height:1.5;color:#e5c5aa}
#chooser .job-hint:empty{display:none}
#chooser .job-suggestions{width:100%;max-width:740px;margin:16px 0 0}
#chooser .job-suggestions button{font-size:22px;line-height:1.5;padding:16px 18px;text-align:left;min-height:62px}
#chooser .choice-area,#chooser.selected .choice-area{grid-column:1;grid-row:2;position:relative;z-index:2;width:100%;max-width:740px;margin:28px 0 0;padding:0}
#chooser .chooser-reassurance{margin:0;font-size:23px;line-height:1.6;color:#eee5d9;max-width:none}
#chooser .chooser-reassurance strong{font-weight:500;color:#fff}
#chooser .privacy{margin:20px 0 0;font-size:22px;line-height:1.55;color:#d3d1ce;max-width:670px}
#chooser .chooser-reviews{font-size:22px;line-height:1.55;margin-top:20px;padding:5px 0;color:#e5bd9a;text-underline-offset:7px}

/* Les familles sont un recours lorsqu’un intitulé n’est pas retrouvé. */
#chooser .family-fallback{margin-top:25px;padding:25px 0;border-top:1px solid #656360}
#chooser .fallback-title{font-size:25px;line-height:1.4;font-weight:500;color:#fff}
#chooser .fallback-intro{font-size:22px;line-height:1.55;color:#d7d5d2;margin-top:13px}
#chooser .family-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px;max-width:none}
#chooser .family{font-size:22px;line-height:1.4;text-align:left;min-height:72px;padding:15px 17px;border-radius:3px;border-color:#8f8d8a;background:#222222;font-weight:400}
#chooser .family:hover{background:#414141;transform:none}
#chooser .family[aria-pressed=true]{background:#e9e6db;color:#2f2f2f}

/* Le déplacement porte sur les panneaux, en conservant leur cadrage de portrait. */
#chooser .chooser-bg{grid-column:2;grid-row:1/3;position:sticky;top:calc(var(--header) + 20px);inset-inline:auto;align-self:start;width:100%;height:clamp(640px,calc(100svh - var(--header) - 70px),1040px);min-height:0;max-height:none;margin:0;z-index:0;border-radius:3px;overflow:hidden;background:#222222;perspective:1000px}
#chooser .chooser-bg:after{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(0deg,rgba(20,20,20,.2),transparent 28%,transparent 78%,rgba(20,20,20,.1));content:''}
#chooser .chooser-mosaic{position:absolute;inset:25px 18px 45px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:18px;opacity:1;transition:opacity .55s ease;transform:none}
#chooser.previewing .chooser-mosaic{opacity:0}
#chooser .chooser-mosaic i{position:relative;display:block;overflow:hidden;border:1px solid #62605d;border-radius:3px;background-color:#2d2d2d;filter:none;transform:translate3d(var(--entry-x,0px),calc(var(--base-y,0px) + var(--entry-y,0px)),0) rotate(var(--entry-tilt,0deg));transition:transform .4s cubic-bezier(.16,1,.3,1);will-change:transform;animation:entry-photo-reveal .9s cubic-bezier(.16,1,.3,1) both}
#chooser .chooser-mosaic i:nth-child(2),#chooser .chooser-mosaic i:nth-child(4){--base-y:20px}
#chooser .chooser-mosaic i:nth-child(2){animation-delay:.12s}
#chooser .chooser-mosaic i:nth-child(3){animation-delay:.24s}
#chooser .chooser-mosaic i:nth-child(4){animation-delay:.36s}
#chooser .chooser-photo{position:absolute;inset:0;transform:translate3d(var(--photo-x,0px),var(--photo-y,0px),0) scale(1.05)!important;transform-origin:center center;transition:opacity .65s ease,transform .45s cubic-bezier(.16,1,.3,1);background-color:#222222}
#chooser .chooser-photo.on{opacity:1;will-change:transform}
@keyframes entry-photo-reveal{from{clip-path:inset(0 100% 0 0);opacity:0}to{clip-path:inset(0 0 0 0);opacity:1}}

/* Le premier portrait du récit réagit lui aussi aux déplacements. */
#recit #story-photo{transform:translate3d(var(--portrait-x,0px),var(--portrait-y,0px),0) scale(var(--portrait-scale,1.025))!important;transition:transform .45s cubic-bezier(.16,1,.3,1);transform-origin:78% 20%}
#recit .journey-card{transform:translate3d(calc(var(--journey-x,0px) + var(--pointer-x,0px)),calc(var(--journey-y,0px) + var(--pointer-y,0px)),0) rotate(var(--pointer-tilt,0deg));transition:transform .3s ease-out}

/* Les indications utiles gardent une vraie taille de lecture sur le reste de la visite. */
body .eyebrow,body .trust-eyebrow{font-size:20px;line-height:1.5;letter-spacing:.04em}
body .foot .shell{font-size:20px;line-height:1.6}
body .profile-note,body .example-origin,body .experience-example .profile-note,body .example-panel .example-origin{font-size:22px;line-height:1.6}
body .situation-options>summary small,body .direction-note,body .direction-heading>p.direction-note{font-size:22px;line-height:1.55}
body .trust-measure-heading p,body .trust .trust-sample,body .trust-methods p,body .trust-quote figcaption{font-size:22px;line-height:1.6}
body .xp-tab-number,body .bilan-experience .xp-eyebrow,body .xp-more>summary{font-size:22px;line-height:1.5}
body .film-skip,body .film-edit{font-size:21px;line-height:1.5}
body .ending .ending-profile,body .ending p.meeting-contact,body .ending p.meeting-location{font-size:22px;line-height:1.55}

@media(max-width:1200px){
 #chooser{gap:0 3vw;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);padding-top:calc(var(--header) + 35px)}
 #chooser .precision{grid-template-columns:1fr;padding:23px}
 #chooser .precision .start{justify-self:start;min-width:180px}
 #chooser .chooser-bg{height:720px}
 #chooser h1,#chooser.selected h1{font-size:clamp(62px,6.2vw,78px)}
 .top .logo-name{display:none}
}
@media(max-width:900px){
 :root{--header:80px}
 #chooser{grid-template-columns:1fr;gap:0;padding:calc(var(--header) + 30px) 5vw 55px}
 #chooser .chooser-content,#chooser.selected .chooser-content{grid-column:1;grid-row:1;max-width:780px;margin:auto}
 #chooser .chooser-bg{grid-column:1;grid-row:2;position:relative;top:auto;height:430px;width:100%;max-width:780px;margin:35px auto 0}
 #chooser .choice-area,#chooser.selected .choice-area{grid-column:1;grid-row:3;max-width:780px;margin:32px auto 0}
 #chooser .precision{grid-template-columns:minmax(0,1fr) auto}
 #chooser h1,#chooser.selected h1{font-size:clamp(58px,10vw,90px)}
 #chooser .chooser-mosaic{inset:20px 18px 38px;gap:16px}
 #chooser .chooser-bg:after{background:none}
}
@media(max-width:600px){
 :root{--header:76px}
 .top{padding:0 4vw}
 .top .logo-mark{font-size:32px}
 .top .top-right{gap:13px}
 .top .top-right a,.top .top-right .change{font-size:20px;line-height:1.3}
 .top .top-right .book{padding:10px 11px}
 .change-full{display:none}.change-short{display:inline}
 .ready .top .practical-nav,.choosing-direction .top .practical-nav{display:none}
 #chooser{padding-top:calc(var(--header) + 28px)}
 #chooser .chooser-content>.eyebrow{font-size:20px;line-height:1.45;max-width:310px}
 #chooser h1,#chooser.selected h1{font-size:clamp(44px,10.5vw,64px);line-height:1.07;letter-spacing:-.055em;margin-top:24px}
 #chooser h1 em{white-space:normal}
 #chooser .chooser-intro,#chooser.selected .chooser-intro{font-size:24px;line-height:1.5;margin-top:24px}
 #chooser .precision{display:grid;grid-template-columns:1fr;gap:20px;padding:21px 20px;margin-top:28px;border-radius:3px}
 #chooser .precision label{font-size:22px;line-height:1.4;margin-bottom:12px}
 #chooser .precision input{font-size:26px;line-height:1.35;padding:7px 0 11px;min-height:55px}
 #chooser .precision input::placeholder{font-size:23px}
 #chooser .precision .start{width:100%;min-width:0;min-height:62px;padding:16px 18px;justify-content:space-between;font-size:22px}
 #chooser .chooser-bg{height:430px;margin-top:30px}
 #chooser .chooser-reassurance{font-size:23px;line-height:1.6}
 #chooser .privacy,#chooser .chooser-reviews,#chooser .job-hint{font-size:22px;line-height:1.55}
 #chooser .family-grid{grid-template-columns:1fr}
 #chooser .family{font-size:22px;min-height:64px}
 #chooser .job-suggestions button{font-size:22px;line-height:1.5}
 body .eyebrow,body .trust-eyebrow{font-size:20px}
 body .film-skip,body .film-edit{font-size:20px}
 body .situation-options>summary small{font-size:22px}
 body .xp-tab-number{font-size:21px}
}
@media(prefers-reduced-motion:reduce){
 #chooser .chooser-mosaic i{animation:none;transform:none;transition:none;will-change:auto}
 #chooser .chooser-photo,#chooser .chooser-photo.on{transform:none!important;transition:none;will-change:auto}
 #recit #story-photo{transform:none!important;transition:none}
 #recit .journey-card{transition:none}
}