/* Page projet Baki × Netflix — styles propres à la page (le cadre vient de base.css + projet.css) */
/* =====================================================================
   UNIVERS BAKI — le noir mat des visuels (#1E1E1E), le blanc du pinceau, le rouge Netflix en accent
   Grille 12 col. Chaque bloc = filet + rubrique, texte (4 col) / visuels (8 col).
   ===================================================================== */
html{overflow-x:clip}body{background:#F1EFEA}
.page-projet{--fond-projet:#1E1E1E;--texte-projet:#F1EFEA;--accent-projet:#E50914;--trait-projet:rgba(241,239,234,.2);--doux-projet:#A9A6A0;--tuile:#1E1E1E;--ink:241,239,234}
.planche{color:var(--texte-projet)}
.mono{color:inherit;font-size:max(11px,calc(11px*var(--k)))}
.bloc-tete,.chap .num,figure.f figcaption .leg,.credit{color:rgba(241,239,234,.66)!important}

/* --- hero : la carte et le marque-page en quinconce, fondus dans le noir --- */
.p-hero{height:min(calc(100vh - var(--barre) - var(--cadre-l)),760px);min-height:560px}
.p-hero::after{display:none}
.p-hero .fondu{position:absolute;top:0;bottom:0;right:0;width:66%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 20%,#000 48%),linear-gradient(0deg,transparent 0%,rgba(0,0,0,.5) 14%,#000 38%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 20%,#000 48%),linear-gradient(0deg,transparent 0%,rgba(0,0,0,.5) 14%,#000 38%);mask-composite:intersect}
.p-hero .fondu img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%;animation:h-lent 22s linear both}
@keyframes h-lent{from{transform:scale(1.1)}to{transform:scale(1)}}
.p-hero .p-titre{font-size:min(12vw,176px);line-height:.8;white-space:nowrap;max-width:none}
/* éclaboussures d'encre autour du titre : elles tombent une à une */
.encre{position:absolute;inset:0;pointer-events:none;z-index:1}
.encre i{position:absolute;border-radius:50%;background:var(--texte-projet);opacity:0;transform:scale(.2);animation:goutte .5s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes goutte{to{opacity:var(--o,.9);transform:scale(1)}}

/* --- intro --- */
.p-meta dl{border-top-color:var(--texte-projet)}
.p-meta dt{color:var(--doux-projet)}
.p-texte p+p{color:var(--texte-projet);font-size:16px}
.p-texte .lab{color:var(--doux-projet)}

/* --- chapitre --- */
.chap{display:grid;grid-template-columns:repeat(12,1fr);gap:0 var(--gouttiere);padding:120px var(--m) 64px;border-top:1px solid var(--texte-projet)}
.chap .num{grid-column:1/-1;display:flex;justify-content:space-between;margin-bottom:26px}
.chap h2{grid-column:1/8;font-weight:900;font-stretch:25%;text-transform:uppercase;line-height:.84;font-size:min(8vw,112px);text-wrap:balance}
.chap h2 span{color:var(--accent-projet)}
.chap p{grid-column:9/13;align-self:end;font-size:17px;line-height:1.55}

/* --- bloc --- */
.bloc{display:grid;grid-template-columns:repeat(12,1fr);gap:0 var(--gouttiere);padding:0 var(--m) 96px}
.bloc-tete{grid-column:1/-1;display:flex;justify-content:space-between;border-top:1px solid var(--trait-projet);padding-top:10px;margin-bottom:30px}
.bloc .tx{grid-column:1/5;align-self:start}
.bloc .vis{grid-column:5/13;min-width:0}
.bloc.inv .tx{grid-column:9/13;grid-row:2}
.bloc.inv .vis{grid-column:1/9;grid-row:2}
.bloc.plein .tx{grid-column:1/6;margin-bottom:34px}
.bloc.plein .vis{grid-column:1/-1}
.tx h3{font-size:34px;font-weight:800;font-stretch:32%;text-transform:uppercase;line-height:.92;margin-bottom:16px;text-wrap:balance}
.tx p{font-size:16px;line-height:1.6;max-width:40ch;text-wrap:pretty}
.tx p+p{margin-top:12px}
.tx ul{list-style:none;margin-top:18px;border-top:1px solid var(--texte-projet);max-width:40ch}
.tx li{display:grid;grid-template-columns:34px 1fr;padding:10px 0;border-bottom:1px solid var(--trait-projet);font-size:15px}
.tx li span{font-family:var(--mono);font-size:10px;color:var(--doux-projet);padding-top:4px}
.tx .aide{display:flex;align-items:flex-start;gap:8px;margin-top:22px;color:var(--accent-projet)}
.tx .aide::before{content:"";width:18px;height:1px;background:currentColor;flex:none;margin-top:.62em}

/* apparition légère + repères qui se tracent */
.monte{opacity:0;transform:translateY(22px);transition:opacity .9s var(--machine),transform 1.1s var(--machine)}
.monte.vu{opacity:1;transform:none}
figure.f.rv::before{clip-path:inset(0 100% 100% 0);transition:clip-path 1.1s var(--machine)}
figure.f.rv::after,figure.f.rv figcaption{opacity:0;transition:opacity .6s var(--doux) .5s}
figure.f.rv>.tuile{clip-path:inset(100% 0 0 0);transition:clip-path 1.2s var(--machine) .25s}
figure.f.rv.vu::before{clip-path:inset(0)}
figure.f.rv.vu::after,figure.f.rv.vu figcaption{opacity:1}
figure.f.rv.vu>.tuile{clip-path:inset(0)}

/* repère d'imprimeur (DA du site) : filet tireté + traits de coupe aux 4 coins + étiquettes mono */
.tuile{position:relative;overflow:hidden}
.tuile img{display:block;width:100%;height:auto}
figure.f{position:relative;display:flex;flex-direction:column;min-width:0;padding:22px;--cdc:rgba(var(--ink),.6)}
figure.f::before{content:"";position:absolute;inset:10px;border:1px dashed var(--trait-projet);pointer-events:none;z-index:2}
figure.f::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:
  linear-gradient(var(--cdc),var(--cdc)) left 0 top 10px/6px 1px no-repeat,linear-gradient(var(--cdc),var(--cdc)) left 10px top 0/1px 6px no-repeat,
  linear-gradient(var(--cdc),var(--cdc)) right 0 top 10px/6px 1px no-repeat,linear-gradient(var(--cdc),var(--cdc)) right 10px top 0/1px 6px no-repeat,
  linear-gradient(var(--cdc),var(--cdc)) left 0 bottom 10px/6px 1px no-repeat,linear-gradient(var(--cdc),var(--cdc)) left 10px bottom 0/1px 6px no-repeat,
  linear-gradient(var(--cdc),var(--cdc)) right 0 bottom 10px/6px 1px no-repeat,linear-gradient(var(--cdc),var(--cdc)) right 10px bottom 0/1px 6px no-repeat}
figure.f figcaption{position:absolute;inset:0;z-index:3;pointer-events:none}
figure.f figcaption .leg{position:absolute;left:34px;top:-4px;line-height:1;white-space:nowrap}
figure.f figcaption .seg{position:absolute;right:30px;top:-12px;pointer-events:auto;background:var(--fond-projet)}

/* rangée justifiée : même hauteur, aucun recadrage */
.rang{display:flex;gap:var(--gouttiere);align-items:flex-start}
.rang>figure{flex:var(--r) 1 0;min-width:0}

/* sélecteur de vue */
.seg{display:inline-flex;border:1px solid rgba(var(--ink),.35);border-radius:999px;padding:2px;gap:2px;flex:none}
.seg button{border:0;background:none;border-radius:999px;padding:3px 10px;min-height:22px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--doux-projet);cursor:pointer;transition:background .35s,color .35s}
.seg button[aria-pressed="true"]{background:var(--texte-projet);color:var(--fond-projet)}
.seg button:focus-visible{outline:2px solid var(--accent-projet);outline-offset:2px}

/* vues qui se remplacent par un scan (de haut en bas), la case prend la hauteur de la vue */
.scan{position:relative;margin-inline:auto;transition:height .75s var(--machine),width .75s var(--machine)}
figure.f[data-x="vues"]{transition:width .75s var(--machine);max-width:100%}
.bloc.inv figure.f[data-x="vues"]{margin-left:auto}
.scan img{position:absolute;left:0;top:0;width:100%;height:auto;clip-path:inset(0);z-index:1}
.scan img.on{z-index:2}
.scan img:not(.on):not(.reste){visibility:hidden}
.scan .scan-in{clip-path:inset(0 0 100% 0)!important}
.scan .scan-go{transition:clip-path .8s var(--machine)!important}
.scan[role="button"]{cursor:pointer}
.scan[role="button"]:focus-visible{outline:2px dashed var(--accent-projet);outline-offset:6px}

/* note manuscrite */
.x-note{position:absolute;font-family:var(--hand);color:var(--rouge);font-size:32px;line-height:.9;white-space:nowrap;z-index:4;pointer-events:none}
.x-note svg{position:absolute;overflow:visible}.x-note path{fill:none;stroke:var(--rouge);stroke-width:2.2;stroke-linecap:round}

/* citation */
.p-citation{display:grid;grid-template-columns:repeat(12,1fr);gap:0 var(--gouttiere);padding:0 var(--m) 96px}
.p-citation small{grid-column:1/-1;border-top:1px solid var(--trait-projet);padding-top:10px;margin:0 0 26px;color:var(--doux-projet)}
.p-citation p,.p-citation.longue p{grid-column:1/11;font-size:min(7vw,104px);line-height:.86;color:var(--texte-projet)}

.credit{padding:0 var(--m) 60px}
.vis>*+*{margin-top:calc(var(--gouttiere) + 22px)}
.doigt{display:none}
@media (hover:none){.souris{display:none}.doigt{display:inline}}

@media (max-width:900px){
  .p-hero .fondu{width:100%;opacity:.55}
  .p-hero .p-titre{font-size:clamp(64px,20vw,150px)}
  .chap{padding:72px var(--m) 48px}.chap h2,.chap p{grid-column:1/-1}.chap p{margin-top:20px}
  .chap .num{flex-direction:column;align-items:flex-start;gap:4px}
  .bloc{padding-bottom:64px}.bloc .tx,.bloc .vis,.bloc.inv .tx,.bloc.inv .vis{grid-column:1/-1!important;grid-row:auto!important}
  .bloc .tx{margin-bottom:24px}
  .p-citation p,.p-citation.longue p{grid-column:1/-1;font-size:44px}
  .rang{flex-direction:column;gap:40px}.rang>figure{flex:none;width:100%}
  .x-note{font-size:26px}
}
@media (max-width:600px){
  .p-hero{height:auto;min-height:0;display:flex;flex-direction:column}
  .p-hero .fondu{position:relative;width:100%;height:68vw;opacity:1;-webkit-mask-image:linear-gradient(0deg,transparent 0%,#000 40%);mask-image:linear-gradient(0deg,transparent 0%,#000 40%)}
  .p-hero .h-in{position:relative;left:auto;right:auto;bottom:auto;padding:22px var(--m) 30px}
  figure.f figcaption .seg{right:18px}
  .x-note{display:none}
}
@media (prefers-reduced-motion:reduce){.monte{opacity:1;transform:none}.p-hero .fondu img{animation:none}.encre i{animation:none;opacity:var(--o,.9);transform:none}.scan{transition:none}}