/* ==========================================================================
   UniDrine — habillage « verre » (inspiré de l'interface visionOS)
   Chargé par l'intranet, l'espace client et la boutique (pages PHP, classe .glass sur <body>),
   jamais par les pages statiques (accueil, CGV, mentions légales) ni à l'impression.

   Principe :
   - un « environnement » lumineux fixe derrière la page (lueurs bleues, cyan et violettes) ;
   - les blocs de premier niveau sont en verre dépoli : voile clair translucide, flou et saturation
     de l'arrière-plan, liseré lumineux en haut, ombre douce ;
   - les éléments imbriqués (tableau dans un panneau, note, zone de signature…) sont de simples voiles
     translucides, sans second flou : plus lisible et plus fluide ;
   - l'élément actif d'un menu ou d'onglets est un verre plus clair ; le bleu plein reste réservé
     aux actions principales.
   Repli opaque si le navigateur ne sait pas flouter ou si l'utilisateur demande moins de transparence.
   ========================================================================== */

@media screen {

  /* ---------- Matière et couleurs ---------- */
  .glass {
    --glass-fill: linear-gradient(150deg, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, .07) 52%, rgba(255, 255, 255, .1) 100%);
    --glass-fill-pop: linear-gradient(160deg, rgba(46, 66, 138, .74) 0%, rgba(20, 33, 84, .8) 100%);   /* menus déroulants, bandeaux flottants */
    --glass-edge: rgba(255, 255, 255, .15);
    --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(255, 255, 255, .03);
    --glass-shadow: 0 30px 60px -34px rgba(0, 2, 14, .9), 0 10px 26px -18px rgba(0, 2, 14, .6);
    --glass-blur: blur(28px) saturate(175%);
    --glass-active: rgba(255, 255, 255, .19);
    --glass-hover: rgba(255, 255, 255, .085);

    /* Les composants existants reposent sur ces variables : elles deviennent translucides. */
    --surface: rgba(255, 255, 255, .07);
    --soft: rgba(255, 255, 255, .045);
    --tint: rgba(140, 180, 255, .16);
    --line: rgba(255, 255, 255, .12);
    --field: rgba(2, 6, 22, .36);
    --navy: rgba(2, 6, 24, .46);
    --band: rgba(255, 255, 255, .025);
    --muted: #B4C1E5;
    --shadow: var(--glass-shadow);
  }

  /* ---------- Environnement lumineux (derrière tout le contenu) ---------- */
  html:has(> body.glass) { background: #030820; }
  body.glass, body.glass.admin, body.glass.admin-login { background: transparent; }
  body.glass::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(52vmax 40vmax at 2% -8%, rgba(47, 99, 255, .62), transparent 62%),
      radial-gradient(42vmax 34vmax at 104% 10%, rgba(26, 182, 255, .36), transparent 64%),
      radial-gradient(30vmax 22vmax at 58% 38%, rgba(64, 112, 255, .16), transparent 66%),
      radial-gradient(48vmax 42vmax at 80% 110%, rgba(118, 88, 255, .42), transparent 62%),
      radial-gradient(36vmax 30vmax at 6% 96%, rgba(40, 206, 188, .18), transparent 64%),
      linear-gradient(180deg, #050B27 0%, #030820 55%, #02051A 100%);
  }

  /* ---------- Verre dépoli : blocs de premier niveau ---------- */
  .glass :is(.panel, .table-wrap, .tile, .side-nav, .tabs, .iv-steps, .auth__card, .auth__side, .admin-login__box, .summary, .cart-list,
             .product-card, .offer, .svc-card, .mini-offer, .rubric, .callout, .empty, .cancel-choice, .alert, .company-box,
             .reassure li, .anchor-nav a, .cat-tabs a, .contact-form, .cross-card) {
    background: var(--glass-fill);
    border-color: var(--glass-edge);
    box-shadow: var(--glass-hi), var(--glass-shadow);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
  /* Couleur des messages conservée, sous le verre */
  .glass .alert--success { background: linear-gradient(150deg, rgba(52, 211, 153, .2), rgba(52, 211, 153, .09)); }
  .glass .alert--error { background: linear-gradient(150deg, rgba(255, 106, 113, .22), rgba(255, 106, 113, .1)); }
  .glass .alert--warning { background: linear-gradient(150deg, rgba(247, 198, 100, .2), rgba(247, 198, 100, .09)); }

  /* Imbriqués : voile translucide, sans second flou ni ombre */
  .glass :is(.panel, .summary, .auth__card, .table-wrap, .offer, .callout, .contact-form, .side-nav)
         :is(.panel, .table-wrap, .tile, .tabs, .callout, .empty, .cancel-choice, .company-box, .svc-card, .mini-offer, .alert) {
    background: var(--soft);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .glass .panel .table-wrap { background: transparent; }

  /* Rayons : grands blocs plus arrondis, comme les fenêtres visionOS */
  .glass :is(.panel, .table-wrap, .summary, .auth__card, .admin-login__box, .contact-form) { border-radius: 24px; }
  .glass :is(.tile, .product-card, .offer, .svc-card, .side-nav) { border-radius: 22px; }

  /* Cartes cliquables : le verre s'éclaire au survol (retour visuel, pas de décor) */
  .glass :is(.product-card, .offer, .svc-card, .mini-offer, .cross-card):hover {
    background: linear-gradient(150deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .08));
    border-color: rgba(255, 255, 255, .26);
  }
  .glass .product-card__media { background: var(--photo); }   /* photos toujours sur fond clair */

  /* ---------- Menus déroulants, bandeaux flottants : verre plus dense ---------- */
  .glass :is(.row-menu__panel, .ban-pop__form, .cookie) {
    background: var(--glass-fill-pop);
    border: 1px solid var(--glass-edge);
    box-shadow: var(--glass-hi), 0 28px 60px -22px rgba(0, 2, 14, .9);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
  }
  .glass option { background: #10204F; color: var(--ink); }

  /* ---------- Champs : verre creusé ---------- */
  .glass :is(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"],
             input[type="number"], input[type="search"], input[type="date"], input[type="datetime-local"], input[type="time"],
             input[type="month"], select, textarea) {
    border-color: rgba(255, 255, 255, .11);
    box-shadow: inset 0 2px 7px rgba(0, 0, 0, .24), inset 0 -1px 0 rgba(255, 255, 255, .04);
  }
  .glass :is(input, select, textarea):focus { border-color: rgba(169, 200, 255, .75); box-shadow: inset 0 2px 7px rgba(0, 0, 0, .2), 0 0 0 4px rgba(127, 176, 255, .22); }

  /* ---------- Boutons ---------- */
  .glass .btn--primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 14px 32px -16px rgba(52, 104, 255, .85); }
  .glass .btn--ghost {
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
  }
  .glass .btn--ghost:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .28); }
  .glass .btn--soft { background: rgba(127, 176, 255, .17); color: #D4E3FF; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
  .glass .btn--soft:hover { background: rgba(127, 176, 255, .26); color: #fff; }

  /* ---------- Onglets et menus : capsules, actif = verre clair ---------- */
  .glass .tabs { border-radius: 20px; padding: .25rem; }
  .glass .tabs a { border-radius: 999px; transition: background .15s, color .15s; }
  .glass .tabs a:hover:not([aria-current]) { background: var(--glass-hover); color: #fff; }
  .glass .iv-steps { border-radius: 22px; }
  .glass .iv-steps__item:hover:not([aria-current]) { background: var(--glass-hover); }
  .glass .iv-steps__item[aria-current="step"] .iv-steps__num { color: #1C3FE0; }
  .glass .tabs a[aria-current="page"], .glass .cat-tabs a[aria-current="page"], .glass .shopbar__nav a[aria-current="page"], .glass .shopbar__link[aria-current="page"],
  .glass .side-nav a[aria-current="page"], .glass .admin__nav a[aria-current="page"], .glass .iv-steps__item[aria-current="step"] {
    background: var(--glass-active); border-color: rgba(255, 255, 255, .28); color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 16px -10px rgba(0, 0, 0, .6);
  }
  .glass .cat-tabs a[aria-current="page"] svg, .glass .side-nav a[aria-current="page"] svg { color: #fff; }
  .glass .tabs a[aria-current="page"] span { color: #E6EEFF; }
  .glass :is(.side-nav a, .side-nav button, .admin__nav a) { border-radius: 14px; }
  .glass :is(.side-nav a, .side-nav button):hover, .glass .admin__nav a:hover { background: var(--glass-hover); color: #fff; }
  .glass .cat-tabs a:hover { border-color: rgba(255, 255, 255, .3); }

  /* ---------- Bandeaux du site (en-tête, barre de la boutique, pied de page) ---------- */
  .glass .shop-hero { background: none; }   /* l'environnement lumineux remplace le fond de l'accueil de la boutique */
  .glass .cross { background: none; }
  .glass .header { background: rgba(4, 10, 36, .42); border-bottom-color: rgba(255, 255, 255, .09); -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%); }
  .glass .shopbar { background: rgba(255, 255, 255, .045); border-top-color: rgba(255, 255, 255, .08); }
  .glass .footer { background: rgba(1, 4, 18, .55); border-top: 1px solid rgba(255, 255, 255, .07); }

  /* ---------- Intranet : barre latérale en panneau flottant ---------- */
  .glass .admin__layout { grid-template-columns: 272px minmax(0, 1fr); }
  .glass .admin__side {
    top: 14px; height: calc(100vh - 28px); margin: 16px 0 16px 16px; border-radius: 26px;
    border: 1px solid var(--glass-edge);
    background: linear-gradient(165deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, .045) 60%, rgba(255, 255, 255, .07) 100%);
    box-shadow: var(--glass-hi), var(--glass-shadow);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
  .glass .admin__nav .ico { color: #C6D8FF; }
  .glass .admin__me { border-top-color: rgba(255, 255, 255, .1); }
  .glass .admin__menu-btn { background: var(--glass-fill); border-color: var(--glass-edge); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
  .glass .sticky-save { background: none; }
  .glass .sticky-save .btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 16px 34px -12px rgba(0, 0, 0, .7); }

  /* ---------- Détails des formulaires et blocs imbriqués ---------- */
  .glass :is(.fold, .sign, .choice__item, .ship-option, .plan, .note, .msg__body, .pdf-text) { border-color: rgba(255, 255, 255, .1); }
  .glass .choice__item { background: rgba(255, 255, 255, .06); }
  .glass .choice__item:has(input:checked), .glass .plan:has(input:checked), .glass .ship-option:has(input:checked) { background: rgba(255, 255, 255, .13); }
  .glass .table th { background: rgba(255, 255, 255, .035); }
  .glass .table td { border-bottom-color: rgba(255, 255, 255, .07); }

  /* Écrans étroits : flou un peu plus léger (fluidité sur téléphone) */
  @media (max-width: 760px) {
    .glass { --glass-blur: blur(20px) saturate(165%); }
  }
  @media (max-width: 960px) {
    .glass .admin__layout { grid-template-columns: minmax(0, 1fr); }
    .glass .admin__side {
      position: fixed; inset: 10px auto 10px 10px; top: 10px; height: auto; margin: 0; width: 272px;
      background: var(--glass-fill-pop);
      transform: translateX(calc(-100% - 16px));
    }
    .glass .admin__side.is-open { transform: none; box-shadow: var(--glass-hi), 0 0 0 100vmax rgba(2, 6, 22, .55); }
  }

  /* ---------- Repli opaque : pas de flou disponible, ou moins de transparence demandée ---------- */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass {
      --glass-fill: linear-gradient(150deg, #142458 0%, #0E1B46 100%);
      --glass-fill-pop: linear-gradient(160deg, #1A2C66 0%, #111F50 100%);
      --surface: #0E1B46; --soft: #0B163C; --field: #060E2B; --navy: #040A22; --tint: #16296A; --line: #22366F;
    }
    .glass .header { background: rgba(4, 10, 36, .94); }
    .glass .admin__side { background: var(--glass-fill); }
  }
  @media (prefers-reduced-transparency: reduce) {
    .glass {
      --glass-fill: linear-gradient(150deg, #142458 0%, #0E1B46 100%);
      --glass-fill-pop: linear-gradient(160deg, #1A2C66 0%, #111F50 100%);
      --surface: #0E1B46; --soft: #0B163C; --field: #060E2B; --navy: #040A22; --tint: #16296A; --line: #22366F;
    }
    .glass *, .glass *::before { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
    .glass .header { background: #050C2A; }
    .glass .admin__side { background: var(--glass-fill); }
  }
}