/* ============================================================================
   Page « 3D en verre » (gabarit page-verre) — d'après le skill Premium 3D Glass,
   aux couleurs et aux polices du site. Tout le décor cinématique est sous
   body.verre-actif (classe posée par verre.js) : sans WebGL 2 ou avec « réduire
   les animations », les chapitres s'affichent comme une page normale.
   ============================================================================ */

/* ---------- Affichage simple (avant le moteur, ou sans lui) ---------- */
.verre-contenu { padding: 130px 0 0; }
.verre-contenu > .verre-chapitre, .verre-contenu > .verre-contact { max-width: 1200px; margin: 0 auto; padding: 40px 30px; }
.verre-contenu .slide-title { margin: 0 0 18px; font-size: clamp(38px, 5vw, 64px); font-weight: 500; line-height: 1.04; letter-spacing: -.035em; color: #f2f7ff; }
.verre-contenu .slide-desc { max-width: 60ch; margin: 0; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .72); }
.verre-contenu .benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 290px)); gap: 26px 40px; margin: 14px 0 0; padding: 0; list-style: none; }
.verre-contenu .benefit { position: relative; min-height: 30px; padding-left: 46px; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .8); }
.verre-contenu .benefit::before {
  content: ""; position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid rgba(193, 158, 248, .45); background: linear-gradient(160deg, rgba(112, 42, 254, .35), rgba(23, 18, 74, .6));
  box-shadow: 0 0 18px -4px rgba(112, 42, 254, .7);
}
.verre-contenu .benefit::after {
  content: ""; position: absolute; left: 7px; top: 7px; width: 16px; height: 16px; background: #e7dcff;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.verre-contenu .figures { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 64px); margin: 28px 0 0; }
.verre-contenu .figure { margin: 0; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .62); }
.verre-contenu .figure strong {
  display: block; margin-bottom: 10px; font-size: clamp(36px, 3.4vw, 52px); font-weight: 400; line-height: 1;
  letter-spacing: -.03em; color: #f2f7ff; font-variant-numeric: tabular-nums;
}

/* Contact : intro + carte de verre (en CSS par défaut, en WebGL quand le moteur tourne) */
.verre-contact .contact-inner { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 560px); gap: clamp(40px, 6vw, 120px); align-items: center; }
.verre-contact .contact-eyebrow {
  display: flex; align-items: center; gap: 14px; margin: 0 0 40px;
  font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--lavande);
}
.verre-contact .contact-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--violet-bas); box-shadow: 0 0 12px var(--violet-bas); }
.verre-contact .contact-title { margin: 0 0 32px; font-size: clamp(44px, 5.4vw, 86px); font-weight: 500; line-height: 1; letter-spacing: -.035em; color: #f2f7ff; }
.verre-contact .contact-lead { max-width: 46ch; margin: 0; font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, .74); }
.verre-carte {
  position: relative; width: 100%; max-width: 560px; justify-self: end; margin: 0;
  padding: 40px 42px 38px; border-radius: 30px; border: 1px solid rgba(255, 255, 255, .22);
  background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015));
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.verre-carte > * { position: relative; z-index: 1; }
.verre-carte .card-head {
  display: flex; justify-content: space-between; align-items: center; margin: 0 0 26px;
  font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #e7dcff;
}
.verre-carte .card-head::after { content: "↗"; font-size: 20px; letter-spacing: 0; }
.verre-carte .carte-etapes { counter-reset: etape; display: grid; gap: 18px; margin: 0 0 30px; padding: 0; list-style: none; }
.verre-carte .carte-etapes li { counter-increment: etape; position: relative; padding-left: 48px; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .86); }
.verre-carte .carte-etapes li::before {
  content: "0" counter(etape); position: absolute; left: 0; top: 1px;
  font-family: var(--affiche); font-size: 11px; letter-spacing: .1em; color: var(--lavande);
}
.verre-carte .wp-block-buttons { gap: 10px; }

/* Texte de référencement, sous l'expérience */
.verre-suite { position: relative; padding: 90px 0 30px; background: var(--nuit); }

/* ---------- Mode cinématique (moteur actif) ---------- */
body.verre-actif { background: var(--nuit); }
body.verre-actif .verre-contenu { padding: 0; }
body.verre-actif #webgl { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; outline: none; }
body.verre-actif .cinematic-container { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
body.verre-actif .slide { position: absolute; bottom: 12%; margin: 0; padding: 0; max-width: none; pointer-events: none; }
body.verre-actif .slide.active { pointer-events: auto; }
body.verre-actif #slide-1 { left: 60px; width: min(44vw, 640px); bottom: 15%; }
body.verre-actif #slide-2 { left: calc(50vw + 20px); right: 60px; width: auto; }
body.verre-actif #slide-2 .slide-desc { max-width: min(60ch, 100%); }
body.verre-actif #slide-3 { left: 60px; width: min(640px, 46vw); bottom: 10%; }
body.verre-actif #slide-4 { left: 60px; max-width: 640px; }
body.verre-actif #slide-4 .slide-desc { max-width: 46ch; }
body.verre-actif .slide-title { margin: 0 0 22px; font-size: clamp(44px, 5.4vw, 80px); line-height: 1; }
body.verre-actif .slide-desc {
  opacity: 0; transform: translateY(14px);
  transition: opacity 1s cubic-bezier(.16, 1, .3, 1) .3s, transform 1s cubic-bezier(.16, 1, .3, 1) .3s;
}
body.verre-actif .slide.active .slide-desc { opacity: 1; transform: none; }

/* titres : chaque ligne monte hors de son masque (la seconde en lavande) */
body.verre-actif .slide-title .line, body.verre-actif .contact-title .line {
  display: block; overflow: hidden; white-space: nowrap; padding: .06em 0 .16em; margin: -.06em 0 -.16em;
}
body.verre-actif .line-inner {
  display: block; transform: translateY(112%); opacity: 0; filter: blur(12px);
  transition: transform 1.15s cubic-bezier(.16, 1, .3, 1), opacity .7s ease-out, filter 1.05s cubic-bezier(.16, 1, .3, 1);
}
body.verre-actif .line.muted .line-inner { transition-delay: .09s; }
body.verre-actif .slide.active .slide-title .line-inner, body.verre-actif .contact.is-visible .contact-title .line-inner { transform: none; opacity: 1; filter: blur(0); }
.slide-title .line.muted, .contact-title .line.muted { color: #c9b8ff; }

body.verre-actif .benefit { opacity: 0; transform: translateY(14px); transition: opacity 1s cubic-bezier(.16, 1, .3, 1), transform 1s cubic-bezier(.16, 1, .3, 1); }
body.verre-actif .benefit:nth-child(1) { transition-delay: .28s; }
body.verre-actif .benefit:nth-child(2) { transition-delay: .36s; }
body.verre-actif .benefit:nth-child(3) { transition-delay: .44s; }
body.verre-actif .benefit:nth-child(4) { transition-delay: .52s; }
body.verre-actif .slide.active .benefit { opacity: 1; transform: none; }
body.verre-actif .figure { opacity: 0; transform: translateY(14px); transition: opacity 1s cubic-bezier(.16, 1, .3, 1), transform 1s cubic-bezier(.16, 1, .3, 1); }
body.verre-actif .figure:nth-child(1) { transition-delay: .45s; }
body.verre-actif .figure:nth-child(2) { transition-delay: .53s; }
body.verre-actif .figure:nth-child(3) { transition-delay: .61s; }
body.verre-actif .slide.active .figure { opacity: 1; transform: none; }

body.verre-actif .story-progress { position: fixed; top: 50%; right: 34px; transform: translateY(-50%); z-index: 11; pointer-events: none; transition: opacity .6s; }
.story-dashes { display: flex; flex-direction: column; gap: 12px; }
.story-dash { width: 2px; height: 40px; border-radius: 2px; background: rgba(255, 255, 255, .15); }
.story-dash-fill { width: 100%; height: 0; border-radius: 2px; background: var(--lavande); box-shadow: 0 0 10px rgba(193, 158, 248, .6); }
body.contact-open .story-progress { opacity: 0; }

body.verre-actif .scroll-stage { height: 900vh; pointer-events: none; }
body.verre-actif .verre-contact {
  position: relative; z-index: 8; max-width: none; min-height: 100vh; display: flex; align-items: center;
  padding: 150px 60px 90px; background: linear-gradient(180deg, rgba(1, 3, 21, 0) 0%, rgba(1, 3, 21, .22) 20%, rgba(1, 3, 21, .3) 100%);
}
body.verre-actif .verre-contact .contact-inner { width: 100%; max-width: 1400px; margin: 0 auto; }
body.verre-actif .contact-lead, body.verre-actif .verre-carte {
  opacity: 0; transform: translateY(34px);
  transition: opacity .9s cubic-bezier(.25, 1, .5, 1) .2s, transform .9s cubic-bezier(.25, 1, .5, 1) .2s;
}
body.verre-actif .verre-carte { transition-delay: .35s; }
body.verre-actif .contact.is-visible .contact-lead, body.verre-actif .contact.is-visible .verre-carte { opacity: 1; transform: none; }
/* la dalle de verre WebGL prend le relais du fond CSS de la carte */
body.has-glass-card .verre-carte { border-color: transparent; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
body.has-glass-card .verre-carte::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; padding: 1px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  background: linear-gradient(135deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .08) 28%, rgba(255, 255, 255, .04) 60%, rgba(255, 255, 255, .35) 100%);
}
body.has-glass-card .verre-carte::after {
  content: ""; position: absolute; inset: 1px; z-index: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 80% at 18% 0%, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 55%);
}
/* ce qui suit l'expérience passe au-dessus de la toile fixe */
body.verre-actif .verre-suite, body.verre-actif footer.wp-block-template-part { position: relative; z-index: 9; background: var(--nuit); }
body.verre-actif footer.wp-block-template-part { display: flow-root; } /* la marge haute du pied reste sur son fond */

/* ---------- Téléphones et écrans étroits : texte et objet empilés ---------- */
@media (max-width: 1000px) {
  .verre-contact .contact-inner { grid-template-columns: 1fr; gap: 48px; }
  .verre-carte { justify-self: stretch; max-width: none; padding: 32px 26px; }
}
@media (max-width: 900px), (max-aspect-ratio: 4/5) {
  body.verre-actif .story-progress { right: 10px; }
  body.verre-actif .slide, body.verre-actif #slide-1, body.verre-actif #slide-2, body.verre-actif #slide-3, body.verre-actif #slide-4 {
    left: 22px; right: 22px; width: auto; max-width: none; bottom: auto;
  }
  body.verre-actif #slide-1, body.verre-actif #slide-3 { top: 100px; }
  body.verre-actif #slide-2, body.verre-actif #slide-4 { bottom: 6%; top: auto; }
  body.verre-actif .slide-title { margin-bottom: 14px; font-size: clamp(34px, 10vw, 64px); }
  body.verre-actif .slide-desc { max-width: 36ch; font-size: 15px; line-height: 1.6; }
  .verre-contenu .benefits { grid-template-columns: 1fr 1fr; gap: 16px 14px; }
  .verre-contenu .benefit { padding-left: 36px; font-size: 13px; line-height: 1.45; }
  .verre-contenu .benefit::before { width: 26px; height: 26px; border-radius: 7px; }
  .verre-contenu .benefit::after { left: 6px; top: 6px; width: 14px; height: 14px; }
  .verre-contenu .figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
  .verre-contenu .figure { font-size: 11px; }
  .verre-contenu .figure strong { margin-bottom: 8px; font-size: 30px; }
  /* sur téléphone, l'objet occupe la moitié haute aux chapitres 2 et 4 : le chapitre 2 garde
     son titre et son texte, ses atouts restent dans le texte sous l'expérience */
  body.verre-actif #slide-2 .benefits { display: none; }
  body.verre-actif .verre-contact { padding: 110px 22px 90px; }
  .verre-contact .contact-title { font-size: clamp(40px, 10.5vw, 86px); }
}

/* ---------- Chargement ---------- */
.verre-chargeur {
  position: fixed; inset: 0; z-index: 9990; display: grid; place-items: center; background: var(--nuit);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .7s;
}
.verre-chargeur.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.verre-chargeur-interieur { display: grid; justify-items: center; gap: 20px; width: min(320px, 70vw); text-align: center; }
.verre-chargeur-valeur { font-family: var(--affiche); font-size: clamp(48px, 7vw, 84px); line-height: 1; letter-spacing: .02em; color: var(--blanc); font-variant-numeric: tabular-nums; text-shadow: 0 0 40px rgba(193, 158, 248, .45); }
.verre-chargeur-unite { margin-left: .1em; font-size: .35em; color: var(--lavande); }
.verre-chargeur-barre { width: 100%; height: 1px; overflow: hidden; background: rgba(255, 255, 255, .12); }
.verre-chargeur-barre span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, var(--violet), var(--lavande)); }
.verre-chargeur-texte { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .4); }
body.is-loading { overflow: hidden; }