/* ==========================================================================
   GoWebdaba — styles du thème enfant
   Les couleurs, typos et espacements principaux se règlent dans Elementor
   (Réglages du site) et dans le Customizer Blocksy. Ce fichier ne contient
   que ce qu'Elementor gratuit ne sait pas faire : les effets au scroll et
   quelques composants (puces, maquettes illustratives, étapes).
   ========================================================================== */

:root {
  --gw-night: #0A0C12;
  --gw-night-2: #10141D;
  --gw-night-3: #161B26;
  --gw-blue: #023661;
  --gw-blue-2: #062A4C;
  --gw-orange: #DB5227;
  --gw-orange-hi: #F2693C;
  --gw-orange-btn: #C9461E;
  --gw-steel: #76828E;
  --gw-ink: #F3EFEA;
  --gw-ink-2: #BAC2CB;
  --gw-ink-3: #8D98A4;
  --gw-line: rgba(118, 130, 142, 0.24);
  --gw-line-strong: rgba(118, 130, 142, 0.45);
  --gw-gutter: clamp(1rem, 4vw, 3.5rem);
  --gw-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --gw-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --gw-dots: radial-gradient(circle at center, rgba(118, 130, 142, 0.22) 1.3px, transparent 1.6px);
  --theme-font-family: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --theme-headings-font-family: 'Chillax', 'Satoshi', system-ui, sans-serif;
}

/* ---------- Surfaces du navigateur ---------- */
html { scrollbar-color: var(--gw-line-strong) var(--gw-night); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { overflow-x: clip; caret-color: var(--gw-orange); -webkit-font-smoothing: antialiased; }
::selection { background: var(--gw-orange); color: var(--gw-night); }
:focus-visible { outline: 2px solid var(--gw-orange-hi); outline-offset: 3px; }
h1, h2, h3, h4, .elementor-heading-title { text-wrap: balance; }
[id] { scroll-margin-top: 90px; }

/* ---------- Boutons Elementor : retour au clic ---------- */
.elementor-button { transition: transform 160ms var(--gw-ease-out), background-color 200ms ease, border-color 200ms ease, color 200ms ease !important; }
.elementor-button:active { transform: scale(0.97); }

/* ---------- Puces (listes « Pour qui » et étiquettes) ---------- */
.gw-chips ul, .gw-tags ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.gw-chips li { padding: .45rem .9rem; border: 1px solid var(--gw-line-strong); border-radius: 999px; font-size: .9rem; line-height: 1.3; color: var(--gw-ink-2); }
.gw-tags ul { gap: .45rem; }
.gw-tags li { padding: .35rem .75rem; border-radius: 999px; background: rgba(243, 239, 234, .08); border: 1px solid var(--gw-line); font-size: .85rem; line-height: 1.3; color: var(--gw-ink-2); }

/* ---------- Cartes et tuiles ---------- */
.gw-card, .gw-tile { transition: border-color 300ms ease; }
@media (hover: hover) and (pointer: fine) {
  .gw-card:hover, .gw-tile:hover { border-color: rgba(219, 82, 39, .7) !important; }
  .gw-card--cta:hover { border-color: var(--gw-orange) !important; }
}
.gw-tile { text-decoration: none; }
.gw-tile:active { transform: scale(0.98); }
.gw-services { overflow-x: clip; }

/* ---------- Tarifs : cartes de formules ---------- */
.gw-price-tag p { display: inline-block; margin: 0; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--gw-line-strong); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3; color: var(--gw-ink-2); }
.gw-price--featured .gw-price-tag p { border-color: rgba(219, 82, 39, .6); color: var(--gw-orange-hi); }
.gw-tiers ul, .gw-list { margin: 0; padding: 0; list-style: none; }
.gw-tiers li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .6rem 0; border-top: 1px solid var(--gw-line); color: var(--gw-ink-2); }
.gw-tiers li:last-child { border-bottom: 1px solid var(--gw-line); }
.gw-tiers b { font-family: Chillax, sans-serif; font-weight: 600; color: var(--gw-ink); white-space: nowrap; }
.gw-list li { position: relative; padding: .3rem 0 .3rem 1.6rem; color: var(--gw-ink-2); }
.gw-list li::before { content: ""; position: absolute; left: .15rem; top: .78rem; width: .7rem; height: .38rem; border-left: 2px solid var(--gw-orange-hi); border-bottom: 2px solid var(--gw-orange-hi); transform: rotate(-45deg); }
.gw-price > .elementor-widget-button, .gw-price > .e-con-inner > .elementor-widget-button { margin-top: auto; }

/* Carte « Création de sites » sur mobile : l'image en haut, le texte sur fond plein */
@media (max-width: 767px) {
  .gw-card--site.e-con { --min-height: 620px !important; background-size: 100% auto !important; background-position: top center !important; background-repeat: no-repeat !important; }
  .gw-card--site.e-con::before { background-image: linear-gradient(180deg, rgba(16, 20, 29, 0) 34%, #10141D 58%) !important; }
}

/* ---------- Maquette : recherche locale (illustrative) ---------- */
.gw-mock-local { padding: 1rem; border-radius: 16px; background: rgba(10, 12, 18, .55); border: 1px solid rgba(198, 211, 224, .14); font-family: var(--theme-font-family); }
.gw-mock-local .local__search { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-radius: 999px; background: rgba(243, 239, 234, .08); color: var(--gw-ink); font-size: .92rem; }
.gw-mock-local .local__search svg { width: 1.1em; height: 1.1em; color: var(--gw-ink-3); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.gw-mock-local ol { display: grid; gap: .35rem; margin: .7rem 0 0; padding: 0; list-style: none; }
.gw-mock-local li { display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; align-items: center; padding: .6rem .7rem; border-radius: 12px; line-height: 1.35; }
.gw-mock-local li.is-you { background: rgba(219, 82, 39, .14); border: 1px solid rgba(219, 82, 39, .45); }
.gw-mock-local .local__pin { grid-row: span 2; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--gw-steel); color: var(--gw-night); font-size: .75rem; font-weight: 700; }
.gw-mock-local .local__pin span { rotate: 45deg; }
.gw-mock-local .is-you .local__pin { background: var(--gw-orange-btn); color: #fff; }
.gw-mock-local .local__name { font-weight: 700; font-size: .95rem; color: var(--gw-ink); }
.gw-mock-local li:not(.is-you) .local__name { color: var(--gw-ink-2); font-weight: 500; }
.gw-mock-local .local__meta { font-size: .8rem; color: var(--gw-ink-3); font-variant-numeric: tabular-nums; }
.gw-mock-local .local__stars { display: inline-flex; align-items: center; gap: .2em; color: var(--gw-orange-hi); font-weight: 700; }
.gw-mock-local .local__stars svg { width: .8em; height: .8em; fill: currentColor; }
.gw-mock-local figcaption, .gw-mock-shop figcaption { margin-top: .6rem; font-size: .72rem; color: var(--gw-ink-3); text-align: right; }
.gw-mock-local figure, .gw-mock-shop figure { margin: 0; }

/* ---------- Maquette : fiche produit (illustrative) ---------- */
.gw-mock-shop figure { display: grid; grid-template-columns: 7.5rem 1fr; gap: .4rem 1rem; align-items: center; font-family: var(--theme-font-family); }
.gw-mock-shop .shop__visual { grid-row: span 2; display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 10px; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .8); }
.gw-mock-shop .shop__info { display: grid; gap: .1rem; line-height: 1.35; }
.gw-mock-shop .shop__name { font-weight: 700; color: var(--gw-ink); }
.gw-mock-shop .shop__price { color: var(--gw-ink-2); font-variant-numeric: tabular-nums; }
.gw-mock-shop .shop__add { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: .6rem; padding: .55rem .6rem .55rem 1rem; border-radius: 999px; background: var(--gw-ink); color: var(--gw-night); font-weight: 700; font-size: .88rem; line-height: 1; }
.gw-mock-shop .shop__count { display: grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .35rem; border-radius: 999px; background: var(--gw-orange-btn); color: #fff; font-size: .8rem; font-variant-numeric: tabular-nums; transition: transform 240ms var(--gw-ease-out); }
.gw-mock-shop .shop__count.is-bump { transform: scale(1.25); }
.gw-mock-shop figcaption { grid-column: 1 / -1; }

/* ---------- Méthode : étapes numérotées + rail ---------- */
.gw-steps { position: relative; counter-reset: step; }
.gw-step { position: relative; counter-increment: step; }
.gw-step .elementor-heading-title::before { content: counter(step); margin-right: .55rem; font-family: var(--theme-font-family); font-size: .85rem; font-weight: 700; color: var(--gw-orange); font-variant-numeric: tabular-nums; vertical-align: .2em; }
.gw-rail { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(118, 130, 142, .35); pointer-events: none; }
.gw-rail__fill { position: absolute; inset: 0; background: var(--gw-orange); transform-origin: 0 50%; }
.gw-rail__head {
  position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--gw-orange-hi); box-shadow: 0 0 14px 4px rgba(219, 82, 39, .75);
  opacity: 0; transition: opacity 200ms ease; will-change: transform;
}
.gw-steps.has-rail .gw-step::before {
  content: ""; position: absolute; left: 0; top: calc(var(--gw-rail-gap, 2.5rem) * -1 - .45rem);
  width: .9rem; height: .9rem; border-radius: 50%; box-sizing: border-box;
  background: var(--gw-night); border: 1px solid var(--gw-steel);
  transition: background-color 300ms ease, border-color 300ms ease;
}
.gw-steps.has-rail .gw-step.is-lit::before { background: var(--gw-orange); border-color: var(--gw-orange); }
@media (max-width: 1024px) {
  .gw-rail { left: calc(.45rem - 1px); right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .gw-rail__head { left: -4px; top: -5px; }
  .gw-rail__fill { transform-origin: 50% 0; }
  .gw-steps.has-rail .gw-step { padding-left: 2.25rem; }
  .gw-steps.has-rail .gw-step::before { top: .45rem; left: 0; }
}

/* ---------- Contact : trame perforée ---------- */
.gw-contact { position: relative; overflow: hidden; }
.gw-contact > .elementor-element, .gw-contact > .e-con-inner { position: relative; z-index: 1; }
.gw-dots {
  --r: 75%;
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle at center, rgba(219, 82, 39, .45) 1.4px, transparent 1.7px);
  background-size: 24px 24px; opacity: .55;
  -webkit-mask-image: radial-gradient(circle at 50% 55%, #000 calc(var(--r) - 30%), transparent var(--r));
          mask-image: radial-gradient(circle at 50% 55%, #000 calc(var(--r) - 30%), transparent var(--r));
}

/* ---------- Trame perforée décorative (sections sombres) ---------- */
.gw-perforated { position: relative; }
.gw-perforated::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--gw-dots); background-size: 22px 22px; -webkit-mask-image: radial-gradient(90% 70% at 50% 50%, #000 20%, transparent 85%); mask-image: radial-gradient(90% 70% at 50% 50%, #000 20%, transparent 85%); }
.gw-perforated > * { position: relative; z-index: 1; }

/* ---------- Laser : révélation architecturale ---------- */
.gw-laser-wrap { position: relative; overflow: hidden; background: var(--gw-night); }
.gw-laser-wrap > .gw-laser { position: relative; z-index: 1; }
.gw-laser-base { position: absolute !important; inset: 0; z-index: 0; pointer-events: none; filter: grayscale(1) brightness(.32); }
.gw-laser.e-con, .gw-laser-base.e-con, .gw-dive-beneath.e-con { --min-height: 100svh !important; }
.gw-laser-base * { color: transparent !important; -webkit-text-stroke: 1px rgba(160, 172, 184, .7); }
.gw-laser-base .elementor-button { background: transparent !important; }
.gw-laser-line {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; height: 2px; pointer-events: none;
  background: var(--gw-orange-hi);
  box-shadow: 0 0 20px 4px rgba(219, 82, 39, .9), 0 0 60px 12px rgba(219, 82, 39, .35);
  opacity: 0;
}

/* ==========================================================================
   HÉRO — la plongée
   Sans JavaScript (et dans l'éditeur Elementor) : image du laptop + textes.
   Avec le moteur (html.gw-fx) : scène collante de 620vh.
   ========================================================================== */

/* --- Version statique / éditeur --- */
.gw-dive-layers .dive__vortex,
.gw-dive-layers .dive__words,
.gw-dive-layers .dive__ring,
.gw-dive-layers .dive__shade,
.gw-dive-layers .dive__cue,
.gw-dive-layers .screen { display: none; }
.gw-dive-layers .dive__stage { position: relative; }
.gw-dive-layers .stage__img { display: block; width: 100%; height: auto; border-radius: 18px; }

/* --- Version animée --- */
/* Hauteurs en svh : elles ne bougent pas quand la barre de Safari se replie,
   sinon toute la suite de la page se décale pendant le défilement. */
html.gw-fx .gw-dive.e-con { display: block; height: 560vh; height: 560svh; padding: 0; min-height: 0; }
@media (max-aspect-ratio: 4/5) {
  html.gw-fx .gw-dive.e-con { height: 440vh; height: 440svh; }
}
/* « Réduire les animations » : même premier écran, sans la scène collante */
html.gw-calm .gw-dive.e-con { height: auto; }
html.gw-calm .dive__sticky { position: relative; }
.dive__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--gw-night); isolation: isolate; }

html.gw-fx .gw-dive .dive__beneath.e-con { position: absolute; inset: 0; z-index: 1; width: auto; max-width: none; min-height: 0; margin: 0; }

.dive__vortex {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; visibility: hidden;
  --hole: 0px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--hole), #000 calc(var(--hole) + 1px));
          mask-image: radial-gradient(circle at 50% 50%, transparent var(--hole), #000 calc(var(--hole) + 1px));
}
.vortex__aperture { position: absolute; inset: 0; }
.vortex__inner { position: absolute; inset: 0; transform-origin: 50% 50%; background: var(--gw-night); }
.vortex__inner picture, .vortex__inner img { display: block; width: 100%; height: 100%; max-width: none; }
.vortex__inner img { object-fit: cover; }
.vortex__warp { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; }
.vortex__veil { position: absolute; inset: 0; opacity: 0; background: radial-gradient(closest-side at 50% 50%, rgba(10, 12, 18, .82), rgba(10, 12, 18, .35) 70%, rgba(10, 12, 18, .15)); }

.dive__words { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none; }
.dive__words span { grid-area: 1 / 1; opacity: 0; font-family: 'Chillax', sans-serif; font-weight: 600; letter-spacing: -0.03em; font-size: clamp(3rem, 10vw, 6rem); line-height: 1; color: var(--gw-ink); text-shadow: 0 6px 40px rgba(10, 12, 18, .65); }

.dive__ring {
  position: absolute; left: 50%; top: 50%; z-index: 5; width: 0; height: 0; border-radius: 50%;
  translate: -50% -50%; border: 3px solid var(--gw-orange-hi); opacity: 0; pointer-events: none;
  box-shadow: 0 0 24px 4px rgba(219, 82, 39, .55), inset 0 0 24px 2px rgba(219, 82, 39, .45);
}

.dive__front { position: absolute; inset: 0; z-index: 2; background: var(--gw-night); }
.dive__front .dive__stage { position: absolute; left: 0; top: 0; width: 1408px; height: 768px; transform-origin: 0 0; }
.dive__front .stage__img { width: 100%; height: 100%; max-width: none; object-fit: fill; border-radius: 0; }
.dive__front .screen { display: block; }

/* L'écran : HTML projeté sur l'écran du laptop */
.screen {
  position: absolute; left: 0; top: 0; width: 1000px; height: 720px; transform-origin: 0 0; overflow: hidden; border-radius: 6px;
  background: radial-gradient(70% 60% at 78% 55%, rgba(2, 54, 97, .55), transparent 70%), linear-gradient(180deg, #0E121A, #0B0E15);
  color: var(--gw-ink); font-family: 'Satoshi', sans-serif; backface-visibility: hidden; line-height: 1.2;
}
.screen__grid { position: absolute; inset: 0; background-image: var(--gw-dots); background-size: 26px 26px; opacity: .55; }
.screen__bar { position: relative; z-index: 2; display: flex; align-items: center; gap: 40px; height: 92px; padding: 0 56px; border-bottom: 1px solid var(--gw-line); }
.screen__brand { font: 600 30px/1 'Chillax', sans-serif; letter-spacing: -0.02em; }
.screen__brand b { color: var(--gw-orange); font-weight: 600; }
.screen__links { display: flex; gap: 30px; margin-left: auto; font-size: 20px; color: var(--gw-ink-2); }
.screen__pill { padding: 12px 22px; border-radius: 999px; background: var(--gw-orange-btn); color: #fff; font-weight: 700; font-size: 19px; }
.screen__body { position: relative; z-index: 2; padding: 110px 56px 0; max-width: 620px; }
.screen__title { margin: 0; font: 600 74px/0.98 'Chillax', sans-serif; letter-spacing: -0.03em; }
.screen__title em { font-style: normal; color: var(--gw-orange); }
.screen__sub { margin: 30px 0 0; font-size: 22px; color: var(--gw-ink-2); }
.screen__btn { display: inline-block; margin-top: 40px; padding: 18px 34px; border-radius: 999px; border: 1.5px solid var(--gw-line-strong); font-weight: 700; font-size: 21px; }
.screen__portal { position: absolute; z-index: 1; left: 770px; top: 410px; width: 0; height: 0; }
.screen__portal span, .screen__portal b { position: absolute; left: 0; top: 0; border-radius: 50%; translate: -50% -50%; }
.screen__portal span { border: 1.5px solid rgba(219, 82, 39, .75); }
.screen__portal span:nth-child(1) { width: 300px; height: 300px; border-color: rgba(118, 130, 142, .35); }
.screen__portal span:nth-child(2) { width: 220px; height: 220px; border-style: dashed; }
.screen__portal span:nth-child(3) { width: 140px; height: 140px; }
.screen__portal span:nth-child(4) { width: 70px; height: 70px; border-color: var(--gw-orange-hi); box-shadow: 0 0 30px 6px rgba(219, 82, 39, .45); }
.screen__portal b { width: 22px; height: 22px; background: var(--gw-orange-hi); box-shadow: 0 0 22px 6px rgba(242, 105, 60, .8); }

.dive__front .dive__shade {
  display: block; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 12, 18, .94) 0%, rgba(10, 12, 18, .72) 22%, rgba(10, 12, 18, 0) 38%),
    linear-gradient(0deg, rgba(10, 12, 18, .75) 0%, rgba(10, 12, 18, 0) 30%),
    linear-gradient(180deg, rgba(10, 12, 18, .6) 0%, rgba(10, 12, 18, 0) 18%);
}

html.gw-fx .gw-dive .dive__intro.e-con {
  position: absolute; left: var(--gw-gutter); bottom: clamp(5.5rem, 13vh, 9rem); top: auto;
  width: min(34rem, 33vw); --width: min(34rem, 33vw); max-width: none; margin: 0; padding: 0;
}

.dive__front .dive__cue {
  display: flex; position: absolute; left: 50%; bottom: 1.6rem; translate: -50% 0; align-items: center; gap: .8rem;
  font-size: .82rem; font-weight: 500; letter-spacing: .02em; color: var(--gw-ink-3); white-space: nowrap;
}
.cue__line { position: relative; width: 44px; height: 1px; background: var(--gw-line-strong); overflow: hidden; }
.cue__line::after { content: ""; position: absolute; inset: 0; background: var(--gw-orange); transform: translateX(-100%); animation: gw-cue 2.2s var(--gw-ease-in-out) 3 both; }
@keyframes gw-cue { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }

/* Portrait : texte en haut, laptop dans l'espace libre (calculé), bouton en bas */
@media (max-aspect-ratio: 4/5) {
  html.gw-fx .gw-dive .dive__intro.e-con { left: var(--gw-gutter); right: var(--gw-gutter); top: 5.25rem; bottom: 0; width: auto; --width: auto; pointer-events: none; }
  html.gw-fx .gw-dive .dive__intro.e-con > * { pointer-events: auto; }
  html.gw-fx .gw-dive .dive__intro.e-con > :last-child { margin-top: auto; margin-bottom: 3.75rem; }
  html.gw-calm .gw-dive .dive__intro.e-con > :last-child { margin-bottom: 1.75rem; }
  /* Sur mobile, le héro garde un seul bouton : WhatsApp */
  html.gw-fx .gw-dive .dive__intro .elementor-widget-button ~ .elementor-widget-button { display: none; }
  .dive__front .dive__shade {
    background:
      linear-gradient(180deg, rgba(10, 12, 18, .9) 0%, rgba(10, 12, 18, 0) 26%),
      linear-gradient(0deg, rgba(10, 12, 18, .9) 0%, rgba(10, 12, 18, 0) 20%);
  }
  .dive__front .stage__img {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent);
            mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent);
  }
  .dive__front .dive__cue { bottom: 1.4rem; }
}

/* Petits écrans en hauteur (iPhone avec barres Safari) : texte plus compact */
@media (max-aspect-ratio: 4/5) and (max-height: 720px) {
  html.gw-fx .gw-dive .dive__intro.e-con { top: 4.75rem; gap: 12px; }
  html.gw-fx .gw-dive .dive__intro .elementor-widget-text-editor { font-size: .95rem; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  .cue__line::after { animation: none; }
  .elementor-button { transition-duration: 120ms !important; }
}