/* Page projet Bauhaus (Le 109) — styles propres à la page (le cadre vient de base.css + projet.css) */
/* =====================================================================
   UNIVERS BAUHAUS — le blanc cassé et le noir des affiches, une primaire par discipline
   (rouge architecture, jaune meubles, bleu objets, vert arts). La trame de points des affiches en fond du hero.
   Grille 12 col. Chaque bloc = filet + rubrique, texte (4 col) / visuels (8 col).
   ===================================================================== */
html{overflow-x:clip}
.page-projet{--fond-projet:#E8E4D9;--texte-projet:#1D1D1D;--accent-projet:#0E4375;--trait-projet:rgba(29,29,29,.22);--doux-projet:#6B675E;--tuile:#E8E4D9;--ink:29,29,29;
  --archi:#A11411;--meubles:#EBB209;--objets:#0E4375;--arts:#418D45}
.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:var(--doux-projet)!important}

/* --- hero : l'affiche générique en situation dans la ville, la trame de points des affiches se pose --- */
.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:64%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 18%,#000 46%),linear-gradient(0deg,transparent 0%,rgba(0,0,0,.5) 12%,#000 34%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 18%,#000 46%),linear-gradient(0deg,transparent 0%,rgba(0,0,0,.5) 12%,#000 34%);mask-composite:intersect}
.p-hero .fondu img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 50%;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(14vw,200px);line-height:.8;white-space:nowrap;max-width:none}
/* trame de points (celle des affiches) : elle se pose de gauche à droite */
.points{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(29,29,29,.28) 1px,transparent 1.4px);background-size:22px 22px;background-position:11px 11px;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 30%,transparent 62%);mask-image:linear-gradient(90deg,#000 0%,#000 30%,transparent 62%);clip-path:inset(0 100% 0 0);animation:points 2.2s var(--machine) .3s forwards}
@keyframes points{to{clip-path:inset(0)}}

/* --- 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 p+p+p{margin-top:12px}
.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)}
figure.f figcaption .seg.bas{top:auto;bottom:-12px}

/* 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}

/* légende des couleurs : une primaire = une discipline (boutons liés au sélecteur de l'affiche) */
.code-z{position:relative;margin-top:20px}
.code{list-style:none;border-top:1px solid var(--texte-projet);max-width:40ch}
.tx .code li{display:block;padding:0;border:0;font-size:inherit}
.code button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start;width:100%;padding:11px 0;border-bottom:1px solid var(--trait-projet);cursor:pointer;font-size:15px;line-height:1.4;transition:opacity .35s}
.code button i{width:14px;height:14px;margin-top:3px;background:var(--c);transition:transform .45s var(--machine)}
.tx .code button span{font-family:var(--flex);font-size:15px;color:inherit;padding:0}
.code button b{font-weight:700}
.tx .code button small{display:block;color:var(--doux-projet);font-size:14px}
.code[data-actif] button{opacity:.42}
.code button[aria-pressed="true"]{opacity:1}
.code button[aria-pressed="true"] i{transform:rotate(45deg) scale(.86)}
.code button:hover{opacity:1}
.code button:focus-visible{outline:2px solid var(--accent-projet);outline-offset:2px}
.seg button .pt{display:inline-block;width:7px;height:7px;background:var(--c);margin-right:6px;vertical-align:1px}

/* le système : l'affiche à gauche, le plan de montage à droite */
.vis.duo{display:grid;grid-template-columns:7fr 5fr;gap:var(--gouttiere);align-items:center}
.c-aff{min-width:0}
.maquette .tuile{overflow:visible}
.scene{position:relative}
.plan{display:block;width:100%;height:auto;overflow:visible}
.zone{cursor:pointer;transition:opacity .6s var(--doux),transform .7s var(--machine)}
.zone:hover{transform:translateY(-4px)}
.scene[data-d]:not([data-d="0"]) .zone{opacity:.16}
.scene[data-d] .zone.on{opacity:1;transform:translateY(-12px)}
/* l'objet se trace (comme en CAO), puis prend sa couleur */
.obj{pointer-events:none}
.obj [pathLength]{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .35s}
.obj.on [pathLength]{stroke-dashoffset:0;transition:stroke-dashoffset 1.3s var(--machine) .2s}
.obj g *{fill-opacity:0;transition:fill-opacity .3s}
.obj.on g *{fill-opacity:1;transition:fill-opacity .7s var(--doux) 1.1s}
.obj .tir{opacity:0;transition:opacity .3s}
.obj.on .tir{opacity:1;transition:opacity .6s 1s}
.obj .fil{fill:none;stroke:#1D1D1D;stroke-width:1}
.obj .pt{fill:#1D1D1D;stroke:none;opacity:0;transition:opacity .3s}
.obj.on .pt{opacity:1}
/* la fiche technique (comme sur les affiches) en bas à gauche du plan */
.fiches{position:relative;margin-top:14px;min-height:214px;font-size:11px;line-height:1.45}
.fiches .code{margin:0;max-width:none}
.fiches .code button{padding:7px 0;grid-template-columns:14px 1fr;gap:10px}
.fiches .code button i{width:11px;height:11px;margin-top:3px}
.tx .fiches .code button span,.fiches .code button span{font-family:var(--flex);font-size:15px}
.fiche{display:none}
.fiche.on{display:block}
.fiches.ouvert .code{display:none}
.fiches .code{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
.fiche .tag{display:inline-block;background:#1D1D1D;color:#F4F1E8;padding:2px 6px;letter-spacing:.04em}
.fiche .gps{display:block;margin-top:4px;color:var(--doux-projet);font-size:10px}
.fiche b{display:flex;align-items:center;gap:8px;font-family:var(--flex);font-size:20px;font-weight:800;font-stretch:40%;text-transform:uppercase;line-height:1;margin:12px 0 10px}
.fiche b::before{content:"";width:12px;height:12px;background:var(--c);transform:rotate(45deg);flex:none}
.fiche dl{display:grid;grid-template-columns:62px 1fr;border-top:1px solid var(--texte-projet)}
.fiche dd{text-transform:none;letter-spacing:0}
.fiche dt,.fiche dd{padding:5px 0;border-bottom:1px solid var(--trait-projet)}
.fiche dt{color:var(--doux-projet);text-transform:uppercase;letter-spacing:.06em;font-size:10px}
.fiche.on dd{animation:tape .7s steps(28) both}
.fiche.on dd:nth-of-type(2){animation-delay:.15s}.fiche.on dd:nth-of-type(3){animation-delay:.3s}.fiche.on dd:nth-of-type(4){animation-delay:.45s}
@keyframes tape{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
.retour{all:unset;cursor:pointer;margin-top:10px;display:inline-block;color:var(--accent-projet);font-size:11px;letter-spacing:.04em}
.retour:focus-visible{outline:2px solid var(--accent-projet);outline-offset:2px}
/* la note : posée dans le vide en haut à droite du plan, la flèche tombe sur la zone verte */
.x-note.pn{left:52%;top:9%;font-size:26px;transition:opacity .4s}
.plan .fleche{fill:none;stroke:var(--rouge);stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke;transition:opacity .4s}
.scene[data-d]:not([data-d="0"]) .x-note.pn,.scene[data-d]:not([data-d="0"]) .fleche{opacity:0}
@media (max-width:1180px){.x-note.pn,.plan .fleche{display:none}}
@media (max-width:900px){.vis.duo{grid-template-columns:1fr;gap:48px}.fiches{position:relative;width:auto;margin-top:18px}}

/* motions : format panneau urbain, côte à côte */
.rang.etroit{max-width:var(--mw,720px);margin-inline:auto}
.motion video{display:block;width:100%;height:auto;background:var(--fond-projet)}

/* 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)}
.p-citation p span{color:var(--accent-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}
  figure.f figcaption .seg.bas{right:auto;left:50%;transform:translateX(-50%)}
  .seg.bas button{padding:3px 6px}.seg.bas .pt{display:none}
  .x-note{display:none}
}
@media (prefers-reduced-motion:reduce){.points{animation:none;clip-path:none}.monte{opacity:1;transform:none}.p-hero .fondu img{animation:none}.scan{transition:none}}