/* Équilibre premium : échelle typographique unique, plancher des petits textes, longueurs de ligne, sections resserrées.
   Chargée en dernier sur chaque page ; la retirer rend la mise en page précédente. */
@media screen{
:root{--ink-2:#5f5d58;--t-display:clamp(48px,6.2vw,96px);--t-h2:clamp(36px,3.8vw,56px);--t-h3:clamp(22px,1.9vw,28px);--t-h3-seq:clamp(24px,2.2vw,32px)}

/* Introductions de chapitre : marges verticales resserrées */
.b667-chapter-intro{padding-block:clamp(96px,11vw,136px)!important}

/* Titres : une seule famille, trois niveaux */
.b667-chapter-intro h2{font:900 var(--t-display)/.98 "Inter Tight","Arial Black",Arial,Helvetica,sans-serif!important;letter-spacing:-.05em!important}
@media(min-width:901px){
 .b6w-title,.b6p-word.w1,.b6p-word.w2,.s4 .w1,.s4 .w2{font-size:clamp(40px,4.6vw,68px)!important}
 .b6p-word:not(.w1):not(.w2){font-size:clamp(72px,9.5vw,140px)!important}
}
@media(max-width:760px){.b667-chapter-intro h2{font-size:clamp(38px,10vw,56px)!important}}
#about h2,.cv-summary h2{font-size:var(--t-h2)!important}
#expertise h3,#process h3,#contact h3,.cv-summary h3,.pc-txt h3{font-size:var(--t-h3)!important;line-height:1.15!important;letter-spacing:-.02em!important}
.b6x h3,.b6g h3{font-size:var(--t-h3-seq)!important;line-height:1.02!important}

/* Titres de section : colonne plus large, deux à trois lignes au lieu de cinq */
@media(min-width:901px){
 section:not(.outro-section) .section-head{max-width:1240px!important;grid-template-columns:minmax(0,1fr) minmax(0,2.6fr) minmax(0,1fr)!important}
 section:not(.outro-section) .section-head h2{max-width:22ch!important}
}

/* Petits textes : légendes de chiffres lisibles */
.pc-cap{font-size:14px!important;line-height:1.4!important}

/* Champs d'intervention : colonnes alignées, liens sobres au lieu de trois blocs jaunes */
#expertise .expertise-grid{align-items:start}
#expertise .expertise-grid .work-access a{display:inline-block;background:none;padding:0 0 3px!important;border-bottom:2px solid var(--acc,#e8d974);font:600 13px/1.3 "Inter",Arial,Helvetica,sans-serif;letter-spacing:0;text-transform:none}
#expertise .expertise-grid .work-access a::after{content:" →"}
#expertise .expertise-grid .work-access a:hover,#expertise .expertise-grid .work-access a:focus-visible{background:none;border-bottom-color:#111}
#expertise .expertise-grid ul{font-size:15px}

/* Méthode : textes des étapes à taille de lecture */
#process .steps p{font-size:16px;line-height:1.55}

/* Contact : l'adresse devient l'invitation finale */
#contact .email{display:inline-flex;align-items:baseline;gap:14px;margin-top:clamp(32px,3.5vw,48px);font:600 clamp(18px,1.6vw,22px)/1.3 "Inter",Arial,Helvetica,sans-serif;letter-spacing:-.01em;color:var(--ink,#202020);text-decoration:none;border-bottom:1px solid #e8d974;padding-bottom:6px;overflow-wrap:anywhere}
#contact .email::before{content:"E-mail";font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
#contact .email:hover,#contact .email:focus-visible{border-bottom-color:currentColor}

/* Longueur de ligne : 68 caractères au plus pour le texte courant */
html[data-eq=lecture] main p:not(.eyebrow),html[data-eq=lecture] main li{max-width:68ch}
main .experience-list p,main .cwf-archives p{max-width:68ch}

/* Héros mobile : voile plus dense sous le texte */
@media(max-width:760px){
 .hero .film::after{background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.2) 85%)!important}
 .hero .intro{color:rgba(247,246,242,.9)!important}
}

/* Tablette : en-tête allégé entre 761 et 900 px */
@media(min-width:761px) and (max-width:900px){
 header.header nav{display:none!important}
 .hero h1{font-size:clamp(48px,8vw,68px)!important}
}
}
/* Curseur pixel jaune (pioche DCLX), sans contour : natif, sans retard ; en noir sur les liens (jaune dans la zone noire du Contact) */
@media (hover:hover) and (pointer:fine){html,html *{cursor:url(curseur.svg?v=2) 8 8,auto!important}html a,html a *,html button,html button *,html summary,html label,html [role=button],html [onclick]{cursor:url(curseur-lien.svg?v=2) 8 8,pointer!important}html input:not([type=button]):not([type=submit]),html textarea{cursor:text!important}#contact a,#contact a *,#contact button,.footer a,.footer a *{cursor:url(curseur.svg?v=2) 8 8,pointer!important}.b667-cursor{display:none!important}}

/* Contact sur fond noir : section resserrée, deux boutons identiques et lisibles */
#contact.contact-section{padding-block:clamp(72px,8vw,112px) clamp(56px,6vw,88px)!important}
#contact .contact-heading{margin-bottom:clamp(28px,3vw,40px)!important}
#contact .contact-grid article{padding-block:clamp(28px,3vw,40px)!important}
#contact .button.primary,#contact .button.outline{background:#e8d974!important;border:1px solid #e8d974!important;color:#111!important;-webkit-text-fill-color:#111}
#contact .button.primary:hover,#contact .button.outline:hover{background:#f7f6f2!important;border-color:#f7f6f2!important}

/* Parcours puis CWF : deux calques posés l'un sur l'autre. Le jaune garde sa pente, le blanc a la pente inverse ; ombre très légère sous chacun. */
#about.about-section{z-index:2;margin-top:-44px!important;margin-bottom:0!important}
#about.about-section::before{clip-path:none!important;inset:0 0 -180px 0!important;transform:skewY(3deg);box-shadow:0 -1px 0 rgba(0,0,0,.07),0 -5px 12px -5px rgba(0,0,0,.2),0 -16px 30px -18px rgba(0,0,0,.12)}
.cv-summary.ox-src,.cv-summary{position:relative;z-index:3;isolation:isolate;margin-top:-52px}
.cv-summary::before{content:"";position:absolute;z-index:-1;inset:0 calc((100% - 100vw)/2) -180px;background:#f7f7f5;transform:skewY(-3deg);box-shadow:0 -1px 0 rgba(0,0,0,.07),0 -5px 12px -5px rgba(0,0,0,.2),0 -16px 30px -18px rgba(0,0,0,.12)}
/* le bas penché du blanc passe sous la section du film : seule la pente du haut se voit, et la carte noire reste au-dessus */
.outro-section.ox{position:relative;z-index:4}
@media(max-width:760px){#about.about-section{margin-top:-28px!important}.cv-summary{margin-top:-36px}#about.about-section::before{transform:skewY(4.5deg)}.cv-summary::before{transform:skewY(-4.5deg)}}

/* Pente entre chaque bloc de contenu, comme Prisme : calque penché à 3° (sens alterné), ombre fine, posé sur le bloc précédent.
   Les séquences d'images et les introductions de chapitre gardent leur forme. */
.f-calque{position:relative;isolation:isolate;background:transparent!important;margin-top:-44px!important;overflow-x:clip!important;overflow-y:visible!important}
.f-calque::before{content:"";position:absolute;z-index:-1;inset:0 calc((100% - 100vw)/2) -180px;background:var(--f-fond,#f7f7f5);transform:skewY(var(--f-pente,3deg));box-shadow:0 -1px 0 rgba(0,0,0,.07),0 -5px 12px -5px rgba(0,0,0,.2),0 -16px 30px -18px rgba(0,0,0,.12);pointer-events:none}
.f-inverse{--f-pente:-3deg}
.f-blanc{--f-fond:#fff}
.f-papier{--f-fond:#f7f7f5}
@media(max-width:760px){.f-calque{margin-top:-28px!important}.f-calque::before{transform:skewY(calc(var(--f-pente,3deg) * 1.5))}}
#profil.f-blanc{--pc-bg:#fff!important}
/* Introductions de chapitre : même calque penché, posées par-dessus le début de la séquence qui suit (pente inversée d'un calque à l'autre) */
.f-creme{--f-fond:#f4f1e9}
.f-sombre{--f-fond:#171817}
.f-dessus::before{inset:0 calc((100% - 100vw)/2) -40px;box-shadow:0 -1px 0 rgba(0,0,0,.07),0 -5px 12px -5px rgba(0,0,0,.2),0 -16px 30px -18px rgba(0,0,0,.12),0 5px 12px -5px rgba(0,0,0,.2),0 16px 30px -18px rgba(0,0,0,.12)}
.b6m-giant{display:none!important}
/* Équilibre des calques : pas d'ancien filet, et assez d'air pour qu'aucun texte ne passe sous la pente du bloc suivant */
.f-calque{border-block:0!important}
/* Séquences glissées sous l'introduction noire qui les précède : moins de vide entre la pente et l'image */
.b6g{margin-top:-64px}
@media(max-width:760px){.b6g{margin-top:-32px}}
/* Entrée de la séquence Sherpa : bord penché à 3° posé sur la fin de la séquence précédente, avec son ombre fine */
.b6p::before{content:"";position:absolute;z-index:31;left:0;right:0;top:calc(-2 * var(--f-demi));height:calc(2 * var(--f-demi));background:#eceae6;clip-path:polygon(0 0,100% 100%,0 100%);pointer-events:none}
.b6p::after{content:"";position:absolute;z-index:31;left:0;width:100%;top:calc(-2 * var(--f-demi) - 14px);height:14px;transform-origin:0 100%;transform:skewY(3deg);background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.12));pointer-events:none}
/* Projets : la phrase et le bouton passent sous l'en-tête, visibles avant la séquence */
.work-bottom--haut{margin-top:clamp(8px,1.5vw,20px);margin-bottom:clamp(28px,3vw,44px);border-top:0;padding-top:0}
/* Look 01 : du fond au-dessus de l'image (la tête et l'étiquette respirent sous la pente), fiche relevée au-dessus de la pente suivante */
.ss .ss-stage{top:clamp(72px,9vh,100px);height:calc(100% - clamp(72px,9vh,100px))}
.ss .ss-tag{top:clamp(92px,12vh,124px)}
.ss .ss-card{bottom:clamp(72px,11vh,110px)}
@media(max-width:760px){.ss .ss-stage{top:56px;height:calc(100% - 56px)}.ss .ss-tag{top:70px}.ss .ss-card{bottom:96px}}
.ss .ss-word{display:none!important}

/* Une seule règle d'espacement pour tous les blocs penchés : le même air visible entre la pente et le texte, en haut comme en bas.
   --f-demi : hauteur de la pente sur une demi-largeur d'écran ; --f-chev : recouvrement par le bloc suivant. */
:root{--f-air:clamp(56px,6vw,92px);--f-demi:2.62vw;--f-chev:44px}
@media(max-width:760px){:root{--f-air:44px;--f-demi:3.93vw;--f-chev:28px}}
.f-calque,#about.about-section,.cv-summary{padding-top:calc(var(--f-air) + var(--f-demi))!important;padding-bottom:calc(var(--f-air) + var(--f-chev) + var(--f-demi))!important}
/* introductions posées sur la séquence suivante : leur bas déborde de 40 px */
.f-dessus{padding-bottom:calc(var(--f-air) - 40px + var(--f-demi))!important;min-height:0!important}
/* CWF : la section du film qui suit n'a pas de pente */
.cv-summary{padding-bottom:var(--f-air)!important}
/* Profil en chiffres : la dernière étape garde déjà son propre air */
#profil .pc-step:last-child{padding-bottom:0!important;min-height:0!important}
#interlude .b667i-hud.t{top:clamp(64px,9vh,96px)!important}
@media(max-width:760px){.b6p::after{transform:skewY(4.5deg)}}
/* les étiquettes du bas de la séquence du garçon restent au-dessus de la pente Sherpa qui se pose dessus */
#interlude .b667i-hud:not(.t){bottom:calc(2 * var(--f-demi) + 14px)!important}
/* Safari : aucune coupe sur les blocs penchés (sans « overflow: clip », que Safari peut ignorer) ; la pente ne dépasse jamais en largeur */
.f-calque,#about.about-section,.cv-summary,.b667-chapter-intro.f-calque{overflow:visible!important}
/* Varsity : pas de grand mot en fond */
.b6x-word{display:none!important}
/* Projets : la séquence finit le bloc, la pente du chapitre suivant se pose directement dessus (pas de bande vide) */
#work.f-calque{padding-bottom:var(--f-chev)!important}
.b6v-frame{background:#f7f7f5!important}
/* Fin du chapitre CWF : pente ombrée posée au-dessus du film ; la carte noire sort de dessous */
.cv-summary.ox-src{z-index:50!important;padding-bottom:calc(var(--f-air) + var(--f-demi))!important}
.cv-summary::before{inset:0 calc((100% - 100vw)/2) calc(-2 * var(--f-demi) - 40px)!important;box-shadow:0 -1px 0 rgba(0,0,0,.07),0 -5px 12px -5px rgba(0,0,0,.2),0 -16px 30px -18px rgba(0,0,0,.12),0 1px 0 rgba(0,0,0,.07),0 6px 12px -5px rgba(0,0,0,.22),0 18px 30px -18px rgba(0,0,0,.14)!important}
.outro-section.ox{height:calc(100svh + 90svh)!important}
.outro-section.ox{z-index:46!important}
.outro-section.ox.ox-devant{z-index:60!important}
.outro-section.ox.ox-devant,.outro-section.ox.ox-devant .ox-pin{background:transparent!important}
/* quand la carte passe devant : le fond de la section commence sous la pente du CWF (qui reste visible), avec son ombre */
.outro-section.ox.ox-devant::before{content:"";position:absolute;z-index:-1;inset:0;background:#f7f7f5;pointer-events:none;
  clip-path:polygon(0 calc(3 * var(--f-demi) + 40px),100% calc(var(--f-demi) + 40px),100% 100%,0 100%)}
.outro-section.ox.ox-devant::after{display:block!important;content:"";position:absolute;z-index:-1;left:0;right:0;top:calc(2 * var(--f-demi) + 40px);height:22px;
  transform:skewY(-3deg);transform-origin:50% 0;background:linear-gradient(rgba(0,0,0,.13),rgba(0,0,0,0));pointer-events:none}
@media(max-width:760px){.outro-section.ox.ox-devant::after{transform:skewY(-4.5deg)}}
/* Lenis (défilement lissé) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
/* une seule courbe de mouvement */
:root{--courbe:cubic-bezier(.2,.7,.1,1)}

/* ---------- Typographie éditoriale : Inter Tight (titres), Inter (texte), Instrument Serif (accents) ---------- */
body,p,li,dd,dt,a,button,input,textarea,select,figcaption,small,span{font-family:"Inter",Arial,Helvetica,sans-serif}
h1,h2,h3,h4,.b6w-title,.b6p-word,.b6w-card h4,.b6x-card h3{font-family:"Inter Tight","Arial Black",Arial,sans-serif!important}
/* chiffres clés : restent en Arial Black (choix de Didier) */
.pc-n,.pc-n *{font-family:"Arial Black",Arial,Helvetica,sans-serif!important}
/* accents éditoriaux en serif */
.b667-chapter-intro h2,.hero.immersive h1{text-transform:uppercase}
.t-serif{font-size:1.08em}
.t-serif{font-family:"Instrument Serif",Georgia,serif!important;font-weight:400!important;letter-spacing:-.01em!important}
.b667-chapter-intro>p:last-child{font-family:"Instrument Serif",Georgia,serif!important;font-style:italic;font-size:clamp(20px,2vw,28px)!important;line-height:1.3!important;opacity:1!important}
.b667-chapter-intro>p:last-child .b6m-hl{font-style:italic}

/* ===== Cartes posées sur les images : un seul format partout =====
   Fond mat translucide (on lit sans masquer l'image), angles arrondis, aucune flou d'arrière-plan ; même surtitre, même titre, même texte. */
html body :is(.ss-card,.s1 .b6p-chip,.b6w-card,.b6x-steps article,.b6g-cap,.b6v-steps article,.b6z-mid){background:rgba(248,245,240,.72)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-radius:18px!important;box-shadow:0 20px 48px -28px rgba(40,28,20,.42)!important;padding:20px 22px 22px!important;border:0!important}
html body .s3 .b6p-txt{background:rgba(17,17,17,.6)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-radius:18px!important;padding:16px 20px!important}
/* surtitre */
html body :is(.b6v-k,.ss-lab,.b6w-card>span,.b6x-steps b,.b6g-cap>span,.s1 .b6p-txt span,.b6z-mid .eyebrow){font:600 11px/1.3 "Inter",Arial,Helvetica,sans-serif!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:#6b665c!important}
html body .b6v-k b{color:#111!important;font-weight:600!important}
/* titre */
html body :is(.b6v-steps h3,.ss-card h3,.b6w-card h4,.b6x-steps h3,.b6g-cap h3,.s1 .b6p-head2){font:900 clamp(24px,2.3vw,36px)/1 "Inter Tight","Arial Black",Arial,Helvetica,sans-serif!important;letter-spacing:-.04em!important;color:#141413!important;margin:10px 0 0!important}
/* texte */
html body :is(.b6v-steps p,.b6w-card p,.b6x-steps p,.b6g-cap p,.s1 .b6p-txt p){font:400 15px/1.5 "Inter",Arial,Helvetica,sans-serif!important;color:#3a3732!important;margin:10px 0 0!important;max-width:none!important}
html body .b6v-steps a{margin-top:14px!important}
/* le voile dégradé derrière le texte n'a plus lieu d'être : la carte suffit */
html body .b6v-scrim{display:none!important}
@media(max-width:760px){html body :is(.ss-card,.s1 .b6p-chip,.b6w-card,.b6x-steps article,.b6g-cap,.b6v-steps article){padding:16px 18px 18px!important}html body :is(.b6v-steps h3,.ss-card h3,.b6w-card h4,.b6x-steps h3,.b6g-cap h3,.s1 .b6p-head2){font-size:22px!important}}