/* ============================================================================
   VERRE — la feuille « glassmorphism » de la maison.           20/09/2026
   ----------------------------------------------------------------------------
   Miguël : « CSS, j'aimerais améliorer tout. Évidemment les changements agissent
   sur tout d'un coup. » — puis, devant la maquette du parrainage : « Verre
   partout, comme la maquette » ; « ça semble plus doux ».

   Une seule feuille, chargée APRÈS 7000pro.css / 7000pro-mobile.css, allumée par
   l'attribut html[data-verre="1"] que les deux coquilles posent depuis le réglage
   `apparence_verre` (oui par défaut). Éteindre le réglage = tout redevient plein.

   Elle ne nomme JAMAIS une couleur de thème : elle rend translucide ce qui existe
   (la teinte de chaque bouton, zone ou tuile reste la sienne) et pose des halos
   sous la page pour que le verre ait quelque chose à brouiller.

   Sommaire :  1. les halos sous la page   2. les boutons (toutes les familles)
               3. les tuiles sombres        4. les cartes et zones claires
               5. les barres de tête        6. réserves (mouvement réduit, impression)
   ============================================================================ */

/* ---- 1. LES HALOS SOUS LA PAGE — turquoise, or, rose, bleu ; fixes, sans interaction ---- */
/* Miguël (20/09) : « ça semble plus doux que les bulles de fond de page » — sous le verre, les bulles
   s'effacent et les halos prennent leur place ; la barre garde les siennes. */
html[data-verre="1"] body{position:relative;isolation:isolate;
  background-image:linear-gradient(90deg,var(--page-2,#f6f3ec) 0%,var(--page-1,#ffffff) 100%);background-size:auto;background-repeat:no-repeat}
html[data-verre="1"] body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(640px 440px at 6% 10%,  rgba(11,174,159,.30), transparent 65%),
    radial-gradient(560px 400px at 94% 24%, rgba(245,211,112,.36), transparent 65%),
    radial-gradient(680px 480px at 56% 96%, rgba(219,39,119,.14), transparent 65%),
    radial-gradient(440px 340px at 28% 68%, rgba(47,111,214,.16), transparent 65%)}

/* Le téléphone (Miguël, 20/09 : « css sur tel aussi ») : .m-body peignait un sable opaque et ses propres
   petites bulles par-dessus les halos — il devient transparent, les bulles s'effacent, les halos passent. */
html[data-verre="1"] .m-body{background:transparent}
html[data-verre="1"] .m-body::before{display:none}
html[data-verre="1"] body.m::before{background-color:var(--sable-2,#f3efe6)}

/* ---- 2. LES BOUTONS — l'union des familles écrites page par page ; la teinte de chacun reste,
        on lui donne le givre (flou derrière), le liseré clair et le reflet du haut ---- */
html[data-verre="1"] .btn,
html[data-verre="1"] .zone-btn, html[data-verre="1"] .zone-btn-sec, html[data-verre="1"] .zone-carte,
html[data-verre="1"] .cf-hbtn, html[data-verre="1"] .cf-pbtn,
html[data-verre="1"] .nv-btn-p, html[data-verre="1"] .nv-btn-ghost,
html[data-verre="1"] .tw-btn, html[data-verre="1"] .icon-btn, html[data-verre="1"] .gd-btn,
html[data-verre="1"] .rp-btn, html[data-verre="1"] .ct-btn, html[data-verre="1"] .fj-btn,
html[data-verre="1"] .cl-disp-btn, html[data-verre="1"] .cs-btn-conseiller,
html[data-verre="1"] .ch-btn-petit, html[data-verre="1"] .ch-janv-btn,
html[data-verre="1"] .dp-btn-etendre, html[data-verre="1"] .et-missbtn,
html[data-verre="1"] .mx-btn,
html[data-verre="1"] .m-btn, html[data-verre="1"] .m-btn-ghost, html[data-verre="1"] .m-btn-warn,
html[data-verre="1"] .m-nav-btn, html[data-verre="1"] .cf-act,
html[data-verre="1"] .gddm-go, html[data-verre="1"] .gddm-send,
html[data-verre="1"] .etm-send, html[data-verre="1"] .etm-save, html[data-verre="1"] .cf-go, html[data-verre="1"] .cf-pill, html[data-verre="1"] .m-pill{
  -webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);
  opacity:.92;
  box-shadow:0 8px 24px rgba(20,30,50,.16),
             inset 0 1px 0 rgba(255,255,255,.75),
             inset 0 -10px 18px rgba(255,255,255,.16),
             inset 0 0 0 1px rgba(255,255,255,.45)}
html[data-verre="1"] .btn:hover, html[data-verre="1"] .zone-btn:hover, html[data-verre="1"] .cf-hbtn:hover,
html[data-verre="1"] .nv-btn-p:hover, html[data-verre="1"] .tw-btn:hover, html[data-verre="1"] .gd-btn:hover,
html[data-verre="1"] .rp-btn:hover, html[data-verre="1"] .mx-btn:hover, html[data-verre="1"] .m-btn:hover{
  opacity:1;box-shadow:0 12px 30px rgba(20,30,50,.22),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -10px 18px rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.6)}
/* les boutons blancs ou transparents deviennent du verre clair, pour laisser voir les halos */
html[data-verre="1"] .btn.secondary, html[data-verre="1"] .btn.ghost, html[data-verre="1"] .zone-btn-sec,
html[data-verre="1"] .zone-carte, html[data-verre="1"] .nv-btn-ghost, html[data-verre="1"] .m-btn-ghost{
  background-color:rgba(255,255,255,.55);background-image:linear-gradient(135deg,rgba(255,255,255,.7),rgba(255,255,255,.3))}

/* ---- 3. LES TUILES SOMBRES — le sombre devient un verre fumé : on voit les halos à travers ---- */
html[data-verre="1"] .tile, html[data-verre="1"] .m-tile, html[data-verre="1"] .m-pcard, html[data-verre="1"] .tu{
  background-image:linear-gradient(135deg,rgba(58,71,86,.92),rgba(42,53,66,.95));background-color:transparent; /* 21/09 (Miguël : « tout ce sombre, ce noir ») : ardoise bleutée */
  -webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);
  border-color:rgba(255,255,255,.22);
  box-shadow:0 20px 50px rgba(20,30,50,.28),inset 0 1px 0 rgba(255,255,255,.30)}

/* ---- 4. LES CARTES ET ZONES CLAIRES — le blanc plein devient du verre blanc ; la zone colorée
        garde sa teinte (60 %) et laisse passer le reste ---- */
html[data-verre="1"] .kpi, html[data-verre="1"] .cl-card,
html[data-verre="1"] .dcarte, html[data-verre="1"] .m-kpi,
html[data-verre="1"] .cf-cw, html[data-verre="1"] .m-mini,
html[data-verre="1"] .cf-tk, html[data-verre="1"] .cl-pc, html[data-verre="1"] .cf-cl, html[data-verre="1"] .cf-ct,
html[data-verre="1"] .cs-modele, html[data-verre="1"] .gddm-doc, html[data-verre="1"] .m-pr, html[data-verre="1"] .m-mini-box{
  background-color:rgba(255,255,255,.52);
  -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);
  box-shadow:0 10px 30px rgba(20,30,50,.12),inset 0 1px 0 rgba(255,255,255,.9)}
html[data-verre="1"] .zone{
  background-color:color-mix(in srgb,var(--z-f,#c9e9e4) 60%,rgba(255,255,255,.30));
  -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);
  box-shadow:0 10px 30px rgba(20,30,50,.12),inset 0 1px 0 rgba(255,255,255,.9)}
html[data-verre="1"] .zone-carte{background-color:rgba(255,255,255,.62)}

/* les vignettes (claires, colorées par leur état) restent pleines : sur une tuile sombre, le verre les rendait grises (accueil « ma journée », 21/09) */

/* ---- 5. LES BARRES DE TÊTE — la barre sombre du haut se fume, le contenu défile dessous en flou ---- */
/* 21/09 (Miguël : « toujours ce trait clair juste en dessous des menus principaux et au-dessus du titre ») — le filet
   blanc sous le menu part ; la barre du téléphone le garde, elle n'a pas de bandeau de titre sous elle. */
/* 21/09, 9 h 45 (Miguël, croquis « fondus / dégradés ») — le flou posé sur le menu seul floutait les bulles du bloc
   derrière lui, pas celles du bandeau de titre : une couture entre les deux. Sur le bureau, le bloc de tête (menu +
   titre) est un seul dégradé, sans flou ; le téléphone garde le sien (sa barre est seule). */
html[data-verre="1"] .m-head, html[data-verre="1"] .m-tabbar{
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.18)}

/* ---- 5b. LES TABLES — 21/09 (contrôle visuel) : la page des factures de janvier (136 lignes, un bouton par ligne) ne
        se peignait plus : 136 flous de fond à composer, le navigateur rendait une page blanche par plaques. Dans une
        table, les boutons gardent leur teinte et leur reflet, sans le flou. ---- */
html[data-verre="1"] table .btn, html[data-verre="1"] table button, html[data-verre="1"] table a[class],
html[data-verre="1"] .fj-btn, html[data-verre="1"] .tf-etat, html[data-verre="1"] .ct-btn, html[data-verre="1"] .rp-btn,
html[data-verre="1"] .cs-btn-conseiller, html[data-verre="1"] .ch-btn-petit{
  -webkit-backdrop-filter:none;backdrop-filter:none;opacity:1}

/* ---- 6. RÉSERVES ---- */
@media (prefers-reduced-motion:reduce){ html[data-verre="1"] .btn:hover{transform:none} }
@media print{ html[data-verre="1"] body::before{display:none} }