/* huiledecode — la page des réalisations (site-src/realisations.css → site/assets/realisations.css).
   Une planche par projet : le texte à gauche, la capture à droite (écran et téléphone) avec ses repères numérotés ;
   chaque savoir-faire garde sa couleur (--svc), comme dans la goutte. */
.rea{position:relative;overflow-x:clip} /* clip et non hidden : les colonnes de texte restent collantes */
.rea::before{content:"";position:absolute;left:50%;top:-38vh;width:min(1200px,150vw);aspect-ratio:1;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(240,140,40,.13),transparent);pointer-events:none}

/* ---------- ouverture ---------- */
.rea-hero{position:relative;max-width:1440px;margin:0 auto;padding:180px clamp(16px,6vw,100px) 40px}
.rea-hero h1{font-size:clamp(46px,6.4vw,100px);line-height:.94;margin:22px 0 26px;max-width:11ch}
.rea-hero>p{color:var(--muted);max-width:50ch;margin:0}
.rea-index{display:flex;flex-wrap:wrap;gap:10px;margin:44px 0 0;padding:0;list-style:none}
.rea-index a{--svc:#ffc477;display:grid;grid-template-columns:auto auto;align-items:baseline;gap:6px 12px;padding:15px 22px 14px 16px;text-decoration:none;color:var(--ink);
  background:rgba(240,160,75,.04);box-shadow:inset 0 0 0 1px var(--line);clip-path:var(--chamfer);transition:background .3s,box-shadow .3s}
.rea-index a:hover,.rea-index a:focus-visible{outline:none;background:color-mix(in srgb,var(--svc) 10%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--svc) 45%,transparent)}
.rea-index i{font:400 11px/1 var(--mono);letter-spacing:.14em;color:var(--svc);font-style:normal}
.rea-index b{font:400 19px/1.1 var(--display);letter-spacing:.01em}
.rea-index small{grid-column:2;font:400 10.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}

/* ---------- un savoir-faire ---------- */
.rea-type{position:relative;max-width:1440px;margin:0 auto;padding:110px clamp(16px,6vw,100px) 10px;scroll-margin-top:0}
.rea-type::before{content:"";position:absolute;left:-10%;top:40px;width:60%;height:420px;background:radial-gradient(closest-side,color-mix(in srgb,var(--svc) 9%,transparent),transparent);pointer-events:none}
.rea-type-hd{position:relative;display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px 30px;padding-bottom:28px;margin-bottom:80px;
  border-bottom:1px solid color-mix(in srgb,var(--svc) 28%,transparent)}
.rea .kick{color:var(--svc,var(--amber))}
.rea .kick::before{content:"";display:inline-block;vertical-align:middle;margin-top:-2px;width:22px;height:1px;margin-right:12px;background:linear-gradient(90deg,var(--amber),var(--svc,var(--amber)));box-shadow:0 0 8px var(--svc,var(--amber))}
.rea-type-hd h2{font-size:clamp(34px,4.2vw,62px);line-height:.98;margin:16px 0 0}
.rea h1 em,.rea h2 em,.rea h3 em{color:var(--svc,var(--amber));text-shadow:0 0 30px color-mix(in srgb,var(--svc,var(--amber)) 45%,transparent)}
.rea-type-hd p{grid-column:1;color:var(--muted);margin:6px 0 0;max-width:52ch}
.rea-n{grid-column:2;grid-row:1/span 3;align-self:end;font:400 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.rea-n b{color:var(--svc);font-weight:400}

/* ---------- une planche ---------- */
.planche{display:grid;grid-template-columns:minmax(280px,390px) minmax(0,1fr);gap:clamp(36px,5.5vw,96px);align-items:start;padding:0 0 150px;scroll-margin-top:90px}
.planche:nth-of-type(even){grid-template-columns:minmax(0,1fr) minmax(280px,390px)}
.planche:nth-of-type(even) .pl-txt{order:2}
.pl-txt{position:sticky;top:120px}
.pl-meta{font:400 11px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:0}
.pl-meta b{color:var(--svc);font-weight:400;margin-right:12px}
.planche h3{font-size:clamp(32px,3.2vw,48px);line-height:1;margin:14px 0 20px}
.pl-acc{font:300 21px/1.4 var(--display);letter-spacing:.005em;color:var(--ink);margin:0 0 16px}
.pl-res{color:var(--muted);margin:0 0 28px}
.pl-faits{margin:0;border-top:1px solid var(--line)}
.pl-faits div{display:grid;grid-template-columns:118px 1fr;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.pl-faits dt{font:400 10.5px/1.75 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--svc)}
.pl-faits dd{margin:0;color:var(--ink);font-size:14.5px}
.pl-serie{margin:28px 0 0}
.pl-serie p{font:400 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 12px}
.pl-serie div{display:flex;flex-wrap:wrap;gap:8px}
.pl-serie button{font:400 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:rgba(240,160,75,.04);border:0;cursor:pointer;
  padding:10px 12px;box-shadow:inset 0 0 0 1px var(--line);clip-path:var(--chamfer);transition:color .25s,background .25s}
.pl-serie button:hover{color:var(--ink)}
.pl-serie button[aria-pressed=true]{color:var(--bg);background:var(--svc);box-shadow:none}
.pl-serie button:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--svc)}

/* la capture : un écran sobre (sa barre, puis l'image et ses repères) et, en avant, le téléphone */
.pl-vis{position:relative;margin:0}
.pl-ecran{position:relative;width:min(100%,calc(72vh * var(--r,1.6)));border-radius:10px;overflow:hidden;background:#0e0c0a;
  box-shadow:0 0 0 1px rgba(255,240,220,.07),0 40px 90px -30px rgba(0,0,0,.9),0 0 90px -20px color-mix(in srgb,var(--svc) 22%,transparent)}
.planche:nth-of-type(even) .pl-ecran{margin-left:auto}
.pl-bar{display:flex;align-items:center;gap:7px;height:28px;padding:0 13px;background:#16120f;border-bottom:1px solid rgba(255,240,220,.06)}
.pl-bar i{width:8px;height:8px;border-radius:50%;background:rgba(236,226,210,.16)}
.pl-bar i:first-child{background:color-mix(in srgb,var(--svc) 75%,transparent)}
.pl-img{position:relative;overflow:hidden}
.pl-img img{display:block;width:100%;height:auto;transition:opacity .35s}
.pl-img.swap img{opacity:.25}
.pl-tel{position:absolute;right:-3.5%;bottom:-9%;width:20%;padding:5px;border-radius:24px;background:#0e0c0a;
  box-shadow:0 0 0 1px rgba(255,240,220,.1),0 30px 60px -16px rgba(0,0,0,.95)}
.pl-tel img{display:block;width:100%;height:auto;border-radius:19px}
.planche:nth-of-type(even) .pl-tel{right:auto;left:-3.5%}

/* les repères : une étiquette numérotée au coin de chaque zone ; au survol, la zone s'éclaire et le reste s'assombrit */
.pl-z{position:absolute;padding:0;margin:0;border:0;background:none;cursor:pointer;border-radius:4px;transition:box-shadow .35s ease,--lv .6s cubic-bezier(.2,.7,.1,1)}
.pl-z span{position:absolute;left:6px;top:6px;min-width:24px;height:19px;padding:0 5px;display:grid;place-items:center;border-radius:3px;
  font:500 10px/1 var(--mono);letter-spacing:.06em;color:#050403;background:var(--svc);
  box-shadow:0 0 0 3px rgba(5,4,3,.38),0 0 16px color-mix(in srgb,var(--svc) 70%,transparent);transition:transform .3s cubic-bezier(.2,.7,.1,1)}
.pl-z.on{box-shadow:0 0 0 1.5px var(--svc),0 0 26px color-mix(in srgb,var(--svc) 55%,transparent),0 0 0 200vmax rgba(5,4,3,.6)}
.pl-z.on span{--k:1.15}
.pl-z:focus-visible{outline:none}
.pl-z:focus-visible span{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--svc)}
.pl-img.autre .pl-z,.pl-img.autre .pl-tr{display:none}

/* ---------- vue 3D : la capture se couche et ses repères montent au-dessus d'elle (comme un plan de montage) ----------
   assets/realisations.js règle --s (échelle), --pas (hauteur d'un étage) et --decal (recentrage), et pose .is3d / .open sur .pl-vis.
   --e va de 0 (à plat) à 1 (3D) ; chaque repère monte de --z étages (+ --lv quand il est désigné). */
@property --e{syntax:"<number>";inherits:true;initial-value:0}
@property --lv{syntax:"<number>";inherits:true;initial-value:0}
.pl-vues{display:flex;gap:6px;margin:0 0 16px}
.planche:nth-of-type(even) .pl-vues{justify-content:flex-end}
.pl-vues button{font:400 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:rgba(240,160,75,.04);border:0;cursor:pointer;
  padding:9px 12px;box-shadow:inset 0 0 0 1px var(--line);clip-path:var(--chamfer);transition:color .25s,background .25s}
.pl-vues button:hover{color:var(--ink)}
.pl-vues button[aria-pressed=true]{color:var(--bg);background:var(--svc);box-shadow:none}
.pl-vues button:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--svc)}
.pl-ecran{--e:0;transition:--e 1.3s cubic-bezier(.2,.7,.1,1),background-color .6s,box-shadow .6s}
.pl-vis.is3d .pl-ecran{--e:1}
.pl-vis.open .pl-ecran{overflow:visible;background:transparent;box-shadow:none}
.pl-vis.open .pl-img{overflow:visible}
.pl-bar{opacity:calc(1 - var(--e))}
.pl-img{transform-style:preserve-3d;transform:translateY(calc(var(--e) * var(--decal,0px))) rotateX(calc(var(--e) * 58deg)) rotateZ(calc(var(--e) * -26deg)) scale(calc(1 + (var(--s,1) - 1) * var(--e)))}
.pl-img>img{filter:grayscale(calc(var(--e) * .85)) sepia(calc(var(--e) * .3)) brightness(calc(1 - var(--e) * .5));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--svc) calc(var(--e) * 60%),transparent)}
.pl-tr,.pl-z{left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--w) * 1%);height:calc(var(--h) * 1%)}
.pl-tr{position:absolute;outline:1px dashed color-mix(in srgb,var(--svc) 75%,transparent);outline-offset:-1px;background:rgba(5,4,3,.45);opacity:var(--e);pointer-events:none}
.pl-z{transform-style:preserve-3d;transform:translateZ(calc(var(--e) * (var(--z) + var(--lv)) * var(--pas,28px)))}
.pl-vis.is3d .pl-z.on{--lv:.9;box-shadow:none}
.pl-crop{position:absolute;inset:0;overflow:hidden;opacity:calc(var(--e) * 3);border-radius:2px;transition:opacity .4s;
  outline:1px solid color-mix(in srgb,var(--svc) calc(var(--e) * 85%),transparent);box-shadow:0 calc(var(--e) * 16px) 30px -8px rgba(0,0,0,calc(var(--e) * .6))}
.pl-img .pl-crop img{position:absolute;display:block;max-width:none;width:calc(10000% / var(--w));height:auto;left:calc(var(--x) / var(--w) * -100%);top:calc(var(--y) / var(--h) * -100%);filter:none;box-shadow:none}
.pl-cage{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.pl-cage::before,.pl-cage::after{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--e) * (var(--z) + var(--lv)) * var(--pas,28px));
  border-inline:1px dashed color-mix(in srgb,var(--svc) 70%,transparent);transform-origin:top center;transform:rotateX(-90deg);opacity:var(--e);transition:opacity .4s}
.pl-cage::after{top:100%}
/* le numéro reste face à nous, quelle que soit l'inclinaison ; en 3D il quitte la pièce et se place à gauche de son coin
   (décalage à l'écran, après la contre-rotation) pour ne rien couvrir de ce qu'il désigne */
.pl-z span{left:calc(6px * (1 - var(--e)));top:calc(6px * (1 - var(--e)));transform-origin:0 0;
  transform:translateZ(2px) rotateZ(calc(var(--e) * 26deg)) rotateX(calc(var(--e) * -58deg)) scale(calc(var(--k,1) / (1 + (var(--s,1) - 1) * var(--e))))
    translate(calc(var(--e) * (-100% - 8px)), calc(var(--e) * -50%))}
/* un repère désigné : les autres pièces s'effacent un peu */
.pl-vis.is3d .pl-img:has(.pl-z.on) .pl-z:not(.on) .pl-crop{opacity:.3}
.pl-vis.is3d .pl-img:has(.pl-z.on) .pl-z:not(.on) .pl-cage::before,.pl-vis.is3d .pl-img:has(.pl-z.on) .pl-z:not(.on) .pl-cage::after{opacity:.2}
@media (prefers-reduced-motion:reduce){.pl-ecran,.pl-z,.pl-crop{transition:none}}

/* ce que montrent les repères */
.pl-points{list-style:none;margin:70px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 34px}
.planche:nth-of-type(odd) .pl-points{padding-right:16%}
.planche:nth-of-type(even) .pl-points{padding-left:16%}
.pl-points li{display:grid;grid-template-columns:36px 1fr;gap:6px;padding:15px 0;border-top:1px solid var(--line);cursor:default}
.pl-points li i{font:400 11px/1.9 var(--mono);color:var(--svc);font-style:normal;transition:text-shadow .3s}
.pl-points li b{display:block;font:500 15px/1.4 var(--sans);color:var(--ink);transition:color .3s}
.pl-points li span{color:var(--muted);font-size:14px}
.pl-points li.on b{color:var(--svc)}
.pl-points li.on i{text-shadow:0 0 12px var(--svc)}

/* apparition des planches au défilement (assets/realisations.js ; rien en mouvement réduit) */
.planche{transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.1,1)}
.planche.att{opacity:0;transform:translateY(46px)}

/* ---------- appel final ---------- */
.rea-cta{margin-top:40px}
.rea-cta h3{max-width:15ch}

@media (max-width:1100px){
  .planche,.planche:nth-of-type(even){grid-template-columns:minmax(260px,330px) minmax(0,1fr)}
  .planche:nth-of-type(even) .pl-txt{order:0}
  .planche:nth-of-type(even) .pl-tel{left:auto;right:-3.5%}
  .planche:nth-of-type(even) .pl-ecran{margin-left:0}
  .planche:nth-of-type(n) .pl-points{padding:0;grid-template-columns:1fr}
}
@media (max-width:860px){
  .rea-hero{padding-top:130px}
  .rea-type{padding-top:80px}
  .rea-type-hd{grid-template-columns:1fr;margin-bottom:46px}
  .rea-n{grid-column:1;grid-row:auto;margin-top:6px}
  .planche,.planche:nth-of-type(even){grid-template-columns:1fr;gap:34px;padding-bottom:110px}
  .pl-txt{position:static}
  .pl-ecran{width:min(100%,calc(64vh * var(--r,1.6)))}
  .pl-tel{width:27%;right:-1.5%;bottom:-7%}
  .pl-points{margin-top:56px}
  .pl-z span{left:calc(4px * (1 - var(--e)));top:calc(4px * (1 - var(--e)));min-width:21px;height:17px;font-size:9px}
}
@media (prefers-reduced-motion:reduce){.planche{transition:none}}