/* ===========================================================================
   TEC'OFFICE M08 — feuille des scenes de la page « Amenagement d'espaces »
   ---------------------------------------------------------------------------
   Chaque regle vise une classe sc-* que scenes-amenagement.js pose LUI-MEME,
   et seulement quand GSAP est pret. Sans GSAP (librairie absente, ou visiteur
   qui refuse le mouvement), aucune de ces classes n'existe : cette feuille ne
   fait rien et la page reste exactement telle que dessinee.
   Rien n'est cache ici : les etats de depart sont poses par le script.
   =========================================================================== */

/* ---- 1. FILETS QUI SE TRACENT ----------------------------------------------
   Une bordure existante est rendue transparente (meme epaisseur : la mise en
   page ne bouge pas d'un pixel) et un trait de meme couleur se dessine dessus. */
.sec-head.sc-tete{position:relative;border-top-color:transparent;}
.sc-regle,.sc-trait{position:absolute;left:0;right:0;height:1px;pointer-events:none;
  transform-origin:left center;}
.sc-regle{top:-1px;background:var(--ink);}
.on-dark .sc-regle{background:rgba(255,255,255,.45);}

.phero-facts.sc-faits>div{border-top-color:transparent;}
.phero-facts .sc-trait{top:-1px;background:rgba(255,255,255,.34);}
.pl-ref.sc-pl{position:relative;border-bottom-color:transparent;}
.pl-ref .sc-trait{top:auto;bottom:-1px;background:rgba(255,255,255,.3);}

/* ---- 2. TITRES LIGNE PAR LIGNE ---------------------------------------------
   Les <br> du titre deviennent des blocs : meme coupure, meme hauteur de ligne.
   Le masque (clip-path) est pose et retire par le script, le temps de l'entree. */
.sc-lg,.sc-lg>span{display:block;}
/* titre du hero : « d'espaces » garde son gris, la ligne du dessus son blanc */
.phero h1 .sc-lg,.phero h1 .sc-lg>span{color:inherit;font-weight:inherit;}

/* ---- 3. ENVELOPPES D'IMAGE --------------------------------------------------
   L'image garde son propre survol (transition CSS sur transform) ; le zoom
   d'entree ou la derive vivent sur cette enveloppe. */
.sc-zoom{position:absolute;inset:0;display:block;}
.sc-zoom.sc-derive{top:-8%;bottom:-8%;}
.sc-zoom>img,.sc-zoom>video{width:100%;height:100%;object-fit:cover;}

/* ---- 4. QUATRE ETAPES : SEQUENCE EPINGLEE (grand ecran) ----------------------
   Les quatre etapes deviennent quatre calques superposes dans une planche de la
   hauteur de l'ecran ; le defilement les fait passer une a une. */
.etp.sc-pin{background:var(--paper);}
.etp.sc-pin .etp-in{height:var(--sc-h,100vh);display:flex;flex-direction:column;
  padding-top:clamp(14px,2.6vh,30px);}
.etp.sc-pin .etp-list{position:relative;flex:1 1 auto;min-height:0;border-top:0;}
.etp.sc-pin .etp-step{position:absolute;inset:0;padding:0;border:0;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,72px);}
.etp.sc-pin .etp-txt{gap:16px;}
.etp.sc-pin .etp-num{font-size:min(31vh,16vw);}
.etp.sc-pin .etp-step h3{font-size:clamp(28px,min(3.5vw,5.8vh),56px);margin-top:18px;}
.etp.sc-pin .etp-p{font-size:clamp(15px,min(1.2vw,2.1vh),17.5px);}
.etp.sc-pin .etp-vis{aspect-ratio:auto;height:100%;}

/* cote de progression 01 -> 04 : ligne de cote, encre qui avance, reperes */
.sc-cote{position:relative;flex:0 0 auto;height:clamp(66px,10vh,92px);margin-top:clamp(14px,2.4vh,26px);
  --p:0;
  /* le bouton « retour en haut » (fixe, en bas a droite) ne doit jamais couvrir le dernier repere */
  margin-right:max(0px, calc(clamp(16px,2.2vw,32px) + 66px - var(--pad)));}
.sc-cote-ln{position:absolute;left:0;right:0;top:22px;height:1px;background:var(--line2);}
.sc-cote-ln::before,.sc-cote-ln::after{content:'';position:absolute;top:-6px;width:1px;height:13px;
  background:var(--ink2);}
.sc-cote-ln::before{left:0;}
.sc-cote-ln::after{right:0;}
.sc-cote-encre{position:absolute;left:0;right:0;top:21px;height:3px;background:var(--ink);
  transform-origin:left center;transform:scaleX(var(--p));}
.sc-cote-mk{position:absolute;top:17px;left:calc(var(--p) * 100%);width:11px;height:11px;margin-left:-5.5px;
  background:var(--ink);transform:rotate(45deg);box-shadow:0 0 0 3px var(--paper);}
.sc-cote-val{position:absolute;top:-6px;left:calc(var(--p) * 100%);transform:translateX(calc(var(--p) * -100%));
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  white-space:nowrap;font-variant-numeric:tabular-nums;}
.sc-cote-pt{position:absolute;top:22px;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;gap:9px;min-height:44px;padding:0 8px;background:none;border:0;border-radius:3px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  color:var(--mute);transition:color .2s cubic-bezier(.23,1,.32,1);}
.sc-cote-pt::before{content:'';width:1px;height:9px;margin-top:-4px;background:currentColor;}
.sc-cote-pt b{font-weight:400;margin-right:.4em;}
.sc-cote-pt i{font-style:normal;}
.sc-cote-pt .nc{display:none;}
@media (max-width:1279px){
  .sc-cote-pt .nl{display:none;}
  .sc-cote-pt .nc{display:inline;}
  /* tablette a l'horizontale : reperes et compteur a 10 px (9 - 9,5 px au bureau) */
  .sc-cote-pt,.sc-cote-val{font-size:10px;}
}
.sc-cote-pt.p0{transform:none;align-items:flex-start;padding-left:0;}
.sc-cote-pt.pz{transform:translateX(-100%);align-items:flex-end;padding-right:0;}
.sc-cote-pt.vu{color:var(--ink2);}
.sc-cote-pt.on{color:var(--ink);}
.sc-cote-pt.on span{box-shadow:inset 0 -1px 0 var(--ink);}
.sc-cote-pt:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
@media (hover:hover) and (pointer:fine){
  .sc-cote-pt:hover{color:var(--ink);}
}

/* ---- 5. LE PLAN SORT DU TRACEUR ------------------------------------------- */
.sc-balayage{position:absolute;left:-3%;right:-3%;top:0;height:1px;z-index:3;
  background:var(--ink2);pointer-events:none;}

/* legende <-> plan : survoler une zone de la legende designe son repere.
   Souris uniquement, retour en moins de 300 ms. */
@media (hover:hover) and (pointer:fine){
  .planfig.sc-lie .pin{transition:opacity .2s ease;}
  .planfig.sc-lie .pin i{transition:transform .22s cubic-bezier(.23,1,.32,1);}
  .planfig.sc-visee .pin:not(.sc-vise){opacity:.22;}
  .planfig.sc-lie .pin.sc-vise i{transform:scale(1.28);}
  .planleg.sc-lie li i{transition:transform .22s cubic-bezier(.23,1,.32,1);}
  .planleg.sc-lie li:hover i{transform:scale(1.14);}
}

/* Telephone : les cotes des croquis (12,40 / 8,36 / H. S/PLAFOND 2,70...) tombaient a 5-6 px.
   Taille en unites du dessin : environ 10-11 px a l'ecran sur 390. */
@media (max-width: 600px) {
  .etp-svg text { font-size: 18px; }
  .avap-dessin text { font-size: 19px; }
}