/* Vitrine ERP — case MEGGA ERP (case/erp.html).
 * Reprise de la maquette Claude Design « MEGGA - Vitrine ERP » (paquet design_handoff_vitrine_erp) :
 * valeurs, rythme et point de rupture (820 px) sont ceux du fichier. Les écrans de l'ERP sont
 * des captures 2x (scripts/megga_site/vitrine/build.mjs) ; js/megga-vitrine-erp.js porte la
 * dérive au scroll, le schéma des automatisations et le choix de la capture.
 * Seules règles propres à la page : le thème du site n'est pas touché. */

@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Héros : l'ERP incrusté dans l'écran du portable ---------- */
/* Occupe le cadre de couverture du gabarit ; le calage est en pourcentages de la photo. */
.vitrine-hero { background: #c2a181; }
.vitrine-hero_zoom { position: absolute; inset: 0; }
.vitrine-hero_stage {
  position: absolute; left: 0; right: 0; top: 50%;
  aspect-ratio: 4096 / 2731; transform: translateY(-50%);
  container-type: inline-size;
}
.vitrine-hero_photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.vitrine-hero_screen {
  position: absolute; left: 21.851%; top: 19.187%; width: 50.855%; height: 49.945%;
  overflow: hidden; border-radius: .62cqw; background: #08080a;
  transform: skewY(-.19deg); pointer-events: none;
}
.vitrine-hero_bezel { position: absolute; left: 0; right: 0; top: 0; height: 3.1%; background: #08080a; z-index: 4; }
.vitrine-hero_notch {
  position: absolute; left: 50%; top: 0; width: 8.4%; height: 2.6%; margin-left: -4.2%;
  background: #050506; border-radius: 0 0 .28cqw .28cqw; z-index: 6;
}
.vitrine-hero_display { position: absolute; left: 1.55%; right: 1.55%; top: 3.1%; bottom: 3.9%; overflow: hidden; background: #e8e8e6; }
.vitrine-hero_erp { display: block; width: 100%; height: auto; max-width: none; }
.vitrine-hero_glare {
  position: absolute; inset: 0; z-index: 8;
  background: linear-gradient(108deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.03) 24%, rgba(255,255,255,0) 46%);
}

/* ---------- La suite : fond encre, nappe de spectre, grain ---------- */
.section_vitrine {
  position: relative; overflow: hidden; isolation: isolate;
  background: #151513; color: #fff;
  font-family: "Inter Tight", system-ui, sans-serif; font-size: 16px; font-weight: 400;
  line-height: normal; letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
}
.vitrine_spectrum {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(96,150,255,0) 0%, rgba(96,150,255,.10) 10%, rgba(88,214,120,.08) 32%, rgba(238,226,96,.055) 54%, rgba(255,158,96,.085) 76%, rgba(255,92,72,.10) 93%, rgba(255,92,72,0) 100%);
}
.vitrine_grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}

.vitrine_eyebrow { font-size: 10.5px; letter-spacing: .22em; color: #8f8d87; font-weight: 500; text-transform: uppercase; }
.vitrine_heading {
  font-family: inherit; font-size: clamp(34px, 4.4vw, 68px); line-height: 1.06; letter-spacing: -.035em;
  font-weight: 500; color: #fff; margin: 18px 0 0; text-wrap: pretty;
}

/* ---------- Messagerie et agenda : l'ERP en verre, qui dérive au scroll ---------- */
.vitrine_row { position: relative; z-index: 1; overflow: hidden; min-height: 100vh; display: grid; align-items: center; }
.vitrine_row.is-messaging { padding: 0 0 0 7vw; grid-template-columns: minmax(240px, .8fr) minmax(0, 2fr); gap: 5vw; }
.vitrine_row.is-agenda { padding: 0 7vw 0 4vw; grid-template-columns: minmax(0, 2.6fr) minmax(210px, .7fr); gap: 4vw; }
.vitrine_intro { position: relative; z-index: 2; }
/* La boîte prend la hauteur de la capture (choisie par le script au plus près de
 * min(78vh, 820px)) ; le verre floute la nappe derrière, comme dans l'ERP. */
.vitrine_screen {
  --s: .85;
  position: relative; z-index: 1; overflow: hidden; pointer-events: none;
  line-height: 0; border-radius: calc(24px * var(--s));
  -webkit-backdrop-filter: blur(calc(26px * var(--s))) saturate(1.15);
  backdrop-filter: blur(calc(26px * var(--s))) saturate(1.15);
}
.vitrine_screen.is-messaging { width: calc(100% + 7vw); margin-right: -7vw; }
.vitrine_screen img { display: block; width: 100%; height: auto; max-width: none; }
/* La capture n'a pas de src tant que le script ne l'a pas choisie : la place reste réservée.
 * Sans JavaScript, c'est la capture du <noscript> qui s'affiche. */
.vitrine_screen img:not([src]) { visibility: hidden; }
html:not(.w-mod-js) .vitrine_screen img:not([src]) { display: none; }

/* ---------- Automatisations : déclencheur → moteur de règles → action ---------- */
.vitrine_auto { position: relative; z-index: 1; min-height: 100vh; padding: 12vh 5vw; display: flex; flex-direction: column; gap: 7vh; }
.vitrine_auto-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.vitrine_heading.is-auto { font-size: clamp(28px, 3.2vw, 46px); margin: 0; }
.vitrine_schema {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .78fr) minmax(0, 1fr);
  gap: clamp(56px, 9vw, 190px); align-items: center; max-width: 1560px; width: 100%; margin: 0 auto;
}
.vitrine_wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.vitrine_col { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 9px; }
.vitrine_col.is-triggers { align-items: flex-end; }
.vitrine_col.is-actions { align-items: flex-start; }
.vitrine_col-label { font-size: 10px; letter-spacing: .18em; color: #6f6d68; margin-bottom: 4px; text-transform: uppercase; }
.vitrine_item { display: flex; flex-direction: column; gap: 6px; }
.is-triggers .vitrine_item { align-items: flex-end; }
.is-actions .vitrine_item { align-items: flex-start; }
.vitrine_group { font-size: 9.5px; letter-spacing: .16em; color: #8f8d87; text-transform: uppercase; }
.is-triggers .vitrine_group { margin: 8px 2px 2px 0; }
.is-actions .vitrine_group { margin: 8px 0 2px 2px; }
.vitrine_node {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 999px;
  background: rgba(255,255,255,.04); border: 2px solid rgba(255,255,255,.18);
}
.vitrine_node.is-auto { border-color: rgba(238,226,96,.55); }
.vitrine_dot { width: 5px; height: 5px; border-radius: 50%; flex: none; background: rgba(255,255,255,.30); }
.vitrine_node.is-auto .vitrine_dot { background: #eee260; }
.vitrine_node-text { font-size: 13.5px; color: #e6e5e1; line-height: 1.25; }
.is-actions .vitrine_node-text { color: #fff; }
.vitrine_when { font-size: 11px; color: #807e79; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vitrine_via { font-size: 10px; letter-spacing: .1em; color: #807e79; white-space: nowrap; text-transform: uppercase; }
.vitrine_engine {
  position: relative; z-index: 1; border-radius: 22px; background: rgba(238,226,96,.055); border: 3px solid #eee260;
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); padding: 28px 28px 22px;
}
.vitrine_engine-label { font-size: 10.5px; letter-spacing: .18em; color: #eee260; text-transform: uppercase; }
.vitrine_engine-title { font-size: 19px; color: #fff; font-weight: 500; margin-top: 12px; letter-spacing: -.015em; }
.vitrine_rules { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.vitrine_rules > div { font-size: 13px; color: #c3c1bb; }
.vitrine_modes { display: flex; gap: 6px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(238,226,96,.22); flex-wrap: wrap; }
.vitrine_mode { font-size: 9.5px; letter-spacing: .12em; color: #c3c1bb; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 4px 9px; text-transform: uppercase; }
.vitrine_mode.is-auto { color: #151513; font-weight: 600; background: #eee260; border: 0; }
.vitrine_stats { display: flex; gap: clamp(24px, 4vw, 72px); flex-wrap: wrap; color: #8f8d87; font-size: 12px; }
.vitrine_stat { color: #fff; font-size: 15px; font-weight: 500; }

/* ---------- Accueil robotisé ---------- */
.vitrine_robot {
  position: relative; z-index: 1; min-height: 100vh; padding: 10vh 5vw 12vh; display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 88px); align-items: center;
}
.vitrine_robot-media { position: relative; min-width: 0; }
.vitrine_robot-frame { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 3 / 4; max-height: 78vh; width: min(100%, calc(78vh * .75)); }
.vitrine_robot-poster { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%; display: block; }
.vitrine_robot-video {
  position: absolute; left: 50%; top: 50%; height: 100%; aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%); border: 0; display: block; pointer-events: none;
}
/* mouvement réduit : l'affiche seule (le script ne charge pas la vidéo) */
@media (prefers-reduced-motion: reduce) { .vitrine_robot-video { display: none; } }
.vitrine_robot-copy { position: relative; z-index: 2; min-width: 0; }
.vitrine_heading.is-robot { font-size: clamp(30px, 3.6vw, 54px); margin-top: 16px; }
.vitrine_features {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(22px, 2.6vw, 40px) clamp(28px, 3vw, 56px); margin-top: clamp(32px, 4vh, 52px);
}
.vitrine_feature { display: flex; gap: 16px; align-items: flex-start; }
.vitrine_icon {
  flex: none; width: 44px; height: 44px; color: #48cdbe; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.vitrine_feature-body { min-width: 0; }
.vitrine_feature-title { font-size: 15px; color: #fff; font-weight: 500; letter-spacing: -.01em; line-height: 1.2; }
.vitrine_feature-text { font-size: 13px; color: #96948e; line-height: 1.5; margin-top: 6px; text-wrap: pretty; }

/* ---------- Signature : une phrase et une frise de formes, statique ---------- */
.vitrine_signature { position: relative; z-index: 1; padding: 14vh 5vw 7vh; display: flex; flex-direction: column; gap: clamp(48px, 8vh, 96px); }
.vitrine_signature-head { display: flex; flex-direction: column; gap: clamp(20px, 3vh, 34px); max-width: 1560px; width: 100%; margin: 0 auto; }
.vitrine_heading.is-signature { font-size: clamp(34px, 5.4vw, 92px); line-height: 1.02; letter-spacing: -.04em; margin: 0; max-width: 16em; }
.vitrine_shapes {
  display: flex; align-items: center; justify-content: flex-start; gap: clamp(20px, 3.2vw, 64px);
  flex-wrap: nowrap; overflow: hidden; max-width: 1560px; width: 100%; margin: 0 auto; height: clamp(120px, 15vw, 210px);
}
.vitrine_shape { flex: none; position: relative; border-radius: 999px; }
.vitrine_shape.is-ring { width: clamp(58px, 7vw, 104px); height: clamp(58px, 7vw, 104px); border: 2px solid rgba(255,255,255,.22); }
.vitrine_shape.is-pill { width: clamp(112px, 14vw, 208px); height: clamp(74px, 9.5vw, 138px); background: #e6e5e1; overflow: hidden; }
.vitrine_shape.is-pill > div { position: absolute; left: 0; top: 0; bottom: 0; width: 38%; background: #eee260; }
.vitrine_shape.is-eye { width: clamp(126px, 16vw, 244px); height: clamp(74px, 9.5vw, 138px); background: #e6e5e1; display: flex; align-items: center; justify-content: center; }
.vitrine_shape.is-eye > div { width: clamp(26px, 3.2vw, 50px); height: clamp(26px, 3.2vw, 50px); border-radius: 999px; background: #151513; border: 3px solid #eee260; }
.vitrine_shape.is-orb { width: clamp(84px, 10vw, 150px); height: clamp(84px, 10vw, 150px); border-radius: 0; }
.vitrine_shape.is-orb > div { position: absolute; border-radius: 999px; }
.vitrine_shape.is-orb > div:nth-child(1) { inset: 0; background: #3a352d; }
.vitrine_shape.is-orb > div:nth-child(2) { left: -10%; top: -8%; width: 34%; height: 34%; background: #eee260; }
.vitrine_shape.is-orb > div:nth-child(3) { right: -10%; top: -8%; width: 34%; height: 34%; background: #eee260; }
.vitrine_shape.is-rail { width: clamp(96px, 12vw, 180px); height: clamp(52px, 6.4vw, 92px); border: 2px solid rgba(255,255,255,.22); }
.vitrine_shape.is-rail > div {
  position: absolute; top: 50%; right: 6px; width: clamp(30px, 3.8vw, 56px); height: clamp(30px, 3.8vw, 56px);
  margin-top: calc(clamp(30px, 3.8vw, 56px) / -2); border-radius: 999px; background: #e6e5e1;
}

/* ---------- Un seul point de rupture : 820 px ---------- */
@media (max-width: 820px) {
  .vitrine_row.is-messaging { grid-template-columns: 1fr; padding: 12vh 6vw 6vh; min-height: 0; gap: 34px; }
  .vitrine_row.is-agenda { grid-template-columns: 1fr; padding: 2vh 6vw 10vh; min-height: 0; gap: 30px; }
  /* ERP à échelle lisible, fenêtre cadrée sur la zone utile (0,8 et 0,72 dans la maquette) */
  .vitrine_screen { border-radius: 0; }
  .vitrine_screen.is-messaging img { width: 920px; transform: translateX(-237px); }
  .vitrine_screen.is-agenda img { width: 1044px; transform: translateX(-213px); }
  .vitrine_auto { padding: 10vh 6vw; min-height: 0; gap: 5vh; }
  .vitrine_schema { grid-template-columns: 1fr; gap: 26px; }
  .vitrine_wires { display: none; }
  /* la maquette force l'alignement à gauche (!important) : même poids ici que la règle desktop */
  .vitrine_schema > div, .vitrine_col.is-triggers { align-items: flex-start; }
  .vitrine_robot { grid-template-columns: 1fr; padding: 8vh 6vw 10vh; min-height: 0; gap: 36px; }
  .vitrine_signature { padding: 9vh 6vw 8vh; gap: 40px; }
  .vitrine_shapes { flex-wrap: wrap; height: auto; gap: 16px; overflow: visible; }
  [data-drift] { transform: none !important; opacity: 1 !important; }
}