/* ══ ATMOSPHÈRE ══════════════════════════════════════════
   Grammaire visuelle de CLERVIO, appliquée aux 24 écrans.
   Remplace css/allegement.css, qui aplatissait tout.

   Trois principes :
     1. la lumière vient de l'intérieur — halo chaud par écran
     2. du grain, pour casser le lisse numérique
     3. de la profondeur mesurée : 3 couches d'ombre, pas 13, pas 2

   Réversible : retirer la balise <link> dans index.html.
   ════════════════════════════════════════════════════════ */

/* ── 1. Lumière ambiante, sur chaque écran ───────────────── */
.pg::before{
  content:'';
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 72% 34% at 50% 30%, rgba(201,168,76,.075) 0%, transparent 66%),
    radial-gradient(ellipse 120% 46% at 50% -6%, rgba(28,24,32,.85) 0%, transparent 60%);
}

/* ── 2. Grain, fixe pendant que le contenu défile ────────── */
.pg::after{
  content:'';
  position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Le contenu passe devant la lumière, derrière le grain */
.pg > .sc, .pg > .ctb, .pg > .bk{ position:relative; z-index:1; }

/* ── 3. Cartes : profondeur chaude, trois couches ────────── */
.cd, .stcd, .glcd, .vic, .sic, .bai, .bme{
  box-shadow:
    0 0 0 1px rgba(237,224,200,.075),
    inset 0 1px 0 rgba(255,255,255,.045),
    0 6px 22px rgba(0,0,0,.46) !important;
}
.cd.tp:active, .stcd:active, .glcd:active{
  box-shadow:
    0 0 0 1px rgba(201,168,76,.30),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 3px 14px rgba(0,0,0,.5) !important;
}

/* ── 4. Bouton doré : reflet intérieur et halo maîtrisé ─── */
.bg{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    0 8px 30px rgba(201,168,76,.22),
    0 2px 8px rgba(0,0,0,.4) !important;
}
.bg:active{
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.30),
    0 3px 14px rgba(201,168,76,.16) !important;
}

/* ── 5. Boutons secondaires : filet qui se réchauffe ─────── */
.bgh, .bk, .auth-btn, .auth-apple{
  box-shadow:0 0 0 1px rgba(237,224,200,.11) !important;
}
.bgh:active, .bk:active, .auth-btn:active, .auth-apple:active{
  box-shadow:0 0 0 1px rgba(201,168,76,.35), 0 0 18px rgba(201,168,76,.10) !important;
}

/* ── 6. Navigation et boutons flottants ──────────────────── */
.nav{
  box-shadow:
    0 -1px 0 rgba(201,168,76,.10),
    0 -10px 34px rgba(0,0,0,.62) !important;
}
.fab, .nc{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 6px 24px rgba(201,168,76,.26),
    0 3px 12px rgba(0,0,0,.5) !important;
}
.tab{ box-shadow:none !important; }
.tab.on{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 2px 10px rgba(201,168,76,.20) !important;
}

/* ── 7. Champs : le focus s'allume ───────────────────────── */
.inp{ box-shadow:0 0 0 1px rgba(237,224,200,.10) !important; }
.inp:focus{
  box-shadow:
    0 0 0 1px rgba(201,168,76,.50),
    0 0 20px rgba(201,168,76,.12) !important;
}

/* ── 8. Notifications ────────────────────────────────────── */
.toast{
  box-shadow:
    0 0 0 1px rgba(237,224,200,.08),
    0 12px 36px rgba(0,0,0,.62) !important;
}

/* ── 9. Barre supérieure : filet chaud plutôt que gris ───── */
.ctb{ border-bottom-color:rgba(201,168,76,.13) !important; }

/* ── 10. Jauge de garantie : l'arc de décompte ────────────
   Le temps restant devient lisible d'un coup d'oeil.
   Référence : 24 mois, la garantie légale française. */
.wg{position:relative;width:56px;height:56px;flex-shrink:0;}
.wg svg{position:absolute;inset:0;transform:rotate(-90deg);}
.wg-p{fill:none;stroke:rgba(237,224,200,.09);stroke-width:2;}
.wg-a{fill:none;stroke-width:2;stroke-linecap:round;stroke-dasharray:163.4;
  transition:stroke-dashoffset 1s cubic-bezier(0.16,1,0.3,1);}
.wg-s{position:absolute;inset:7px;border-radius:50%;display:grid;place-items:center;
  font-family:'Cormorant Garamond',serif;font-size:1.2rem;color:var(--cr);
  background:linear-gradient(150deg,rgba(237,224,200,.09),rgba(237,224,200,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);}

/* ── 11. Anneau de profil : la progression de l'essai ─────
   Les trois anneaux décoratifs d'origine deviennent une
   information. Même poids visuel, un sens en plus. */
.pring{position:relative;width:84px;height:84px;flex-shrink:0;}
.pring svg{position:absolute;inset:0;transform:rotate(-90deg);}
.pring-p{fill:none;stroke:rgba(237,224,200,.08);stroke-width:2.5;}
.pring-a{fill:none;stroke:var(--g);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:245;stroke-dashoffset:245;
  transition:stroke-dashoffset 1.1s cubic-bezier(0.16,1,0.3,1), stroke .4s;
  filter:drop-shadow(0 0 6px rgba(201,168,76,.45));}
.pring-av{position:absolute;inset:9px;border-radius:50%;display:grid;place-items:center;
  font-family:'Cormorant Garamond',serif;font-size:1.75rem;font-weight:400;color:var(--cr);
  background:linear-gradient(145deg,rgba(201,168,76,.20),rgba(201,168,76,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}

/* ── 12. L'orbe du concierge garde son halo d'origine ───── */
</style>