/* Uberlys : quatre teintes. Chaque teinte redéfinit les jetons du socle, le site suit. */
:root,[data-teinte="pierre"]{
  --c1:#5D5F60; --c2:#7E7F7C; --c3:#B1AEA6; --c4:#E5E1D8;
  --papier:#F2F1ED; --papier-2:#E4E2DC; --blanc:#F9F8F5; --encre:#151617; --encre-2:#515350; --encre-3:#878883;
  --nuit:#1D1F20; --nuit-2:#262829; --clair:#EEEDE9; --clair-2:#A7A8A4; --clair-3:#767874; --chene:#5D5F60;
}
[data-teinte="taupe"]{
  --c1:#6F665B; --c2:#8F877B; --c3:#BDB5A8; --c4:#E6E1D8;
  --papier:#F3F0EA; --papier-2:#E8E3DA; --blanc:#FAF8F4; --encre:#17150F; --encre-2:#57534A; --encre-3:#8C877C;
  --nuit:#24211D; --nuit-2:#2D2A25; --clair:#F1EDE5; --clair-2:#ABA597; --clair-3:#7A7468; --chene:#6F665B;
}
[data-teinte="olive"]{
  --c1:#5E5C49; --c2:#7E7B66; --c3:#ADA892; --c4:#E3DFD2;
  --papier:#F2F0E8; --papier-2:#E5E2D6; --blanc:#F9F8F2; --encre:#16160F; --encre-2:#53523F; --encre-3:#8A8875;
  --nuit:#1E1E17; --nuit-2:#28281F; --clair:#EFEDE3; --clair-2:#A9A794; --clair-3:#787663; --chene:#5E5C49;
}
[data-teinte="chene"]{
  --c1:#6E5A44; --c2:#8E7559; --c3:#B89F80; --c4:#E2D6C4;
  --papier:#F4EFE8; --papier-2:#EAE1D4; --blanc:#FAF7F2; --encre:#18130E; --encre-2:#5A4F43; --encre-3:#8F8475;
  --nuit:#221B14; --nuit-2:#2C241B; --clair:#F2ECE3; --clair-2:#AFA190; --clair-3:#7E705F; --chene:#8E7559;
}
body{transition:background-color .5s var(--ease)}
/* sections claires : voile papier léger, logo et textes à l'encre ; hero : voile de la teinte, un peu foncé, logo blanc ; sections sombres : voile nuit */
.entete.defile{background:color-mix(in srgb,var(--papier) 52%,transparent);-webkit-backdrop-filter:blur(24px) saturate(1.15);backdrop-filter:blur(24px) saturate(1.15)}
.entete.defile.sur-ciel{background:color-mix(in srgb,var(--c1) 38%,transparent)}
.entete.defile.sombre{background:color-mix(in srgb,var(--nuit) 30%,transparent)}

/* le hero en dégradé, texte blanc */
.hero.ciel{background:linear-gradient(180deg,var(--c1) 0%,var(--c2) 50%,var(--c3) 80%,var(--c4) 94%,var(--papier) 100%);color:#fff}
.hero.ciel .chapo{color:rgba(255,255,255,.86)}
.hero.ciel .actions .btn{background:#fff;color:var(--encre);border-color:#fff}
.hero.ciel .actions .btn:hover{background:var(--clair);border-color:var(--clair)}
.hero.ciel .actions .btn.contour{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hero.ciel .actions .btn.contour:hover{background:rgba(255,255,255,.26)}
.hero.ciel .note{color:rgba(255,255,255,.8);border-top-color:rgba(255,255,255,.3)}
.hero.ciel .f1 .donnee,.hero.ciel .f3 .donnee,.hero.ciel .f5 .donnee{color:rgba(255,255,255,.7)}
.hero.ciel .f1 .donnee b,.hero.ciel .f3 .donnee b,.hero.ciel .f5 .donnee b{color:#fff}
.entete.sur-ciel{color:#fff}
.entete.sur-ciel nav .btn{background:#fff;color:var(--encre);border-color:#fff}