/* Polybois — les grands moments (palier 2). Chargé après css/site.css. Les états cachés n'existent que sous
   .js:not(.no-anim) : sans JavaScript ou en mouvement réduit, tout est lisible, dans l'ordre du document. */

/* ============ persiennes ============ */
.pers{position:relative;overflow:hidden;background:var(--dark-2)}
.pers-images{margin:0;padding:0;list-style:none}
.pers-images li + li{margin-top:12px}
.pers-images img{width:100%;height:auto}
.js:not(.no-anim) .pers--actif .pers-images{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pers-scene{position:absolute;inset:0;perspective:2400px;perspective-origin:50% 45%}
.pers-latte{position:absolute;top:0;height:100%;transform-style:preserve-3d}
.pers-scene:not(.pers-au-repos) .pers-latte{will-change:transform}
.pers-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background-repeat:no-repeat}
.pers-av{transform:translateZ(calc(var(--ep) / 2))}
.pers-ar{transform:rotateY(180deg) translateZ(calc(var(--ep) / 2))}
.pers-face i{position:absolute;inset:0;background:#0b0605;opacity:0;pointer-events:none}
.pers-face.pers-bois{box-shadow:inset 1px 0 0 rgba(0,0,0,.55),inset -1px 0 0 rgba(255,220,180,.06)}
.pers-chant{position:absolute;top:0;height:100%;width:var(--ep);left:calc(50% - var(--ep) / 2);
  background:linear-gradient(90deg,#3b2415,#8c5b35 38%,#a8744a 52%,#6e4427 70%,#2e1b10);
  overflow:hidden}
.pers-chant i{position:absolute;inset:0;background:#0b0605;opacity:.65}
.pers-repos .pers-chant{visibility:hidden}
.pers-plein{position:absolute;inset:0;background-repeat:no-repeat;visibility:hidden;transform:translateZ(calc(var(--ep, 0px) / 2))}
.pers-au-repos .pers-plein{visibility:visible}
.pers-au-repos .pers-latte{visibility:hidden}
.pers-cg{transform:rotateY(-90deg) translateZ(calc(var(--w) / 2))}
.pers-cd{transform:rotateY(90deg) translateZ(calc(var(--w) / 2))}

/* ============ le héros : l'ouverture (dans .hero-media de site.css) ============ */
.hero-media .pers{position:absolute;inset:0;background:var(--dark-2)}
/* ============ la carte des chantiers ============ */
.carte{position:relative;background:#120b09;color:var(--paper)}
.carte-pin{position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden}
.carte-scene{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease-out)}
.carte--3d .carte-scene{opacity:1}
.carte-scene canvas{display:block;width:100%;height:100%}
.carte-plate{position:absolute;right:3%;top:50%;width:min(64%,1100px);height:auto;transform:translateY(-50%);opacity:.92;transition:opacity .8s}
.carte--3d .carte-plate{opacity:0;visibility:hidden}
.carte-pin::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(18,11,9,.92) 0%,rgba(18,11,9,.55) 26%,rgba(18,11,9,0) 46%),
             radial-gradient(120% 90% at 60% 50%,rgba(18,11,9,0) 55%,rgba(18,11,9,.55) 100%)}
.carte-bandes{position:absolute;z-index:2;left:var(--side);top:50%;transform:translateY(-50%);width:min(430px,34vw)}
.carte-bande .eyebrow{color:var(--brass);margin-bottom:18px}
.carte-bande h2{font-size:var(--t-h2);line-height:1.02;font-weight:300}
.carte-bande p{margin-top:20px;color:var(--paper-dim);font-size:var(--t-lede);line-height:1.55}
.js:not(.no-anim) .carte-bande{position:absolute;left:0;right:0;top:50%;margin-top:-6em;opacity:0;visibility:hidden}
.js:not(.no-anim) .carte-bande:first-child{opacity:1;visibility:visible}
.carte-compte{position:absolute;z-index:2;right:var(--side);bottom:34px;display:flex;gap:34px;padding:16px 22px 14px;background:rgba(18,11,9,.8);font:600 11px/1.3 var(--sans);
  font-stretch:112%;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-dim)}
.carte-compte b{display:block;font:300 44px/1 var(--serif);letter-spacing:-.02em;text-transform:none;color:var(--paper);margin-bottom:8px;font-variant-numeric:tabular-nums}
.carte-etiquettes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.carte-etiq{position:absolute;left:0;top:0;margin:-50px 0 0 8px;padding:6px 10px 7px;background:rgba(18,11,9,.84);border-left:2px solid var(--brass);
  opacity:0;transition:opacity .45s;white-space:nowrap;will-change:transform}
.carte-etiq.on{opacity:1}
.carte-etiq b{display:block;font:400 16px/1.1 var(--serif);color:var(--paper)}
.carte-etiq span{display:block;margin-top:3px;font:600 10px/1 var(--sans);font-stretch:112%;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.carte-etiq--atelier{border-left-color:var(--bordeaux-soft)}
.carte-etiq--atelier b{color:#fff}
.carte-etiq--atelier span{color:#e7a48c}
.carte-fiche{position:absolute;left:0;top:0;z-index:3;width:300px;padding:16px 18px 14px;background:rgba(244,239,231,.97);color:var(--ink);
  border-top:2px solid var(--bordeaux);box-shadow:0 18px 40px rgba(0,0,0,.4);pointer-events:none;opacity:0;transition:opacity .25s}
.carte-fiche.on{opacity:1}
.carte-fiche-ville{font:400 22px/1.1 var(--serif)}
.carte-fiche-ville span{display:block;margin-top:4px;font:600 10px/1 var(--sans);font-stretch:112%;letter-spacing:.14em;text-transform:uppercase;color:var(--bordeaux-text)}
.carte-fiche ul{margin-top:10px;border-top:1px solid var(--line)}
.carte-fiche li{padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.35}
.carte-fiche li em{display:block;font-style:normal;color:var(--muted);font-size:12px}
.carte-fiche li.plus{color:var(--muted);border-bottom:0}
.carte-liste{padding:clamp(40px,7vh,80px) var(--side);border-top:1px solid var(--line-dark)}
.carte-liste summary{cursor:pointer;font:400 var(--t-h3)/1.2 var(--serif);color:var(--paper);list-style:none}
.carte-liste summary::after{content:"  +";color:var(--brass)}
.carte-liste[open] summary::after{content:"  −"}
.carte-liste-grille{columns:3 280px;column-gap:48px;margin-top:32px}
.carte-lieu{break-inside:avoid;padding:14px 0;border-top:1px solid var(--line-dark)}
.carte-lieu h3{font:400 19px/1.2 var(--serif)}
.carte-lieu h3 span{margin-left:8px;font:600 10px/1 var(--sans);font-stretch:112%;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.carte-lieu li{font-size:14px;line-height:1.45;color:var(--paper-dim);margin-top:5px}
.carte-lieu li em{font-style:normal;color:rgba(244,239,231,.5)}
/* sans JavaScript ou mouvement réduit : la carte plate, puis les bandes l'une sous l'autre */
.no-js .carte-pin,.no-anim .carte-pin{height:auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:40px;
  padding:clamp(60px,10vh,120px) var(--side);align-items:center}
.no-js .carte-plate,.no-anim .carte-plate{position:static;width:100%;transform:none;grid-column:2;grid-row:1 / span 2}
.no-js .carte-bandes,.no-anim .carte-bandes{position:static;transform:none;width:auto;grid-column:1}
.no-js .carte-bande + .carte-bande,.no-anim .carte-bande + .carte-bande{margin-top:40px}
.no-js .carte-compte,.no-anim .carte-compte{position:static;grid-column:1;background:none;padding:0}
.no-js .carte-scene,.no-anim .carte-scene,.no-js .carte-pin::after,.no-anim .carte-pin::after{display:none}

/* ============ la traversée des salles ============ */
.salles{position:relative;background:var(--dark-2);color:var(--paper)}
.salles-pin{position:relative;height:100vh;height:100svh;min-height:620px;display:grid;grid-template-columns:minmax(300px,.8fr) minmax(0,2.2fr);overflow:hidden}
.salles-cadre{position:relative;grid-column:2;margin:clamp(70px,11vh,110px) var(--side) clamp(40px,7vh,70px) 0;min-height:0}
.salles-cadre .pers{position:absolute;inset:0}
.salles-texte{grid-column:1;position:relative;padding:clamp(70px,11vh,110px) 48px clamp(40px,7vh,70px) var(--side);display:flex;flex-direction:column;justify-content:space-between}
.salles-texte .eyebrow{color:var(--brass)}
.salles-texte h2{font-size:clamp(34px,3.6vw,56px);line-height:1.02;font-weight:300}
.salles-legendes{position:relative;min-height:190px}
.salle{border-top:1px solid var(--line-dark);padding-top:18px}
.salle-secteur{font:600 11px/1.3 var(--sans);font-stretch:112%;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.salle-nom{margin-top:10px;font:400 clamp(24px,2.1vw,32px)/1.12 var(--serif)}
.salle-lieu{margin-top:10px;color:var(--paper-dim);font-size:15px;line-height:1.5}
.js:not(.no-anim) .salle{position:absolute;left:0;right:0;top:0;opacity:0;transform:translateY(14px);transition:opacity .5s,transform .7s var(--ease-out)}
.js:not(.no-anim) .salle.on{opacity:1;transform:none}
.salles-compte{display:flex;align-items:center;gap:16px;font:600 11px/1 var(--sans);font-stretch:112%;letter-spacing:.16em;color:var(--paper-dim)}
.salles-compte b{font:300 30px/1 var(--serif);color:var(--paper);letter-spacing:0;font-variant-numeric:tabular-nums}
.salles-barre{flex:1;height:1px;background:var(--line-dark);position:relative;overflow:hidden}
.salles-barre i{position:absolute;inset:0;background:var(--brass);transform-origin:0 50%;transform:scaleX(0)}
.no-js .salles-pin,.no-anim .salles-pin{height:auto;display:block}
.no-js .salles-cadre,.no-anim .salles-cadre{margin:0 var(--side) 40px}
.no-js .salles-cadre .pers,.no-anim .salles-cadre .pers{position:static;background:none}
.no-js .salles-compte,.no-anim .salles-compte{display:none}
.no-js .salle + .salle,.no-anim .salle + .salle{margin-top:24px}

@media (max-width:900px){
  .carte-bandes{top:auto;bottom:128px;transform:none;width:auto;right:var(--side)}
  .js:not(.no-anim) .carte-bande{top:auto;bottom:0;margin-top:0}
  .carte-bande h2{font-size:clamp(30px,8vw,40px)}
  .carte-bande p{font-size:15px}
  .carte-pin::after{background:linear-gradient(0deg,rgba(18,11,9,.95) 0%,rgba(18,11,9,.6) 38%,rgba(18,11,9,0) 62%)}
  .carte-compte{left:var(--side);right:var(--side);bottom:18px;gap:18px;padding:12px 16px 10px;justify-content:space-between}
  .carte-compte b{font-size:30px}
  .carte-plate{width:92%;right:4%;top:32%}
  .no-js .carte-pin,.no-anim .carte-pin{grid-template-columns:1fr}
  .no-js .carte-plate,.no-anim .carte-plate{grid-column:1;grid-row:auto}
  .salles-pin{grid-template-columns:1fr;grid-template-rows:1fr auto}
  .salles-cadre{grid-column:1;grid-row:1;margin:76px 0 0}
  .salles-texte{grid-row:2;padding:22px var(--side) 26px}
  .salles-texte h2{display:none}
  .salles-legendes{min-height:128px}
  .salle-secteur,.salles-compte,.carte-compte,.carte-etiq span,.carte-fiche-ville span{font-size:12px}   /* QA 3b : rien sous 12 px à 390 */
}
@media (prefers-reduced-motion:reduce){.carte-scene,.carte-etiq,.salle{transition:none}}

/* ============ « Ce qu'on fait » : le trou à gauche (signalé par Gabriel, 2026-09-22) ============
   Au-dessus de 1150 px, la colonne Fabrication (une carte) finissait ~370 px plus haut que la colonne de droite
   (deux cartes empilées). Le grand cadre s'étire maintenant sur toute la hauteur de la rangée ; sa photo
   (2000×1333) reste sous sa taille native dans ce cadre haut. 900-1149 px : réglé dans site.css. */
@media (min-width:1150px){
  .what-main{align-self:stretch;display:flex;flex-direction:column}
  .what-main .frame-wide{aspect-ratio:auto;flex:1 1 auto;min-height:clamp(440px,38vw,620px)}
}