.grlec-site-dialog {
  position: fixed;
  inset: 0;
  width: calc(100vw - 24px);
  height: calc(100dvh - 24px);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 1px solid #e2c7bd70;
  border-radius: 16px;
  background: #211b25;
  color: #f6eee7;
  box-shadow: 0 24px 120px #09050bd9;
  overflow: clip;
}
.grlec-site-dialog::backdrop {
  background: #110b18de;
  backdrop-filter: blur(8px);
}
.grlec-site-dialog[open] {
  display: flex;
  flex-direction: column;
}
.grlec-dialog-bar {
  height: 52px;
  flex: 0 0 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 0 20px;
  gap: 12px;
  border-bottom: 1px solid #eccbc02b;
  background: #2b202d;
  font:
    13px/1.2 Arial,
    sans-serif;
  position: relative;
}
.grlec-dialog-bar:after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c4a3e9, #ffd0a9, transparent);
  opacity: 0.6;
  pointer-events: none;
}
.grlec-dialog-bar h2 {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  margin: 0;
  font: inherit;
  color: #f6eee7;
  white-space: nowrap;
}
.grlec-dialog-bar h2 span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.grlec-dialog-logo {
  display: block;
  flex-shrink: 0;
  width: 88px;
  height: auto;
  filter: brightness(0) invert(1);
  animation: none;
  transition: none;
  transform: none;
  pointer-events: none;
}
.grlec-dialog-close {
  height: 40px;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 10px;
  border: 1px solid #dabaa545;
  border-radius: 22px;
  color: #f6eee7;
  background: transparent;
  font:
    12px Arial,
    sans-serif;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.grlec-dialog-close:hover {
  background: #624454;
  border-color: #e5bc9e;
}
.grlec-dialog-close:focus-visible {
  outline: 2px solid #ffd2af;
  outline-offset: 2px;
}
.grlec-dialog-close svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s;
}
.grlec-dialog-close:hover svg {
  transform: rotate(90deg);
}
.grlec-dialog-body {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: stretch;
  background: #211b25;
  overflow: clip;
}
.grlec-dialog-frame {
  display: block;
  flex: none;
  max-width: 100%;
  height: 100%;
  border: 0;
  background: #211b25;
}
.grlec-dialog-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #211b25;
  color: #edcbb5;
  font:
    14px Arial,
    sans-serif;
  z-index: 1;
}
.grlec-dialog-loading[hidden] {
  display: none;
}
.grlec-dialog-notice {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 90%;
  padding: 12px 18px;
  border: 1px solid #dcb4a073;
  border-radius: 10px;
  background: #302332;
  color: #f5ded1;
  font:
    13px/1.4 Arial,
    sans-serif;
  z-index: 2;
  box-shadow: 0 8px 30px #100a1a80;
}
.grlec-dialog-notice[hidden] {
  display: none;
}
@media (max-width: 700px) {
  .grlec-site-dialog {
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }
  .grlec-dialog-bar {
    padding: env(safe-area-inset-top, 0px) 8px 0 14px;
    height: calc(48px + env(safe-area-inset-top, 0px));
    flex-basis: calc(48px + env(safe-area-inset-top, 0px));
  }
  .grlec-dialog-bar h2 {
    gap: 12px;
  }
  .grlec-dialog-logo {
    width: 78px;
  }
  .grlec-dialog-close span {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .grlec-dialog-close,
  .grlec-dialog-close svg {
    transition: none;
  }
}

.grlec-dialog-frame[hidden] {
  display: none;
}
.grlec-site-dialog[data-project='plomberie'] .grlec-dialog-frame {
  background: #181e40;
}
.grlec-dialog-body {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.grlec-site-dialog[data-mode='mobile'] {
  width: 100vw;
  height: 100dvh;
  border: 0;
  border-radius: 0;
}
.grlec-site-dialog[data-mode='mobile'] .grlec-dialog-bar {
  padding: env(safe-area-inset-top, 0px) 8px 0 14px;
  height: calc(48px + env(safe-area-inset-top, 0px));
  flex-basis: calc(48px + env(safe-area-inset-top, 0px));
}
.grlec-site-dialog[data-mode='mobile'] .grlec-dialog-bar h2 {
  gap: 12px;
}
.grlec-site-dialog[data-mode='mobile'] .grlec-dialog-logo {
  width: 78px;
}
.grlec-site-dialog[data-mode='mobile'] .grlec-dialog-close span {
  display: none;
}

/* Plomberie keeps its own indigo / water-light palette in both host modes. */
.grlec-site-dialog[data-project='plomberie'] {
  background: #141d3e;
  border-color: #87baff70;
  color: #e8f2ff;
  box-shadow:
    0 24px 120px #050d2be6,
    0 0 32px #396cc51a;
}
.grlec-site-dialog[data-project='plomberie']::backdrop {
  background: #080f2bdf;
}
.grlec-site-dialog[data-project='plomberie'] .grlec-dialog-bar {
  background: linear-gradient(110deg, #171f42, #202b55 62%, #182444);
  border-bottom-color: #8cbfff38;
}
.grlec-site-dialog[data-project='plomberie'] .grlec-dialog-bar:after {
  background: linear-gradient(90deg, transparent, #8b9dff, #8be5f6, transparent);
  opacity: 0.72;
}
.grlec-site-dialog[data-project='plomberie'] .grlec-dialog-bar h2 span {
  color: #bdefff;
  letter-spacing: 0.025em;
  text-shadow:
    0 0 9px #78beff91,
    0 0 23px #677fff52;
}
.grlec-site-dialog[data-project='plomberie'] .grlec-dialog-close {
  color: #a9dfff;
  border-color: #81b7f86b;
  background: #172b4d44;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}
.grlec-site-dialog[data-project='plomberie'] .grlec-dialog-close:hover {
  color: #e0f8ff;
  background: #294e825c;
  border-color: #b1ebff;
  box-shadow:
    inset 0 0 15px #62baff21,
    0 0 20px #57a7f93b;
}
.grlec-site-dialog[data-project='plomberie'] .grlec-dialog-close:focus-visible {
  outline-color: #9adfff;
  box-shadow: 0 0 17px #57a7f938;
}
.grlec-site-dialog[data-project='plomberie'] .grlec-dialog-body,
.grlec-site-dialog[data-project='plomberie'] .grlec-dialog-loading {
  background: #181e40;
  color: #bdefff;
}
.grlec-site-dialog[data-project='plomberie'] .grlec-dialog-notice {
  background: #1d2c50;
  border-color: #85bdff6e;
  color: #e1f5ff;
  box-shadow: 0 8px 30px #07112980;
}
@media (prefers-reduced-motion: reduce) {
  .grlec-site-dialog[data-project='plomberie'] .grlec-dialog-close {
    transition: none;
  }
}

/* AËRON only: pearl / lavender tint; the shared logo and close motion stay intact. */
.grlec-site-dialog[data-project='aeron'] {
  background: #242b36;
  border-color: #cfd5e8a6;
  box-shadow:
    0 24px 120px #121628b0,
    0 0 34px #dacbee29;
}
.grlec-site-dialog[data-project='aeron']::backdrop {
  background: #161d2dd9;
}
.grlec-site-dialog[data-project='aeron'] .grlec-dialog-bar {
  background: linear-gradient(110deg, #28303b, #39394b 60%, #293b40);
  border-bottom-color: #d1dce550;
}
.grlec-site-dialog[data-project='aeron'] .grlec-dialog-bar:after {
  background: linear-gradient(90deg, transparent, #d9c6ec, #b4e3df, #f2d8d5, transparent);
}
.grlec-site-dialog[data-project='aeron'] .grlec-dialog-close {
  color: #e7e4f3;
  border-color: #d0dce56b;
}
.grlec-site-dialog[data-project='aeron'] .grlec-dialog-close:hover {
  background: #6c678047;
  border-color: #e3daee;
  box-shadow: 0 0 14px #c4dfe524;
}
.grlec-site-dialog[data-project='aeron'] .grlec-dialog-close:focus-visible {
  outline-color: #d1e3ec;
}
.grlec-site-dialog[data-project='aeron'] .grlec-dialog-body,
.grlec-site-dialog[data-project='aeron'] .grlec-dialog-frame {
  background: #e8eaee;
}
.grlec-site-dialog[data-project='aeron'] .grlec-dialog-loading {
  background: #e8eaee;
  color: #34424c;
}

/* Barre du site à la couleur du haut de chaque site, textes du pied de page GR Lab.,
   animations sobres pour les trois sites animés (Le Déclic : fil néon ; Plomberie : reflet d'eau ; AËRON : nacre).
   Validé sur mobile le 19 octobre 2026, étendu au PC le 22 octobre 2026. */
.grlec-site-dialog {
  --bar: #151b3a;
  --ink: #f4f1ff;
  background: var(--bar) !important;
}
.grlec-site-dialog[data-project='aeron'] {
  --bar: #eceff5;
  --ink: #1d2026;
}
.grlec-site-dialog[data-project='atelier-source'] {
  --bar: rgb(248, 246, 240);
  --ink: #23211d;
}
.grlec-site-dialog[data-project='atelier-cuivre'] {
  --bar: rgb(27, 28, 26);
  --ink: #f4efe6;
}
.grlec-site-dialog[data-project='atelier-plomberie'] {
  --bar: rgb(9, 25, 44);
  --ink: #eef6ff;
}
.grlec-site-dialog[data-project='electrician'] {
  --bar: rgb(20, 10, 19);
  --ink: #f6eee7;
  --glow: #ff9a6b55;
}
.grlec-site-dialog[data-project='plomberie'] {
  --bar: rgb(21, 33, 72);
  --ink: #f1f4ff;
  --glow: #5fe3f04d;
}
.grlec-site-dialog .grlec-dialog-bar {
  background: var(--bar) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
  isolation: isolate;
}
.grlec-site-dialog .grlec-dialog-bar::after {
  display: none !important;
}
.grlec-site-dialog .grlec-dialog-bar h2 {
  flex: none;
  position: relative;
  z-index: 1;
}
.grlec-site-dialog .grlec-dialog-logo {
  filter: brightness(0) invert(1) !important;
  opacity: 0.92;
}
.grlec-site-dialog:is([data-project='aeron'], [data-project='atelier-source']) .grlec-dialog-logo {
  filter: brightness(0) !important;
  opacity: 0.82;
}
.grlec-site-dialog .grlec-dialog-close {
  position: relative;
  z-index: 1;
  color: var(--ink) !important;
  background: transparent !important;
  border-color: color-mix(in srgb, var(--ink) 32%, transparent) !important;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
.grlec-site-dialog .grlec-dialog-close:focus-visible {
  outline: 0 !important;
  border-color: color-mix(in srgb, var(--ink) 55%, transparent) !important;
}
.grlec-site-dialog .grlec-dialog-close:active {
  border-color: color-mix(in srgb, var(--ink) 75%, transparent) !important;
  background: color-mix(in srgb, var(--ink) 12%, transparent) !important;
}
.grlec-site-dialog .grlec-dialog-tagline,
.grlec-site-dialog .grlec-dialog-fx {
  display: none;
}
.grlec-site-dialog .grlec-dialog-tagline {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  flex: 1;
  min-width: 0;
  margin: 0 10px 0 12px;
  padding-left: 12px;
  border-left: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  position: relative;
  z-index: 1;
  color: var(--ink);
  font:
    400 11px/1.15 GRFooterDM,
    'DM Sans',
    Arial,
    sans-serif;
}
.grlec-site-dialog .grlec-dialog-tagline span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.grlec-site-dialog .grlec-dialog-tagline span + span {
  font-size: 9.5px;
  opacity: 0.68;
}
.grlec-site-dialog:is([data-project='electrician'], [data-project='plomberie'], [data-project='aeron'])
  .grlec-dialog-fx {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.grlec-site-dialog .grlec-dialog-fx::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
}
.grlec-site-dialog .grlec-dialog-fx::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
/* Le Déclic : une lumière parcourt lentement le fil néon */
.grlec-site-dialog[data-project='electrician'] .grlec-dialog-bar {
  background: linear-gradient(90deg, #190b16, #23101d 55%, #1a0b17) !important;
}
.grlec-site-dialog[data-project='electrician'] .grlec-dialog-close {
  border-color: #ffbda370 !important;
  color: #f6eee7 !important;
  animation: grlec-breathe 8s ease-in-out infinite;
}
.grlec-site-dialog[data-project='electrician'] .grlec-dialog-fx::before {
  background: linear-gradient(90deg, transparent, #ff9a6b88 18%, #b98cf088 62%, #ffbda366 86%, transparent);
}
.grlec-site-dialog[data-project='electrician'] .grlec-dialog-fx::after {
  bottom: -2px;
  left: 0;
  width: 150px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(closest-side, #ffe9dccc, #ffb48a88 45%, transparent);
  animation: grlec-travel 8s cubic-bezier(0.45, 0, 0.35, 1) infinite;
}
/* Plomberie : bleu profond, un reflet d'eau traverse lentement la barre */
.grlec-site-dialog[data-project='plomberie'] .grlec-dialog-bar {
  background: linear-gradient(100deg, #121a46, #1c2868 55%, #151f57) !important;
}
.grlec-site-dialog[data-project='plomberie'] .grlec-dialog-close {
  border-color: #9fe9ff5c !important;
  background: #ffffff0a !important;
  animation: grlec-breathe 9s ease-in-out infinite;
}
.grlec-site-dialog[data-project='plomberie'] .grlec-dialog-fx::before {
  background: linear-gradient(90deg, transparent, #8b95ff77 22%, #5fe3f0aa 55%, #8b95ff77 82%, transparent);
}
.grlec-site-dialog[data-project='plomberie'] .grlec-dialog-fx::after {
  top: 0;
  bottom: 0;
  left: 0;
  width: 30%;
  background: linear-gradient(90deg, transparent, #b9f3ff1c 45%, #ffffff22 50%, #b9f3ff1c 55%, transparent);
  animation: grlec-sheen 9s ease-in-out infinite;
}
/* AËRON : nacre neutre, reflet très lent */
.grlec-site-dialog[data-project='aeron'] .grlec-dialog-bar {
  background: linear-gradient(110deg, #eceef6, #e4ecf7 25%, #e3f1ee 50%, #efede6 72%, #e9e7f2 88%, #eceef6) !important;
  background-size: 300% 100% !important;
  animation: grlec-slide 22s linear infinite;
}
.grlec-site-dialog[data-project='aeron'] .grlec-dialog-fx::before {
  background: linear-gradient(90deg, #c9b8e6, #a9c6ee, #a3dccf, #ead1ad, #c9b8e6);
  background-size: 200% 100%;
  opacity: 0.55;
  animation: grlec-slide 14s linear infinite;
}
/* PC : survol de la croix aux couleurs du site (la souris ne survole pas sur mobile). */
@media (hover: hover) {
  .grlec-site-dialog .grlec-dialog-close:hover {
    background: color-mix(in srgb, var(--ink) 12%, transparent) !important;
    border-color: color-mix(in srgb, var(--ink) 55%, transparent) !important;
  }
}
/* La page derrière le pop-up est mise en pause ; la barre reste animée. */
.grlec-site-dialog[open] :is(.grlec-dialog-bar, .grlec-dialog-close, .grlec-dialog-fx),
.grlec-site-dialog[open] .grlec-dialog-fx::before,
.grlec-site-dialog[open] .grlec-dialog-fx::after {
  animation-play-state: running !important;
}
@keyframes grlec-breathe {
  0%,
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
  50% {
    box-shadow: 0 0 12px 0 var(--glow);
  }
}
@keyframes grlec-travel {
  0% {
    transform: translateX(-160px);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  42% {
    transform: translateX(calc(100vw + 20px));
    opacity: 1;
  }
  43%,
  100% {
    transform: translateX(calc(100vw + 20px));
    opacity: 0;
  }
}
@keyframes grlec-sheen {
  0% {
    transform: translateX(-140%) skewX(-18deg);
  }
  55%,
  100% {
    transform: translateX(320%) skewX(-18deg);
  }
}
@keyframes grlec-slide {
  to {
    background-position: 200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .grlec-site-dialog :is(.grlec-dialog-bar, .grlec-dialog-close),
  .grlec-site-dialog .grlec-dialog-fx::before,
  .grlec-site-dialog .grlec-dialog-fx::after {
    animation: none !important;
  }
}
/* Mobile : affichage progressif, le site apparaît en fondu dès son premier contenu (20 octobre 2026). */
.grlec-site-dialog[data-mode='mobile'] .grlec-dialog-frame {
  transition: opacity 0.5s ease;
}
.grlec-site-dialog[data-mode='mobile'][data-waiting] .grlec-dialog-frame:not([hidden]) {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .grlec-site-dialog[data-mode='mobile'] .grlec-dialog-frame {
    transition: none;
  }
}