/* ===========================================================================
   TEC'OFFICE M08 — page IMPRESSION, complement de la couche de mouvement
   Regle tenue : aucun element n'est cache par ce fichier seul. Les etats de
   depart sont poses par GSAP (scenes-impression.js). Seule exception : le
   hero, masque par la classe html.imp-entree que pose un script de <head>,
   jamais en mouvement reduit, retiree a 1,8 s quoi qu'il arrive.
   =========================================================================== */

/* ---- 0. ENTREE DU HERO : en attente de GSAP ------------------------------- */
html.imp-entree .phero h1,
html.imp-entree .phero .phero-facts,
html.imp-entree .phero .ph-fig { opacity: 0; animation: none; }
.phero h1, .phero .phero-facts, .phero .ph-fig { transition: opacity .5s ease; }

/* ---- 1. HERO : titre + planche machine ------------------------------------ */
.ph-cols { display: block; }
.ph-cols h1 { margin-top: 0; }
.ph-fig { display: none; }

@media (min-width: 900px) {
  .ph-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(220px, 21vw, 300px);
    gap: clamp(36px, 4.6vw, 84px);
    align-items: center;
  }
  .ph-fig {
    position: relative; display: block; margin: 0;
    background: var(--paper); color: var(--ink);
    border: 1px solid rgba(255, 255, 255, .2); border-radius: 8px;
    padding: 46px 18px 44px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .42), 0 6px 18px rgba(0, 0, 0, .25);
    overflow: hidden;
  }
  /* quadrillage de planche, comme les fiches machines de la page */
  .ph-fig::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background:
      linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 26px,
      linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 26px 100%;
    -webkit-mask-image: radial-gradient(74% 70% at 50% 52%, #000 8%, transparent 100%);
            mask-image: radial-gradient(74% 70% at 50% 52%, #000 8%, transparent 100%);
  }
  /* reperes d'angle */
  .ph-fig::after {
    content: ""; position: absolute; inset: 9px; pointer-events: none;
    background:
      linear-gradient(var(--line2), var(--line2)) 0 0 / 1px 14px no-repeat,
      linear-gradient(var(--line2), var(--line2)) 0 0 / 14px 1px no-repeat,
      linear-gradient(var(--line2), var(--line2)) 100% 0 / 1px 14px no-repeat,
      linear-gradient(var(--line2), var(--line2)) 100% 0 / 14px 1px no-repeat,
      linear-gradient(var(--line2), var(--line2)) 0 100% / 1px 14px no-repeat,
      linear-gradient(var(--line2), var(--line2)) 0 100% / 14px 1px no-repeat,
      linear-gradient(var(--line2), var(--line2)) 100% 100% / 1px 14px no-repeat,
      linear-gradient(var(--line2), var(--line2)) 100% 100% / 14px 1px no-repeat;
  }
  .ph-cap, .ph-ref {
    position: absolute; top: 17px; z-index: 3;
    font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--mute2); line-height: 1.4;
  }
  .ph-cap { left: 18px; }
  .ph-ref {
    right: 16px; top: 13px; padding: 4px 8px 3px; border: 1px solid var(--line2); border-radius: 2px;
    background: var(--white); color: var(--ink); letter-spacing: .2em;
  }
  .ph-plaque { position: relative; display: block; }
  .ph-plaque picture { display: block; }
  .ph-plaque img {
    display: block; width: auto; max-width: 100%; height: clamp(250px, 36vh, 370px);
    margin: 0 auto; object-fit: contain; mix-blend-mode: multiply;
  }
  .ph-ombre {
    position: absolute; left: 50%; bottom: -10px; width: 74%; height: 22px; translate: -50% 0;
    border-radius: 50%; pointer-events: none; mix-blend-mode: multiply;
    background: radial-gradient(closest-side, rgba(19, 19, 18, .34), rgba(19, 19, 18, 0));
  }
  .ph-leg {
    position: absolute; left: 18px; right: 18px; bottom: 14px; z-index: 3;
    display: flex; justify-content: space-between; gap: 10px;
    padding-top: 8px; border-top: 1px solid var(--line2);
    font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--mute2);
  }
}

/* planche etroite (900 a 1279 px) : on garde le cartouche, on retire le doublon.
   Sous 1280 px les etiquettes passent a 10 px (impression.html, bloc
   imp-responsive) : « PL-02 » et « Visuel constructeur » n'y tiendraient plus. */
@media (min-width: 900px) and (max-width: 1279px) {
  .ph-ref, .ph-leg span + span { display: none; }
}

/* titre decoupe par la scene (mots masques, lettres qui montent) :
   la regle .phero h1 span (gris, 700) ne doit pas atteindre ces decoupes */
.phero h1 .hw, .phero h1 .hc { color: inherit; font-weight: inherit; }
.phero h1 .hw {
  display: inline-block; white-space: nowrap;
  clip-path: inset(-.25em -.12em -.04em -.12em);
}
.phero h1 .hc { display: inline-block; }

/* ligne de numerisation (creee par la scene, retiree a la fin) */
.ph-voile { position: absolute; inset: 0; z-index: 1; background: var(--dark2); pointer-events: none; }
.ph-scan, .imp-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(233, 224, 204, 0), rgba(233, 224, 204, .95) 14%, #fff8ea 50%,
    rgba(233, 224, 204, .95) 86%, rgba(233, 224, 204, 0));
  box-shadow: 0 0 16px 3px rgba(201, 186, 157, .45), 0 0 54px 12px rgba(201, 186, 157, .16);
}
.ph-scan { z-index: 3; }
.imp-scan { z-index: 4; }
.phero-facts { position: relative; }
.ph-rail {
  position: absolute; left: 0; right: 0; top: -1px; height: 1px; pointer-events: none;
  background: rgba(255, 255, 255, .72);
}

/* ---- 2. TITRES REVELES LIGNE PAR LIGNE -------------------------------------
   Le masque de mouvement.css laisse de l'air dessous ; ici on coupe net en
   bas (la ligne monte de dessous) et on laisse passer les accents au-dessus. */
[data-lignes] .lg {
  overflow: visible;
  clip-path: inset(-.3em -.6em 0 -.6em);
}

/* ---- 3. EN-TETES DE SECTION : le filet se trace ---------------------------- */
.sec-head.a-rail { border-top-color: transparent; }
.sh-rail {
  position: absolute; left: 0; right: 0; top: -1px; height: 1px; pointer-events: none;
  background: var(--ink); transform-origin: left center;
}
.sec-head.on-dark .sh-rail { background: rgba(255, 255, 255, .45); }

/* ---- 4. GAMME OLIVETTI ----------------------------------------------------- */
/* indicateur : un calque encre, decoupe sur l'onglet actif, qui glisse */
.gx-switch { position: relative; }
.gx-ind {
  position: absolute; inset: 4px; z-index: 2; display: flex; gap: 0;
  border-radius: 999px; background: var(--ink); pointer-events: none;
  clip-path: inset(0 100% 0 0 round 999px);
  transition: clip-path .34s cubic-bezier(.23, 1, .32, 1);
}
.gx-ind .gx-opt { color: #fff; background: transparent; }
.gx-switch.a-ind .gx-opt.on { background: transparent; }
html.doux .gx-ind { transition: none; }

/* la machine entre et sort par le cote : la figure la recadre */
.gx-fig { overflow: hidden; }

/* ombre de contact sous la machine */
.gx-ombre {
  position: absolute; left: 50%; bottom: calc(clamp(48px, 5vh, 62px) - 12px);
  width: min(62%, 300px); height: 24px; translate: -50% 0; pointer-events: none;
  mix-blend-mode: multiply;
}
.gx-ombre i {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(19, 19, 18, .3), rgba(19, 19, 18, 0));
}
/* plage de cadence du palier survole, reportee sur la regle de la figure */
.gx-band {
  position: absolute; top: -2px; height: 3px; left: var(--bg, 0%); width: var(--bw, 0%);
  background: var(--ink); opacity: 0; pointer-events: none;
  transition: left .3s cubic-bezier(.23, 1, .32, 1), width .3s cubic-bezier(.23, 1, .32, 1), opacity .2s ease;
}
.gx-fig.a-band .gx-band { opacity: 1; }
.gx-fantome { position: absolute; pointer-events: none; mix-blend-mode: multiply; z-index: 1; }

@media (hover: hover) and (pointer: fine) {
  .gx-opt:not(.on):hover { color: var(--ink); }
  .gx-row .gx-txt h3 { transition: transform .3s cubic-bezier(.23, 1, .32, 1); }
  .gx-row:hover .gx-txt h3 { transform: translateX(6px); }
  .gx-row .gx-no { transition: color .2s ease; }
  .gx-row:hover .gx-no { color: var(--ink); }
  .gx-row:hover .gx-rule i { background: #000; }
}

/* ---- 5. ECO BY TEC'OFFICE -------------------------------------------------- */
.ecox-logo > img, .ecox-svg { grid-area: 1 / 1; }
.ecox-svg { display: block; width: 100%; max-width: 440px; height: auto; overflow: visible; }
.ecox-rep { position: absolute; width: 20px; height: 20px; pointer-events: none; }
.ecox-rep::before, .ecox-rep::after { content: ""; position: absolute; background: rgba(124, 179, 66, .75); }
.ecox-rep::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.ecox-rep::after { top: 50%; left: 0; right: 0; height: 1px; }
.ecox-rep i { position: absolute; inset: 5px; border: 1px solid rgba(124, 179, 66, .75); border-radius: 50%; }
.ecox-rep.r1 { right: 12px; top: 12px; }
.ecox-rep.r2 { left: 12px; bottom: 12px; }
.ecox-rep.r3 { right: 12px; bottom: 12px; }

/* « reconditionnee » : le mot porte un trait de surligneur vert */
.eco-mark {
  background: linear-gradient(rgba(124, 179, 66, .42), rgba(124, 179, 66, .42)) 0 88% / 100% .3em no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.p-ico {
  position: absolute; right: clamp(16px, 2vw, 24px); top: clamp(18px, 2.2vw, 28px);
  width: 30px; height: 30px; fill: none; stroke: #4c7a24; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round; overflow: visible;
}

/* le haut de la photo laisse la place du tampon (le padding de reference est
   pose dans le <style> de la section ECO, 56 px a toutes les largeurs) */
.ecox-shot { grid-template-rows: minmax(0, 1fr); padding-top: 56px; }
.ecox-tampon {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px 5px;
  border: 1px solid rgba(124, 179, 66, .72); border-radius: 3px; background: rgba(124, 179, 66, .13);
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: #3f6a1c;
}
.ecox-tampon::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #7cb342; }

/* ---- 6. COUT-COPIE : quatre factures, une ligne ---------------------------- */
.fac {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(20px, 3vw, 52px); align-items: center;
  margin-top: clamp(48px, 7vh, 92px);
  padding: clamp(22px, 3vw, 44px);
  background: rgba(12, 11, 9, .72); border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
/* l'emplacement d'une facture : visible quand elle est partie se fondre
   dans la feuille (pointilles + « inclus ») ; couvert par la facture sinon */
.fac-place {
  position: static; display: grid; border: 1px dashed rgba(255, 255, 255, .26); border-radius: 4px;
}
.fac-place::before {
  content: "inclus"; grid-area: 1 / 1; align-self: center; justify-self: center;
  font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--sand);
}
.fac-place > .fac-f { grid-area: 1 / 1; margin: -1px; }
.fac-lab {
  margin-bottom: 16px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: #e4e3de; line-height: 1.6;
}
.fac-lab i { display: block; font-style: normal; font-size: 8.5px; letter-spacing: .18em; color: var(--sand); margin-bottom: 4px; }
.fac-pile { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fac-f {
  position: relative; background: var(--paper); color: var(--ink); border-radius: 4px;
  padding: 13px 14px 14px; box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
  display: flex; flex-direction: column; gap: 6px; min-height: 104px;
}
.fac-k { font-family: var(--mono); font-size: 8px; letter-spacing: .18em; text-transform: uppercase; color: var(--mute2); }
.fac-f b {
  font-family: var(--disp); font-weight: 800; text-transform: uppercase; font-size: 12.5px;
  letter-spacing: -.004em; line-height: 1.15;
}
.fac-r { display: block; height: 5px; width: 72%; border-radius: 3px; background: var(--line2); margin-top: 2px; }
.fac-r.fac-c { width: 30%; align-self: flex-end; background: var(--ghost); margin-top: auto; }
.fac-fl {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3); color: #fff; font-size: 20px;
}
.fac-fl i { font-style: normal; display: block; }
.fac-feuille {
  position: relative; background: var(--white); color: var(--ink); border-radius: 6px;
  padding: 20px 22px 20px; box-shadow: 0 24px 54px rgba(0, 0, 0, .4); overflow: hidden;
}
.fac-feuille::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--sand);
}
.fac-tete {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--ink);
}
.fac-tete b { font-family: var(--disp); font-weight: 900; font-size: 15px; letter-spacing: -.02em; }
.fac-tete span { font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute2); }
.fac-ligne {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 14px 0 12px; border-bottom: 1px dashed var(--line2);
}
.fac-ligne span { font-family: var(--disp); font-weight: 800; text-transform: uppercase; font-size: 13.5px; line-height: 1.2; }
.fac-ligne b {
  flex: 0 0 auto; font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; padding: 5px 9px 4px; background: var(--ink); color: var(--paper); border-radius: 2px;
}
.fac-inc { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.fac-inc li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: 13px; line-height: 1.5; color: var(--ink2); padding: 3px 0;
}
.fac-inc li span::before { content: "✓"; color: #4c7a24; font-size: 11px; margin-right: 9px; }
.fac-inc em {
  font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: #3f6a1c;
}
@media (max-width: 899px) {
  .fac { grid-template-columns: 1fr; gap: 18px; }
  .fac-fl { justify-self: center; width: 46px; height: 46px; }
  .fac-fl i { rotate: 90deg; }
  .fac-f { min-height: 92px; padding: 11px 12px 12px; }
  .fac-f b { font-size: 11.5px; }
}

/* le fond video du panneau ne s'etire plus avec lui.
   L'epinglage allonge le panneau d'un ecran : la video, en « cover » sur toute
   sa hauteur, etait agrandie plus de trois fois (grandes barres bleues floues ;
   sur mobile, l'affiche l'etait plus de dix fois). Elle garde maintenant la
   hauteur de l'ecran et accompagne la lecture (position collante, marge de
   120 px pour la parallaxe). overflow:clip ne cree pas de conteneur de
   defilement, condition du collant ; sans lui (vieux Safari), la video reste
   simplement en haut du panneau. */
#cout-copie, #cout-copie .vbg { overflow: hidden; overflow: clip; }
#cout-copie .vbg video {
  position: sticky; top: -120px; display: block;
  height: calc(100vh + 240px);
}
/* Sans epinglage (moins de 900 px) : le panneau fait plusieurs ecrans de
   texte. La video devient un bandeau en tete de panneau, qui se fond dans le
   noir ; la lecture longue (texte, facture, chiffres) se fait sur un fond
   calme, sans les grandes barres bleues de l'affiche agrandie derriere. */
@media (max-width: 899px) {
  #cout-copie .vbg {
    top: 0; bottom: auto; height: min(760px, 96vh);
    -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
  }
  #cout-copie .vbg video { position: static; height: 100%; }
  #cout-copie .sc-inkP {
    background: linear-gradient(180deg, rgba(11, 10, 8, .66) 0%, rgba(11, 10, 8, .8) 26%,
      rgba(11, 10, 8, .93) 58%, rgba(11, 10, 8, .97) 100%);
  }
}

/* ---- 7. FAQ : la reponse se pose a l'ouverture ----------------------------- */
html.doux .fq .r p { transform: none !important; }