/* ============================================================ DA « Élan » — le style de l'app depuis le 26 septembre (maquette du 25). Posé par-dessus css/style.css via la classe theme-elan sur ; ?theme=ancienne revient à l'ancienne DA. Nuages bleu-lavande, cartes blanches translucides, titres et boutons bleu marine, barre du bas blanche avec libellés. ============================================================ */ html.theme-elan { --elan-marine: #232158; --elan-bouton: #3F3E7C; --elan-lavande: #EEE8FF; --elan-trait: rgba(95, 85, 190, .12); --elan-ombre: 0 10px 28px rgba(45, 40, 120, .09); --ink: #232158; } html.theme-elan body { background: #EEF0FB; } html.theme-elan .shell { background: radial-gradient(60% 38% at 18% 12%, rgba(196, 214, 255, .75) 0%, transparent 70%), radial-gradient(55% 35% at 88% 30%, rgba(226, 214, 255, .7) 0%, transparent 70%), radial-gradient(70% 40% at 50% 96%, rgba(205, 225, 255, .8) 0%, transparent 70%), #F7F7FD !important; } /* titres */ html.theme-elan h1, html.theme-elan .big, html.theme-elan .hbar .ht, html.theme-elan .pas-t, html.theme-elan .prog .pn, html.theme-elan .lq { color: var(--elan-marine); letter-spacing: -.6px; } html.theme-elan .kicker { background: rgba(255, 255, 255, .8); box-shadow: none; border: 1px solid var(--elan-trait); } /* cartes blanches translucides */ html.theme-elan .panel, html.theme-elan .group, html.theme-elan .row, html.theme-elan .lecon-cta, html.theme-elan .dom, html.theme-elan .lcard, html.theme-elan .note, html.theme-elan .pistes { background: rgba(255, 255, 255, .86); box-shadow: var(--elan-ombre); border: 1px solid var(--elan-trait); } html.theme-elan .row { border-radius: 20px; } html.theme-elan .row .ic, html.theme-elan .dom .ic, html.theme-elan .lecon-cta .li { background: color-mix(in srgb, var(--c) 28%, #fff); color: var(--elan-marine); } html.theme-elan .row .act { background: transparent; color: var(--elan-marine); } html.theme-elan .row.on { background: var(--elan-lavande); } html.theme-elan .row.on .act { background: var(--elan-bouton); color: #fff; } /* programmes et reprise : blancs teintés de la couleur du domaine, plutôt que pleins */ html.theme-elan .prog, html.theme-elan .resume, html.theme-elan .capsule-carte { background: linear-gradient(160deg, rgba(255, 255, 255, .95) 0%, color-mix(in srgb, var(--c) 22%, #fff) 100%); box-shadow: var(--elan-ombre); border: 1px solid var(--elan-trait); } html.theme-elan .prog .ch, html.theme-elan .resume .ch { background: var(--elan-lavande); color: var(--elan-marine); } html.theme-elan .dotsline i.f, html.theme-elan .dotsline i.c { background: var(--elan-bouton); } /* boutons : marine, arrondis */ html.theme-elan .btn:not(.soft), html.theme-elan .panel .btn:not(.soft) { background: var(--elan-bouton); color: #fff; box-shadow: 0 10px 24px rgba(63, 62, 124, .28); } html.theme-elan .btn.soft { background: #fff; color: var(--elan-marine); border: 1.5px solid var(--elan-marine); box-shadow: none; } html.theme-elan .link { background: #fff; color: var(--elan-marine); border: 1.5px solid var(--elan-marine); box-shadow: none; } html.theme-elan .chip.has { background: var(--elan-bouton); } /* options de choix : lavande quand on les touche */ html.theme-elan .lopt, html.theme-elan .gi.pick { background: rgba(255, 255, 255, .9); border: 1px solid var(--elan-trait); box-shadow: none; } html.theme-elan .lopt.good, html.theme-elan .gi.pick.on { background: var(--elan-lavande); color: var(--elan-marine); } /* échelle des étapes */ html.theme-elan .rung.now { background: var(--elan-bouton); } html.theme-elan .rung.done .rn { background: var(--elan-lavande); color: var(--elan-marine); } /* la carte du corps : un halo doux derrière la silhouette */ html.theme-elan .mapcard { background: radial-gradient(48% 52% at 50% 46%, rgba(255, 255, 255, .95) 0%, rgba(214, 224, 255, .55) 55%, transparent 78%); } html.theme-elan .zone .lab { background: rgba(255, 255, 255, .92); color: var(--elan-marine); border: 1px solid color-mix(in srgb, var(--c) 45%, #fff); } /* barre du bas : blanche, les trois libellés visibles */ html.theme-elan .nav { background: rgba(255, 255, 255, .94); border-radius: 0; margin: 0; padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -6px 24px rgba(45, 40, 120, .08); border-top: 1px solid var(--elan-trait); } html.theme-elan .nav button { flex-direction: column; gap: 4px; height: 56px; color: #66629A; background: none; border-radius: 16px; } html.theme-elan .nav button span:not(.pillbg) { display: inline; font-size: 12px; font-weight: 700; } html.theme-elan .nav button.on { background: none; color: var(--elan-marine); } html.theme-elan .nav button.on span:not(.pillbg) { font-weight: 800; } /* les chiffres mis en avant : marine, plus la couleur de l'onglet */ html.theme-elan .unlock .un, html.theme-elan .bhead .un { color: var(--elan-marine); } /* violet moyen → lavande pâle : l'encre marine y garde un contraste AA (avatar, jour choisi) */ html.theme-elan { --lav: #DDD5FF; } html.theme-elan .row.on .ts { color: var(--elan-marine); } /* la barre du haut sans salut ni avatar : seulement le bouton du contexte, à droite */ html.theme-elan .topbar { height: auto; min-height: 60px; padding: 12px 22px 0; justify-content: flex-end; } html.theme-elan .topbar.vide { min-height: 14px; padding-top: 14px; }